/* Selenro: a restrained, editorial identity for hospitality. */
:root {
  --cream:#f8f5ee;
  --paper:#fffdf8;
  --sand:#eee9df;
  --ink:#302c28;
  --body:#625e56;
  --line:#d9d2c6;
  --accent:#66353e;
  --accent-deep:#47232b;
  --night:#34282c;
  --night-text:#f8f5ee;
  --night-muted:#d2c7c4;
  --brass:#d9bda0;
  --serif:'Libre Caslon Text',Georgia,serif;
  --sans:'DM Sans',Arial,sans-serif;
  --maxw:1360px;
}

*,*::before,*::after {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}

body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}

img {
  display:block;
  max-width:100%;
}

a {
  color:inherit;
  text-decoration:none;
}

figure,p,h1,h2,h3 {
  margin:0;
}

button,input,select,textarea {
  font:inherit;
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent;
}

:focus-visible {
  outline:3px solid #a87849;
  outline-offset:5px;
}

.container {
  width:min(100%,var(--maxw));
  margin-inline:auto;
  padding-inline:48px;
}

h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
}

h2 {
  font-size:clamp(2rem,3.3vw,3rem);
  line-height:1.2;
  letter-spacing:-.045em;
}

h3 {
  font-size:1.32rem;
  line-height:1.35;
  letter-spacing:-.025em;
}

em {
  font-weight:400;
  color:var(--accent);
}

.kicker,.eyebrow {
  font-size:.66rem;
  line-height:1.8;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}

.kicker {
  margin-bottom:22px;
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--paper);
  padding:12px;
  z-index:100;
}

.skip-link:focus {
  top:12px;
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:16px 22px;
  border:1px solid transparent;
  border-radius:2px;
  font-size:.8rem;
  font-weight:500;
  line-height:1.4;
  cursor:pointer;
  transition:background .2s,color .2s;
}

.btn--primary {
  background:var(--accent);
  color:#fff;
}

.btn--primary:hover {
  background:var(--accent-deep);
}

.btn--sm {
  padding:13px 20px;
}

.btn--block {
  width:100%;
}

.btn:disabled {
  background:#d8d1c8;
  color:#5b5650;
  cursor:not-allowed;
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:20px;
  font-size:.8rem;
  border-bottom:1px solid var(--line);
  padding-block:10px;
}

.text-link:hover,.work__link:hover {
  color:var(--accent);
}

/* Navigation */
.nav {
  position:sticky;
  top:0;
  z-index:50;
  background:var(--cream);
  border-bottom:1px solid var(--line);
}

.nav__inner {
  height:96px;
  display:flex;
  align-items:center;
  gap:32px;
}

.logo {
  display:flex;
  align-items:center;
  gap:20px;
}

.logo__word {
  font-family:var(--serif);
  font-size:2.3rem;
  letter-spacing:-.07em;
  line-height:1;
}

.logo__dot {
  color:var(--accent);
}

.logo__descriptor {
  padding-left:20px;
  border-left:1px solid var(--line);
  font-size:.49rem;
  letter-spacing:.13em;
  line-height:1.65;
}

.nav__links {
  display:flex;
  gap:28px;
  margin-left:auto;
}

.nav__links a {
  font-size:.76rem;
}

.nav__links a:hover {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:6px;
}

.nav__toggle {
  display:none;
  background:none;
  border:0;
  width:44px;
  height:44px;
  padding:10px;
  cursor:pointer;
}

.nav__toggle span {
  display:block;
  width:24px;
  height:1px;
  background:var(--ink);
  margin:7px 0;
  transition:transform .2s;
}

.nav.is-open .nav__toggle span:first-child {
  transform:translateY(4px) rotate(45deg);
}

.nav.is-open .nav__toggle span:last-child {
  transform:translateY(-4px) rotate(-45deg);
}

/* Opening spread */
.hero {
  padding:48px 0 56px;
}

.hero__grid {
  display:grid;
  grid-template-columns:1.08fr 1fr;
  gap:42px;
  align-items:center;
}

.hero__copy {
  padding:20px 0;
}

.hero h1 {
  font-size:clamp(2.7rem,4.25vw,4rem);
  line-height:1.17;
  letter-spacing:-.065em;
  margin:23px 0;
}

.hero h1 em {
  white-space:nowrap;
}

.hero__lede {
  max-width:450px;
  color:var(--body);
  font-size:.94rem;
  line-height:1.85;
}

.hero__actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:22px;
  margin-top:28px;
}

.hero__note {
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:42px;
  font-size:.67rem;
  color:var(--body);
  line-height:1.8;
}

.hero__note strong {
  font-weight:500;
  color:var(--ink);
}

