.reveal{opacity:1!important;transform:none!important}.preloader{display:none!important}
/* =====================================================================
Signature Hair Concept — Design System
Luxury modern barbershop / editorial men’s grooming
===================================================================== */
/* –––- Tokens –––- */
:root{
–black:#111111;
–charcoal:#1B1B1B;
–charcoal-2:#242424;
–stone:#D7CBBE;
–beige:#E7DFD4;
–offwhite:#F4F1EB;
–white:#FFFFFF;
–bronze:#A98B65;
–bronze-dark:#8F724E;
–bronze-soft:rgba(169,139,101,.14);
–line:rgba(17,17,17,.12);
–line-dark:rgba(244,241,235,.14);
–muted:#5c554c;
–muted-dark:rgba(244,241,235,.62);
–serif:”Cormorant Garamond”,Georgia,”Times New Roman”,serif;
–sans:”Inter”,-apple-system,BlinkMacSystemFont,”Segoe UI”,Roboto,Helvetica,Arial,sans-serif;
–container:1280px;
–container-wide:1440px;
–gutter:clamp(20px,5vw,64px);
–radius:10px;
–radius-lg:18px;
–shadow:0 18px 50px -24px rgba(17,17,17,.35);
–ease:cubic-bezier(.22,.61,.36,1);
–header-h:76px;
}
/* –––- Reset / base –––- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;
font-family:var(–sans);
font-size:clamp(16px,1.05vw,17px);
line-height:1.7;
color:var(–charcoal);
background:var(–offwhite);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.08;letter-spacing:-.01em}
p{margin:0 0 1em}
ul{margin:0;padding:0}
:focus-visible{outline:2px solid var(–bronze);outline-offset:3px;border-radius:3px}
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(–black);color:var(–offwhite);padding:12px 18px}
.skip-link:focus{left:12px;top:12px}
/* –––- Typography scale –––- */
.display{font-family:var(–serif);font-weight:500;letter-spacing:-.015em;line-height:1.02}
h1.display{font-size:clamp(2.6rem,6.5vw,5rem)}
h2.display{font-size:clamp(2.1rem,4.6vw,3.5rem)}
h3.display{font-size:clamp(1.6rem,3vw,2.3rem)}
.eyebrow{
font-family:var(–sans);font-size:.72rem;font-weight:600;
letter-spacing:.22em;text-transform:uppercase;color:var(–bronze);
margin:0 0 1.1rem;display:inline-flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:””;width:26px;height:1px;background:var(–bronze);opacity:.7}
.lead{font-size:clamp(1.1rem,1.5vw,1.28rem);line-height:1.6;color:var(–muted)}
/* –––- Layout –––- */
.container{width:100%;max-width:var(–container);margin-inline:auto;padding-inline:var(–gutter)}
.container-wide{max-width:var(–container-wide)}
section{position:relative}
.section{padding-block:clamp(64px,9vw,128px)}
.section–tight{padding-block:clamp(48px,6vw,80px)}
.bg-dark{background:var(–black);color:var(–offwhite)}
.bg-charcoal{background:var(–charcoal);color:var(–offwhite)}
.bg-stone{background:var(–beige)}
.bg-dark .eyebrow,.bg-charcoal .eyebrow{color:var(–stone)}
.bg-dark .eyebrow::before,.bg-charcoal .eyebrow::before{background:var(–stone)}
.bg-dark .lead,.bg-charcoal .lead{color:var(–muted-dark)}
.text-center{text-align:center}
.mx-auto{margin-inline:auto}
.maxw-xl{max-width:760px}
.maxw-lg{max-width:620px}
/* –––- Buttons –––- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
font-weight:600;font-size:1rem;letter-spacing:.02em;
padding:1.15rem 2.1rem;border-radius:100px;border:1px solid transparent;
cursor:pointer;transition:transform .3s var(–ease),background .3s var(–ease),color .3s var(–ease),border-color .3s var(–ease);
min-height:56px;text-align:center;line-height:1;
}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn–primary{background:var(–bronze);color:#fff}
.btn–primary:hover{background:var(–bronze-dark);transform:translateY(-2px)}
.btn–dark{background:var(–black);color:var(–offwhite)}
.btn–dark:hover{background:var(–charcoal);transform:translateY(-2px)}
.btn–ghost{background:transparent;border-color:currentColor;color:inherit}
.btn–ghost:hover{background:currentColor;transform:translateY(-2px)}
.btn–ghost:hover span{color:var(–offwhite)}
.bg-dark .btn–ghost:hover,.bg-charcoal .btn–ghost:hover{color:var(–black)}
.btn–light{background:var(–offwhite);color:var(–black)}
.btn–light:hover{background:#fff;transform:translateY(-2px)}
.btn–block{width:100%}
.btn–sm{padding:.85rem 1.5rem;min-height:46px;font-size:.9rem}
.link-under{
display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem;
letter-spacing:.04em;text-transform:uppercase;color:var(–bronze);
background-image:linear-gradient(currentColor,currentColor);
background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
transition:background-size .4s var(–ease);padding-bottom:3px;
}
.link-under:hover{background-size:100% 1px}
.link-under svg{width:15px;height:15px;transition:transform .3s var(–ease)}
.link-under:hover svg{transform:translateX(4px)}
/* –––- Header –––- */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:100;
transition:background .35s var(–ease),box-shadow .35s var(–ease),height .35s var(–ease);
height:var(–header-h);background:transparent;
}
.site-header::after{content:””;position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.55),transparent);pointer-events:none;opacity:1;transition:opacity .35s}
.site-header .header-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;height:100%;gap:1.5rem}
.site-header.scrolled{background:rgba(17,17,17,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(–line-dark);–header-h:64px}
.site-header.scrolled::after{opacity:0}
/* pages that start with a light hero use solid header immediately */
.site-header.header–solid{background:rgba(17,17,17,.94);backdrop-filter:blur(12px)}
.site-header.header–solid::after{opacity:0}
.brand{display:flex;align-items:center;gap:.7rem;z-index:2}
.brand img{height:34px;width:auto}
.brand .brand-txt{display:none}
.nav{display:flex;align-items:center;gap:2.1rem}
.nav a{
color:var(–offwhite);font-size:.86rem;font-weight:500;letter-spacing:.03em;position:relative;padding:.3rem 0;
}
.nav a::after{content:””;position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(–bronze);transition:width .3s var(–ease)}
.nav a:hover::after,.nav a[aria-current=”page”]::after{width:100%}
.nav a[aria-current=”page”]{color:var(–stone)}
.header-cta{display:flex;align-items:center;gap:.8rem}
.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
.burger span{width:24px;height:2px;background:var(–offwhite);transition:transform .3s var(–ease),opacity .3s}
.burger[aria-expanded=”true”] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=”true”] span:nth-child(2){opacity:0}
.burger[aria-expanded=”true”] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Mobile menu */
.mobile-nav{
position:fixed;inset:0;z-index:99;background:var(–black);color:var(–offwhite);
display:flex;flex-direction:column;justify-content:center;padding:6rem var(–gutter) 3rem;
opacity:0;visibility:hidden;transform:translateY(-12px);
transition:opacity .4s var(–ease),transform .5s var(–ease),visibility .5s;
}
.mobile-nav.open{opacity:1;visibility:visible;transform:none}
.mobile-nav a{font-family:var(–serif);font-size:2rem;padding:.5rem 0;border-bottom:1px solid var(–line-dark)}
.mobile-nav a:last-of-type{border-bottom:0}
.mobile-nav .btn{margin-top:2rem;font-family:var(–sans)}
.mobile-nav .m-contact{margin-top:2rem;font-size:.9rem;color:var(–muted-dark);line-height:2}
body.menu-open{overflow:hidden}
/* –––- Hero –––- */
.hero{position:relative;min-height:min(92vh,820px);display:flex;align-items:flex-end;color:var(–offwhite);isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero::before{content:””;position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(17,17,17,.9) 0%,rgba(17,17,17,.72) 38%,rgba(17,17,17,.32) 66%,rgba(17,17,17,.15) 100%),linear-gradient(180deg,rgba(17,17,17,.35) 0%,rgba(17,17,17,.1) 30%,rgba(17,17,17,.85) 100%)}
.hero__inner{padding-block:clamp(3rem,7vw,6rem);width:100%}
.hero .eyebrow{color:var(–stone)}
.hero h1{max-width:15ch;margin-bottom:1.4rem;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hero .lead{max-width:46ch;color:#F4F1EB;text-shadow:0 1px 16px rgba(0,0,0,.55)}
.hero__meta li{text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.hero__meta{display:flex;flex-wrap:wrap;gap:1.5rem 2.2rem;margin-top:2.5rem;padding-top:1.8rem;border-top:1px solid var(–line-dark)}
.hero__meta li{list-style:none;display:flex;align-items:center;gap:.6rem;font-size:.86rem;letter-spacing:.02em;color:var(–beige)}
.hero__meta svg{width:17px;height:17px;color:var(–bronze)}
/* –––- Preloader (intro brand animation) –––- */
.preloader{position:fixed;inset:0;z-index:1000;background:#0c0b0a;display:flex;align-items:center;justify-content:center;transition:opacity .8s var(–ease),visibility .8s}
.preloader–hidden{opacity:0;visibility:hidden;pointer-events:none}
.preloader__stage{position:relative;width:min(80vw,460px);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.preloader__glow{position:absolute;width:64%;height:64%;border-radius:50%;background:radial-gradient(circle,rgba(169,139,101,.30),transparent 70%);filter:blur(18px);animation:preGlow 3s ease-in-out infinite}
.preloader__rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.preloader__rings .ring{fill:none;stroke:rgba(244,241,235,.28);stroke-width:1}
.preloader__rings .ring–outer{stroke-dasharray:1206;stroke-dashoffset:1206;animation:ringDraw 1.7s var(–ease) forwards}
.preloader__rings .ring–inner{stroke:rgba(244,241,235,.22);stroke-dasharray:2 8;transform-origin:200px 200px;animation:preSpin 26s linear infinite}
.preloader__rings .ring__dot{transform-origin:200px 200px;animation:preSpin 5s linear infinite}
.preloader__rings .ring__dot circle{fill:var(–bronze);filter:drop-shadow(0 0 7px rgba(169,139,101,.95))}
.preloader__logo{position:relative;z-index:1;width:min(54%,250px);height:auto;opacity:0;animation:preLogo 1.2s var(–ease) .35s forwards}
@keyframes ringDraw{to{stroke-dashoffset:0}}
@keyframes preSpin{to{transform:rotate(360deg)}}
@keyframes preLogo{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes preGlow{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
.preloader__logo{animation:none;opacity:1}
.preloader__rings .ring–outer,.preloader__rings .ring–inner,.preloader__rings .ring__dot,.preloader__glow{animation:none}
.preloader__rings .ring–outer{stroke-dashoffset:0}
}
/* Brand hero (homepage) — dark, Signature watermark + orbit rings (ca pe Webflow) */
.hero–brand{position:relative;min-height:min(94vh,860px);display:flex;align-items:center;overflow:hidden;color:var(–offwhite);
background:radial-gradient(115% 90% at 74% 42%,#171310 0%,#0e0c0b 55%,#0a0908 100%);
padding:calc(var(–header-h) + 2rem) 0 3rem}
.hero__brand-inner{position:relative;z-index:2}
.hero__title{font-family:var(–sans);font-weight:700;letter-spacing:-.03em;line-height:1.03;font-size:clamp(2.6rem,7vw,5.4rem);margin-bottom:1.5rem}
.hero–brand .lead{color:var(–beige);max-width:52ch}
.hero–brand .hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}
.hero__deco{position:absolute;z-index:1;left:auto;right:2%;top:50%;transform:translateY(-50%);width:min(48vw,580px);aspect-ratio:1;pointer-events:none}
.hero__glow{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(169,139,101,.20),transparent 68%);filter:blur(26px)}
.hero__rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero__rings .ring{fill:none;stroke:rgba(244,241,235,.14);stroke-width:1}
.hero__rings .ring–inner{stroke:rgba(244,241,235,.10);stroke-dasharray:2 8;transform-origin:200px 200px;animation:preSpin 26s linear infinite}
.hero__rings .ring__dot{transform-origin:200px 200px;animation:preSpin 6s linear infinite}
.hero__rings .ring__dot circle{fill:var(–bronze);filter:drop-shadow(0 0 7px rgba(169,139,101,.95))}
.hero__watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52%;height:auto;opacity:.16}
@media (prefers-reduced-motion:reduce){.hero__rings .ring–inner,.hero__rings .ring__dot{animation:none}}
@media (max-width:860px){
.hero–brand{min-height:auto;padding:calc(var(–header-h) + 2.2rem) 0 2.6rem}
.hero__deco{display:none}
.hero__title{font-size:clamp(2.2rem,9.5vw,3.2rem)}
.hero–brand .lead{font-size:1.02rem;max-width:100%}
.hero–brand .hero__cta{margin-top:1.8rem;gap:.7rem}
.hero–brand .hero__cta .btn{width:100%}
}
/* page hero (interior pages) */
.page-hero{padding-top:calc(var(–header-h) + clamp(48px,7vw,90px));padding-bottom:clamp(40px,6vw,72px);background:var(–black);color:var(–offwhite);position:relative;overflow:hidden}
.page-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.page-hero h1{margin-top:.8rem;max-width:18ch}
.page-hero .lead{color:var(–beige);max-width:52ch}
.page-hero__media{border-radius:var(–radius-lg);overflow:hidden;aspect-ratio:4/3}
.page-hero__media img{width:100%;height:100%;object-fit:cover}
.page-hero–plain .page-hero__grid{grid-template-columns:1fr;max-width:820px}
/* –––- Breadcrumbs –––- */
.breadcrumbs{font-size:.78rem;letter-spacing:.03em}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;list-style:none}
.breadcrumbs li{display:flex;align-items:center;gap:.5rem;color:var(–muted-dark)}
.breadcrumbs a{color:var(–stone)}
.breadcrumbs a:hover{color:var(–bronze)}
.breadcrumbs li::after{content:”/”;color:var(–muted-dark);opacity:.5}
.breadcrumbs li:last-child::after{display:none}
.breadcrumbs [aria-current=”page”]{color:var(–beige)}
/* –––- Trust bar –––- */
.trust{border-block:1px solid var(–line-dark);background:var(–black);color:var(–offwhite)}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(–line-dark)}
.trust__item{background:var(–black);padding:clamp(1.5rem,3vw,2.2rem) clamp(1.2rem,2.4vw,1.8rem);text-align:left;display:flex;flex-direction:column;gap:.35rem}
.trust__label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(–bronze);font-weight:600}
.trust__item strong{font-family:var(–serif);font-size:clamp(1.35rem,2.2vw,1.65rem);color:var(–offwhite);font-weight:500;line-height:1.12}
.trust__sub{font-size:.85rem;color:var(–muted-dark)}
.trust__link{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(–bronze);font-weight:600;margin-top:.1rem}
.trust__link svg{width:14px;height:14px;transition:transform .3s var(–ease)}
.trust__link:hover svg{transform:translateX(3px)}
/* –––- Editorial split –––- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split–reverse .split__media{order:2}
.split__media{position:relative;border-radius:var(–radius-lg);overflow:hidden}
.split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform 1.2s var(–ease)}
.split__media:hover img{transform:scale(1.04)}
.split__media–tall img{aspect-ratio:3/4}
.stat-badge{position:absolute;left:0;bottom:0;background:var(–bronze);color:#fff;padding:1.1rem 1.4rem;border-top-right-radius:var(–radius)}
.stat-badge strong{display:block;font-family:var(–serif);font-size:1.9rem;line-height:1;font-weight:500}
.stat-badge span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
/* –––- Services (editorial rows) –––- */
.svc-list{display:flex;flex-direction:column;border-top:1px solid var(–line)}
.bg-dark .svc-list,.bg-charcoal .svc-list{border-color:var(–line-dark)}
.svc-row{
display:grid;grid-template-columns:64px 1.4fr auto auto;gap:1.5rem;align-items:center;
padding:1.5rem 0;border-bottom:1px solid var(–line);transition:background .3s;
}
.bg-dark .svc-row{border-color:var(–line-dark)}
.svc-row__idx{font-family:var(–serif);font-size:1.1rem;color:var(–bronze)}
.svc-row__name{font-family:var(–serif);font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:500}
.svc-row__desc{font-size:.92rem;color:var(–muted);max-width:44ch}
.bg-dark .svc-row__desc{color:var(–muted-dark)}
.svc-row__price{font-family:var(–serif);font-size:1.5rem;color:var(–bronze);white-space:nowrap;font-weight:500}
/* Feature service cards (editorial, not identical grid) */
.feature-cards{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,1.6rem)}
.fcard{position:relative;border-radius:var(–radius-lg);overflow:hidden;background:var(–charcoal);color:var(–offwhite);min-height:320px;display:flex;align-items:flex-end;isolation:isolate}
.fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(–ease)}
.fcard::after{content:””;position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(17,17,17,.05),rgba(17,17,17,.86))}
.fcard:hover img{transform:scale(1.06)}
.fcard__body{padding:1.6rem}
.fcard__body h3{font-family:var(–serif);font-size:1.6rem;margin-bottom:.35rem;font-weight:500}
.fcard__body p{font-size:.9rem;color:var(–beige);margin-bottom:.9rem}
.fcard__price{position:absolute;top:1.2rem;right:1.2rem;background:rgba(17,17,17,.6);backdrop-filter:blur(6px);border:1px solid var(–line-dark);color:var(–offwhite);padding:.4rem .8rem;border-radius:100px;font-size:.85rem;font-weight:600}
.fcard–lg{grid-column:span 6}
.fcard–sm{grid-column:span 4}
.fcard–half{grid-column:span 6}
/* Service photo cards (photo + price) */
.scard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.8vw,1.5rem)}
.scard{display:flex;flex-direction:column;background:var(–charcoal);border:1px solid var(–line-dark);border-radius:var(–radius-lg);overflow:hidden;transition:transform .4s var(–ease),border-color .4s var(–ease)}
.scard:hover{transform:translateY(-6px);border-color:var(–bronze)}
.scard__media{aspect-ratio:4/5;overflow:hidden;background:var(–charcoal-2)}
.scard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(–ease)}
.scard:hover .scard__media img{transform:scale(1.06)}
.scard__body{padding:1.25rem 1.35rem 1.5rem;display:flex;flex-direction:column;flex:1}
.scard__row{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.scard__body h3{min-width:0;overflow-wrap:anywhere}
.scard__price{flex:0 0 auto}
.scard__body h3{font-family:var(–serif);font-size:1.45rem;font-weight:500;color:var(–offwhite)}
.scard__price{font-family:var(–serif);font-size:1.4rem;color:var(–bronze);white-space:nowrap;font-weight:500}
.scard__body p{font-size:.88rem;color:var(–muted-dark);margin:.35rem 0 1.1rem}
.scard__link{margin-top:auto;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(–bronze);display:inline-flex;align-items:center;gap:.45rem;font-weight:600}
.scard__link svg{width:14px;height:14px;transition:transform .3s var(–ease)}
.scard:hover .scard__link svg{transform:translateX(4px)}
/* –––- Team (editorial + animated) –––- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.4vw,1.8rem)}
.member{text-align:left}
.member.reveal{transition-delay:var(–d,0s)}
.member__photo{position:relative;display:block;border-radius:var(–radius-lg);overflow:hidden;aspect-ratio:3/4;background:var(–charcoal-2);margin-bottom:1.1rem;isolation:isolate}
.member__photo img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(.28) contrast(1.02);transition:transform 1.1s var(–ease),filter .6s var(–ease)}
.member__photo:hover img,.member__photo:focus-visible img{transform:scale(1.06);filter:grayscale(0)}
.member__idx{position:absolute;top:.85rem;left:1rem;z-index:3;font-family:var(–serif);font-size:1.05rem;color:#fff;letter-spacing:.06em;mix-blend-mode:difference;transition:transform .5s var(–ease)}
.member__photo:hover .member__idx{transform:translateY(-3px)}
.member__overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(169,139,101,0) 55%,rgba(169,139,101,.32));opacity:0;transition:opacity .45s var(–ease)}
.member__photo:hover .member__overlay,.member__photo:focus-visible .member__overlay{opacity:1}
.member__photo–placeholder{display:flex;align-items:center;justify-content:center}
.member__ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.member__ph img{width:38%;height:auto;object-fit:contain;opacity:.4;filter:invert(1)}
.member__ph-note{position:absolute;bottom:0;left:0;right:0;z-index:3;background:var(–bronze);color:#fff;font-size:.68rem;letter-spacing:.04em;text-align:center;padding:.35rem;text-transform:uppercase}
.member__meta h3{font-family:var(–serif);font-size:1.5rem;font-weight:500;display:inline;background-image:linear-gradient(var(–bronze),var(–bronze));background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(–ease);padding-bottom:2px}
.member:hover .member__meta h3{background-size:100% 1px}
.member__meta .role{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(–bronze);margin:.35rem 0 .75rem}
.member__book{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;color:inherit;padding-bottom:2px}
.member__book span{background-image:linear-gradient(var(–bronze),var(–bronze));background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(–ease);padding-bottom:2px}
.member:hover .member__book span,.member__book:focus-visible span{background-size:100% 1px}
.member__book svg{width:15px;height:15px;color:var(–bronze);transition:transform .3s var(–ease)}
.member:hover .member__book svg{transform:translateX(4px)}
/* –––- Team profiles (echipa page) –––- */
.profiles{display:flex;flex-direction:column;gap:clamp(3rem,6vw,6rem)}
.profile{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.profile–reverse .profile__media{order:2}
.profile__media{position:relative;border-radius:var(–radius-lg);overflow:hidden;aspect-ratio:3/4;background:var(–charcoal-2)}
.profile__media img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 1.1s var(–ease)}
.profile:hover .profile__media img{transform:scale(1.04)}
.profile__media–placeholder{display:flex;align-items:center;justify-content:center}
.profile__media–placeholder img{width:34%;height:auto;object-fit:contain;opacity:.4;filter:invert(1)}
.profile__idx{position:absolute;top:1rem;left:1.2rem;z-index:2;font-family:var(–serif);font-size:1.2rem;color:#fff;letter-spacing:.05em;mix-blend-mode:difference}
.profile__body .eyebrow{margin-bottom:.6rem}
.profile__meta{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 2rem;margin:1.8rem 0 2rem;border-top:1px solid var(–line);padding-top:1.6rem}
.profile__meta h3{font-family:var(–sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(–bronze);margin-bottom:.4rem;font-weight:600}
.profile__meta p{font-size:.92rem;color:var(–muted);margin:0;line-height:1.6}
/* –––- Team showcase (tabbed) — Webflow-style –––- */
.team2{display:flex;flex-direction:column;gap:clamp(1.2rem,2.5vw,1.8rem)}
.team2__tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.4vw,1rem)}
.team2__tab{display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;min-width:0;
background:var(–charcoal);border:1px solid var(–line-dark);border-radius:var(–radius-lg);
padding:1.05rem 1.2rem;cursor:pointer;color:var(–offwhite);
transition:border-color .3s var(–ease),background .3s var(–ease),transform .3s var(–ease)}
.team2__tab:hover{transform:translateY(-2px);border-color:rgba(169,139,101,.5)}
.team2__tab.is-active{border-color:var(–bronze);background:linear-gradient(180deg,rgba(169,139,101,.16),rgba(169,139,101,.04))}
.team2__tab-info{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.team2__tab-info strong{font-family:var(–serif);font-weight:500;font-size:1.22rem;line-height:1.08}
.team2__tab-info span{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(–muted-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team2__tab.is-active .team2__tab-info span{color:var(–bronze)}
.team2__tab-ind{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(–line-dark);color:var(–bronze)}
.team2__tab.is-active .team2__tab-ind{background:var(–bronze);border-color:var(–bronze);color:#fff}
.team2__tab-ind svg{width:16px;height:16px}
.team2__plus{font-size:1.2rem;line-height:1;color:var(–muted-dark)}
.team2__panel{display:grid;grid-template-columns:.82fr 1.18fr;background:var(–offwhite);color:var(–charcoal);border-radius:var(–radius-lg);overflow:hidden;box-shadow:var(–shadow)}
.team2__panel[hidden]{display:none}
.team2__photo{position:relative;min-height:440px;background:var(–charcoal-2)}
.team2__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.team2__content{padding:clamp(1.6rem,3vw,2.8rem)}
.team2__content .eyebrow{color:var(–bronze);margin-bottom:.7rem}
.team2__content .eyebrow::before{background:var(–bronze)}
.team2__name{font-family:var(–sans);font-weight:700;letter-spacing:-.02em;font-size:clamp(2rem,4vw,3rem);line-height:1.02;margin-bottom:1rem;color:var(–black)}
.team2__copy{color:var(–muted);font-size:1.02rem;max-width:54ch;margin-bottom:1.3rem}
.team2__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.team2__chip{border:1px solid var(–line);border-radius:100px;padding:.4rem .9rem;font-size:.78rem;color:var(–muted);background:#fff}
.team2__facts{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 1.8rem;border-top:1px solid var(–line);padding-top:1.4rem;margin-bottom:1.7rem}
.team2__fact h4{font-family:var(–sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(–bronze);margin:0 0 .35rem;font-weight:600}
.team2__fact p{font-size:.92rem;color:var(–charcoal);margin:0;line-height:1.55}
/* –––- Gallery (masonry + lightbox) –––- */
.gallery2{columns:4 220px;column-gap:clamp(.6rem,1.4vw,1rem)}
.gallery2 .g2-item{break-inside:avoid;margin:0 0 clamp(.6rem,1.4vw,1rem);border-radius:var(–radius);overflow:hidden;position:relative;cursor:zoom-in;background:var(–charcoal-2)}
.gallery2 .g2-item img{width:100%;display:block;transition:transform 1s var(–ease),filter .5s;filter:grayscale(.12)}
.gallery2 .g2-item::after{content:””;position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(17,17,17,.35));opacity:0;transition:opacity .4s}
.gallery2 .g2-item:hover img,.gallery2 .g2-item:focus-visible img{transform:scale(1.05);filter:grayscale(0)}
.gallery2 .g2-item:hover::after,.gallery2 .g2-item:focus-visible::after{opacity:1}
@media (max-width:860px){.gallery2{columns:2 140px}}
@media (max-width:420px){.gallery2{columns:2}}
.lightbox{position:fixed;inset:0;z-index:130;background:rgba(10,10,10,.95);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s var(–ease),visibility .3s;padding:2rem}
.lightbox.open{opacity:1;visibility:visible}
.lightbox__img{max-width:min(92vw,760px);max-height:88vh;border-radius:var(–radius);box-shadow:0 30px 80px -20px rgba(0,0,0,.7);object-fit:contain}
.lightbox__btn{position:absolute;background:rgba(244,241,235,.1);border:1px solid var(–line-dark);color:var(–offwhite);width:52px;height:52px;border-radius:50%;font-size:2rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s}
.lightbox__btn:hover{background:var(–bronze);border-color:var(–bronze)}
.lightbox__close{top:1.2rem;right:1.2rem;font-size:1.6rem}
.lightbox__prev{left:1.2rem;top:50%;transform:translateY(-50%)}
.lightbox__next{right:1.2rem;top:50%;transform:translateY(-50%)}
@media (max-width:560px){.lightbox__prev{left:.5rem}.lightbox__next{right:.5rem}.lightbox__btn{width:44px;height:44px}}
body.lightbox-open{overflow:hidden}
/* –––- Gallery (legacy) –––- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:clamp(.6rem,1.4vw,1rem)}
.gallery figure{margin:0;overflow:hidden;border-radius:var(–radius);position:relative}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(–ease),filter .6s}
.gallery figure:hover img{transform:scale(1.07)}
.g-tall{grid-row:span 2}
.g-wide{grid-column:span 2}
/* –––- Packages –––- */
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.pkg{border:1px solid var(–line-dark);border-radius:var(–radius-lg);padding:2rem 1.8rem;display:flex;flex-direction:column;background:var(–charcoal);transition:transform .4s var(–ease),border-color .4s}
.pkg:hover{transform:translateY(-6px)}
.pkg–featured{background:linear-gradient(180deg,#1f1a14,#161310);border-color:var(–bronze)}
.pkg__tag{align-self:flex-start;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(–bronze);padding:.3rem .7rem;border-radius:100px;margin-bottom:1rem}
.pkg h3{font-family:var(–serif);font-size:1.9rem;font-weight:500}
.pkg__price{font-family:var(–serif);font-size:2.8rem;color:var(–bronze);margin:.4rem 0 1.2rem;font-weight:500}
.pkg__price span{font-size:1rem;color:var(–muted-dark)}
.pkg ul{list-style:none;margin-bottom:1.8rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.pkg li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;color:var(–beige)}
.pkg li svg{width:16px;height:16px;color:var(–bronze);flex:0 0 auto;margin-top:.28rem}
/* –––- Reviews –––- */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.review{border:1px solid var(–line);border-radius:var(–radius-lg);padding:1.8rem;background:var(–white);display:flex;flex-direction:column}
.bg-dark .review,.bg-charcoal .review{background:var(–charcoal);border-color:var(–line-dark)}
.review__stars{color:var(–bronze);letter-spacing:2px;margin-bottom:.9rem;font-size:.9rem}
.review p{font-size:1rem;line-height:1.6;flex:1}
.bg-dark .review p{color:var(–beige)}
.review__name{font-weight:600;font-size:.88rem;margin-top:1.1rem;color:var(–bronze)}
/* –––- Local info –––- */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(1rem,2vw,1.5rem)}
.info-card{border:1px solid var(–line-dark);border-radius:var(–radius);padding:1.5rem;background:var(–charcoal)}
.info-card h3{display:flex;align-items:center;gap:.6rem;font-family:var(–sans);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(–bronze);margin-bottom:.8rem;font-weight:600}
.info-card h3 svg{width:16px;height:16px}
.info-card p svg,.info-card li svg{width:16px;height:16px;display:inline-block;vertical-align:-3px;color:var(–bronze);flex:0 0 auto}
.info-card p,.info-card li{color:var(–beige);font-size:.95rem;line-height:1.8}
.info-card ul{list-style:none}
.hours-row{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(–line-dark);padding:.35rem 0}
.hours-row:last-child{border-bottom:0}
.hours-row .day{color:var(–muted-dark)}
.map-wrap{border-radius:var(–radius-lg);overflow:hidden;border:1px solid var(–line-dark);position:relative;aspect-ratio:16/8;min-height:320px;width:100%;max-width:100%}
.map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05)}
/* –––- FAQ (native
, works without JS) –––- */
.faq{max-width:820px;margin-inline:auto}
.faq__item{border-bottom:1px solid var(–line)}
.bg-dark .faq__item{border-color:var(–line-dark)}
.faq__q{list-style:none;width:100%;cursor:pointer;
display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
padding:1.4rem 0;font-family:var(–serif);font-size:clamp(1.2rem,2vw,1.5rem);color:inherit;font-weight:500}
.faq__q::-webkit-details-marker{display:none}
.faq__q .icon{flex:0 0 auto;width:26px;height:26px;position:relative}
.faq__q .icon::before,.faq__q .icon::after{content:””;position:absolute;background:var(–bronze);top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .35s var(–ease)}
.faq__q .icon::before{width:16px;height:2px}
.faq__q .icon::after{width:2px;height:16px}
.faq__item[open] .faq__q .icon::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__a-inner{padding:0 0 1.5rem;color:var(–muted);max-width:70ch}
.bg-dark .faq__a-inner{color:var(–muted-dark)}
/* –––- CTA band –––- */
.cta-band{position:relative;color:var(–offwhite);text-align:center;isolation:isolate;overflow:hidden}
.cta-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta-band::after{content:””;position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(17,17,17,.78),rgba(17,17,17,.88))}
.cta-band .inner{padding-block:clamp(72px,11vw,140px)}
.cta-band h2{margin-bottom:1rem}
.cta-band .lead{color:var(–beige);max-width:48ch;margin-inline:auto;margin-bottom:2rem}
/* –––- Content prose –––- */
.prose h2{font-family:var(–serif);font-size:clamp(1.7rem,3vw,2.4rem);margin:2.4rem 0 1rem;font-weight:500}
.prose h3{font-family:var(–serif);font-size:1.4rem;margin:1.8rem 0 .7rem;font-weight:500}
.prose ul{list-style:none;margin:1rem 0 1.6rem;display:flex;flex-direction:column;gap:.6rem}
.prose ul li{position:relative;padding-left:1.6rem;color:var(–muted)}
.prose ul li::before{content:””;position:absolute;left:0;top:.7em;width:7px;height:7px;background:var(–bronze);border-radius:2px}
.prose p{color:var(–muted)}
.prose .lead{color:var(–charcoal)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem)}
.chip-list{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 1.6rem}
.chip{border:1px solid var(–line);border-radius:100px;padding:.45rem 1rem;font-size:.82rem;color:var(–muted)}
.bg-dark .chip{border-color:var(–line-dark);color:var(–beige)}
/* related links */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.related a{border:1px solid var(–line);border-radius:var(–radius);padding:1.3rem 1.4rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:border-color .3s,transform .3s var(–ease);font-family:var(–serif);font-size:1.25rem}
.related a:hover{border-color:var(–bronze);transform:translateY(-3px)}
.related a svg{width:18px;height:18px;color:var(–bronze)}
/* –––- Footer –––- */
.site-footer{background:var(–black);color:var(–offwhite);padding-top:clamp(56px,7vw,88px)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(2rem,4vw,3rem)}
.footer-brand img{height:40px;margin-bottom:1.2rem}
.footer-brand p{color:var(–muted-dark);font-size:.92rem;max-width:34ch}
.footer-col h3{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(–bronze);margin-bottom:1.1rem;font-weight:600}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.footer-col a,.footer-col li{color:var(–beige);font-size:.92rem}
.footer-col a:hover{color:var(–bronze)}
.footer-social{display:flex;gap:.8rem;margin-top:1.4rem}
.footer-social a{width:42px;height:42px;border:1px solid var(–line-dark);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s}
.footer-social a:hover{background:var(–bronze);border-color:var(–bronze)}
.footer-social svg{width:18px;height:18px}
.footer-anpc{display:flex;flex-direction:column;gap:.55rem;margin-top:1.5rem;max-width:210px}
.footer-anpc a{display:block;border-radius:6px;overflow:hidden;transition:transform .3s var(–ease),opacity .3s}
.footer-anpc a:hover{transform:translateY(-2px);opacity:.9}
.footer-anpc img{width:100%;height:auto;display:block}
.wa-link{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#25D366;color:#fff;vertical-align:middle;margin-left:.35rem;transition:transform .3s var(–ease)}
.wa-link:hover{transform:scale(1.12)}
.wa-link svg{width:15px;height:15px}
.info-card .link-under svg{color:#25D366}
.footer-bottom{border-top:1px solid var(–line-dark);margin-top:clamp(2.5rem,5vw,4rem);padding-block:1.6rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:.8rem;color:var(–muted-dark)}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:1.2rem}
.footer-bottom a:hover{color:var(–bronze)}
/* –––- Mobile sticky CTA –––- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:.5rem;padding:.6rem clamp(12px,4vw,20px) calc(.6rem + env(safe-area-inset-bottom));background:rgba(17,17,17,.97);backdrop-filter:blur(10px);border-top:1px solid var(–line-dark)}
.sticky-cta .btn{flex:1 1 0;min-width:0;width:auto;min-height:52px;padding:.85rem .7rem;font-size:.9rem;gap:.4rem;white-space:nowrap}
.sticky-cta .btn svg{width:16px;height:16px}
.sticky-cta .btn–ghost{color:var(–offwhite);border-color:var(–line-dark);background:rgba(244,241,235,.06)}
.sticky-cta .btn–ghost:hover{background:var(–offwhite);color:var(–black)}
/* –––- Guide hub grid –––- */
.ghid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.ghid-card{display:flex;flex-direction:column;border:1px solid var(–line);border-radius:var(–radius-lg);padding:1.8rem;transition:border-color .3s var(–ease),transform .3s var(–ease);background:var(–white)}
.ghid-card:hover{border-color:var(–bronze);transform:translateY(-4px)}
.ghid-card h3{font-family:var(–serif);font-size:1.5rem;font-weight:500;margin-bottom:.6rem}
.ghid-card p{color:var(–muted);font-size:.95rem;flex:1;margin-bottom:1.1rem}
@media (max-width:860px){.ghid-grid{grid-template-columns:1fr}}
/* –––- Floating WhatsApp –––- */
.wa-float{
position:fixed;right:22px;bottom:24px;z-index:85;
width:58px;height:58px;border-radius:50%;
background:#25D366;color:#fff;
display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 28px -6px rgba(37,211,102,.55),0 4px 12px rgba(0,0,0,.25);
transition:transform .3s var(–ease),box-shadow .3s var(–ease);
}
.wa-float:hover{transform:scale(1.08);box-shadow:0 14px 34px -6px rgba(37,211,102,.7),0 4px 12px rgba(0,0,0,.3)}
.wa-float svg{width:32px;height:32px}
.wa-float::after{content:””;position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:waPulse 2.4s ease-out infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.wa-float::after{animation:none;display:none}}
/* –––- Forms –––- */
.form-field{margin-bottom:1.2rem}
.form-field label{display:block;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(–bronze);margin-bottom:.5rem;font-weight:600}
.form-field input,.form-field textarea{
width:100%;background:var(–charcoal);border:1px solid var(–line-dark);border-radius:var(–radius);
padding:.9rem 1rem;color:var(–offwhite);font-family:inherit;font-size:1rem;transition:border-color .3s}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(–bronze)}
.form-field textarea{min-height:130px;resize:vertical}
.form-field .error{color:#e08b7a;font-size:.8rem;margin-top:.4rem;display:none}
.form-field.invalid .error{display:block}
.form-field.invalid input,.form-field.invalid textarea{border-color:#c8654f}
.form-note{font-size:.82rem;color:var(–muted-dark);margin-top:1rem}
.form-success{display:none;background:var(–bronze-soft);border:1px solid var(–bronze);border-radius:var(–radius);padding:1rem 1.2rem;color:var(–beige);margin-bottom:1.2rem}
.form-success.show{display:block}
.form-error{display:none;background:rgba(200,101,79,.12);border:1px solid #c8654f;border-radius:var(–radius);padding:1rem 1.2rem;color:#e8a291;margin-bottom:1.2rem}
.form-error.show{display:block}
.formlayer-wrap{margin-bottom:.5rem;min-height:40px}
/* –––- Reveal animation –––- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(–ease),transform .8s var(–ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
*{scroll-behavior:auto!important}
.split__media img,.fcard img,.member__photo img,.gallery img{transition:none}
}
/* –––- Utilities –––- */
.divider{height:1px;background:var(–line-dark);border:0;margin:0}
.pill-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.2rem}
.pill{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(–beige);border:1px solid var(–line-dark);border-radius:100px;padding:.5rem 1rem}
.pill svg{width:15px;height:15px;color:var(–bronze)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.stack>*+*{margin-top:1.5rem}
/* =====================================================================
Responsive
===================================================================== */
@media (max-width:1024px){
.footer-grid{grid-template-columns:1fr 1fr}
.scard-grid{grid-template-columns:repeat(3,1fr)}
.team-grid{grid-template-columns:repeat(2,1fr)}
.trust__grid{grid-template-columns:repeat(2,1fr)}
.page-hero__grid{grid-template-columns:1fr;gap:2rem}
.page-hero__media{max-width:520px}
}
@media (max-width:860px){
.nav,.header-cta .btn{display:none}
.burger{display:flex}
.header-cta{gap:0}
.split,.grid-2,.two-col{grid-template-columns:1fr}
.scard-grid{grid-template-columns:repeat(2,1fr)}
.split–reverse .split__media{order:0}
.profile{grid-template-columns:1fr;gap:1.6rem}
.profile–reverse .profile__media{order:0}
.profile__media{max-width:420px}
.profile__meta{grid-template-columns:1fr}
.team2__tabs{grid-template-columns:1fr 1fr}
.team2__panel{grid-template-columns:1fr}
.team2__photo{min-height:0;aspect-ratio:4/3}
/* no hover on touch: reveal team overlay + full colour */
.member__photo img{filter:grayscale(0)}
.member__overlay{opacity:1;background:linear-gradient(180deg,transparent 55%,rgba(17,17,17,.8))}
.member__cta{transform:none}
.reviews-grid,.pkg-grid,.related{grid-template-columns:1fr}
.feature-cards>*{grid-column:1/-1!important}
.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
.g-wide{grid-column:span 1}
.sticky-cta{display:flex}
body{padding-bottom:76px}
.wa-float{bottom:calc(84px + env(safe-area-inset-bottom));right:16px;width:52px;height:52px}
.wa-float svg{width:28px;height:28px}
.svc-row{grid-template-columns:1fr auto;gap:.4rem 1rem}
.svc-row__idx{display:none}
.svc-row__desc{grid-column:1/-1;order:3}
.cta-band .inner{padding-bottom:calc(clamp(72px,11vw,140px))}
}
@media (max-width:560px){
.team-grid{grid-template-columns:1fr 1fr}
.scard-grid{grid-template-columns:1fr 1fr;gap:.7rem}
.scard__body{padding:1rem 1rem 1.2rem}
.scard__body h3{font-size:1.25rem}
.team2__facts{grid-template-columns:1fr}
.team2__tabs{grid-template-columns:1fr}
.team2__tab-info strong{overflow-wrap:anywhere}
.reviews-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr}
.hero__meta{gap:1rem 1.4rem}
.trust__grid{grid-template-columns:1fr 1fr}
}
/* Signature navigation v1 2026-09-28 */
.nav{gap:clamp(.8rem,1.45vw,1.5rem)}
.nav-group{position:relative;align-self:stretch;display:flex;align-items:center}
.nav-group>summary{list-style:none;cursor:pointer;color:var(–offwhite);font-size:.86rem;font-weight:500;letter-spacing:.03em;padding:.3rem 1rem .3rem 0;position:relative;white-space:nowrap}
.nav-group>summary::-webkit-details-marker,.mobile-nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary::after,.mobile-nav-group>summary::after{content:””;display:inline-block;width:.38rem;height:.38rem;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin-left:.6rem;vertical-align:.2rem}
.nav-group[open]>summary::after,.mobile-nav-group[open]>summary::after{transform:rotate(225deg);vertical-align:0}
.nav-group[open]>summary,.nav-group.is-current>summary{color:var(–stone)}
.nav-group>summary:focus-visible,.mobile-nav-group>summary:focus-visible{outline:2px solid var(–bronze);outline-offset:4px}
.nav-submenu{position:absolute;top:100%;left:-1rem;z-index:120;min-width:250px;max-width:330px;max-height:min(70vh,560px);overflow-y:auto;padding:.55rem;background:#171717;border:1px solid var(–line-dark);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.nav-group–about .nav-submenu{min-width:285px}
.nav-submenu a{display:block;color:var(–offwhite);font-size:.86rem;line-height:1.35;white-space:normal;padding:.6rem .7rem;border-radius:3px}
.nav-submenu a::after{display:none}
.nav-submenu a:hover,.nav-submenu a:focus-visible{color:var(–offwhite);background:rgba(176,144,103,.22);outline:none}
.nav-submenu a[aria-current=”page”]{color:var(–stone)}
.nav-submenu-title{display:block;color:var(–bronze);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.7rem .7rem .25rem}
.mobile-nav{justify-content:flex-start;overflow-y:auto;padding-top:calc(var(–header-h) + 1.15rem);padding-bottom:2rem}
.mobile-nav>a:not(.btn),.mobile-nav-group>summary{font-family:var(–serif);font-size:clamp(1.45rem,4vw,1.8rem);line-height:1.2;padding:.55rem 0;border-bottom:1px solid var(–line-dark)}
.mobile-nav-group{width:100%}
.mobile-nav-group>summary{list-style:none;cursor:pointer;color:var(–offwhite)}
.mobile-nav-group>summary::after{float:right;margin-top:.6rem}
.mobile-nav-group[open]>summary{color:var(–stone)}
.mobile-submenu{display:grid;padding:.35rem 0 .65rem .85rem}
.mobile-submenu a{font-family:var(–sans);font-size:.96rem;line-height:1.3;padding:.48rem .2rem;border:0;color:var(–beige)}
.mobile-submenu a:hover,.mobile-submenu a:focus-visible,.mobile-submenu a[aria-current=”page”]{color:var(–stone)}
.mobile-submenu-title{display:block;color:var(–bronze);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.7rem .2rem .2rem}
.mobile-nav .btn{margin-top:1.15rem}
.mobile-nav .m-contact{margin-top:1rem}
@media (max-width:1120px){.nav,.header-cta .btn{display:none}.burger{display:flex}}
Sari la conținut
Acasă Servicii & Prețuri Echipa Ghid & Articole Despre noi Contact & Locație Programează-te în MERO
Acasă Ghid Cum alegi tunsoarea după forma feței
Ghid Signature · Master Barber
Tunsori pentru bărbați în funcție de forma feței: Cum alegi stilul care te avantajează
O tunsoare reușită nu copiază un șablon, ci creează echilibru vizual. Află cum analizăm fizionomia ta și ce stiluri îți recomandăm în funcție de forma feței.
Ți s-a întâmplat vreodată să vezi o tunsoare care arată impecabil într-o fotografie pe Instagram, să îi arăți poza frizerului, iar la final să simți că pe tine pur și simplu nu stă la fel?
Motivul nu este întotdeauna execuția tehnică, ci geometria feței și arhitectura craniului. O tunsoare reușită nu copiază un șablon, ci creează echilibru vizual: alungește o față rotundă, îmblânzește trăsăturile prea dure sau adaugă structură acolo unde linia maxilarului este mai puțin pronunțată.
La Signature Hair Concept în Popești-Leordeni, fiecare programare începe cu o consultare de 2–3 minute înainte să pornim mașina de tuns. Iată exact cum analizăm fizionomia ta și ce stiluri îți recomandăm în funcție de forma feței.
Pasul 1: Cum îți identifici corect forma feței în 30 de secunde
Privește-te în oglindă din față, cu părul tras complet pe spate, și urmărește trei repere: lățimea frunții, distanța dintre pomeți și linia maxilarului, raportate la lungimea totală a feței.
Fața Ovală: Lungimea feței este puțin mai mare decât lățimea pomeților, iar unghiurile maxilarului sunt ușor rotunjite.
Fața Rotundă: Lățimea și lungimea feței sunt aproape egale, pomeții sunt zona cea mai lată, iar bărbia și maxilarul nu au unghiuri ascuțite.
Fața Pătrată: Fruntea, pomeții și maxilarul au aproape aceeași lățime, cu o mandibulă puternică și unghiulară.
Fața Alungită (Dreptunghiulară): Fața este vizibil mai lungă decât lată, adesea cu o frunte înaltă sau o bărbie mai lungă.
Fața Diamant sau Inimă: Pomeții (la diamant) sau fruntea (la inimă) sunt vizibil mai lați, în timp ce bărbia este mai îngustă.
Pasul 2: Ce tunsoare te avantajează în funcție de fizionomie
1. Tunsori pentru Fața Rotundă — Obiectiv: Înălțime și unghiuri
Dacă ai fața rotundă, greșeala principală este să lași mult volum pe laterale sau să alegi o tunsoare rotundă în creștet, care va lăți și mai mult chipul.
Ce îți recomandăm la scaun: Laterale scurte (Mid Skin Fade sau High Skin Fade ) combinate cu volum și structură în partea de sus: Quiff texturat, Pompadour modern, Faux Hawk discret sau Side Part cu volum.
Secretul pentru barbă: Evită barba rotunjită pe obraji. Un contur de barbă unghiular, puțin mai lung în zona bărbiei și scurtat pe laterale, va alungi optic fața.
2. Tunsori pentru Fața Pătrată — Obiectiv: Punerea în valoare a liniei masculine
Fața pătrată este considerată idealul masculin în frizerie, deoarece linia puternică a maxilarului susține atât tunsorile ultra-scurte, cât și pe cele clasice.
Ce îți recomandăm la scaun: Buzz Cut cu Skin Fade impecabil, French Crop texturat, Crew Cut sau un Side Part clasic.
Secretul pentru barbă: Un Stubble (barbă de 3–5 zile) conturat la brici sau cu ața pe pomeți îți va evidenția mandibula fără să încarce trăsăturile.
3. Tunsori pentru Fața Alungită / Dreptunghiulară — Obiectiv: Echilibrarea proporțiilor
Dacă ai fața alungită, evită combinația dintre un High Skin Fade ras până sus și un volum foarte înalt în creștet — această combinație îți va face capul să pară și mai lung.
Ce îți recomandăm la scaun: Taper Fade sau Low Fade (care păstrează o ușoară densitate pe laterale), Textured Crop cu breton (bretonul reduce optic înălțimea frunții) sau tunsori din foarfecă de lungime medie.
Secretul pentru barbă: Păstrează barba scurtă sub bărbie și puțin mai plină pe laterale pentru a adăuga lățime, nu lungime.
4. Tunsori pentru Fața Ovală — Obiectiv: Păstrarea simetriei
Cu o față ovală, ai libertate aproape totală. Proporțiile tale îți permit să experimentezi orice stil.
Ce îți recomandăm la scaun: De la Mid Skin Fade cu partea de sus texturată, până la Slick Back, Classic Taper sau Burst Fade. Singurul lucru de evitat este un breton foarte lung și greu, care îți acoperă complet fruntea și scurtează fața.
5. Tunsori pentru Fața Diamant / Inimă — Obiectiv: Echilibru între pomeți și maxilar
Pentru că pomeții sunt proeminenți iar bărbia este mai îngustă, lateralele rase complet până sus pot face pomeții să iasă exagerat în evidență.
Ce îți recomandăm la scaun: Fringe texturat, Low Taper sau Mid Fade cu textură lejeră în partea de sus. O barbă medie, mai plină în zona maxilarului, echilibrează perfect jumătatea inferioară a feței.
De ce forma feței este doar 50% din decizie?
Un Master Barber nu se uită doar la conturul feței. Când te așezi pe scaun la Signature Hair Concept, verificăm încă 4 elemente decisive:
Forma craniului și osul occipital: În funcție de construcția capului în partea din spate, stabilim dacă îți stă mai bine un Drop Fade (care coboară lin în spatele urechii) sau un fade drept.
Vârtejurile și direcția de creștere: Dacă ai un vârtej puternic în creștet, tăierea părului la o lungime greșită îl va face să stea „în picioare”. Îl lăsăm fie suficient de scurt încât să nu se ridice, fie suficient de lung încât propria greutate să îl așeze.
Densitatea firului și linia frontală (golfurile): Dacă linia părului este ușor retrasă la tâmple, un Textured Crop sau o tunsoare mai scurtă, mată, arată mult mai dens decât un păr lung dat pe spate cu luciu.
Timpul tău de dimineață: Dacă ne spui că dimineața nu vrei să petreci mai mult de 60 de secunde în fața oglinzii, îți vom face o tunsoare texturată din foarfecă, care se așază doar cu puțină pudră de volum sau pastă mată.
Nu ești sigur ce ți se potrivește? Lasă analiza pe mâna noastră!
Nu trebuie să vii cu lecția învățată. Adu 1–2 fotografii cu stiluri care îți plac, iar Andrei, Radu sau Cristian îți vor explica deschis cum le putem adapta fizionomiei tale.
Serviciul recomandat în MERO: Selectează „Tuns” (80 lei) pentru tunsoare completă (include consultare, orice tip de fade, spălat și styling) sau „Pachet Plus” (100 lei) dacă vrei să armonizăm atât tunsoarea, cât și forma bărbii în aceeași ședință.
Întrebări frecvente
Întrebări frecvente
Cum îmi dau seama ce formă de față am?
Privește-te în oglindă cu părul dat pe spate și observă unde e cea mai lată zonă — frunte, pomeți sau maxilar — și cât de lungă e fața față de lățime. Așa identifici forma ovală, rotundă, pătrată, alungită sau diamant/inimă.
Ce contează mai mult decât forma feței?
Forma craniului, vârtejurile, densitatea firului, linia frontală și cât timp aloci întreținerii dimineața. Un barber cu experiență le combină pe toate înainte de a alege tunsoarea.
Ce îi spun barberului înainte de tuns?
Adu 1–2 fotografii de referință, spune-i ce ți-a plăcut sau nu la tunsorile anterioare și cât timp vrei să aloci aranjării părului acasă. Barberul va adapta modelul la fizionomia ta.
Continuă documentarea
Continuă explorarea
Programare online
Alege ora pentru un tuns adaptat fizionomiei tale
Începem cu o consultare atentă și îți garantăm un look echilibrat și ușor de aranjat acasă.
Programează-te acum
/* Signature Hair Concept — main.js (vanilla, no dependencies) */
(function () {
„use strict”;
/* –––- Sticky / compact header –––- */
var header = document.querySelector(„.site-header”);
if (header) {
var onScroll = function () {
if (window.scrollY > 24) header.classList.add(„scrolled”);
else header.classList.remove(„scrolled”);
};
onScroll();
window.addEventListener(„scroll”, onScroll, { passive: true });
}
/* –––- Mobile menu –––- */
var burger = document.querySelector(„.burger”);
var mobileNav = document.getElementById(„mobile-nav”);
function closeMenu() {
if (!mobileNav) return;
mobileNav.classList.remove(„open”);
burger.setAttribute(„aria-expanded”, „false”);
document.body.classList.remove(„menu-open”);
}
if (burger && mobileNav) {
burger.addEventListener(„click”, function () {
var open = mobileNav.classList.toggle(„open”);
burger.setAttribute(„aria-expanded”, open ? „true” : „false”);
document.body.classList.toggle(„menu-open”, open);
});
mobileNav.querySelectorAll(„a”).forEach(function (a) {
a.addEventListener(„click”, closeMenu);
});
document.addEventListener(„keydown”, function (e) {
if (e.key === „Escape”) closeMenu();
});
}
/* –––- FAQ: native , no JS needed –––- */
/* –––- Scroll reveal –––- */
var reveals = document.querySelectorAll(„.reveal”);
if („IntersectionObserver” in window && reveals.length) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (en) {
if (en.isIntersecting) {
en.target.classList.add(„in”);
io.unobserve(en.target);
}
});
},
{ threshold: 0.12, rootMargin: „0px 0px -40px 0px” }
);
reveals.forEach(function (el) { io.observe(el); });
} else {
reveals.forEach(function (el) { el.classList.add(„in”); });
}
/* –––- Contact form validation –––- */
var form = document.getElementById(„contact-form”);
if (form) {
var setError = function (field, on) {
field.closest(„.form-field”).classList.toggle(„invalid”, on);
};
form.addEventListener(„submit”, function (e) {
e.preventDefault();
var ok = true;
var name = form.querySelector(„#cf-name”);
var email = form.querySelector(„#cf-email”);
var phone = form.querySelector(„#cf-phone”);
var msg = form.querySelector(„#cf-message”);
var emailRe = /^[^s@]+@[^s@]+.[^s@]+$/;
var phoneRe = /^[0-9+()s-]{7,}$/;
if (!name.value.trim()) { setError(name, true); ok = false; } else setError(name, false);
if (!emailRe.test(email.value.trim())) { setError(email, true); ok = false; } else setError(email, false);
if (!phoneRe.test(phone.value.trim())) { setError(phone, true); ok = false; } else setError(phone, false);
if (!msg.value.trim()) { setError(msg, true); ok = false; } else setError(msg, false);
var success = form.querySelector(„.form-success”);
var errorBox = form.querySelector(„.form-error”);
if (errorBox) errorBox.classList.remove(„show”);
if (!ok) {
var firstBad = form.querySelector(„.form-field.invalid input, .form-field.invalid textarea”);
if (firstBad) firstBad.focus();
return;
}
// Send via FormSubmit (AJAX) so the visitor stays on the page.
var submitBtn = form.querySelector(‘button[type=”submit”]’);
var endpoint = form.getAttribute(„action”);
if (!endpoint || endpoint.indexOf(„formsubmit.co”) === -1) {
// no endpoint configured -> just show success (frontend only)
if (success) success.classList.add(„show”);
form.reset();
return;
}
var ajaxUrl = endpoint.replace(„formsubmit.co/”, „formsubmit.co/ajax/”);
if (submitBtn) { submitBtn.disabled = true; submitBtn.dataset.label = submitBtn.textContent; submitBtn.textContent = „Se trimite…”; }
fetch(ajaxUrl, {
method: „POST”,
headers: { „Accept”: „application/json” },
body: new FormData(form)
})
.then(function (r) { return r.json(); })
.then(function (data) {
if (data && (data.success === true || data.success === „true”)) {
if (success) success.classList.add(„show”);
form.reset();
} else {
if (errorBox) errorBox.classList.add(„show”);
}
})
.catch(function () { if (errorBox) errorBox.classList.add(„show”); })
.finally(function () {
if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = submitBtn.dataset.label || „Trimite mesajul”; }
});
});
}
/* –––- Team showcase tabs –––- */
var teamTabs = Array.prototype.slice.call(document.querySelectorAll(„.team2__tab”));
var teamPanels = Array.prototype.slice.call(document.querySelectorAll(„.team2__panel”));
function selectTeam(i) {
teamTabs.forEach(function (t, j) {
var on = j === i;
t.classList.toggle(„is-active”, on);
t.setAttribute(„aria-selected”, on ? „true” : „false”);
t.setAttribute(„tabindex”, on ? „0” : „-1”);
var ind = t.querySelector(„.team2__tab-ind”);
if (ind) ind.innerHTML = on
? ”
: ‘+ ‘;
});
teamPanels.forEach(function (p, j) {
var on = j === i;
p.classList.toggle(„is-active”, on);
if (on) p.removeAttribute(„hidden”); else p.setAttribute(„hidden”, „”);
});
}
var hoverCapable = window.matchMedia && window.matchMedia(„(hover: hover)”).matches;
teamTabs.forEach(function (tab, i) {
tab.addEventListener(„click”, function () { selectTeam(i); });
if (hoverCapable) {
tab.addEventListener(„mouseenter”, function () { selectTeam(i); });
tab.addEventListener(„focus”, function () { selectTeam(i); });
}
tab.addEventListener(„keydown”, function (e) {
var n = teamTabs.length;
if (e.key === „ArrowRight” || e.key === „ArrowDown”) { e.preventDefault(); var a = (i + 1) % n; selectTeam(a); teamTabs[a].focus(); }
else if (e.key === „ArrowLeft” || e.key === „ArrowUp”) { e.preventDefault(); var b = (i – 1 + n) % n; selectTeam(b); teamTabs[b].focus(); }
});
});
/* –––- Gallery lightbox –––- */
var gItems = Array.prototype.slice.call(document.querySelectorAll(„.g2-item”));
var lb = document.getElementById(„lightbox”);
if (gItems.length && lb) {
var lbImg = lb.querySelector(„.lightbox__img”);
var idx = 0;
var srcs = gItems.map(function (it) {
return { src: it.getAttribute(„data-full”), alt: (it.querySelector(„img”) || {}).alt || „” };
});
function show(i) {
idx = (i + srcs.length) % srcs.length;
lbImg.src = srcs[idx].src;
lbImg.alt = srcs[idx].alt;
}
function openLb(i) {
show(i);
lb.classList.add(„open”);
lb.setAttribute(„aria-hidden”, „false”);
document.body.classList.add(„lightbox-open”);
}
function closeLb() {
lb.classList.remove(„open”);
lb.setAttribute(„aria-hidden”, „true”);
document.body.classList.remove(„lightbox-open”);
}
gItems.forEach(function (it, i) {
it.addEventListener(„click”, function () { openLb(i); });
it.addEventListener(„keydown”, function (e) {
if (e.key === „Enter” || e.key === ” „) { e.preventDefault(); openLb(i); }
});
});
lb.querySelector(„.lightbox__close”).addEventListener(„click”, closeLb);
lb.querySelector(„.lightbox__next”).addEventListener(„click”, function (e) { e.stopPropagation(); show(idx + 1); });
lb.querySelector(„.lightbox__prev”).addEventListener(„click”, function (e) { e.stopPropagation(); show(idx – 1); });
lb.addEventListener(„click”, function (e) { if (e.target === lb) closeLb(); });
document.addEventListener(„keydown”, function (e) {
if (!lb.classList.contains(„open”)) return;
if (e.key === „Escape”) closeLb();
else if (e.key === „ArrowRight”) show(idx + 1);
else if (e.key === „ArrowLeft”) show(idx – 1);
});
}
/* –––- Footer year –––- */
var y = document.getElementById(„year”);
if (y) y.textContent = new Date().getFullYear();
/* Signature dropdown interactions v1 */
var signatureNavGroups = Array.prototype.slice.call(document.querySelectorAll(„.nav.nav .nav-group, .mobile-nav .mobile-nav-group”));
signatureNavGroups.forEach(function (group) {
group.addEventListener(„toggle”, function () {
if (!group.open) return;
signatureNavGroups.forEach(function (other) { if (other !== group) other.open = false; });
});
});
document.addEventListener(„keydown”, function (event) {
if (event.key !== „Escape”) return;
var openGroup = signatureNavGroups.find(function (group) { return group.open; });
if (!openGroup) return;
signatureNavGroups.forEach(function (group) { group.open = false; });
if (openGroup.classList.contains(„mobile-nav-group”)) {
if (burger) burger.focus();
} else {
openGroup.querySelector(„summary”).focus();
}
});
document.addEventListener(„click”, function (event) {
if (event.target instanceof Element && !event.target.closest(„.nav.nav .nav-group, .mobile-nav .mobile-nav-group”)) {
signatureNavGroups.forEach(function (group) { group.open = false; });
}
});
})();