/* Salon Cosmetică Auto — shared stylesheet
   Deep graphite + racing blue. Premium, minimal, no rounded corners. */

:root{
  --ink:#0f0f11;
  --panel:#161619;
  --panel-2:#1c1c20;
  --line:#28282e;
  --line-soft:#1f1f24;
  --accent:#1544e0;
  --accent-lite:#5b84ff;
  --bone:#f1ede7;
  --muted:#8e8a84;
  --muted-dim:#6d6a65;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--ink);color:var(--bone);font-family:'Inter',sans-serif;
     font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.wrap{max-width:1180px;margin:0 auto;padding:0 44px;}
@media(max-width:48rem){ .wrap{padding:0 22px;} }
@media(max-width:22.5rem){ .wrap{padding:0 16px;} }
section{padding:130px 0;}
@media(max-width:64rem){ section{padding:96px 0;} }
@media(max-width:48rem){ section{padding:68px 0;} }

/* ---------- type ---------- */
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:700;
         line-height:1.04;letter-spacing:-.015em;color:#fff;}
h1{font-size:clamp(2.6rem,6.2vw,5.2rem);font-weight:900;}
h2{font-size:clamp(2rem,4.4vw,3.4rem);}
h3{font-size:1.35rem;}
em.acc{font-style:italic;color:var(--accent-lite);}
p{color:var(--muted);}
p b,strong{color:var(--bone);font-weight:500;}
.lead{font-size:clamp(1.06rem,1.5vw,1.2rem);max-width:54ch;}
.label{font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;
       color:var(--accent-lite);font-weight:500;display:block;}
.rule{height:1px;background:var(--line);border:0;margin:0;}
.acc-rule{width:56px;height:2px;background:var(--accent);border:0;margin:26px 0 0;}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:900;background:rgba(15,15,17,.92);
       backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
       border-bottom:1px solid var(--line-soft);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;
     max-width:1180px;margin:0 auto;padding:18px 44px;}
@media(max-width:48rem){ .nav{padding:14px 22px;} }
.brand{font-family:'Playfair Display',Georgia,serif;font-size:1.18rem;font-weight:700;
       color:#fff;letter-spacing:-.01em;line-height:1.2;}
.brand small{display:block;font-family:'Inter',sans-serif;font-size:.6rem;
       letter-spacing:.28em;text-transform:uppercase;color:var(--muted-dim);font-weight:500;margin-top:3px;}
.nav-links{display:flex;gap:34px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;}
.nav-links a{color:var(--muted);padding:4px 0;border-bottom:1px solid transparent;transition:color .18s,border-color .18s;}
.nav-links a:hover{color:var(--bone);}
.nav-links a[aria-current="page"]{color:var(--bone);border-bottom-color:var(--accent);}
@media(max-width:64rem){ .nav-links{gap:22px;font-size:.72rem;letter-spacing:.1em;} }

.burger{display:none;width:44px;height:44px;padding:0;cursor:pointer;background:transparent;
        border:1px solid var(--line);align-items:center;justify-content:center;flex:0 0 auto;}
.burger span{display:block;width:17px;height:1px;background:var(--bone);position:relative;transition:background .2s;}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:17px;height:1px;
        background:var(--bone);transition:transform .22s,top .22s;}
.burger span::before{top:-6px;} .burger span::after{top:6px;}
.nav-open .burger span{background:transparent;}
.nav-open .burger span::before{top:0;transform:rotate(45deg);}
.nav-open .burger span::after{top:0;transform:rotate(-45deg);}
@media(max-width:52rem){
  .burger{display:inline-flex;}
  .nav-links{flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;
    background:var(--panel);border-bottom:1px solid var(--line);
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:transform .24s ease,opacity .24s ease,visibility .24s;}
  .nav-open .nav-links{transform:translateY(0);opacity:1;visibility:visible;}
  .nav-links a{padding:18px 22px;border-top:1px solid var(--line-soft);border-bottom:none;font-size:.82rem;}
  .nav-links a[aria-current="page"]{border-bottom:none;color:var(--accent-lite);}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
     padding:17px 34px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
     font-weight:500;border:1px solid var(--accent);background:var(--accent);color:#fff;
     cursor:pointer;transition:background .2s,border-color .2s,color .2s;white-space:nowrap;}