.small-star {
  font-size:32px;
  color:var(--accent);
  line-height:1;
}

.hero__photo {
  position:relative;
  height:535px;
  background:#382720;
}

.hero__photo>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:62% center;
}

.hero__photo::after {
  content:'';
  position:absolute;
  inset:55% 0 0;
  background:linear-gradient(transparent,rgba(24,17,13,.8));
}

.hero__photo figcaption {
  position:absolute;
  bottom:28px;
  left:28px;
  right:28px;
  z-index:1;
  color:#fff;
  display:grid;
  gap:4px;
}

.hero__photo figcaption span:first-child {
  font-size:.55rem;
  letter-spacing:.2em;
}

.hero__photo figcaption span:last-child {
  font:italic 1.35rem var(--serif);
}

.hero__seal {
  position:absolute;
  right:-20px;
  top:28px;
  width:112px;
  height:112px;
  border-radius:50%;
  background:var(--cream);
  border:1px solid var(--line);
  outline:5px solid var(--cream);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-size:.65rem;
  line-height:1.6;
  transform:rotate(9deg);
}

.hero__seal em {
  font-family:var(--serif);
  font-size:1rem;
}

.hero__seal span {
  font-size:20px;
  color:var(--accent);
  margin-top:3px;
}

.location-strip {
  border-block:1px solid var(--line);
  padding:21px 0;
}

.location-strip .container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.location-strip p:first-child {
  font:italic .92rem var(--serif);
  color:var(--body);
}

.location-strip p:last-child {
  font-size:.64rem;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.location-strip span {
  color:var(--accent);
  margin-inline:22px;
}

/* Content rhythm */
.section {
  padding:100px 0;
}

.section--panel {
  background:var(--sand);
}

.section--dark {
  background:var(--night);
  color:var(--night-text);
}

.section__head {
  margin-bottom:32px;
}

.section__sub {
  color:var(--body);
  margin-top:22px;
  font-size:.95rem;
}

.intro__head {
  display:grid;
  grid-template-columns:.7fr 1.5fr;
  gap:50px;
  align-items:start;
  margin-bottom:56px;
}

.intro__head h2 {
  font-size:clamp(1.8rem,2.7vw,2.55rem);
}

.intro__head .kicker {
  margin-top:8px;
}

.benefits {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:46px;
}

.benefit {
  padding-top:24px;
  border-top:1px solid var(--line);
}

.benefit__num {
  display:block;
  font-size:.59rem;
  letter-spacing:.12em;
  color:var(--accent);
  font-weight:600;
  margin-bottom:24px;
}

.benefit h3 {
  margin-bottom:16px;
}

.benefit p {
  color:var(--body);
  font-size:.88rem;
}

.services-wrap {
  display:grid;
  grid-template-columns:.82fr 1.2fr;
  gap:80px;
  align-items:start;
}

.services__photo {
  position:sticky;
  top:130px;
  aspect-ratio:3/4;
  background:#d2c9b8;
}

.services__photo img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.services {
  padding:0;
  margin:0;
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:32px;
  counter-reset:services;
}

.service {
  padding:22px 0;
  border-top:1px solid #c9c0b3;
  counter-increment:services;
}

.service::before {
  content:counter(services,decimal-leading-zero);
  display:block;
  color:var(--accent);
  font-size:.64rem;
  margin-bottom:8px;
}

.service h3 {
  font-size:1.06rem;
  margin-bottom:9px;
}

.service p {
  font-size:.83rem;
  color:var(--body);
}

.how {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:100px;
  align-items:center;
}

.section--dark .kicker,.section--dark em {
  color:var(--brass);
}

.section--dark .section__sub {
  color:var(--night-muted);
}

.steps {
  list-style:none;
  padding:0;
  margin:0;
}

.step {
  display:flex;
  gap:22px;
  border-top:1px solid #605055;
  padding:20px 0;
}

.step__num {
  font-size:.7rem;
  color:var(--brass);
  padding-top:5px;
  min-width:18px;
}

.step h3 {
  font-size:1.1rem;
  margin-bottom:7px;
}

.step p {
  color:var(--night-muted);
  font-size:.85rem;
}

.how__photo {
  aspect-ratio:3/4;
}

.how__photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:70%;
}

.work {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:70px;
  align-items:center;
}

.work__shot {
  display:block;
  padding:20px;
  background:#e1d8c8;
  border:1px solid #cfc3b1;
  transition:background .2s;
}

.work__shot:hover {
  background:#d4c6b1;
}

.work__shot img {
  width:100%;
  height:auto;
}

.work__meta {
  font-size:.7rem;
  color:var(--accent);
  margin-top:18px;
}

