:root{
  --bg: #f4efe4;
  --bg-2:#efe6d6;
  --ink:#1d2421;
  --muted:#4a5a52;
  --moss:#335a45;
  --moss-2:#274435;
  --gold:#c9a24a;
  --gold-2:#a7832f;
  --line: rgba(29,36,33,.14);
  --shadow: 0 22px 60px rgba(29,36,33,.14);
  --radius: 18px;
  --radius-2: 28px;
  --max: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(201,162,74,.18), transparent 55%),
    radial-gradient(1000px 600px at 95% 0%, rgba(51,90,69,.18), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.55;
}

h1,h2,h3{font-family: Fraunces, ui-serif, Georgia, serif; letter-spacing: -.02em; margin:0 0 .45rem}
h1{font-size: clamp(2rem, 4vw, 3.2rem); line-height:1.08}
h2{font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height:1.15}
h3{font-size:1.2rem; line-height:1.2}

p{margin:.3rem 0 0}
.lead{font-size:1.05rem; color:var(--muted)}
.small{font-size:.92rem; color:rgba(29,36,33,.74)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}

.shell{max-width:var(--max); margin:0 auto; padding:0 18px}
.section{padding:64px 0}
.section-ink{
  background: rgba(39,68,53,.08);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.section-head{
  display:grid;
  gap:10px;
  grid-template-columns: 1fr;
  margin-bottom:22px;
}

.u-gold{color:var(--gold-2)}

.skip{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip:focus{left:14px; top:12px; width:auto; height:auto; padding:10px 12px; z-index:99; background:var(--bg); border:1px solid var(--line); border-radius:12px}

.top{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(244,239,228,.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.top .shell{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px}

.brand{display:flex; align-items:center; gap:12px; min-width: 220px}
.brand-mark{
  width:38px; height:38px; border-radius:14px;
  background: linear-gradient(135deg, rgba(51,90,69,.18), rgba(201,162,74,.18));
  border:1px solid rgba(29,36,33,.12);
  position:relative; overflow:hidden;
}
.kintsugi{
  position:absolute; inset:0;
  background:
    linear-gradient(var(--r), transparent 30%, rgba(201,162,74,.9) 31%, rgba(201,162,74,.9) 33%, transparent 34%),
    linear-gradient(calc(var(--r) * -1), transparent 62%, rgba(201,162,74,.55) 63%, rgba(201,162,74,.55) 65%, transparent 66%);
  opacity:.9;
}
.brand-name{font-weight:650; letter-spacing:.02em}
.brand-tag{font-size:.88rem; color:rgba(29,36,33,.68)}

.nav{display:flex; align-items:center; gap:14px}
.nav a{color:rgba(29,36,33,.82); text-decoration:none; font-weight:520; padding:8px 10px; border-radius:12px}
.nav a:hover{background: rgba(29,36,33,.06)}

.nav-toggle{display:none; align-items:center; gap:10px; border:1px solid var(--line); background:rgba(244,239,228,.6); padding:10px 12px; border-radius:14px; font-weight:600}
.nav-toggle-lines{display:inline-block; width:18px; height:12px; position:relative}
.nav-toggle-lines:before,.nav-toggle-lines:after{content:""; position:absolute; left:0; right:0; height:2px; background:rgba(29,36,33,.72); border-radius:10px}
.nav-toggle-lines:before{top:1px}
.nav-toggle-lines:after{bottom:1px}

.mobile{border-top:1px solid var(--line); background: rgba(244,239,228,.92)}
.mobile .shell{display:grid; gap:10px; padding:14px 18px}
.mobile a{color:rgba(29,36,33,.86); text-decoration:none; font-weight:600; padding:12px 12px; border-radius:14px; border:1px solid rgba(29,36,33,.10)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; cursor:pointer; border-radius:999px; padding:11px 16px; font-weight:650; border:1px solid rgba(29,36,33,.14); background: rgba(244,239,228,.7); color:rgba(29,36,33,.92)}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0px)}
.btn-gold{background: linear-gradient(180deg, rgba(201,162,74,.92), rgba(167,131,47,.95)); border-color: rgba(167,131,47,.55); color:#1c160c}
.btn-ghost{background: rgba(244,239,228,.35)}

.hero{padding:56px 0 26px}
.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; align-items:stretch}
.eyebrow{font-weight:650; color:rgba(39,68,53,.92); letter-spacing:.04em; text-transform:uppercase; font-size:.78rem}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}

.meta{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin-top:18px}
.meta-card{border:1px solid var(--line); background: rgba(244,239,228,.5); border-radius: var(--radius); padding:12px 12px}
.meta-title{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(29,36,33,.66); font-weight:650}
.meta-body{font-weight:650; color:rgba(29,36,33,.9)}

.hero-art{position:relative; border-radius: var(--radius-2); border:1px solid rgba(29,36,33,.14); background:
  radial-gradient(600px 400px at 20% 20%, rgba(51,90,69,.22), transparent 55%),
  radial-gradient(800px 600px at 80% 30%, rgba(201,162,74,.22), transparent 60%),
  rgba(244,239,228,.55);
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height: 360px;
}

.vessel{position:absolute; inset:0; display:grid; place-items:center; transform: translateY(12px)}
.vessel-curve{
  width: 220px; height: 220px; border-radius: 78px 78px 88px 88px;
  border: 1px solid rgba(29,36,33,.18);
  background: linear-gradient(180deg, rgba(239,230,214,.65), rgba(244,239,228,.25));
  filter: blur(.0px);
  position:absolute;
  box-shadow: 0 26px 70px rgba(29,36,33,.10);
}
.vessel-curve.is-2{transform: rotate(8deg) translate(14px, -10px); opacity:.55}
.vessel-curve.is-3{transform: rotate(-10deg) translate(-18px, 6px); opacity:.45}
.vessel-crack{
  width: 280px; height: 180px;
  background:
    linear-gradient(115deg, transparent 35%, rgba(201,162,74,.9) 36%, rgba(201,162,74,.9) 37%, transparent 38%),
    linear-gradient(70deg, transparent 56%, rgba(201,162,74,.55) 57%, rgba(201,162,74,.55) 58%, transparent 59%);
  mix-blend-mode: multiply;
  opacity:.9;
  transform: rotate(-6deg);
}

.floating-note{
  position:absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  border:1px solid rgba(29,36,33,.14);
  background: rgba(244,239,228,.72);
  border-radius: var(--radius);
  padding: 12px 12px;
}
.floating-title{font-weight:750}
.floating-hint{font-size:.88rem; color:rgba(29,36,33,.7); margin-top:6px}
.switch{display:flex; gap:8px; margin-top:10px}
.chip{border:1px solid rgba(29,36,33,.14); background: rgba(244,239,228,.55); border-radius:999px; padding:8px 12px; font-weight:750; cursor:pointer}
.chip[aria-pressed="true"]{background: rgba(39,68,53,.14); border-color: rgba(39,68,53,.24)}

.cards{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px}
.card{border:1px solid var(--line); background: rgba(244,239,228,.55); border-radius: var(--radius); padding:16px 16px}
.card p{color:rgba(29,36,33,.78)}

.service-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px}
.service{border:1px solid rgba(29,36,33,.14); background: rgba(244,239,228,.55); border-radius: var(--radius); padding:16px 16px; position:relative; overflow:hidden}
.service:before{
  content:"";
  position:absolute;
  inset:-60px -60px auto auto;
  width:140px; height:140px;
  border-radius: 38px;
  transform: rotate(18deg);
  background: linear-gradient(135deg, rgba(51,90,69,.18), rgba(201,162,74,.12));
  border:1px solid rgba(29,36,33,.10);
}
.service-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; position:relative}
.pill{font-size:.78rem; font-weight:750; padding:6px 10px; border-radius:999px; border:1px solid rgba(29,36,33,.14); background: rgba(39,68,53,.10); color:rgba(39,68,53,.95)}
.check{margin:12px 0 0; padding-left: 18px; color:rgba(29,36,33,.82)}
.text-link{color:rgba(39,68,53,.98); font-weight:750; text-decoration:none; display:inline-flex; margin-top:12px; border-bottom:1px solid rgba(39,68,53,.25)}
.text-link:hover{border-bottom-color: rgba(39,68,53,.55)}

