:root { --background:#fbf8f4; --foreground:#392c33; --popover:#fbf8f4; --primary:#744557; --border:#ded5d0; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:24px; } body { margin:0; background:var(--background); color:var(--foreground); font-family:Arial,Helvetica,sans-serif; font-size:16px; -webkit-font-smoothing:antialiased; } button,a,input { -webkit-tap-highlight-color:transparent; } button,a { touch-action:manipulation; } button { cursor:pointer; font:inherit; } a { color:inherit; text-decoration:none; } button:focus-visible,a:focus-visible { outline:3px solid #9b6480; outline-offset:5px; } .shell { max-width:1180px; margin:auto; padding:0 46px; padding-top:env(safe-area-inset-top); } .topbar { padding:28px 0; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); gap:20px; } .brand { display:flex; align-items:center; gap:12px; font-size:15px; font-weight:600; } .brand-mark { display:grid; place-items:center; background:#744557; color:#fff; width:38px; height:38px; border-radius:50%; font-family:Georgia,serif; font-size:26px; font-weight:400; } .header-note { font-size:14px; color:#756a70; } .intro { padding:54px 0 43px; position:relative; } .eyebrow { font-size:12px; letter-spacing:1.8px; font-weight:600; display:flex; align-items:center; gap:9px; color:#775565; } .small-dot { width:6px; height:6px; background:#8b6070; border-radius:50%; } h1,h2,h3,p { margin:0; } h1 { font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:clamp(60px,7.5vw,92px); line-height:1.01; letter-spacing:-4px; margin:24px 0; } em { font-weight:400; color:#8d5e71; } .intro-bottom { display:flex; justify-content:space-between; align-items:flex-end; } .intro-bottom p { font-size:17px; line-height:1.7; color:#766c71; } .jump { display:flex; align-items:center; gap:24px; font-size:15px; border-bottom:1px solid #8c6976; padding-bottom:10px; } .intro-index { position:absolute; right:66px; top:110px; font:italic 32px/1.4 Georgia,serif; color:#ac8998; transform:rotate(-7deg); } .section-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:12px; } .section-label h2 { font-size:18px; font-weight:500; } .section-label>span { font-size:13px; color:#796f74; } .service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .service-card { padding:27px; border:1px solid #e4d9d4; border-radius:22px; display:flex; flex-direction:column; background:#f2e8e5; } .card-1 { background:#eee8f1; border-color:#e0d8e8; } .card-2 { background:#e9ede7; border-color:#dce2d7; } .card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; } .icon-tile { display:grid; place-items:center; width:46px; height:46px; border:1px solid #cdbbbc; border-radius:50%; color:#805b6b; } .card-1 .icon-tile { color:#78638c; border-color:#cbbfd5; } .card-2 .icon-tile { color:#5e7461; border-color:#bdcaba; } .card-number { color:#93828a; font:italic 18px Georgia,serif; } .category { font-size:10px; letter-spacing:1.2px; line-height:1.7; color:#76616c; margin-bottom:12px; } h3 { font:400 30px/1.13 Georgia,serif; letter-spacing:-.7px; min-height:68px; } .card-subtitle { font-size:14px; line-height:1.5; margin-top:10px; min-height:43px; } .card-description { font-size:15px; line-height:1.7; color:#746970; margin:18px 0 25px; flex:1; } .card-footer { display:flex; justify-content:space-between; align-items:center; } .price { font-size:27px; letter-spacing:-.8px; } .price>span { font-size:16px; } .price small { display:block; font-size:12px; color:#7b6b74; letter-spacing:0; margin-top:5px; } .round-button { width:47px; height:47px; border:0; display:grid; place-items:center; border-radius:50%; background:#744557; color:white; transition:transform .2s; } .card-1 .round-button { background:#7a658b; } .card-2 .round-button { background:#627563; } .round-button:hover { transform:translateY(-3px); } .followup-price { font-size:12px; margin-top:14px; color:#78616c; } .text-button { display:flex; gap:8px; align-items:center; width:fit-content; background:none; border:0; padding:12px 0 0; font-size:14px; color:#644550; } .service-card .text-button { margin-top:14px; border-top:1px solid #392c331c; width:100%; justify-content:space-between; } .how { margin-top:62px; padding:36px 0 40px; border-top:1px solid var(--border); display:grid; grid-template-columns:1fr 1fr; gap:20px 80px; } .how>.eyebrow { grid-column:1/-1; } .how h2 { font:400 38px/1.2 Georgia,serif; letter-spacing:-1px; } .steps { display:grid; gap:21px; } .steps>div { display:flex; gap:14px; } .steps>div>span { width:28px; height:28px; display:grid; place-items:center; border:1px solid #d8c7ce; border-radius:50%; font-size:12px; flex-shrink:0; } .steps p { font-size:15px; padding-top:4px; } .steps small { display:block; font-size:14px; line-height:1.5; color:#786c72; margin-top:5px; } footer { border-top:1px solid var(--border); padding:25px 0 calc(24px + env(safe-area-inset-bottom)); display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; font-size:12px; color:#7c7076; } footer p { order:3; width:100%; } .brand-footer { font-size:14px; color:#4e3c45; } .service-dialog { max-width:580px!important; padding:32px!important; border-radius:24px!important; max-height:90dvh; overflow-y:auto; gap:16px!important; font-size:16px!important; } .modal-close { position:absolute; right:16px; top:14px; border:0; border-radius:50%; width:36px; height:36px; display:grid; place-items:center; background:#eee6e3; } .service-dialog>.eyebrow { margin-right:25px; font-size:10px; } .modal-title { font:400 36px/1.12 Georgia,serif!important; letter-spacing:-1px; } .modal-description,.service-dialog>p { font-size:16px!important; line-height:1.65; color:#746871; } .topic-list { display:flex; flex-wrap:wrap; gap:7px; } .topic-list span { padding:8px 11px; background:#eee7e6; border-radius:8px; font-size:13px; } h4 { font-size:16px; font-weight:600; margin:6px 0 -8px; } .service-dialog .practice-note { font-size:13px!important; border-left:2px solid #b59ba8; padding-left:12px; } .options { margin:4px 0; border:0; padding:0; display:grid; gap:8px; } .options legend { font-size:14px; margin-bottom:10px; } .options label { display:flex; align-items:center; gap:9px; border:1px solid #d8cdcf; border-radius:12px; padding:15px 12px; cursor:pointer; font-size:14px; } .options label.chosen { border-color:#8e6176; background:#f3e9ed; } .options label span { flex:1; } .options strong { white-space:nowrap; font-weight:500; } input { accent-color:#744557; width:17px; height:17px; flex-shrink:0; } .primary-button { display:flex; align-items:center; justify-content:center; gap:14px; background:#744557; color:white; border:0; border-radius:13px; padding:17px; min-height:52px; font-size:16px; } .primary-button:hover { background:#633749; } .secondary-button { border:1px solid #d7c9cf; background:none; border-radius:12px; padding:14px; display:flex; justify-content:center; align-items:center; gap:10px; } .message-preview { padding:20px; border-radius:14px; background:#f0e8e8; } .message-preview>span { font-size:10px; letter-spacing:1.4px; color:#866577; } .message-preview p { white-space:pre-wrap; font-size:16px; line-height:1.7; margin-top:12px; user-select:text; } .setup-note { background:#f1eadd; padding:14px; border-radius:12px; } .copy-status { font-size:13px!important; }
@media(max-width:850px) { .shell { padding:0 24px; } .service-grid { gap:12px; } .service-card { padding:20px; } h3 { font-size:25px; } .card-description { font-size:14px; } .how { gap:20px; } }
@media(max-width:650px) { .shell { padding:0 20px; padding-top:env(safe-area-inset-top); } .topbar { padding:19px 0; } .header-note { display:none; } .brand { font-size:14px; } .brand-mark { width:34px; height:34px; } .intro { padding:32px 0 32px; } h1 { font-size:66px; letter-spacing:-3px; margin:20px 0; } .intro-index { right:5px; top:105px; font-size:23px; } .intro-bottom { display:block; } .intro-bottom p { font-size:16px; line-height:1.55; } .jump { display:none; } .eyebrow { font-size:10px; letter-spacing:1.4px; } .section-label { margin-bottom:15px; } .section-label h2 { font-size:16px; } .section-label>span { font-size:12px; } .service-grid { grid-template-columns:1fr; gap:16px; } .service-card { padding:25px; border-radius:20px; } .card-top { margin-bottom:23px; } h3 { min-height:0; font-size:32px; max-width:290px; } .card-subtitle { min-height:0; font-size:15px; } .category { font-size:10px; } .card-description { font-size:16px; margin:17px 0 22px; } .price { font-size:29px; } .how { margin-top:34px; padding:28px 0; grid-template-columns:1fr; gap:22px; } .how h2 { font-size:33px; } .steps { margin-top:5px; } .service-dialog { padding:25px!important; max-height:92dvh; } .modal-title { font-size:31px!important; } footer { line-height:1.6; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { animation:none!important; transition:none!important; } }

.brand-role { display:block; font-size:12px; font-weight:400; color:#7c6b74; margin-top:4px; }

/* Keep the signature in normal flow so it cannot overlap the heading. */
.intro-index { position:static; display:block; width:fit-content; margin:26px 0 0 auto; transform:none; font-size:27px; line-height:1.3; }
.meeting-format { margin:0 0 22px; font-size:16px; line-height:1.6; color:#66505d; }
.meeting-format strong { font-weight:500; }
@media(max-width:650px) { .intro-index { margin-top:20px; font-size:24px; } .intro>.eyebrow { line-height:1.6; letter-spacing:1px; } }

/* Keep the supplied portrait intact; show the full photo inside the header circle. */
.brand-avatar { position:relative; overflow:hidden; flex-shrink:0; width:44px; height:44px; }
.brand-avatar img { position:absolute; width:100%; height:100%; max-width:none; left:0; top:0; object-fit:cover; }

.card-description { white-space:pre-line; }

dialog.service-dialog{position:fixed;inset:0;margin:auto;width:calc(100% - 32px);border:1px solid var(--border);background:var(--background);color:var(--foreground)}dialog::backdrop{background:#23141b66;backdrop-filter:blur(3px)}#dialog-body{display:grid;gap:16px}#dialog-body>p{line-height:1.65;color:#746871}.service-dialog p.eyebrow{font-size:10px; margin-right:25px}.modal-close{font-size:26px}.icon-tile{font-size:27px}.round-button{font-size:25px}.service-dialog .primary-button{width:100%}.service-dialog .copy-status{margin:0}button{color:inherit}button.primary-button,button.round-button{color:white}body:has(dialog[open]){overflow:hidden}button,a{min-height:36px}h1{margin-top:24px}.custom-price{font-size:19px;line-height:1.3}.options label strong{max-width:110px;white-space:normal;text-align:right}