@font-face{
  font-family:"Fixit Serif";
  src:local("Georgia");
  font-weight:400;
  font-style:normal;
}

:root{
  --blush:#f7e6ea;
  --blush-2:#fdeff2;
  --white:#ffffff;
  --ink:#0f0f12;
  --charcoal:#1a1a1f;
  --rose:#7c1f3b;
  --rose-2:#9b2c51;
  --line:rgba(15,15,18,.14);
  --line-2:rgba(15,15,18,.09);
  --shadow:0 18px 50px rgba(15,15,18,.08);
  --radius:22px;
  --radius-sm:14px;
  --container:1040px;
  --serif:"Fixit Serif", Georgia, "Times New Roman", serif;
  --sans:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1000px 600px at 18% 10%, rgba(124,31,59,.10), transparent 60%),
    radial-gradient(1100px 650px at 80% 15%, rgba(247,230,234,.95), transparent 62%),
    linear-gradient(180deg, var(--white), var(--blush-2) 55%, var(--white));
  font-family:var(--sans);
  letter-spacing:.2px;
}

.skip{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip:focus{
  left:18px;
  top:14px;
  width:auto;
  height:auto;
  padding:10px 12px;
  border-radius:999px;
  background:var(--white);
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  z-index:10;
}

.container{
  width:min(var(--container), calc(100% - 44px));
  margin:0 auto;
}

.topbar{
  position:sticky;
  top:0;
  z-index:5;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  gap:18px;
}

.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width:0;
}
.brand__mark{
  width:12px;
  height:12px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--rose-2), var(--rose));
  box-shadow:0 0 0 6px rgba(124,31,59,.08);
  flex:none;
}
.brand__name{
  font-family:var(--serif);
  font-weight:400;
  font-size:18px;
  letter-spacing:.6px;
}
.brand__tag{
  font-size:12px;
  color:rgba(15,15,18,.65);
  letter-spacing:.24em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nav{display:flex; align-items:center}
.nav__home{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(124,31,59,.28);
  color:var(--rose);
  background:rgba(255,255,255,.65);
  text-decoration:none;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.nav__home:focus-visible{
  outline:3px solid rgba(124,31,59,.24);
  outline-offset:3px;
}
.nav__home:hover{
  transform:translateY(-1px);
  background:rgba(247,230,234,.65);
  border-color:rgba(124,31,59,.42);
}

.main{padding-bottom:64px}

.hero{padding:44px 0 22px}
.hero__frame{
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(253,239,242,.82));
  border:1px solid var(--line-2);
  border-radius:calc(var(--radius) + 8px);
  box-shadow:var(--shadow);
  padding:34px 28px;
}
.kicker{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(15,15,18,.62);
}
.hero__title{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(28px, 3.4vw, 46px);
  line-height:1.08;
  letter-spacing:.2px;
}
.hero__sub{
  margin:14px 0 0;
  color:rgba(15,15,18,.74);
  font-size:15px;
  line-height:1.65;
  max-width:60ch;
}
.hero__rule{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(124,31,59,.25), transparent);
  margin:22px 0 18px;
}
.hero__meta{display:flex; flex-wrap:wrap; gap:10px}
.pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,15,18,.10);
  background:rgba(255,255,255,.58);
  color:rgba(15,15,18,.76);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.section{padding:34px 0}
.section--alt{
  background:linear-gradient(180deg, rgba(247,230,234,.40), rgba(255,255,255,0));
}
.section__header{display:grid; gap:12px; align-items:end; margin-bottom:16px}
.section__title{
  margin:0;
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:.4px;
}
.divider{
  height:1px;
  background:linear-gradient(90deg, rgba(15,15,18,.12), rgba(124,31,59,.24), rgba(15,15,18,.08));
}

.card{
  background:rgba(255,255,255,.78);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  box-shadow:0 10px 40px rgba(15,15,18,.06);
  padding:22px 18px;
}

.grid{display:grid; gap:10px}

.line{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:baseline;
  padding:10px 10px;
  border-radius:var(--radius-sm);
  transition:background-color .14s ease;
}
.line:hover{background:rgba(247,230,234,.35)}
.line__name{
  font-size:14px;
  color:rgba(15,15,18,.92);
}
.line__dots{
  border-bottom:1px dotted rgba(15,15,18,.22);
  transform:translateY(-2px);
}
.line__price{
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:.2px;
  color:var(--charcoal);
}

.subdivider{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(15,15,18,.10), transparent);
  margin:16px 4px;
}

.card__subtitle{
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(124,31,59,.80);
  margin:2px 10px 10px;
}

.cluster{display:grid; gap:14px}
.service__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:6px 10px 4px;
}
.service__title{
  margin:0;
  font-family:var(--serif);
  font-size:16px;
  letter-spacing:.3px;
}
.service__accent{
  width:56px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(124,31,59,.55), transparent);
}

.footer{padding:28px 0 0}
.footer__inner{display:grid; gap:14px; align-items:center}
.footer__rule{height:1px; background:linear-gradient(90deg, transparent, rgba(15,15,18,.12), transparent)}
.footer__text{
  margin:0;
  font-family:var(--serif);
  letter-spacing:.5px;
  color:rgba(15,15,18,.70);
  text-align:center;
  font-size:14px;
}

@media (min-width: 780px){
  .hero__frame{padding:40px 42px}
  .card{padding:26px 22px}
  .section__header{grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
  .nav__home{transition:none}
  .line{transition:none}
}