/* =========================================================
   M|Y Coiffure — "Halka & Kemer"
   Gece Egesi · Kireç · Bal Sarısı · Terrakota
   ========================================================= */
:root {
  --ink: #0C1A21;
  --ink-2: #13252E;
  --ink-3: #1B313B;
  --lime: #F2F1EC;
  --lime-2: #E7E6DF;
  --honey: #D7A85B;
  --honey-2: #E9C68A;
  --terra: #B5653F;
  --aegean: #2E6E86;
  --text: #15232A;
  --muted: #56646A;
  --muted-d: #A9B6BA;
  --line-d: rgba(242, 241, 236, .12);
  --line-l: rgba(12, 26, 33, .10);

  --f-display: "Zodiak", "Times New Roman", serif;
  --f-body: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --sec: clamp(6rem, 12vw, 10rem);
  --r-lg: 2rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6.5rem; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--lime);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
em { font-style: italic; }
:focus-visible { outline: 2px solid var(--honey); outline-offset: 3px; border-radius: 6px; }

/* grain */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip { position: absolute; left: -999px; top: 1rem; z-index: 120; background: var(--honey); color: var(--ink); padding: .6rem 1rem; border-radius: 99px; }
.skip:focus { left: 1rem; }

.wrap { width: min(100%, 1320px); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: var(--sec) 0; overflow-x: clip; }

/* ---------- type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  padding: .45rem .9rem; border-radius: 99px;
  background: rgba(12, 26, 33, .05); box-shadow: inset 0 0 0 1px var(--line-l);
  color: var(--ink); margin-bottom: 1.6rem;
}
.eyebrow--dark { background: rgba(242, 241, 236, .06); box-shadow: inset 0 0 0 1px var(--line-d); color: var(--honey-2); }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--honey); box-shadow: 0 0 0 4px rgba(215,168,91,.18); }

.h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: .98; letter-spacing: -.025em;
}
.h2 em { color: var(--terra); font-weight: 300; }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.55; }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--lime);
  position: relative; display: inline-flex; align-items: center; gap: .9rem;
  min-height: 3.4rem; padding: .45rem .5rem .45rem 1.5rem; border-radius: 99px;
  background: var(--bg); color: var(--fg); text-decoration: none; border: 0; cursor: pointer;
  font: 600 .98rem/1 var(--f-body); letter-spacing: .01em;
  overflow: hidden; isolation: isolate;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--ink); transform: translateY(101%); transition: transform .6s var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: scale(.98); }
.btn__ico {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: rgba(12, 26, 33, .12); transition: transform .5s var(--ease), background .5s var(--ease);
}
.btn__ico svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover .btn__ico { transform: translate(3px, -2px) scale(1.06); }
.btn--gold { --bg: var(--honey); --fg: var(--ink); box-shadow: 0 10px 30px -12px rgba(215, 168, 91, .65); }
.btn--gold:hover { color: var(--lime); }
.btn--gold:hover .btn__ico { background: rgba(242, 241, 236, .14); }
.section.bride .btn--gold::before, .services .btn--gold::before, .hero .btn--gold::before, .menu .btn--gold::before { background: var(--lime); }
.section.bride .btn--gold:hover, .services .btn--gold:hover, .hero .btn--gold:hover, .menu .btn--gold:hover { color: var(--ink); }
.section.bride .btn--gold:hover .btn__ico, .services .btn--gold:hover .btn__ico, .hero .btn--gold:hover .btn__ico, .menu .btn--gold:hover .btn__ico { background: rgba(12,26,33,.1); }
.btn--ghost { --bg: transparent; --fg: var(--lime); padding: .45rem 1.5rem; box-shadow: inset 0 0 0 1px rgba(242,241,236,.28); }
.btn--ghost::before { background: rgba(242,241,236,.1); }
.btn--sm { min-height: 2.75rem; font-size: .88rem; padding-left: 1.1rem; }
.btn--sm .btn__ico { width: 2rem; height: 2rem; }
.btn--block { width: 100%; justify-content: space-between; }

/* ---------- double bezel shell ---------- */
.shell { padding: .5rem; border-radius: var(--r-lg); background: rgba(12, 26, 33, .04); box-shadow: inset 0 0 0 1px var(--line-l); }
.shell__core { border-radius: calc(var(--r-lg) - .5rem); overflow: hidden; box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 30px 60px -40px rgba(12,26,33,.45); }
.shell figcaption, figure.shell > figcaption {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  padding: .8rem .8rem .3rem;
}
.arch { border-radius: 999px 999px var(--r-lg) var(--r-lg); overflow: hidden; }

