
:root{
  --bg:#f4f1eb;
  --paper:#fbf8f3;
  --panel:#fffdfa;
  --ink:#162126;
  --muted:#5d676c;
  --line:rgba(22,33,38,.10);
  --accent:#2f6f73;
  --accent-soft:#d8eceb;
  --accent-2:#b96f44;
  --shadow:0 20px 60px rgba(33,41,46,.08);
  --radius-xl:30px;
  --radius-lg:22px;
  --radius-md:16px;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(47,111,115,.10), transparent 30%),
    radial-gradient(circle at 85% 15%, rgba(185,111,68,.08), transparent 22%),
    linear-gradient(180deg,#f7f3ed 0%, #f3efe8 100%);
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family: "Georgia", "Times New Roman", serif;
  letter-spacing:-0.02em;
  line-height:1.02;
  margin:0 0 .6rem;
  color:#10181b;
}
h1{font-size:clamp(3.1rem,7vw,6.2rem)}
h2{font-size:clamp(2rem,4vw,3.4rem)}
h3{font-size:1.35rem}
p{margin:.2rem 0 1rem}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.container{width:min(calc(100% - 32px), var(--max)); margin:0 auto}
.topbar{
  padding:22px 0 8px;
}
.nav-shell{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 18px;
  background:rgba(255,253,250,.75);
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:var(--shadow);
  border-radius:999px;
}
.brand{
  display:flex; align-items:center; gap:12px; min-width:0;
}
.brand-mark{
  width:40px; height:40px; border-radius:14px;
  background:linear-gradient(145deg, var(--accent-soft), #f4ebe3 70%);
  border:1px solid rgba(22,33,38,.08);
  position:relative;
  overflow:hidden;
}
.brand-mark::before,
.brand-mark::after{
  content:""; position:absolute; inset:auto;
}
.brand-mark::before{
  width:34px; height:1px; background:rgba(22,33,38,.15);
  top:14px; left:3px; transform:rotate(-20deg);
}
.brand-mark::after{
  width:18px; height:18px; border-radius:50%;
  right:7px; bottom:7px; background:rgba(47,111,115,.16);
}
.brand-copy strong{display:block; font-size:.96rem}
.brand-copy span{display:block; color:var(--muted); font-size:.84rem}
.nav-links{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
}
.nav-links a{
  padding:10px 14px; border-radius:999px; color:var(--muted);
}
.nav-links a:hover{background:rgba(22,33,38,.05); color:var(--ink)}
.hero{
  padding:26px 0 40px;
}
.hero-grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:24px;
  align-items:stretch;
}
.hero-main{
  background:linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.38));
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--shadow);
  border-radius:40px;
  padding:34px;
  position:relative;
  overflow:hidden;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:.82rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:rgba(22,33,38,.25);
}
.hero-main p.lead{
  font-size:1.12rem; max-width:760px; color:#304048;
}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 18px; border-radius:999px; font-weight:600;
  border:1px solid transparent; transition:.2s ease;
}
.button.primary{
  background:linear-gradient(180deg, var(--accent), #23585c);
  color:#fff; box-shadow:0 14px 30px rgba(47,111,115,.24);
}
.button.secondary{
  background:rgba(255,255,255,.6); border-color:var(--line);
}
.button:hover{transform:translateY(-1px)}
.hero-note{
  margin-top:24px; display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;
}
.mini-card{
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px;
  padding:16px;
}
.mini-card strong{display:block; margin-bottom:6px; font-size:.92rem}
.mini-card span{font-size:.92rem; color:var(--muted)}
.hero-side{
  display:grid; gap:16px;
}
.side-panel{
  background:linear-gradient(180deg, #fffdfa, #f8f4ee);
  box-shadow:var(--shadow);
  border:1px solid rgba(22,33,38,.08);
  border-radius:30px; padding:24px;
}
.side-panel .kicker{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
}
.side-panel ul{margin:14px 0 0; padding-left:18px}
.side-panel li{margin:0 0 10px; color:var(--muted)}
.rail{
  margin:30px auto 0; 
  display:grid; grid-template-columns: 260px 1fr; gap:22px;
}
.rail-label{
  padding:18px 20px;
  background:rgba(255,255,255,.48);
  border:1px solid rgba(22,33,38,.08);
  border-radius:24px;
  align-self:start;
  position:sticky; top:18px;
}
.rail-label small{
  display:block; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:10px;
}
.section-stack{display:grid; gap:22px}
.section-card{
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.52));
  border:1px solid rgba(255,255,255,.76);
  border-radius:34px; box-shadow:var(--shadow); padding:30px;
}
.guides-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; margin-top:22px;
}
.guide{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:26px;
  padding:22px;
  display:flex; flex-direction:column; gap:14px;
  min-height:100%;
}
.guide-top{
  display:flex; justify-content:space-between; gap:14px; align-items:flex-start;
}
.tag{
  display:inline-flex; padding:7px 11px; border-radius:999px; font-size:.78rem;
  background:var(--accent-soft); color:var(--accent);
}
.price{
  font-size:1.3rem; font-weight:700; white-space:nowrap;
}
.guide p{color:var(--muted); margin:0}
.guide ul{padding-left:18px; margin:0}
.guide li{margin-bottom:8px; color:var(--muted)}
.note-band{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px;
  margin-top:18px;
}
.note{
  border-radius:24px;
  padding:20px;
  background:
    linear-gradient(180deg, rgba(216,236,235,.54), rgba(255,255,255,.74));
  border:1px solid rgba(47,111,115,.12);
}
.note.alt{
  background:linear-gradient(180deg, rgba(185,111,68,.08), rgba(255,255,255,.72));
  border-color:rgba(185,111,68,.12);
}
.steps{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:22px;
}
.step{
  background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:18px;
}
.step-index{
  width:34px; height:34px; display:grid; place-items:center; border-radius:12px;
  background:rgba(47,111,115,.10); color:var(--accent); font-weight:700; margin-bottom:14px;
}
.step p{color:var(--muted); margin:0}
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px;
}
.faq-list{
  display:grid; gap:14px;
}
.faq{
  background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:20px;
}
.faq p{color:var(--muted); margin:0}
.form-shell{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:start;
}
.form-card, .contact-card{
  border-radius:28px; padding:24px; background:var(--panel); border:1px solid var(--line);
}
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
label{display:block; font-size:.9rem; font-weight:600; margin-bottom:8px}
input, textarea, select{
  width:100%; border:none; outline:none; border-radius:16px;
  background:#f4f1eb; color:var(--ink); padding:15px 16px; font:inherit;
  border:1px solid rgba(22,33,38,.06);
}
textarea{min-height:130px; resize:vertical}
.form-muted{font-size:.92rem; color:var(--muted)}
.foot{
  padding:22px 0 48px;
}
.foot-grid{
  display:grid; grid-template-columns:1fr auto; gap:16px; align-items:start;
  padding:24px; background:rgba(255,255,255,.62);
  border-radius:28px; border:1px solid rgba(255,255,255,.7); box-shadow:var(--shadow);
}
.foot-links{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.foot-links a{
  padding:10px 12px; border-radius:999px; background:rgba(22,33,38,.04); color:var(--muted);
}
.muted{color:var(--muted)}
.disclaimer{
  margin-top:16px; padding:16px 18px; border-radius:18px;
  background:rgba(255,255,255,.6); border:1px solid rgba(22,33,38,.08); color:#39444a;
}
.page-wrap{padding:28px 0 54px}
.doc-hero{
  display:grid; grid-template-columns: 1.05fr .95fr; gap:20px; align-items:start;
}
.doc-card{
  padding:32px; background:rgba(255,255,255,.72); border-radius:36px; box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.78);
}
.doc-card h1{font-size:clamp(2.6rem,5vw,4.7rem)}
.doc-card p.lead{font-size:1.08rem; color:var(--muted); max-width:52ch}
.doc-grid{
  margin-top:20px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
}
.doc-panel{
  padding:22px; background:var(--panel); border-radius:24px; border:1px solid var(--line);
}
.doc-panel ul{margin:10px 0 0; padding-left:18px}
.doc-panel li{margin-bottom:8px; color:var(--muted)}
.doc-section{
  margin-top:22px;
  padding:30px; background:rgba(255,255,255,.72); border-radius:34px; box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.78);
}
.doc-section p, .doc-section li{color:var(--muted)}
.thankyou-box{
  padding:34px; border-radius:36px; background:rgba(255,255,255,.76); border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--shadow);
}
.next-tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:22px}
.tile{
  padding:20px; border-radius:24px; background:var(--panel); border:1px solid var(--line);
}
hr.soft{
  border:none; border-top:1px solid rgba(22,33,38,.08); margin:24px 0;
}
@media (max-width: 1080px){
  .hero-grid,.doc-hero,.form-shell,.rail,.foot-grid{grid-template-columns:1fr}
  .rail-label{position:static}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 760px){
  .nav-shell{border-radius:26px; padding:16px}
  .nav-links{justify-content:flex-start}
  .guides-grid,.split,.note-band,.doc-grid,.next-tiles,.field-grid{grid-template-columns:1fr}
  .hero-main,.side-panel,.section-card,.doc-card,.doc-section,.thankyou-box{padding:24px}
  .hero-note{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  h1{font-size:clamp(2.7rem,14vw,4rem)}
  h2{font-size:clamp(1.9rem,8vw,2.8rem)}
}
