/* New Image Salon & Spa — site styles */
:root{
  --gold:#c39d63;--gold-dark:#a9844c;--ink:#1f1f1f;--heading:#333;--text:#939393;--muted:#bfbfbf;--navy:#043074;
  --gray-bg:#f7f7f7;--footer:#171717;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Montserrat',Helvetica,Arial,sans-serif;
  --ui:'Open Sans',Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:17px;font-weight:500;line-height:1.8;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,ul,figure{margin:0}
h1,h2,h3,h4{font-weight:400}
a{color:var(--gold)}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:2000;padding:10px 16px;background:#fff;color:var(--ink);text-decoration:none;border-radius:4px}
.skip-link:focus{top:12px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:80%;max-width:1080px;margin:0 auto}
.wrap--wide{width:80%;max-width:1280px;margin:0 auto}
.center{text-align:center}

/* type */
.eyebrow{padding-bottom:10px;margin-bottom:45px;font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.3;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.h-section{padding-bottom:10px;margin-bottom:30px;font-family:var(--serif);font-size:48px;line-height:1.3;color:var(--heading)}
.prose p{padding-bottom:17px}
.prose p:last-child{padding-bottom:0}
.prose ul{padding:0 0 17px 1em;line-height:26px;list-style:disc}
.prose ul:last-child{padding-bottom:0}
.narrow{max-width:700px;margin-left:auto;margin-right:auto}

/* buttons */
.btn{display:inline-block;padding:4.5px 15px;border:2px solid var(--gold);border-radius:0;background:var(--gold);color:#fff;font-family:var(--sans);font-size:15px;font-weight:500;line-height:25.5px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .3s,border-color .3s}
.btn:hover{background:var(--gold-dark);border-color:var(--gold-dark)}
.btn--tight{letter-spacing:1px}

/* ---------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.1)}
.header-inner{position:relative;display:flex;align-items:center;justify-content:center;height:55px;width:80%;max-width:1080px;margin:0 auto}
.brand{display:none;font-family:var(--serif);font-size:22px;line-height:1.2;color:var(--ink);text-decoration:none}
.menu-toggle{display:none}
.menu-list{display:flex;align-items:center;gap:0;padding:0;list-style:none}
.menu-item{padding:0 11px}
.menu-link{display:block;padding:9px 0;font-family:var(--ui);font-size:14px;font-weight:600;line-height:14px;letter-spacing:1px;color:rgba(0,0,0,.6);text-decoration:none;transition:opacity .4s ease-in-out}
.menu-link:hover{opacity:.7}
.menu-link[aria-current="page"]{color:var(--navy)}
.menu-item--call{display:none}

/* ---------------------------------------------------------------- heroes */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:var(--ink);color:#fff;text-align:center}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:50% 0;background-repeat:no-repeat}
.hero-bg::after{content:"";position:absolute;inset:0;background:rgba(31,31,31,.8)}
.hero-content{position:relative;width:80%;max-width:1080px;margin:0 auto}
.hero--home{min-height:845px}
.hero--home .hero-content{display:flex;flex-direction:column;align-items:center}
.hero-logo{margin:0;line-height:0}
.hero-logo img{width:326px}
.hero--home .btn{margin-top:27px;letter-spacing:1px}
.scroll-down{position:absolute;left:50%;bottom:25px;width:32px;height:32px;margin-left:-16px;color:#fff}
.scroll-down svg{width:32px;height:32px}
.page-hero{min-height:308px;padding:40px 0}
.page-hero .hero-bg{background-position:50% 50%}
.page-hero .hero-bg::after{background:rgba(31,31,31,.85)}
.page-hero .hero-content{max-width:780px}
.page-hero h1{padding-bottom:10px;font-family:var(--serif);font-size:72px;line-height:1.3;color:#fff}
.page-hero--contact{min-height:479px;padding-bottom:74px}
.hero-lead{margin-top:24px;font-size:19px;line-height:1.8;color:var(--muted)}
@media (min-width:981px) and (hover:hover){
  .hero-bg{background-attachment:fixed}
}

/* ---------------------------------------------------------------- sections */
.section{padding:127px 0}
.section--gray{background:var(--gray-bg)}

/* story */
.story-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.story-text{padding-top:60px}
.story-img img{width:100%}

/* best treatment */
.best .prose{max-width:700px;margin:0 auto}
.best ul{text-align:center}
.best .btn{margin-top:30px}

/* service tiles */
.tiles{background:var(--ink)}
.tiles-inner{width:80%;max-width:1280px;margin:0 auto}
.tile-row{display:grid;grid-template-columns:repeat(3,1fr)}
.tile-row--1{min-height:417px}.tile-row--2{min-height:498px}.tile-row--3{min-height:390px}.tile-row--4{min-height:498px}.tile-row--5{min-height:353px}
.tile{position:relative;padding:48px 24px;background:#fff;text-align:center}
.tile h3{padding-bottom:10px;margin-bottom:10px;font-family:var(--serif);font-size:24px;line-height:1.3;color:var(--ink)}
.tile p{max-width:700px;margin:0 auto;font-size:15px;line-height:1.8}
.tile--img{min-height:196px;padding:0;background:var(--ink)}
.tile--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* testimonials */
.testimonials-head{padding:27px 0}
.testimonials-head .h-section{margin-bottom:0}
.quotes{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 64px;width:80%;max-width:1280px;margin:0 auto;padding-top:27px}
.stars{display:flex;gap:1px;margin-bottom:32px;color:var(--gold)}
.stars{gap:0}
.stars svg{width:28.8px;height:23px}
.quote h3{padding-bottom:10px;margin-bottom:22px;font-family:var(--serif);font-size:24px;line-height:1.3;color:var(--ink)}
.quote blockquote{margin:0;padding-bottom:17px}
.quote .who{color:var(--ink)}
.section--quotes{padding:100px 0 127px}

/* services offers */
.offers{padding:160px 0 181px}
.offers .h-section{margin-bottom:0;padding-bottom:10px}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:54px 5.5%;width:80%;max-width:1280px;margin:54px auto 0;text-align:center}
.offer h3{padding-bottom:10px;font-family:var(--serif);font-size:24px;line-height:1.7;color:var(--heading)}

/* news */
.news{padding:100px 0 127px}
.news .narrow{max-width:700px}

/* hours + newsletter */
.hours{padding:127px 0;background-color:rgba(0,0,0,.75);background-size:cover;background-position:50% 50%;background-blend-mode:color}
.hours-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;width:80%;max-width:1280px;margin:0 auto}
.card-dark{padding:100px 4vw;background:var(--ink);color:#fff;text-align:center}
.card-dark .h-card{max-width:400px;margin:0 auto 60px;font-family:var(--serif);font-size:30px;line-height:1.3;color:#fff}
.hours-list{max-width:400px;margin:0 auto;padding:0;list-style:none}
.hours-list li{font-size:15px;line-height:1.9;letter-spacing:1px}
.hours-list li+li{margin-top:41px}
.hours-list li:last-child{margin-top:26px}
.hours-list strong{display:block;font-weight:700}
.card-dark .btn-row{margin-top:46px}
.drop h3{padding-bottom:0;font-size:22px;line-height:1;font-weight:500;color:#fff}
.drop p{margin-top:10px;color:rgba(255,255,255,.8)}
.drop .btn{margin-top:25px}
.drop{margin-bottom:80px}
.newsletter h3{padding-bottom:10px;font-size:24px;line-height:1.8;font-weight:500;color:#fff}
.newsletter-desc{margin-bottom:22px;color:rgba(255,255,255,.8)}
.newsletter-form{display:grid;gap:17px;margin-top:15px}
.newsletter-form input:not(.hp){width:100%;height:47px;padding:0 16px;border:0;border-radius:3px;background:#111;color:#fff;font-size:15px}
.newsletter-form input::placeholder{color:rgba(255,255,255,.85);opacity:1}
.newsletter-form .btn{width:100%;border-width:3px;padding:3.5px 15px}
.newsletter-form .form-message{color:#fff}
.page-contact .newsletter{padding-top:25px}

/* contact */
.contact-row{display:grid;grid-template-columns:700fr 320fr;gap:60px;align-items:start}
.contact-form .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 21px}
.field{display:block}
.field--full{grid-column:1/-1}
.contact-form input:not(.hp),.contact-form textarea{display:block;width:100%;height:52px;padding:16px;border:1px solid rgba(0,0,0,.2);border-radius:0;background:transparent;color:#333;font-size:14px;line-height:1.4}
.contact-form textarea{height:150px;resize:vertical}
.contact-form ::placeholder{color:#999;opacity:1}
.form-actions{display:flex;justify-content:flex-end;margin-top:11px}
.contact-card{padding:40px;background:#fff;text-align:center}
.contact-card img{width:100%;max-width:240px;margin:0 auto 22px}
.contact-card .eyebrow{margin-bottom:10px}
.contact-card .addr{font-family:var(--serif);font-size:24px;line-height:1.3;color:var(--ink)}
.contact-card .city{margin-top:14px;font-size:14px;line-height:14px;letter-spacing:1px;color:#999}
.contact-card .city a{color:inherit;text-decoration:none}
.contact-card .city+.city{margin-top:14px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.form-message{margin-top:14px;font-size:15px;line-height:1.6;color:#2e7d32}
.form-message--error{color:#b3261e!important}
.btn[disabled]{opacity:.6;cursor:wait}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--footer);color:#666}
.footer-inner{width:80%;max-width:1080px;margin:0 auto;padding:15px 0 15px;font-family:var(--ui);font-size:14px;line-height:23.8px}
.footer-inner a{color:#888;text-decoration:none}
.footer-inner a:hover{color:#bbb}

/* 404 */
.notfound{padding:127px 0;text-align:center}
.notfound p{margin-bottom:30px}

/* ---------------------------------------------------------------- tablet / mobile */
@media (max-width:980px){
  .header-inner{justify-content:space-between;height:72px}
  .brand{display:block}
  .menu-toggle{position:relative;z-index:1002;display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-right:-10px;padding:0;border:0;border-radius:6px;background:transparent;cursor:pointer}
  .menu-toggle-lines,.menu-toggle-lines::before,.menu-toggle-lines::after{display:block;width:26px;height:2px;border-radius:2px;background:var(--ink)}
  .menu-toggle-lines{position:relative;transition:background-color .2s ease .15s}
  .menu-toggle-lines::before,.menu-toggle-lines::after{content:"";position:absolute;left:0;transition:top .2s cubic-bezier(.4,0,.2,1) .2s,transform .3s cubic-bezier(.4,0,.2,1),background-color .3s}
  .menu-toggle-lines::before{top:-8px}
  .menu-toggle-lines::after{top:8px}
  .menu.is-open .menu-toggle-lines{background:transparent;transition-delay:0s}
  .menu.is-open .menu-toggle-lines::before,.menu.is-open .menu-toggle-lines::after{top:0;background:#fff;transition:top .2s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1) .2s,background-color .3s}
  .menu.is-open .menu-toggle-lines::before{transform:rotate(45deg)}
  .menu.is-open .menu-toggle-lines::after{transform:rotate(-45deg)}
  .menu-list{position:fixed;inset:0;z-index:1001;flex-direction:column;justify-content:center;margin:0;padding:100px 24px 60px;overflow-y:auto;background:var(--ink);
    clip-path:circle(0 at var(--menu-x,calc(100% - 44px)) var(--menu-y,36px));visibility:hidden;transition:clip-path .6s cubic-bezier(.77,0,.18,1),visibility 0s linear .6s}
  .menu.is-open .menu-list{clip-path:circle(150vmax at var(--menu-x,calc(100% - 44px)) var(--menu-y,36px));visibility:visible;transition:clip-path .7s cubic-bezier(.77,0,.18,1),visibility 0s}
  .menu-item{display:flex;justify-content:center;width:100%;max-width:420px;padding:0;overflow:hidden}
  .menu-item>a{transform:translateY(110%);opacity:0;transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .3s ease}
  .menu.is-open .menu-item>a{transform:none;opacity:1;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .6s ease;transition-delay:calc(.25s + var(--i,0) * .07s)}
  .menu-item:nth-child(2){--i:1}.menu-item:nth-child(3){--i:2}.menu-item:nth-child(4){--i:3}
  .menu-link{padding:12px 4px;font-family:var(--serif);font-size:38px;font-weight:400;line-height:1.2;letter-spacing:0;color:#fff;text-align:center}
  .menu-link[aria-current="page"]{color:var(--gold)}
  .menu-item--call{display:flex;margin-top:28px}
  .menu-call{display:inline-block;padding:8px 22px;border:2px solid var(--gold);background:var(--gold);color:#fff;font-size:15px;letter-spacing:2px;text-transform:uppercase;text-decoration:none}
  html.menu-locked,html.menu-locked body{overflow:hidden}

  .section{padding:50px 0}
  .story{padding:100px 0}
  .best{padding:100px 0}
  .h-section{font-size:48px}
  .story-row{grid-template-columns:1fr;gap:30px}
  .story-text{padding-top:0}
  .story .eyebrow,.best .eyebrow{margin-bottom:45px}
  .tile-row{grid-template-columns:1fr;min-height:0}
  .tile--empty-mobile{display:none}
  .quotes{grid-template-columns:1fr 1fr;gap:30px 5.5%}
  .hours-row{grid-template-columns:1fr;gap:30px}
  .offer-grid{grid-template-columns:1fr;gap:30px}
  .contact-row{grid-template-columns:1fr;gap:30px}
  .hero--home{min-height:800px}
  .hero-logo img{width:160px}
  .page-hero{min-height:0;padding:49px 0}
  .page-hero .hero-content{max-width:230px}
  .page-hero--contact{padding-bottom:80px}
}
@media (max-width:767px){
  .quotes{grid-template-columns:1fr;gap:30px}
  .contact-form .form-grid{grid-template-columns:1fr;gap:9px}
  .best ul{padding-left:1.4em}
}
@media (max-width:374px){
  .h-section{font-size:40px}
  .page-hero h1{font-size:60px}
  .menu-link{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .menu-list,.menu.is-open .menu-list{clip-path:none;opacity:0;transition:opacity .2s ease,visibility 0s}
  .menu.is-open .menu-list{opacity:1}
  .menu-item>a,.menu.is-open .menu-item>a{transform:none;opacity:1}
}