/* ---------- header ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1rem var(--pad); pointer-events: none; transition: padding .6s var(--ease); }
.nav__pill {
  pointer-events: auto; margin: 0 auto; width: min(100%, 1180px);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: .55rem .55rem .55rem 1.4rem; border-radius: 99px;
  background: rgba(12, 26, 33, 0); box-shadow: inset 0 0 0 1px rgba(242,241,236,0);
  transition: background .6s var(--ease), box-shadow .6s var(--ease), width .6s var(--ease), backdrop-filter .6s var(--ease);
  color: var(--lime);
}
.nav.is-scrolled { padding-top: .6rem; }
.nav.is-scrolled .nav__pill {
  background: rgba(12, 26, 33, .78); box-shadow: inset 0 0 0 1px rgba(242,241,236,.1), 0 20px 40px -25px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  width: min(100%, 980px);
}
.wordmark { display: inline-flex; align-items: baseline; gap: .55rem; text-decoration: none; }
.wordmark__my { font-family: var(--f-display); font-size: 1.55rem; letter-spacing: .02em; display: inline-flex; align-items: center; gap: .32rem; line-height: 1; }
.wordmark__my i, .footer__mark i { display: inline-block; width: 1.5px; height: .95em; background: var(--honey); }
.wordmark__c { font-size: .7rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; }
.nav__links { display: flex; gap: .3rem; }
.nav__links a {
  position: relative; text-decoration: none; font-size: .9rem; font-weight: 500; padding: .55rem .85rem; border-radius: 99px;
  color: rgba(242,241,236,.82); transition: color .4s var(--ease), background .4s var(--ease);
}
.nav__links a:hover { color: var(--lime); background: rgba(242,241,236,.08); }
.burger { display: none; }

/* ---------- mobile menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 99; background: rgba(12, 26, 33, .94);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s;
  display: flex; align-items: flex-end;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__inner { width: 100%; padding: 7rem var(--pad) 2.5rem; display: flex; flex-direction: column; }
.menu__link {
  display: flex; align-items: baseline; gap: 1rem; text-decoration: none; color: var(--lime);
  font-family: var(--f-display); font-size: clamp(2.4rem, 11vw, 3.6rem); line-height: 1.15;
  padding: .25rem 0; border-bottom: 1px solid var(--line-d);
  transform: translateY(2.5rem); opacity: 0; transition: transform .8s var(--ease), opacity .8s var(--ease);
}
.menu__link small { font-family: var(--f-body); font-size: .75rem; color: var(--honey); letter-spacing: .15em; }
.menu.is-open .menu__link { transform: none; opacity: 1; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: .05s; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: .1s; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: .15s; }
.menu.is-open .menu__link:nth-child(5) { transition-delay: .2s; }
.menu__foot { margin-top: 2.2rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; opacity: 0; transition: opacity .8s .25s var(--ease); }
.menu.is-open .menu__foot { opacity: 1; }
.menu__tel { color: var(--muted-d); text-decoration: none; font-size: 1rem; letter-spacing: .05em; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100dvh; background: var(--ink); color: var(--lime);
  padding: clamp(7.5rem, 13vh, 9.5rem) 0 clamp(4rem, 8vh, 6rem); overflow: hidden;
  display: flex; align-items: center;
}
.hero__glow {
  position: absolute; inset: auto -10% -30% 30%; height: 80%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(215,168,91,.22), rgba(215,168,91,0)), radial-gradient(60% 50% at 20% 80%, rgba(46,110,134,.35), rgba(46,110,134,0));
}
.hero__grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; width: 100%; }
.hero__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(3.6rem, 10.5vw, 9.6rem); line-height: .9; letter-spacing: -.035em;
  margin-bottom: 2rem;
}
.hero__title .line { display: block; overflow: hidden; padding: .02em 0 .2em; margin-bottom: -.16em; }
.hero__title .line > span { display: inline-block; }
.hero__title em { color: var(--honey); font-weight: 300; padding-right: .06em; }
.hero__lead { max-width: 34rem; color: rgba(242,241,236,.78); font-size: clamp(1.05rem, 1.4vw, 1.2rem); margin-bottom: 2.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.6rem; }
.rating { display: inline-flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--lime); padding: .6rem 1.1rem .6rem .7rem; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line-d); transition: background .5s var(--ease); }
.rating:hover { background: rgba(242,241,236,.06); }
.rating__num { font-family: var(--f-display); font-size: 1.5rem; line-height: 1; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: rgba(215,168,91,.14); color: var(--honey-2); }
.rating__stars { color: var(--honey); width: 5.6rem; display: block; }
.rating__stars svg { width: 100%; display: block; }
.rating__txt { font-size: .86rem; color: var(--muted-d); }

.hero__visual { position: relative; justify-self: end; width: min(100%, 440px); }
.hero__arch { position: relative; aspect-ratio: 3 / 4.6; box-shadow: 0 50px 90px -40px rgba(0,0,0,.7); }
.hero__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero__ring { position: absolute; width: 118%; left: -9%; top: -7%; fill: none; stroke: var(--honey); stroke-width: .5; opacity: .7; pointer-events: none; overflow: visible; }
.hero__disc {
  position: absolute; left: -22%; bottom: 9%; width: 44%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 6px var(--ink), 0 0 0 7px rgba(215,168,91,.6), 0 30px 50px -20px rgba(0,0,0,.6);
}
.hero__disc img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 70%; }
.hero__caption { position: absolute; right: -.5rem; bottom: -2.2rem; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted-d); }
.hero__caption span { color: var(--honey-2); }
.hero__scroll { position: absolute; left: 50%; bottom: 1.4rem; width: 1.6rem; height: 2.6rem; margin-left: -.8rem; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(242,241,236,.3); }
.hero__scroll span { position: absolute; left: 50%; top: .5rem; width: 3px; height: .55rem; margin-left: -1.5px; border-radius: 3px; background: var(--honey); animation: scrollDot 2.2s var(--ease) infinite; }
@keyframes scrollDot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(.9rem); opacity: 0; } 100% { opacity: 0; } }

/* ---------- marquee ---------- */
.marquee { background: var(--honey); color: var(--ink); overflow: hidden; padding: 1.15rem 0; border-block: 1px solid rgba(12,26,33,.12); }
.marquee__track { display: flex; width: max-content; align-items: center; gap: 2rem; animation: marquee 38s linear infinite; }
.marquee__track span { font-family: var(--f-display); font-size: clamp(1.4rem, 2.6vw, 2.1rem); white-space: nowrap; font-style: italic; }
.marquee__track b { font-size: .9rem; font-weight: 400; opacity: .55; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- salon ---------- */
.salon__grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.25rem, 2.5vw, 2.5rem);
  grid-template-areas:
    "head head head head head head head big big big big big"
    "copy copy copy copy copy arch arch big big big big big"
    "wide wide wide wide wide wide wide wide note note note note";
}
.salon__head { grid-area: head; align-self: end; }
.salon__big { grid-area: big; align-self: start; }
.salon__big .shell__core { aspect-ratio: 4 / 5; }
.salon__big img, .salon__wide img, .salon__arch img { width: 100%; height: 100%; object-fit: cover; }
.salon__copy { grid-area: copy; display: flex; flex-direction: column; gap: 1.3rem; color: var(--muted); padding-top: 1rem; }
.salon__copy .lead { color: var(--text); }
.salon__arch { grid-area: arch; aspect-ratio: 9 / 15; align-self: start; margin-top: 1rem; }
.salon__wide { grid-area: wide; margin-top: clamp(0rem, 3vw, 2rem); }
.salon__wide .shell__core { aspect-ratio: 16 / 9; }
.salon__note { grid-area: note; align-self: center; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; padding: 2rem 0 2rem 1rem; }
.salon__note > svg { position: absolute; width: 15rem; left: -2rem; top: 50%; margin-top: -7.5rem; fill: none; stroke: var(--honey); stroke-width: .6; opacity: .8; pointer-events: none; }
.salon__note p { position: relative; font-family: var(--f-display); font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.3; color: var(--ink); }
.salon__note .btn::before { background: var(--ink); }
.salon__facts { display: grid; gap: .1rem; margin-top: .6rem; }
.salon__facts li { display: flex; align-items: center; gap: .9rem; padding: .85rem 0; border-top: 1px solid var(--line-l); color: var(--text); font-weight: 500; }
.salon__facts svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--terra); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- services ---------- */
.services { background: var(--ink); color: var(--lime); position: relative; overflow: hidden; }
.services .h2 em, .bride .h2 em { color: var(--honey); }
.services__head { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; align-items: end; margin-bottom: clamp(3rem, 6vw, 5rem); }
.services__head .eyebrow { grid-column: 1 / -1; justify-self: start; }
.services__intro { color: var(--muted-d); max-width: 30rem; justify-self: end; }
.services__body { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.svc { counter-reset: svc; border-top: 1px solid var(--line-d); }
.svc__item {
  position: relative; display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; align-items: start;
  padding: 1.7rem 0; border-bottom: 1px solid var(--line-d); cursor: default;
}
.svc__item::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--honey);
  transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease);
}
.svc__item.is-active::before { transform: scaleX(1); }
.svc__no { font-family: var(--f-body); font-size: .8rem; letter-spacing: .15em; color: var(--muted-d); padding-top: .75rem; transition: color .5s var(--ease); }
.svc__item h3 { font-family: var(--f-display); font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: -.015em; transition: color .5s var(--ease), transform .6s var(--ease); }
.svc__item p { color: var(--muted-d); max-width: 34rem; margin-top: .5rem; font-size: 1rem; }
.svc__item.is-active h3 { color: var(--honey-2); transform: translateX(.4rem); }
.svc__item.is-active .svc__no { color: var(--honey); }
.svc__thumb { display: none; }
.svc__preview { position: sticky; top: 7.5rem; }
.svc__frame { aspect-ratio: 3 / 4.2; box-shadow: 0 50px 80px -40px rgba(0,0,0,.7); background: var(--ink-3); }
.svc__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; transition: opacity .45s var(--ease), transform 1.2s var(--ease); }
.svc__frame img.is-swapping { opacity: 0; transform: scale(1.05); }
.svc__ring { position: absolute; width: 50%; right: -18%; bottom: -10%; fill: none; stroke: var(--honey); stroke-width: .6; opacity: .6; }
.services__cta { margin-top: clamp(3.5rem, 6vw, 5rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding: 1.6rem 1.6rem 1.6rem 2rem; border-radius: var(--r-lg); background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-d), inset 0 1px 0 rgba(255,255,255,.04); }
.services__cta p { font-family: var(--f-display); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.3; max-width: 40rem; }