.about{display:grid; grid-template-columns: 1.15fr .85fr; gap:18px; align-items:start}
.about-card{border:1px solid var(--line); background: rgba(244,239,228,.55); border-radius: var(--radius-2); padding:18px 18px; box-shadow: var(--shadow)}
.about-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

.portrait{position:relative; border:1px dashed rgba(29,36,33,.25); background: rgba(239,230,214,.55); border-radius: var(--radius-2); overflow:hidden; min-height: 260px}
.portrait-inner{position:absolute; inset:14px; border-radius: 22px; background:
  radial-gradient(420px 240px at 30% 30%, rgba(51,90,69,.18), transparent 60%),
  radial-gradient(420px 280px at 80% 30%, rgba(201,162,74,.16), transparent 64%),
  linear-gradient(135deg, rgba(244,239,228,.65), rgba(239,230,214,.55));
  border:1px solid rgba(29,36,33,.14);
}
.portrait-label{position:absolute; left:14px; right:14px; bottom:14px; background: rgba(244,239,228,.68); border:1px solid rgba(29,36,33,.14); border-radius: 16px; padding:12px}
.portrait-title{font-weight:750}
.portrait-note{font-size:.9rem; color:rgba(29,36,33,.72)}
.portrait-gold{position:absolute; inset:auto -40px -40px auto; width:160px; height:160px; border-radius: 46px; background: linear-gradient(180deg, rgba(201,162,74,.55), rgba(167,131,47,.20)); transform: rotate(18deg)}