.work__desc {
  font-size:.9rem;
  color:var(--body);
  margin-top:20px;
}

.work__link {
  display:inline-block;
  font-size:.82rem;
  margin-top:24px;
  padding-bottom:6px;
  border-bottom:1px solid var(--accent);
}

#about {
  background:var(--cream);
}

.about {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:100px;
  align-items:center;
}

.about__photo {
  aspect-ratio:1;
}

.about__photo img {
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:center 42%;
  filter:saturate(.94) contrast(.98);
}

.about h2 {
  margin-bottom:26px;
}

.about p:not(.kicker) {
  font-size:.91rem;
  color:var(--body);
  margin-bottom:16px;
}

.path {
  list-style:none;
  padding:0;
  margin:32px 0 0;
  display:flex;
  gap:20px;
}

.path li {
  flex:1;
  border-top:1px solid var(--line);
  padding-top:14px;
  font-family:var(--serif);
  font-size:.95rem;
}

.path span {
  display:block;
  font-family:var(--sans);
  font-size:.57rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:6px;
}

.contact-section {
  background:var(--sand);
}

.contact {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:start;
}

.contact__copy h2 {
  font-size:clamp(2.8rem,4.5vw,4.4rem);
}

.contact__photo {
  margin-top:30px;
  height:190px;
  overflow:hidden;
}

.contact__photo img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.form {
  display:grid;
  gap:18px;
  padding:32px;
  background:var(--paper);
  border:1px solid var(--line);
}

.form__row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.form label {
  display:grid;
  gap:8px;
  font-size:.74rem;
  font-weight:500;
}

.optional {
  font-size:.67rem;
  font-weight:400;
  color:var(--body);
}

.form input,.form select,.form textarea {
  width:100%;
  min-width:0;
  border:1px solid var(--line);
  border-radius:0;
  background:var(--cream);
  padding:12px;
  color:var(--ink);
  font-size:16px;
}

.form textarea {
  resize:vertical;
}

.form input:focus,.form select:focus,.form textarea:focus {
  outline:2px solid var(--accent);
  outline-offset:1px;
}

.form__notice,.form__status {
  font-size:.75rem;
  color:var(--body);
  line-height:1.5;
}

.form__status:empty {
  display:none;
}

.footer {
  padding:60px 0 28px;
  background:var(--night);
  color:var(--night-muted);
}

.footer__word {
  font:400 clamp(4rem,12vw,10rem)/1 var(--serif);
  letter-spacing:-.07em;
  color:var(--night-text);
  margin-bottom:42px;
}

.footer__row {
  display:flex;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid #655259;
  padding-top:24px;
  font-size:.76rem;
}

.footer__links {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}

.footer__links a:hover {
  text-decoration:underline;
}

.footer__legal {
  font-size:.66rem;
  margin-top:28px;
}

@media(min-width:1600px) {
  .hero {
    padding-block:64px;
  }
  .hero__photo {
    height:580px;
  }
}

@media(max-width:1100px) {
  .container {
    padding-inline:32px;
  }
  .nav__inner {
    gap:24px;
  }
  .logo__descriptor {
    display:none;
  }
  .hero__grid {
    gap:26px;
  }
  .hero h1 {
    font-size:3.25rem;
  }
  .hero__photo {
    height:560px;
  }
  .hero__actions {
    gap:12px;
  }
  .hero__seal {
    right:-12px;
  }
  .services-wrap,.how,.about {
    gap:50px;
  }
  .work,.contact {
    gap:40px;
  }
  .benefits {
    gap:28px;
  }
}