/* ---------- works ---------- */
.works { background: var(--lime); padding: var(--sec) 0 calc(var(--sec) * .8); overflow: hidden; }
.works__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.works__note { color: var(--muted); max-width: 22rem; }
.works__viewport { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-left: max(var(--pad), calc((100vw - 1320px) / 2 + var(--pad))); }
.works__viewport::-webkit-scrollbar { display: none; }
.works__track { display: flex; gap: clamp(1rem, 2vw, 1.75rem); width: max-content; padding-right: var(--pad); align-items: flex-end; }
.work { width: clamp(15rem, 26vw, 23rem); scroll-snap-align: start; flex: none; }
.work--tall { width: clamp(16rem, 30vw, 27rem); }
.work figure { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 4; background: var(--lime-2); }
.work--tall figure { aspect-ratio: 3 / 4.4; }
.work:nth-child(2) figure { border-radius: 999px 999px var(--r-lg) var(--r-lg); }
.work img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; transition: transform 1.4s var(--ease); }
.work figure:hover img { transform: scale(1.06); }
.work figcaption {
  position: absolute; left: .7rem; right: .7rem; bottom: .7rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .8rem 1.1rem; border-radius: calc(var(--r-lg) - .7rem); background: rgba(12,26,33,.72); color: var(--lime);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(.4rem); opacity: .94; transition: transform .7s var(--ease), opacity .7s var(--ease);
}
.work figure:hover figcaption { transform: none; opacity: 1; }
.work figcaption span { font-family: var(--f-display); font-size: 1.15rem; }
.work figcaption small { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--honey-2); white-space: nowrap; }
.work--end { width: clamp(14rem, 22vw, 19rem); }
.work__ig {
  aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem; text-decoration: none;
  padding: 1.8rem; border-radius: var(--r-lg); background: var(--ink); color: var(--lime); position: relative; overflow: hidden;
  transition: transform .7s var(--ease);
}
.work__ig:hover { transform: translateY(-6px); }
.work__ig svg { position: absolute; top: 1.8rem; left: 1.8rem; width: 2.4rem; height: 2.4rem; fill: none; stroke: var(--honey); stroke-width: 1.1; }
.work__ig strong { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; }
.work__ig span { color: var(--muted-d); font-size: .95rem; }
.work__ig i { position: absolute; top: 1.6rem; right: 1.8rem; font-style: normal; font-size: 1.6rem; color: var(--honey); transition: transform .6s var(--ease); }
.work__ig:hover i { transform: translate(4px, -4px); }
.works.is-pinned { min-height: 100vh; padding: 7.5rem 0 3rem; display: flex; flex-direction: column; justify-content: center; }
.works.is-pinned .works__viewport { overflow: visible; scroll-snap-type: none; }
.works.is-pinned .work { width: 34vh; }
.works.is-pinned .work--tall { width: 38vh; }
.works.is-pinned .work--end { width: 30vh; }
.works.is-pinned .works__head { margin-bottom: 2.5rem; }