.quote{margin-top:12px; border:1px solid rgba(29,36,33,.14); background: rgba(244,239,228,.55); border-radius: var(--radius); padding:14px}
.quote p{margin:0; font-family: Fraunces, ui-serif, Georgia, serif; font-size: 1.2rem}
.quote-meta{margin-top:8px; font-size:.9rem; color:rgba(29,36,33,.68)}

.faq{display:grid; gap:10px}
details{border:1px solid rgba(29,36,33,.14); background: rgba(244,239,228,.55); border-radius: var(--radius); padding:12px 12px}
summary{cursor:pointer; font-weight:750}
.faq-body{margin-top:10px; color:rgba(29,36,33,.8)}

.booking{display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:stretch}
.booking-copy{border:1px solid rgba(29,36,33,.14); background: rgba(244,239,228,.55); border-radius: var(--radius-2); padding:18px; box-shadow: var(--shadow)}
.booking-embed{border:1px solid rgba(29,36,33,.14); background: rgba(244,239,228,.55); border-radius: var(--radius-2); overflow:hidden; box-shadow: var(--shadow)}
.embed-frame{height: 420px}
.embed-placeholder{height:100%; display:grid; place-items:center; text-align:center; padding:20px; color:rgba(29,36,33,.72)}
.embed-title{font-weight:800; color:rgba(29,36,33,.9)}

.newsletter{display:grid; grid-template-columns: 1.1fr .9fr; gap:14px; align-items:center}
.newsletter-form{display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap}

label{display:block; font-weight:700; margin:0 0 6px}
input,select,textarea{
  width:100%;
  border:1px solid rgba(29,36,33,.18);
  background: rgba(244,239,228,.7);
  border-radius: 16px;
  padding:12px 12px;
  font: inherit;
  color:rgba(29,36,33,.92);
}
textarea{resize:vertical}

.newsletter-form input{max-width: 320px}

.contact{display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:start}
.contact-cards{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin-top:14px}
.contact-card{border:1px solid rgba(29,36,33,.14); background: rgba(244,239,228,.55); border-radius: var(--radius); padding:12px}
.contact-title{font-weight:800; font-size:.92rem}
.contact-body{color:rgba(29,36,33,.78); margin-top:4px}
.contact-note{margin-top:14px; color:rgba(29,36,33,.76)}
.contact-form{border:1px solid rgba(29,36,33,.14); background: rgba(244,239,228,.55); border-radius: var(--radius-2); padding:18px; box-shadow: var(--shadow)}
.grid{display:grid; grid-template-columns: 1fr 1fr; gap:10px}

.sr{position:absolute; left:-9999px}

.foot{padding:28px 0 44px; border-top:1px solid var(--line)}
.foot-grid{display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap:14px}
.foot-brand{font-weight:850}
.foot-links{display:flex; gap:12px; flex-wrap:wrap}
.foot-links a{color:rgba(29,36,33,.8); text-decoration:none; font-weight:650}
.foot-links a:hover{border-bottom:1px solid rgba(29,36,33,.25)}

/* Version variations */
body[data-version="b"] .hero-grid{grid-template-columns: .9fr 1.1fr}
body[data-version="b"] .hero-art{border-radius: 64px 22px 64px 22px}
body[data-version="b"] .service:before{inset:auto auto -60px -60px; transform: rotate(-18deg)}
body[data-version="b"] .about{grid-template-columns: .95fr 1.05fr}

body[data-version="c"] .hero{padding-top: 34px}
body[data-version="c"] .hero-grid{grid-template-columns: 1fr; gap:14px}
body[data-version="c"] .hero-art{min-height: 280px}
body[data-version="c"] .meta{grid-template-columns: 1fr;}
body[data-version="c"] .cards{grid-template-columns: 1fr}
body[data-version="c"] .service-grid{grid-template-columns: 1fr}
body[data-version="c"] .about{grid-template-columns: 1fr}
body[data-version="c"] .booking{grid-template-columns: 1fr}
body[data-version="c"] .contact{grid-template-columns: 1fr}

@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr;}
  .meta{grid-template-columns: 1fr;}
  .cards{grid-template-columns: 1fr;}
  .service-grid{grid-template-columns: 1fr;}
  .about{grid-template-columns: 1fr;}
  .booking{grid-template-columns: 1fr;}
  .contact{grid-template-columns: 1fr;}
  .contact-cards{grid-template-columns: 1fr;}
  .newsletter{grid-template-columns: 1fr;}
  .newsletter-form{justify-content:flex-start}
}

@media (max-width: 760px){
  .nav{display:none}
  .nav-toggle{display:inline-flex}
  .grid{grid-template-columns: 1fr}
  .foot-grid{grid-template-columns: 1fr; justify-items:start}
}