:root {
  --ink:#111;
  --char:#1c1c1c;
  --paper:#f4efe6;
  --gold:#b69252;
  --goldl:#d3b577;
  --walnut:#5b3925;
  --line:rgba(244,239,230,.22);
  --sans:'DM Sans',sans-serif;
  --serif:'Playfair Display',serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  line-height:1.5
}
a {
  color:inherit;
  text-decoration:none
}
img {
  display:block;
  max-width:100%
}
.site-header {
  height:82px;
  display:flex;
  align-items:center;
  padding:12px 4.5vw;
  position:absolute;
  top:0;
  width:100%;
  z-index:5;
  border-bottom:1px solid rgba(244,239,230,.16)
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--serif);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.04em
}
.brand img {
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 42%;
  filter:saturate(.8)
}
nav {
  margin-left:auto;
  display:flex;
  gap:28px;
  font-size:13px;
  letter-spacing:.03em
}
nav a {
  opacity:.85
}
nav a:hover {
  color:var(--goldl)
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  background:var(--gold);
  color:var(--ink);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:16px 20px;
  min-height:50px;
  border:1px solid var(--gold);
  transition:.25s
}
.button:hover {
  background:var(--goldl);
  transform:translateY(-2px)
}
.button b {
  font-size:18px;
  line-height:0
}
.header-cta {
  margin-left:28px;
  padding:12px 15px;
  min-height:42px
}
.menu {
  display:none
}
.hero {
  min-height:720px;
  height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden
}
.hero-image {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(12,10,8,.9) 5%,rgba(12,10,8,.53) 58%,rgba(12,10,8,.25)),url('Assests/interior-clean.jpeg') center 52%/cover;
  filter:saturate(.88)
}
.grain {
  position:absolute;
  inset:0;
  opacity:.17;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")
}
.hero-copy {
  position:relative;
  z-index:1;
  padding:120px 8vw 70px;
  max-width:720px
}
.eyebrow {
  color:var(--goldl);
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  margin:0 0 22px;
  text-transform:uppercase
}
.hero h1,h2 {
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-.055em;
  line-height:.98;
  margin:0
}
.hero h1 {
  font-size:clamp(54px,7.3vw,104px)
}
h1 em,h2 em {
  color:var(--goldl);
  font-weight:600
}
.hero-lede {
  max-width:410px;
  font-size:17px;
  line-height:1.6;
  margin:30px 0
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:27px
}
.text-link {
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-bottom:1px solid var(--gold);
  padding:10px 0
}
.text-link span,.text-link b {
  margin-left:10px;
  color:var(--goldl);
  font-size:16px
}
.hero-bottom {
  position:absolute;
  bottom:25px;
  z-index:1;
  width:100%;
  padding:0 4.5vw;
  display:flex;
  justify-content:space-between;
  color:rgba(244,239,230,.72);
  font-size:9px;
  font-weight:700;
  letter-spacing:.15em
}
.scroll {
  color:var(--goldl)
}
.section {
  padding:128px 8vw
}
.intro {
  background:var(--paper);
  color:var(--ink);
  padding:110px 8vw
}
.intro .eyebrow {
  color:var(--walnut)
}
h2 {
  font-size:clamp(42px,5vw,73px)
}
.intro h2 {
  max-width:850px
}
.intro h2 em {
  color:var(--walnut)
}
.intro-details {
  border-top:1px solid rgba(17,17,17,.3);
  margin-top:60px;
  padding-top:25px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:25px
}
.intro-details p {
  max-width:400px;
  margin:0;
  font-size:16px
}
.intro-details div {
  border-left:1px solid rgba(17,17,17,.3);
  padding-left:20px
}
.intro-details strong {
  display:block;
  font:600 34px var(--serif);
  color:var(--walnut)
}
.intro-details span {
  font-size:12px
}
.services {
  background:var(--char)
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:62px
}
.section-heading>p {
  max-width:310px;
  font-size:14px;
  color:rgba(244,239,230,.74);
  margin:0
}
.service-list {
  border-top:1px solid var(--line)
}
.service-list article {
  display:grid;
  grid-template-columns:55px 1.4fr 100px 82px;
  align-items:center;
  gap:20px;
  padding:26px 0;
  border-bottom:1px solid var(--line)
}
.service-list article>span {
  color:var(--goldl);
  font:italic 17px var(--serif)
}
.service-list h3,.barber-grid h3,.contact h3 {
  margin:0;
  font:600 25px var(--serif);
  letter-spacing:-.03em
}
.service-list p {
  color:rgba(244,239,230,.67);
  font-size:13px;
  margin:5px 0 0
}
.service-list strong {
  font:600 26px var(--serif);
  text-align:right
}
.service-list small {
  display:block;
  color:var(--goldl);
  font:700 9px var(--sans);
  letter-spacing:.1em;
  text-transform:uppercase
}
.service-book {
  background:none;
  border:0;
  color:var(--goldl);
  font:700 11px var(--sans);
  text-transform:uppercase;
  letter-spacing:.06em;
  cursor:pointer
}
.service-book b {
  font-size:17px
}
.barbers {
  background:#151412
}
.barber-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr
}
.barber-grid article {
  min-height:360px;
  padding:35px;
  border:1px solid var(--line)
}
.avatar {
  height:145px;
  margin:-35px -35px 28px;
  display:grid;
  place-items:center;
  font:600 40px var(--serif)
}
.avatar-ej {
  background:linear-gradient(145deg,#6f462b,#18130f);
  color:var(--goldl)
}
.avatar-placeholder {
  background:#3a302a;
  color:rgba(244,239,230,.6)
}
.barber-grid .eyebrow {
  font-size:9px;
  margin-bottom:8px
}
.barber-grid article>p:last-child {
  color:rgba(244,239,230,.65);
  font-size:13px;
  max-width:245px
}
.available {
  background:var(--gold);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  justify-content:center
}
.available-mark {
  font-size:26px;
  margin-bottom:30px
}
.available h3 {
  font-size:32px
}
.available p {
  font-size:14px
}
.available a {
  font-size:11px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  border-bottom:1px solid var(--ink);
  width:max-content;
  margin-top:15px
}
.gallery {
  background:var(--paper);
  color:var(--ink)
}
.gallery .eyebrow {
  color:var(--walnut)
}
.gallery h2 em {
  color:var(--walnut)
}
.gallery-head {
  display:flex;
  align-items:end;
  gap:35px;
  margin-bottom:42px
}
.gallery-head span {
  font-size:13px;
  margin-bottom:7px
}
.gallery-grid {
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-rows:300px 200px;
  gap:15px
}
.gallery figure {
  margin:0;
  overflow:hidden
}
.gallery figure img {
  width:100%;
  height:100%;
  object-fit:cover
}
.gallery .large {
  grid-row:span 2
}
.gallery .large img {
  object-position:center 42%;
  filter:saturate(.78)
}
.quote {
  background:var(--walnut);
  color:var(--paper);
  padding:36px;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.quote blockquote {
  font:600 25px/1.18 var(--serif);
  margin:0
}
.quote figcaption {
  font-size:11px;
  letter-spacing:.06em
}
.detail img {
  filter:sepia(.2) saturate(.75);
  object-position:45% 20%
}
.shop {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  padding:0;
  background:#211d19
}
.shop-image {
  min-height:590px
}
.shop-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.7);
  object-position:40% center
}
.shop-copy {
  padding:100px 9vw 70px 7vw
}
.shop-copy>p:not(.eyebrow) {
  max-width:390px;
  color:rgba(244,239,230,.72);
  font-size:16px;
  margin:30px 0
}
.attributes {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:28px 0 40px
}
.attributes span {
  border:1px solid var(--line);
  padding:8px 10px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em
}
.booking {
  background:#0e0d0c;
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:10vw;
  padding:125px 8vw
}
.booking-intro {
  position:sticky;
  align-self:start;
  top:45px
}
.booking-intro>p:not(.eyebrow) {
  font-size:15px;
  color:rgba(244,239,230,.68);
  max-width:330px;
  margin:30px 0
}
.booking-note {
  border-top:1px solid var(--line);
  padding-top:20px;
  display:flex;
  gap:12px
}
.booking-note span {
  color:var(--goldl)
}
.booking-note p {
  margin:0!important;
  font-size:12px!important
}
form {
  background:#1b1917;
  padding:42px
}
fieldset {
  border:0;
  padding:0;
  margin:30px 0
}
legend {
  font:600 20px var(--serif);
  margin-bottom:18px
}
.form-progress {
  display:flex;
  align-items:center;
  gap:8px
}
.form-progress > span:not(.progress-line) {
  display:grid;
  place-items:center;
  border:1px solid var(--gold);
  width:23px;
  height:23px;
  border-radius:50%;
  font-size:10px;
  color:var(--goldl)
}
.form-progress > span.active {
  background:var(--gold);
  color:var(--ink)
}
.progress-line {
  height:1px;
  flex:1;
  background:var(--line)
}
.field {
  margin-bottom:15px
}
.field label {
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  margin-bottom:7px
}
.field label b {
  color:var(--goldl)
}
.field label span {
  color:rgba(244,239,230,.55);
  font-weight:400
}
input,select,textarea {
  appearance:none;
  width:100%;
  background:#282522;
  color:var(--paper);
  border:1px solid transparent;
  border-bottom-color:#635a50;
  font:14px var(--sans);
  padding:13px 12px;
  border-radius:0
}
input:focus,select:focus,textarea:focus {
  outline:2px solid var(--gold);
  outline-offset:1px
}
select {
  background-image:linear-gradient(45deg,transparent 50%,var(--goldl) 50%),linear-gradient(135deg,var(--goldl) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat
}
textarea {
  min-height:78px;
  resize:vertical
}
.two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}
.field-hint,.disclaimer {
  font-size:11px;
  color:rgba(244,239,230,.55);
  margin-top:-5px
}
.submit {
  width:100%;
  border:0;
  cursor:pointer
}
.validation {
  color:#e2ad70;
  font-size:12px;
  min-height:18px;
  margin:0 0 12px
}
.disclaimer {
  text-align:center;
  margin:13px 0 0
}
.contact {
  background:var(--paper);
  color:var(--ink);
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:60px
}
.contact .eyebrow {
  color:var(--walnut)
}
.contact h2 em {
  color:var(--walnut)
}
.contact-cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0
}
.contact-cards article {
  border-left:1px solid rgba(17,17,17,.24);
  padding:0 20px
}
.contact-cards span {
  color:var(--walnut);
  font:italic 18px var(--serif)
}
.contact-cards h3 {
  font-size:20px;
  margin:18px 0 8px
}
.contact-cards p {
  font-size:12px;
  margin:0
}
.contact-cards address {
  margin:0;
  font-size:12px;
  font-style:normal;
  line-height:1.65
}
.contact-cards em {
  font-size:10px;
  color:#765d44
}
.site-footer {
  padding:42px 8vw 22px;
  background:#131210;
}
.footer-content {
  display:grid;
  grid-template-columns:1.25fr 1fr auto;
  align-items:center;
  gap:40px;
  padding-bottom:30px
}
.footer-brand p {
  margin:10px 0 0;
  color:rgba(244,239,230,.65);
  font-size:13px
}
.footer-contact {
  margin:0;
  color:rgba(244,239,230,.65);
  font-size:12px;
  font-style:normal;
  line-height:1.65
}
.footer-contact a {
  color:var(--goldl)
}
.footer-cta {
  min-width:190px
}
.footer-bottom {
  border-top:1px solid var(--line);
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.footer-bottom small {
  color:rgba(244,239,230,.45);
  font-size:10px
}
.footer-bottom a {
  color:var(--goldl);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}
.mobile-book {
  display:none
}
 @media(max-width:760px) {
  .site-header {
    height:68px;
    padding:9px 5vw
  }
  .brand {
    font-size:18px
  }
  .brand img {
    width:37px;
    height:37px
  }
  nav {
    display:none;
    position:absolute;
    top:68px;
    left:0;
    right:0;
    padding:20px 5vw;
    background:#171513;
    border-top:1px solid var(--line);
    flex-direction:column;
    gap:16px
  }
  nav.open {
    display:flex
  }
  .menu {
    display:flex;
    margin-left:auto;
    background:none;
    color:var(--paper);
    border:0;
    font:700 10px var(--sans);
    text-transform:uppercase;
    letter-spacing:.1em;
    align-items:center;
    gap:8px
  }
  .menu-lines {
    color:var(--goldl);
    font-size:18px;
    line-height:1
  }
  .header-cta {
    display:none
  }
  .hero {
    min-height:660px;
    height:88vh
  }
  .hero-image {
    background:linear-gradient(0deg,rgba(12,10,8,.9),rgba(12,10,8,.2)),url('Assests/interior-clean.jpeg') 58% center/cover
  }
  .hero-copy {
    padding:150px 7vw 70px;
    align-self:flex-end
  }
  .hero h1 {
    font-size:54px
  }
  .hero-lede {
    font-size:15px;
    margin:20px 0 26px
  }
  .hero-actions {
    align-items:flex-start;
    flex-direction:column;
    gap:12px
  }
  .hero-bottom {
    padding:0 7vw;
    font-size:8px
  }
  .hero-bottom span:nth-child(2) {
    display:none
  }
  .scroll {
    display:none
  }
  .section,.intro {
    padding:80px 7vw
  }
  .intro h2 {
    font-size:39px
  }
  .intro-details {
    margin-top:38px;
    grid-template-columns:1fr 1fr;
    gap:20px
  }
  .intro-details p {
    grid-column:1/-1;
    margin-bottom:12px
  }
  .intro-details div {
    padding-left:12px
  }
  .section-heading {
    display:block;
    margin-bottom:38px
  }
  .section-heading>p {
    margin-top:22px
  }
  .service-list article {
    grid-template-columns:25px 1fr 54px;
    gap:10px;
    padding:20px 0
  }
  .service-list article>div {
    grid-column:2
  }
  .service-list article>strong {
    grid-column:3;
    grid-row:1;
    text-align:right;
    font-size:21px
  }
  .service-list article>button {
    grid-column:3;
    grid-row:2
  }
  .service-list h3 {
    font-size:21px
  }
  .service-list p {
    font-size:11px
  }
  .barber-grid {
    grid-template-columns:1fr
  }
  .barber-grid article {
    min-height:280px
  }
  .gallery-head {
    display:block
  }
  .gallery-head span {
    display:block;
    margin-top:12px
  }
  .gallery-grid {
    grid-template-columns:1fr;
    grid-template-rows:250px 190px 180px
  }
  .gallery .large {
    grid-row:auto
  }
  .shop {
    grid-template-columns:1fr
  }
  .shop-image {
    min-height:320px
  }
  .shop-copy {
    padding:70px 7vw
  }
  .booking {
    display:block;
    padding:80px 7vw
  }
  .booking-intro {
    position:static;
    margin-bottom:40px
  }
  .booking-intro h2 {
    font-size:45px
  }
  form {
    padding:24px 18px
  }
  .two-col {
    grid-template-columns:1fr;
    gap:0
  }
  .contact {
    grid-template-columns:1fr;
    gap:40px
  }
  .contact-cards {
    grid-template-columns:1fr
  }
  .contact-cards article {
    border-left:0;
    border-top:1px solid rgba(17,17,17,.2);
    padding:16px 0
  }
  .contact-cards h3 {
    margin:7px 0 3px
  }
  .site-footer {
    padding:40px 7vw 90px
  }
  .footer-content {
    grid-template-columns:1fr;
    gap:24px
  }
  .footer-cta {
    width:100%
  }
  .footer-bottom {
    align-items:flex-start;
    gap:12px;
    flex-direction:column
  }
  .mobile-book {
    display:flex;
    position:fixed;
    bottom:12px;
    left:12px;
    right:12px;
    z-index:8;
    background:var(--gold);
    color:var(--ink);
    align-items:center;
    justify-content:space-between;
    padding:15px 18px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    box-shadow:0 5px 24px #0007
  }
  .mobile-book b {
    font-size:18px
  }
  .site-header:has(nav.open) {
    background:#171513
  }
}
 @media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important
  }
}
 /* Cinematic hero treatment */ .hero {
  min-height:790px;
  height:100svh;
  align-items:flex-start
}
.hero-image {
  background:linear-gradient(90deg,rgba(4,4,4,.92) 0%,rgba(4,4,4,.82) 27%,rgba(4,4,4,.2) 63%,rgba(4,4,4,.1) 100%),url('Assests/interior-clean.jpeg') center 48%/cover;
  filter:saturate(.78) contrast(1.08)
}
.hero-vignette {
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 38%,rgba(0,0,0,.36));
  z-index:0;
  pointer-events:none
}
.hero-copy {
  padding:clamp(145px,20vh,205px) 8vw 0;
  max-width:760px
}
.hero-copy .eyebrow {
  margin-bottom:24px
}
.hero h1 {
  font-size:clamp(54px,5.4vw,83px);
  letter-spacing:-.055em;
  line-height:1.04;
  text-transform:uppercase
}
.hero h1 em {
  font-style:normal;
  white-space:nowrap
}
.hero-rule {
  display:block;
  width:48px;
  height:1px;
  background:var(--goldl);
  margin:20px 0 16px
}
.hero-lede {
  font-size:15px;
  line-height:1.55;
  margin:0 0 28px
}
.hero-actions {
  gap:14px
}
.hero-outline {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:50px;
  padding:14px 22px;
  border:1px solid rgba(244,239,230,.75);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:.2s
}
.hero-outline:hover {
  border-color:var(--goldl);
  color:var(--goldl)
}
.hero-promise {
  position:absolute;
  z-index:2;
  left:8vw;
  right:8vw;
  bottom:30px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:rgba(8,8,8,.88);
  border:1px solid rgba(182,146,82,.55);
  backdrop-filter:blur(4px)
}
.hero-promise article {
  min-height:134px;
  padding:22px 18px;
  text-align:center;
  border-right:1px solid rgba(182,146,82,.35)
}
.hero-promise article:last-child {
  border-right:0
}
.hero-promise i {
  display:block;
  color:var(--goldl);
  font-size:24px;
  font-style:normal;
  line-height:1;
  margin-bottom:12px
}
.hero-promise h2 {
  font:700 12px var(--sans);
  letter-spacing:.055em;
  text-transform:uppercase
}
.hero-promise p {
  margin:8px auto 0;
  max-width:150px;
  color:rgba(244,239,230,.72);
  font-size:11px;
  line-height:1.4
}
 @media(max-width:760px) {
  .hero {
    min-height:760px;
    height:auto;
    align-items:flex-start
  }
  .hero-image {
    background:linear-gradient(0deg,rgba(5,5,5,.98) 5%,rgba(5,5,5,.35) 65%,rgba(5,5,5,.5)),url('Assests/interior-clean.jpeg') 57% center/cover
  }
  .hero-copy {
    padding:138px 7vw 275px;
    align-self:auto
  }
  .hero h1 {
    font-size:clamp(43px,12vw,58px);
    line-height:1.08
  }
  .hero h1 em {
    white-space:normal
  }
  .hero-rule {
    margin:17px 0 14px
  }
  .hero-lede {
    font-size:14px;
    margin:0 0 24px
  }
  .hero-actions {
    align-items:stretch;
    flex-direction:column;
    gap:10px;
    width:min(100%,310px)
  }
  .hero-actions .button,.hero-outline {
    width:100%
  }
  .hero-promise {
    left:0;
    right:0;
    bottom:0;
    border-left:0;
    border-right:0;
    grid-template-columns:1fr 1fr;
    background:rgba(8,8,8,.94)
  }
  .hero-promise article {
    min-height:116px;
    padding:17px 12px;
    border-bottom:1px solid rgba(182,146,82,.3)
  }
  .hero-promise article:nth-child(2) {
    border-right:0
  }
  .hero-promise article:nth-child(n+3) {
    border-bottom:0
  }
  .hero-promise i {
    font-size:20px;
    margin-bottom:8px
  }
  .hero-promise h2 {
    font-size:10px
  }
  .hero-promise p {
    font-size:10px;
    margin-top:5px
  }
  .hero-bottom {
    display:none
  }
}
 /* Gallery: give the wider room image a full-height portrait frame. */ .gallery-grid {
  grid-template-columns:1fr 1.15fr;
  grid-template-rows:220px 300px
}
.gallery .large {
  grid-column:1;
  grid-row:1
}
.gallery .quote {
  grid-column:1;
  grid-row:2
}
.gallery .detail {
  grid-column:2;
  grid-row:1 / span 2
}
.gallery .detail img {
  object-position:center center;
  filter:sepia(.12) saturate(.9)
}
 @media(max-width:760px) {
  .gallery-grid {
    grid-template-columns:1fr;
    grid-template-rows:250px 190px 180px
  }
  .gallery .large {
    grid-column:auto;
    grid-row:auto
  }
  .gallery .quote {
    grid-column:auto;
    grid-row:auto
  }
  .gallery .detail {
    grid-column:auto;
    grid-row:auto
  }
}