/* ---------- bride ---------- */
.bride { background: #081217; color: var(--lime); }
.bride__grid { display: grid; grid-template-columns: 1fr 1.05fr .7fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.bride__main { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 4; }
.bride__main img, .bride__side img { width: 100%; height: 100%; object-fit: cover; }
.bride__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.bride__copy .eyebrow { margin-bottom: 0; }
.bride__copy p:not(.eyebrow):not(.lead) { color: var(--muted-d); }
.bride__side { aspect-ratio: 9 / 15; align-self: end; transform: translateY(2.5rem); }

/* ---------- proof ---------- */
.proof { background: var(--honey); color: var(--ink); padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.proof__grid { display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: end; gap: 2rem; }
.proof__item { display: flex; flex-direction: column; gap: .4rem; padding-left: 1.4rem; border-left: 1px solid rgba(12,26,33,.25); }
.proof__item strong { font-family: var(--f-display); font-weight: 400; font-size: clamp(3rem, 6vw, 5rem); line-height: .95; letter-spacing: -.03em; }
.proof__item span { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.proof__link { text-decoration: none; font-weight: 600; padding: .9rem 1.3rem; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(12,26,33,.35); transition: background .5s var(--ease), color .5s var(--ease); white-space: nowrap; }
.proof__link:hover { background: var(--ink); color: var(--honey-2); }

/* ---------- contact ---------- */
.contact__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.contact__copy .lead { color: var(--muted); margin: 1.5rem 0 2.2rem; max-width: 34rem; }
.book { max-width: 34rem; }
.book__core { background: #fff; padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.field input, .field select {
  width: 100%; min-height: 3.3rem; padding: .8rem 1.1rem; border-radius: 1rem; border: 0;
  background: var(--lime); box-shadow: inset 0 0 0 1px var(--line-l);
  font: 500 1rem var(--f-body); color: var(--text); appearance: none; -webkit-appearance: none;
  transition: box-shadow .4s var(--ease), background .4s var(--ease);
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C1A21' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem; padding-right: 2.8rem; }
.field input:focus, .field select:focus { outline: none; background-color: #fff; box-shadow: inset 0 0 0 1.5px var(--honey), 0 0 0 4px rgba(215,168,91,.18); }
.book .btn--block { margin-top: .4rem; }
.contact__side { display: grid; gap: 2rem; }
.contact__img { aspect-ratio: 4 / 4.4; }
.contact__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.channels { display: grid; border-top: 1px solid var(--line-l); }
.channels a { display: flex; align-items: center; gap: 1.1rem; padding: 1.05rem .2rem; border-bottom: 1px solid var(--line-l); text-decoration: none; transition: padding .5s var(--ease), color .5s var(--ease); }
.channels a:hover { padding-left: .8rem; color: var(--terra); }
.channels svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--terra); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.channels span { display: flex; flex-direction: column; font-weight: 500; line-height: 1.35; }
.channels small { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--muted-d); padding: clamp(4rem, 8vw, 6rem) 0 calc(2rem + env(safe-area-inset-bottom)); overflow: hidden; }
.footer__mark { font-family: var(--f-display); color: var(--lime); font-size: clamp(4.5rem, 17vw, 15rem); line-height: .9; letter-spacing: -.04em; display: flex; align-items: center; gap: .1em; white-space: nowrap; }
.footer__mark i { width: 2px; height: .8em; }
.footer__mark em { color: var(--honey); font-weight: 300; font-size: .42em; margin-left: .25em; align-self: flex-end; padding-bottom: .25em; }
.footer__row { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-d); font-size: .95rem; }
.footer__row nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer__row a { text-decoration: none; color: var(--lime); transition: color .4s var(--ease); }
.footer__row a:hover { color: var(--honey); }
.footer__demo { margin-top: 2rem; font-size: .78rem; opacity: .7; }

/* ---------- FAB ---------- */
.fab {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 95; display: none; align-items: center; gap: .55rem;
  padding: .8rem 1.15rem .8rem .95rem; border-radius: 99px; background: var(--honey); color: var(--ink); text-decoration: none; font-weight: 600;
  box-shadow: 0 16px 30px -12px rgba(12,26,33,.55); transform: translateY(150%); transition: transform .6s var(--ease);
}
.fab svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fab.is-visible { transform: none; }

/* ---------- reveal (JS only) ---------- */
html.js .reveal { opacity: 0; transform: translateY(2.2rem); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal-img { clip-path: inset(14% 8% 14% 8% round 2rem); transition: clip-path 1.4s var(--ease); }
html.js .reveal-img img { transform: scale(1.15); transition: transform 1.8s var(--ease); }
html.js .reveal-img.is-in { clip-path: inset(0 0 0 0 round 0); }
html.js .reveal-img.arch { clip-path: inset(14% 8% 14% 8% round 999px 999px 2rem 2rem); }
html.js .reveal-img.arch.is-in { clip-path: inset(0 0 0 0 round 999px 999px 2rem 2rem); }
html.js .reveal-img.is-in img { transform: scale(1); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .burger {
    display: grid; place-items: center; position: relative; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(242,241,236,.1); box-shadow: inset 0 0 0 1px rgba(242,241,236,.16);
  }
  .burger span { position: absolute; width: 1.1rem; height: 1.5px; background: var(--lime); border-radius: 2px; transition: transform .6s var(--ease); }
  .burger span:first-child { transform: translateY(-3.5px); }
  .burger span:last-child { transform: translateY(3.5px); }
  .burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
  .nav__pill { gap: .6rem; }
  .nav__cta { margin-left: auto; }

  .salon__grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: "head head head head head head" "big big big big arch arch" "copy copy copy copy copy copy" "wide wide wide wide wide wide" "note note note note note note";
  }
  .salon__arch { margin-top: 0; align-self: end; }
  .services__body { grid-template-columns: 1fr; }
  .svc__preview { display: none; }
  .svc__item { grid-template-columns: 3rem 1fr 5.5rem; }
  .svc__thumb { display: block; width: 5.5rem; height: 7rem; object-fit: cover; border-radius: 99px 99px 1rem 1rem; }
  .bride__grid { grid-template-columns: 1fr 1fr; }
  .bride__copy { grid-column: 1 / -1; order: -1; max-width: 40rem; }
  .bride__side { transform: none; }
  .proof__grid { grid-template-columns: repeat(3, 1fr); }
  .proof__link { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 760px) {
  body { font-size: 1rem; }
  html { scroll-padding-top: 5.5rem; }
  .nav { padding: .7rem .75rem; }
  .nav__pill { padding-left: 1rem; }
  .nav__cta { display: none; }
  .burger { margin-left: auto; }
  .hero { padding-top: 6.5rem; padding-bottom: 4.5rem; min-height: auto; }
  .hero__grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .hero__title { font-size: clamp(3.4rem, 17vw, 5rem); margin-bottom: 1.5rem; }
  .hero__actions .btn { width: 100%; justify-content: space-between; }
  .hero__actions .btn--ghost { justify-content: center; }
  .hero__visual { justify-self: center; width: 78%; margin-right: -6%; }
  .hero__disc { left: -26%; width: 48%; }
  .hero__caption { right: 0; }
  .hero__scroll { display: none; }
  .rating { flex-wrap: wrap; }

  .salon__grid { grid-template-columns: 1fr 1fr; gap: 1rem; grid-template-areas: "head head" "big big" "copy copy" "arch wide" "note note"; }
  .salon__note { padding: 2.5rem 0 0; }
  .salon__note > svg { width: 11rem; left: auto; right: -3rem; top: 0; margin-top: 0; }
  .salon__note .btn { width: 100%; justify-content: space-between; }
  .salon__wide { margin-top: 0; align-self: end; }
  .salon__wide .shell__core { aspect-ratio: 3 / 4; }
  .salon__wide img { object-position: 62% 50%; }
  .salon__copy { padding: 1rem 0; }

  .services__head { grid-template-columns: 1fr; }
  .services__intro { justify-self: start; margin-top: 1.2rem; }
  .svc__item { grid-template-columns: 1fr 4.6rem; gap: .2rem 1rem; padding: 1.4rem 0; }
  .svc__no { grid-column: 1 / -1; padding-top: 0; }
  .svc__thumb { width: 4.6rem; height: 6rem; grid-column: 2; grid-row: 2; }
  .svc__main { grid-column: 1; grid-row: 2; }
  .svc__item.is-active h3 { transform: none; }
  .services__cta { padding: 1.5rem; }
  .services__cta .btn { width: 100%; justify-content: space-between; }

  .works__head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .work, .work--tall { width: 74vw; }
  .work--end { width: 60vw; }

  .bride__grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .bride__main { aspect-ratio: 3 / 4.6; }
  .bride__side { aspect-ratio: 3 / 4.6; }

  .proof__grid { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .proof__item:last-of-type { grid-column: 1 / -1; }

  .contact__grid { grid-template-columns: 1fr; }
  .contact__img { aspect-ratio: 4 / 3.6; }
  .fab { display: inline-flex; }
  .footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  .footer__mark em { font-size: .36em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html.js .reveal, html.js .reveal-img, html.js .reveal-img img { opacity: 1; transform: none; clip-path: none; }
  .marquee__track { animation: none; }
}