/* =========================================================
   Berkem Brows — 2026 refresh
   Loaded last on every page, after berkem-brows-styles.css and
   any inline styles. Same identity, finer finish: readable type,
   less chrome. Remove this one <link> to roll back.
   ========================================================= */

:root{
  --stone:#6F625C;            /* deepened: small text on blush now passes contrast */
  --caramel-ink:#8A6140;      /* caramel for type on light grounds; light caramel stays for fills */
}

/* ---------- Type: readable body, calmer labels ---------- */
body{font-size:17px}
.eyebrow{font-size:12px; letter-spacing:.18em; color:var(--stone)}
.eyebrow::before,.eyebrow.center::before,.eyebrow.center::after{width:24px; background:rgba(42,34,32,.28)}
.section-head .lead,.studio-lead,.final p.lead{color:rgba(42,34,32,.82)}
.service-blurb{font-size:16px; color:rgba(42,34,32,.78)}
.pillar p,.step p{font-size:17px}
.nav-link,.nav-phone{font-size:12.5px; letter-spacing:.14em; color:rgba(42,34,32,.82)}
.btn{font-size:12.5px; letter-spacing:.14em}

/* the small uppercase labels: 12px minimum, a touch less tracking */
html .proof-detail,html .detail-row dt,html .contact-row dt,html .footer-col .lbl,html .drawer-contact p.lbl,html .service-foot .lnk,html .svc-list-item .cta,html .faq-cat-title,html .tile-foot,html .product-tag,html .lash-showcase figcaption,html .ba-grid figcaption,html .quote-block cite,html .svc-content .cta-row .cta,html .lk-caption .tag,html .pillar-quote .pq-attr,html table.cmp thead th,html .amenities li{
  font-size:12px; letter-spacing:.16em;
}
.proof-detail{color:rgba(253,250,248,.72)}
.footer-col .lbl{color:rgba(253,250,248,.62)}
.footer-row,.footer-blurb{font-size:15px}
.footer-bottom p{font-size:12px; color:rgba(253,250,248,.6)}
.footer-bottom p.right{font-size:11.5px; color:rgba(253,250,248,.5)}
.detail-row dt,.contact-row dt{color:var(--stone)}

/* caramel used as text on light grounds: one step deeper so it can be read */
html .ba-head h2 .italic,html .lookbook-head h2 .italic,html .legal a,html .product-tag,html .tile-foot .book,html .faq-cat-title,html .faq-item.open .faq-trigger,html .process-step .step-num,html .svc-content .num{color:var(--caramel-ink)}

/* ---------- Less chrome: space and tone instead of lines and shadows ---------- */
.nav.scrolled{background:var(--blush); -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:0}
.nav:not(.scrolled) .nav-burger{-webkit-backdrop-filter:none; backdrop-filter:none}
.img-ph,.img-ph.charcoal{border:0}
.btn-primary:hover{transform:none; box-shadow:none}
.hero-image{box-shadow:none}
.service-card{border:0; transition:background-color 500ms var(--ease)}
.service-card:hover{border:0; box-shadow:none; background:var(--cream)}
.service-foot{border-top:0; padding-top:0; margin-top:auto}
.service-foot .lbl{display:none}
.service-foot .lnk{color:var(--caramel-ink)}
.service-body{display:flex; flex-direction:column; flex:1}
.service-blurb{margin-bottom:24px}
.pillar-meta{display:none}
.pillar h3{margin-top:28px}
.brand-strip,.details{border-top:0}
.marquee{border-top:0; border-bottom:0}
.rc-card{border:0; box-shadow:none; border-radius:0}
.rc-card:hover{transform:none; box-shadow:none}
.rc-arrow{box-shadow:none; border-color:rgba(42,34,32,.2)}
.ba-card{border:0}
.ba-handle{box-shadow:none}
.ba-knob{box-shadow:none}

/* ---------- Map: a calm strip, not a grey wall while it loads ---------- */
.map-slot{border:0; box-shadow:none; aspect-ratio:21/9}
@media(max-width:768px){.map-slot{aspect-ratio:4/3}}

/* ---------- Home services: every picture on one line ---------- */
#services .services-grid{container-type:inline-size; align-items:stretch}
#services .service-card > a{height:100%}
#services .service-card .img-ph{aspect-ratio:auto !important; height:calc((100cqw - 64px) / 3 * 1.2)}
@media(max-width:1023px){#services .service-card .img-ph{height:calc((100cqw - 24px) / 2 * 1.2)}}
@media(max-width:639px){#services .service-card .img-ph{height:auto; aspect-ratio:4/5 !important}}

/* ---------- Before / after: caption (tabs keep the outlined pills from index.html) ---------- */
html .ba-meta{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:20px auto 0; width:100%}
html .ba-now{font-family:var(--serif); font-size:24px; line-height:1.2; color:var(--charcoal)}
html .ba-hint{font-family:var(--sans); font-size:14px; color:var(--stone); margin-left:12px}
html .ba-more{font-size:14px; color:var(--caramel-ink); white-space:nowrap; text-decoration:underline; text-underline-offset:.25em; text-decoration-color:rgba(138,97,64,.4)}
html .ba-more:hover{text-decoration-color:currentColor}
html .ba-thumbs{margin-top:32px}
/* same background as Why Us below, so the two paddings read as one gap */
html .ba-section{padding-bottom:64px}
html #why-us{padding-top:48px}
@media(min-width:1024px){html .ba-section{padding-bottom:80px} html #why-us{padding-top:64px}}
html .ba-thumb:focus-visible{outline:2px solid var(--caramel); outline-offset:4px}
@media(max-width:768px){
  html .ba-meta{flex-direction:column; gap:6px; margin-top:16px}
  html .ba-now{font-size:21px}
  html .ba-hint{display:block; margin:4px 0 0}
  html .ba-thumbs{margin-top:20px}
  html .ba-section{padding-bottom:40px}
}