.btn:hover{background:var(--accent-lite);border-color:var(--accent-lite);}
.btn-ghost{background:transparent;color:var(--bone);border-color:var(--line);}
.btn-ghost:hover{background:transparent;border-color:var(--bone);color:#fff;}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px;}
@media(max-width:22.5rem){ .btn{padding:14px 18px;letter-spacing:.1em;} }

/* ---------- hero ---------- */
.hero{padding-top:96px;padding-bottom:110px;}
@media(max-width:48rem){ .hero{padding-top:56px;padding-bottom:62px;} }
.hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;}
@media(max-width:64rem){ .hero-in{grid-template-columns:1fr;gap:40px;} }
.hero h1{margin:22px 0 26px;}
.hero-shot{overflow:hidden;background:var(--panel);aspect-ratio:3/4;}
.hero-shot img{width:100%;height:100%;object-fit:cover;}
@media(max-width:64rem){ .hero-shot{aspect-ratio:4/3;} }

/* ---------- generic blocks ---------- */
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:28px 64px;align-items:end;margin-bottom:64px;}
.sec-head .label{grid-column:1/-1;}
@media(max-width:64rem){ .sec-head{grid-template-columns:1fr;gap:20px;margin-bottom:44px;} }

.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
@media(max-width:64rem){ .split{grid-template-columns:1fr;gap:36px;} }
.split .shot{overflow:hidden;background:var(--panel);aspect-ratio:4/5;}
.split .shot img{width:100%;height:100%;object-fit:cover;}
.split p + p{margin-top:20px;}

.alt{background:var(--panel);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}

/* ---------- service list ---------- */
.svc{border-top:1px solid var(--line);}
.svc-item{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:baseline;
          padding:34px 26px;border-bottom:1px solid var(--line);}
@media(max-width:48rem){ .svc-item{grid-template-columns:1fr;gap:10px;padding:26px 18px;} }
.svc-item .n{font-family:'Playfair Display',Georgia,serif;font-size:.9rem;color:var(--accent-lite);}
.svc-item h3{margin-bottom:8px;}
.svc-item p{font-size:.96rem;max-width:62ch;}
.svc-item .price{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dim);white-space:nowrap;}

/* ---------- gallery ---------- */
.gal{columns:3;column-gap:16px;}
@media(max-width:64rem){ .gal{columns:2;} }
@media(max-width:40rem){ .gal{columns:1;} }
.gal figure{break-inside:avoid;margin:0 0 16px;background:var(--panel);position:relative;overflow:hidden;}
.gal img{width:100%;height:auto;}
.gal figcaption{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
                color:var(--muted-dim);padding:12px 2px 0;}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;max-width:880px;}
@media(max-width:48rem){ .pair{grid-template-columns:1fr;max-width:none;} }
.pair figure{margin:0;background:var(--panel);overflow:hidden;}
/* Fixed equal height rather than aspect-ratio: the two source files are
   different shapes, and these are tight close-ups that dominate the page
   if allowed to scale with the column. */
.pair figure img{width:100%;height:clamp(200px,22vw,300px);object-fit:cover;display:block;}
.pair figcaption{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dim);padding:12px 2px 0;}

/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;}
@media(max-width:64rem){ .quotes{grid-template-columns:1fr;gap:34px;} }
.quote p{font-family:'Playfair Display',Georgia,serif;font-size:1.16rem;line-height:1.6;
         color:var(--bone);font-style:italic;}
.quote .who{margin-top:16px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-dim);}

/* ---------- contact ---------- */
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
@media(max-width:64rem){ .c-grid{grid-template-columns:1fr;gap:40px;} }
.c-row{padding:24px 0;border-bottom:1px solid var(--line);}
.c-row:first-child{border-top:1px solid var(--line);}
.c-row .k{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-lite);margin-bottom:9px;}
.c-row .v{font-size:1.1rem;color:#fff;}
.c-row .v a:hover{color:var(--accent-lite);}
.hours{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:1rem;padding:3px 0;max-width:380px;}
.hours b{color:#fff;font-weight:500;}

/* ---------- cta band ---------- */
.cta{border-top:1px solid var(--line);text-align:center;}
.cta h2{margin-bottom:20px;}
.cta p{margin:0 auto;max-width:46ch;}
.cta .actions{justify-content:center;}

/* ---------- footer ---------- */
footer{background:#0b0b0d;border-top:1px solid var(--line-soft);padding:56px 0 34px;
       color:var(--muted-dim);font-size:.86rem;}
.foot{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;align-items:flex-start;}
.foot-links{display:flex;gap:26px;flex-wrap:wrap;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;}
.foot-links a:hover{color:var(--bone);}
.legal{margin-top:34px;padding-top:24px;border-top:1px solid var(--line-soft);
       font-size:.76rem;color:#575450;line-height:1.8;}

/* ---------- mobile call bar ---------- */
.sticky{display:none;}
@media(max-width:52rem){
  .sticky{display:block;position:fixed;bottom:0;left:0;right:0;z-index:1000;}
  .sticky a{display:block;padding:16px;text-align:center;background:var(--accent);color:#fff;
            font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;}
  body{padding-bottom:54px;}
}