@media(max-width:800px) {
  html {
    scroll-padding-top:90px;
  }
  .container {
    padding-inline:24px;
  }
  .nav__inner {
    height:78px;
    gap:18px;
  }
  .logo__word {
    font-size:2rem;
  }
  .nav__cta {
    margin-left:auto;
    font-size:.69rem;
    padding:11px 13px;
  }
  .nav__toggle {
    display:block;
  }
  .nav__links {
    display:none;
  }
  .nav.is-open .nav__links {
    display:flex;
    position:absolute;
    top:77px;
    left:0;
    right:0;
    flex-direction:column;
    gap:0;
    background:var(--cream);
    padding:10px 24px 22px;
    border-bottom:1px solid var(--line);
  }
  .nav__links a {
    padding:14px 0;
    border-bottom:1px solid var(--line);
  }
  .hero {
    padding:35px 0;
  }
  .hero__grid {
    grid-template-columns:1fr;
    gap:32px;
  }
  .hero__copy {
    padding:0;
  }
  .hero h1 {
    font-size:clamp(2.45rem,6.8vw,4.3rem);
  }
  .hero__lede {
    max-width:560px;
  }
  .hero__note {
    margin-top:28px;
  }
  .hero__photo {
    height:410px;
  }
  .hero__photo>img {
    object-position:center 58%;
  }
  .hero__seal {
    width:100px;
    height:100px;
    right:16px;
    top:20px;
  }
  .location-strip .container {
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
  .location-strip span {
    margin-inline:15px;
  }
  .section {
    padding:68px 0;
  }
  .intro__head {
    grid-template-columns:1fr;
    gap:4px;
    margin-bottom:36px;
  }
  .benefits {
    grid-template-columns:1fr;
    gap:30px;
  }
  .benefit__num {
    margin-bottom:14px;
  }
  .benefit p {
    max-width:550px;
  }
  .services-wrap,.how,.work,.about,.contact {
    grid-template-columns:1fr;
    gap:35px;
  }
  .services__photo {
    position:static;
    aspect-ratio:16/9;
    max-height:340px;
  }
  .how__photo {
    aspect-ratio:16/9;
    max-height:340px;
  }
  .about__photo {
    max-width:400px;
  }
  .work__shot {
    padding:14px;
  }
  .footer__row {
    flex-direction:column;
  }
  .form {
    padding:24px;
  }
}

@media(max-width:400px) {
  .container {
    padding-inline:20px;
  }
  .hero h1 {
    font-size:2.22rem;
  }
  .eyebrow {
    font-size:.58rem;
  }
  .hero__actions {
    align-items:flex-start;
    flex-direction:column;
  }
  .hero__photo {
    height:330px;
  }
  .hero__photo figcaption {
    left:20px;
    bottom:20px;
  }
  .services {
    grid-template-columns:1fr;
  }
  .form__row {
    grid-template-columns:1fr;
  }
  .nav__inner {
    gap:8px;
  }
  .nav__cta {
    font-size:.62rem;
  }
  .path {
    flex-direction:column;
    gap:12px;
  }
  .location-strip p:last-child {
    font-size:.58rem;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
}

/* Clear offers and a shorter path to a strategy call. */
[hidden] { display: none !important; }
.hero h1 { font-size: clamp(2.55rem, 3.85vw, 3.6rem); line-height: 1.2; }
.hero h1 em { white-space: normal; }
.hero__lede { max-width: 480px; }
.hero__note { margin-top: 26px; }
.services__intro { color: var(--body); font-size: .94rem; margin: -10px 0 26px; max-width: 530px; }
.services__photo { aspect-ratio: 4 / 5; }
.section-cta { margin-top: 24px; }
.btn--light { color: var(--night); background: var(--cream); }
.btn--light:hover { background: var(--brass); }
.work__cta { display: flex; width: fit-content; margin-top: 20px; }
.call-takeaways { list-style: none; padding: 0; margin: 28px 0 22px; }
.call-takeaways li { border-top: 1px solid var(--line); padding: 13px 0 13px 24px; position: relative; font-size: .88rem; }
.call-takeaways li::before { content: '↗'; position: absolute; left: 0; color: var(--accent); }
.contact__reassurance { font-size: .78rem; color: var(--body); }
.booking { padding: 36px; border: 1px solid var(--line); background: var(--paper); }
.booking h3 { font-size: 1.9rem; }
.booking__details { font-size: .83rem; color: var(--body); margin-top: 14px; }
.booking__details span { margin-inline: 8px; }
.booking__steps { padding-left: 20px; margin: 28px 0; color: var(--body); font-size: .9rem; }
.booking__steps li { margin-bottom: 12px; padding-left: 6px; }
.booking__steps li::marker { color: var(--accent); }
.booking__status { font-size: .76rem; line-height: 1.6; color: var(--body); margin-top: 16px; }
.contact__copy h2 { font-size: clamp(2.3rem, 3.5vw, 3.4rem); }
@media (min-width: 801px) and (max-width: 1100px) {
  .hero h1 { font-size: clamp(2.3rem, 4.3vw, 3rem); }
  .hero__grid { grid-template-columns: 1.14fr 1fr; }
}
@media (max-width: 800px) {
  .hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
  .hero__photo { height: 330px; }
  .services__photo { display: none; }
  .how__photo { display: none; }
  .booking { padding: 26px; }
  .contact__copy h2 { font-size: 2.4rem; }
}
@media (max-width: 400px) {
  .hero h1 { font-size: 2.12rem; }
  .hero__photo { height: 280px; }
  .hero__actions { gap: 8px; }
  .booking { padding: 22px; }
  .booking h3 { font-size: 1.6rem; }
}