/* Art direction: calm educational guidance; spacious warm grey and dusty-pink pastel palette. */
:root {
   --bg           : #FAF6F7;
   --surface      : #FFFDFD;
   --surface-soft : #F5EDEF;
   --surface-grey : #EFEBEC;
   --pink-soft    : #F2DFE5;
   --pink-mid     : #D9A9B9;
   --border       : #E5D8DC;
   --text         : #3D3439;
   --muted        : #6F6269;
   --accent       : #9B4F6A;
   --accent-dark  : #7C3D54;
   --white        : #FFFFFF;
   --shadow-sm    : 0 2px 10px rgba(83, 52, 63, 0.06);
   --shadow-md    : 0 16px 40px rgba(83, 52, 63, 0.10);
   --radius-sm    : 0.5rem;
   --radius-md    : 0.8rem;
   --radius-lg    : 1.25rem;
   --space-1      : 0.25rem;
   --space-2      : 0.5rem;
   --space-3      : 0.75rem;
   --space-4      : 1rem;
   --space-5      : 1.25rem;
   --space-6      : 1.5rem;
   --space-8      : 2rem;
   --space-10     : 2.5rem;
   --space-12     : 3rem;
   --space-16     : 4rem;
   --content      : 72rem;
   --prose        : 68ch;
}

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

html { scroll-behavior : smooth; }

body {
   font-family            : "Segoe UI", system-ui, -apple-system, sans-serif;
   font-size              : 1rem;
   line-height            : 1.7;
   min-height             : 100vh;
   margin                 : 0;
   color                  : var(--text);
   background             : var(--bg);
   -webkit-font-smoothing : antialiased;
}

img, video, iframe, svg { display : block; max-width : 100%; }

a { color : var(--accent-dark); text-underline-offset : 0.2em; }

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

button { color : inherit; }

:focus-visible { outline : 3px solid var(--pink-mid); outline-offset : 3px; }

::selection { color : var(--text); background : var(--pink-soft); }

.skip-link {
   position      : fixed;
   z-index       : 100;
   padding       : var(--space-3) var(--space-4);
   transform     : translateY(-160%);
   color         : var(--white);
   border-radius : var(--radius-sm);
   background    : var(--accent-dark);
   inset         : var(--space-3) auto auto var(--space-3);
}

.skip-link:focus { transform : translateY(0); }

.site-header {
   position        : sticky;
   z-index         : 20;
   top             : 0;
   display         : flex;
   align-items     : center;
   min-height      : 5rem;
   padding         : var(--space-3) max(var(--space-5), calc((100vw - var(--content)) / 2));
   border-bottom   : 1px solid var(--border);
   background      : color-mix(in srgb, var(--surface) 92%, transparent);
   gap             : var(--space-6);
   backdrop-filter : blur(16px);
}

.brand {
   display         : inline-flex;
   align-items     : center;
   flex            : 0 0 auto;
   min-height      : 2.75rem;
   text-decoration : none;
   color           : var(--text);
   gap             : var(--space-3);
}

.brand-mark { width : 2.6rem; color : var(--accent); fill : currentColor; }

.brand span { line-height : 1.1; display : grid; }

.brand strong { font-family : Georgia, serif; font-size : 1.35rem; font-weight : 600; }

.brand small { font-size : 0.76rem; margin-top : var(--space-1); letter-spacing : 0.04em; color : var(--muted); }

.site-nav { display : flex; align-items : center; margin-left : auto; gap : var(--space-1); }

.nav-link,
.dropdown-menu a {
   font-size       : 0.91rem;
   font-weight     : 550;
   display         : inline-flex;
   align-items     : center;
   min-height      : 2.75rem;
   padding         : var(--space-2) var(--space-3);
   cursor          : pointer;
   transition      : color 160ms ease, background 160ms ease, transform 160ms ease;
   text-decoration : none;
   color           : var(--text);
   border-radius   : 999px;
}

.nav-link:hover,
.dropdown-menu a:hover { color : var(--accent-dark); background : var(--pink-soft); }

.nav-link:active,
.dropdown-menu a:active { transform : translateY(1px); }

.nav-link.is-active,
.dropdown-menu a.is-active,
.nav-dropdown.has-active-page > summary { color : var(--accent-dark); background : var(--surface-soft); }

.nav-cta { color : var(--white); background : var(--accent); }

.nav-cta:hover,
.nav-cta.is-active { color : var(--white); background : var(--accent-dark); }

.nav-dropdown { position : relative; }

.nav-dropdown summary { list-style : none; }

.nav-dropdown summary::-webkit-details-marker { display : none; }

.nav-dropdown summary::after {
   width        : 0.42rem;
   height       : 0.42rem;
   margin       : 0 0 0.25rem var(--space-2);
   content      : "";
   transition   : transform 160ms ease;
   transform    : rotate(45deg);
   border       : solid currentColor;
   border-width : 0 2px 2px 0;
}

.nav-dropdown[open] summary::after { transform : translateY(0.2rem) rotate(225deg); }

.dropdown-menu {
   position      : absolute;
   top           : calc(100% + var(--space-2));
   left          : 0;
   display       : grid;
   min-width     : 19rem;
   padding       : var(--space-2);
   border        : 1px solid var(--border);
   border-radius : var(--radius-md);
   background    : var(--surface);
   box-shadow    : var(--shadow-md);
}

.dropdown-menu a { border-radius : var(--radius-sm); }

.menu-toggle {
   display       : none;
   align-items   : center;
   min-height    : 2.75rem;
   margin-left   : auto;
   padding       : var(--space-2) var(--space-3);
   cursor        : pointer;
   border        : 1px solid var(--border);
   border-radius : 999px;
   background    : var(--surface-soft);
   gap           : var(--space-2);
}

.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
   width         : 1rem;
   height        : 2px;
   border-radius : 2px;
   background    : currentColor;
}

.menu-toggle-icon { position : relative; }

.menu-toggle-icon::before,
.menu-toggle-icon::after { position : absolute; left : 0; content : ""; }

.menu-toggle-icon::before { top : -5px; }

.menu-toggle-icon::after { top : 5px; }

#app {
   width         : min(100% - 2 * var(--space-5), var(--content));
   min-height    : 60vh;
   margin-inline : auto;
   padding-block : clamp(var(--space-10), 6vw, var(--space-16));
}

.page-shell { display : grid; gap : var(--space-12); }

.prose { max-width : var(--prose); }

.eyebrow {
   font-size      : 0.82rem;
   font-weight    : 750;
   margin         : 0 0 var(--space-3);
   letter-spacing : 0.11em;
   text-transform : uppercase;
   color          : var(--accent-dark);
}

h1, h2, h3 { line-height : 1.18; text-wrap : balance; color : var(--text); }

h1 { font-family : Georgia, serif; font-size : clamp(2.2rem, 5vw, 4.4rem); font-weight : 500; max-width : 18ch; margin : 0 0 var(--space-5); }

h2 { font-family : Georgia, serif; font-size : clamp(1.55rem, 2.5vw, 2.15rem); font-weight : 500; margin : 0 0 var(--space-4); }

h3 { font-size : 1.08rem; margin : 0 0 var(--space-2); }

p { max-width : var(--prose); margin : 0 0 var(--space-5); }

.lead { font-size : clamp(1.08rem, 2vw, 1.3rem); max-width : 60ch; color : var(--muted); }

.muted { color : var(--muted); }

.hero {
   display               : grid;
   align-items           : center;
   grid-template-columns : minmax(0, 1.25fr) minmax(18rem, 0.75fr);
   gap                   : clamp(var(--space-8), 6vw, var(--space-16));
}

.hero-panel,
.soft-panel,
.sidebar-box {
   padding       : clamp(var(--space-6), 4vw, var(--space-10));
   border        : 1px solid var(--border);
   border-radius : var(--radius-lg);
   background    : var(--surface-soft);
}

.hero-panel { position : relative; overflow : hidden; }

.hero-panel::after {
   position      : absolute;
   right         : -3rem;
   bottom        : -4rem;
   width         : 11rem;
   height        : 11rem;
   content       : "";
   opacity       : 0.75;
   border-radius : 45% 55% 52% 48%;
   background    : var(--pink-soft);
}

.hero-panel > * { position : relative; z-index : 1; }

.content-grid {
   display               : grid;
   align-items           : start;
   grid-template-columns : minmax(0, 1.65fr) minmax(17rem, 0.75fr);
   gap                   : clamp(var(--space-8), 5vw, var(--space-16));
}

.sidebar-box { position : sticky; top : 7rem; background : var(--pink-soft); }

.sidebar-box h2 { font-size : 1.45rem; }

.service-grid,
.card-grid {
   display               : grid;
   grid-template-columns : repeat(3, minmax(0, 1fr));
   gap                   : var(--space-5);
}

.service-card,
.info-card,
.price-card {
   padding       : var(--space-6);
   border        : 1px solid var(--border);
   border-radius : var(--radius-md);
   background    : var(--surface);
   box-shadow    : var(--shadow-sm);
}

.service-card { display : flex; flex-direction : column; }

.service-card p { color : var(--muted); }

.service-card .text-link { margin-top : auto; }

.text-link { font-weight : 700; display : inline-flex; align-items : center; gap : var(--space-2); }

.text-link::after { content : "→"; }

.section-block { display : grid; gap : var(--space-5); }

.section-block + .section-block { margin-top : var(--space-12); }

.section-heading { max-width : 48rem; }

.check-list,
.detail-list,
.step-list,
.price-list,
.review-list {
   display    : grid;
   margin     : 0;
   padding    : 0;
   list-style : none;
   gap        : var(--space-3);
}

.check-list.columns,
.detail-list.columns { grid-template-columns : repeat(2, minmax(0, 1fr)); }

.check-list li,
.detail-list li {
   position      : relative;
   min-height    : 3.25rem;
   padding       : var(--space-3) var(--space-4) var(--space-3) 2.8rem;
   border        : 1px solid var(--border);
   border-radius : var(--radius-sm);
   background    : var(--surface);
}

.check-list li::before,
.detail-list li::before {
   position      : absolute;
   top           : 1.15rem;
   left          : 1.05rem;
   width         : 0.62rem;
   height        : 0.62rem;
   content       : "";
   transform     : rotate(45deg);
   border-radius : 0.12rem;
   background    : var(--accent);
}

.step-list { counter-reset : steps; }

.step-list li {
   position          : relative;
   padding           : var(--space-5) var(--space-5) var(--space-5) 4.2rem;
   counter-increment : steps;
   border            : 1px solid var(--border);
   border-radius     : var(--radius-md);
   background        : var(--surface);
}

.step-list li::before {
   font-weight   : 750;
   position      : absolute;
   top           : var(--space-5);
   left          : var(--space-5);
   display       : grid;
   width         : 2rem;
   height        : 2rem;
   content       : counter(steps);
   color         : var(--white);
   border-radius : 50%;
   background    : var(--accent);
   place-items   : center;
}

.step-list strong { display : block; margin-bottom : var(--space-1); }

.method-list { display : grid; grid-template-columns : repeat(3, 1fr); gap : var(--space-5); }

.method-item { padding : var(--space-6); border : 1px solid var(--border); border-radius : var(--radius-md); background : var(--surface); }

.method-item .label { font-weight : 750; display : block; margin-bottom : var(--space-2); color : var(--accent-dark); }

.button-row { display : flex; flex-wrap : wrap; margin-top : var(--space-6); gap : var(--space-3); }

.btn {
   font-weight     : 700;
   display         : inline-flex;
   align-items     : center;
   justify-content : center;
   min-height      : 2.9rem;
   padding         : var(--space-3) var(--space-6);
   transition      : background 160ms ease, transform 160ms ease;
   text-decoration : none;
   color           : var(--white);
   border          : 0;
   border-radius   : 999px;
   background      : var(--accent);
   box-shadow      : var(--shadow-sm);
}

.btn:hover { transform : translateY(-1px); color : var(--white); background : var(--accent-dark); }

.btn-secondary { color : var(--accent-dark); border : 1px solid var(--pink-mid); background : var(--surface); }

.btn-secondary:hover { color : var(--accent-dark); background : var(--pink-soft); }

.btn-disabled { cursor : not-allowed; color : var(--muted); background : var(--surface-grey); box-shadow : none; }

.btn-disabled:hover { transform : none; color : var(--muted); background : var(--surface-grey); }

.table-wrap { overflow-x : auto; margin-bottom : var(--space-6); border : 1px solid var(--border); border-radius : var(--radius-md); box-shadow : var(--shadow-sm); }

table { width : 100%; min-width : 34rem; border-collapse : collapse; background : var(--surface); }

th, td { padding : var(--space-4) var(--space-5); text-align : left; vertical-align : top; border-bottom : 1px solid var(--border); }

th { font-size : 0.92rem; color : var(--accent-dark); background : var(--pink-soft); }

tr:last-child td { border-bottom : 0; }

tbody tr:nth-child(even) { background : var(--bg); }

.price-note { padding : var(--space-4); color : var(--muted); border-radius : var(--radius-sm); background : var(--surface-soft); }

.callout {
   padding       : var(--space-6);
   border-radius : var(--radius-md);
   background    : var(--surface-grey);
}

.callout > :last-child { margin-bottom : 0; }

.media-card { max-width : 38rem; padding : var(--space-5); border : 1px solid var(--border); border-radius : var(--radius-lg); background : var(--surface); }

.embed-wrapper { overflow : hidden; width : 100%; }

.tiktok-embed { min-width : 0 !important; margin-inline : auto !important; }

.review-list li { padding : var(--space-6); border : 1px solid var(--border); border-radius : var(--radius-md); background : var(--surface); }

.review-list blockquote { margin : 0 0 var(--space-3); }

.review-list cite { font-weight : 650; font-style : normal; color : var(--muted); }

.booking-placeholder { padding : var(--space-6); border : 1px dashed var(--pink-mid); border-radius : var(--radius-md); background : var(--pink-soft); }

.booking-placeholder code { color : var(--accent-dark); }

.loading-state,
.empty-state { max-width : 40rem; margin : var(--space-16) auto; padding : var(--space-8); text-align : center; border-radius : var(--radius-lg); background : var(--surface); }

.empty-state h1 { font-size : 2rem; margin-inline : auto; }

.site-footer {
   display         : flex;
   justify-content : space-between;
   padding         : var(--space-8) max(var(--space-5), calc((100vw - var(--content)) / 2));
   color           : var(--muted);
   border-top      : 1px solid var(--border);
   background      : var(--surface-grey);
   gap             : var(--space-5);
}

.site-footer p { margin : 0; }

.site-footer a { font-weight : 700; }

@media (max-width : 52rem) {
   .hero,
   .content-grid { grid-template-columns : 1fr; }

   .sidebar-box { position : static; }

   .service-grid,
   .card-grid,
   .method-list { grid-template-columns : 1fr; }

   .check-list.columns,
   .detail-list.columns { grid-template-columns : 1fr; }

   .site-footer { flex-direction : column; }
}

@media (max-width : 32rem) {
   #app { width : min(100% - 2 * var(--space-4), var(--content)); }

   h1 { font-size : 2.25rem; }

   .hero-panel,
   .soft-panel,
   .sidebar-box { padding : var(--space-5); }

   .button-row { align-items : stretch; flex-direction : column; }

   .btn { width : 100%; }
}

@media (prefers-reduced-motion : reduce) {
   *, *::before, *::after { transition-duration : 0.01ms !important; scroll-behavior : auto !important; }
}

/* Responsive top bar: JavaScript collapses it only when its contents no longer fit. */
:root { --nav-content : 92rem; }

.site-header {
   flex-wrap      : nowrap;
   padding-inline : max(var(--space-4), calc((100vw - var(--nav-content)) / 2));
   gap            : var(--space-3);
}

.brand { gap : var(--space-2); }

.brand-mark { width : 2.25rem; }

.brand strong { font-size : 1.2rem; }

.brand small { font-size : 0.72rem; }

.site-nav {
   display     : flex;
   overflow    : visible;
   align-items : center;
   flex        : 0 0 auto;
   max-height  : none;
   margin-left : auto;
   padding     : 0;
   gap         : var(--space-1);
}

.nav-link {
   font-size      : clamp(0.75rem, 0.68rem + 0.12vw, 0.84rem);
   min-height     : 2.75rem;
   white-space    : nowrap;
   padding-inline : clamp(var(--space-2), 0.55vw, var(--space-3));
}

.menu-toggle { display : none; }

.site-header.nav-is-collapsed { flex-wrap : wrap; }

.site-header.nav-is-collapsed .menu-toggle { display : inline-flex; }

.site-header.nav-is-collapsed .site-nav {
   display     : none;
   overflow-y  : auto;
   align-items : stretch;
   flex        : 1 0 100%;
   max-height  : calc(100dvh - 6rem);
   margin      : 0;
   padding-top : var(--space-3);
}

.site-header.nav-is-collapsed .site-nav.is-open { display : grid; }

.site-header.nav-is-collapsed .nav-link {
   font-size       : 0.95rem;
   justify-content : space-between;
   width           : 100%;
   border-radius   : var(--radius-sm);
}

/* Automatically generated index for long pages. */
.long-page-layout {
   display               : grid;
   align-items           : start;
   grid-template-columns : minmax(13rem, 0.38fr) minmax(0, 1fr);
   gap                   : clamp(var(--space-8), 5vw, var(--space-16));
}

.long-page-content { display : grid; min-width : 0; gap : var(--space-12); }

.page-index { top : 6.5rem; padding : var(--space-6); }

.page-index h2 { font-size : 1.35rem; }

.page-index-list { display : grid; margin : 0; padding : 0; list-style : none; gap : var(--space-1); }

.page-index-list a {
   display         : block;
   padding         : var(--space-2) var(--space-3);
   text-decoration : none;
   color           : var(--text);
   border-radius   : var(--radius-sm);
}

.page-index-list a:hover,
.page-index-list a[aria-current="location"] { color : var(--accent-dark); background : var(--surface); }

.section-block h2 { scroll-margin-top : 7rem; }

/* Review form. */
.review-form-panel {
   max-width     : 58rem;
   padding       : clamp(var(--space-6), 4vw, var(--space-10));
   border        : 1px solid var(--border);
   border-radius : var(--radius-lg);
   background    : var(--surface);
   box-shadow    : var(--shadow-sm);
}

.review-form { display : grid; gap : var(--space-6); }

.form-grid { display : grid; grid-template-columns : repeat(2, minmax(0, 1fr)); gap : var(--space-5); }

.form-field { display : grid; align-content : start; gap : var(--space-2); }

.form-field-wide { grid-column : 1 / -1; }

.form-field label { font-weight : 700; }

.form-field small { color : var(--muted); }

.form-field input,
.form-field select,
.form-field textarea {
   width         : 100%;
   min-height    : 3rem;
   padding       : var(--space-3) var(--space-4);
   color         : var(--text);
   border        : 1px solid var(--border);
   border-radius : var(--radius-sm);
   background    : var(--bg);
}

.form-field textarea { min-height : 10rem; resize : vertical; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color : var(--accent); box-shadow : 0 0 0 3px var(--pink-soft); }

.consent-field { display : flex; align-items : flex-start; gap : var(--space-3); }

.consent-field input { flex : 0 0 auto; width : 1.2rem; height : 1.2rem; margin-top : 0.3rem; accent-color : var(--accent); }

.form-actions { display : flex; align-items : center; flex-wrap : wrap; gap : var(--space-4); }

.form-status { margin : 0; color : var(--muted); }

.form-status.is-success { font-weight : 700; color : #416A32; }

.form-status.is-error { font-weight : 700; color : #9A3030; }

.review-form button:disabled { cursor : wait; transform : none; opacity : 0.65; }

.honeypot { position : absolute; left : -10000px; overflow : hidden; width : 1px; height : 1px; }

@media (max-width : 52rem) {
   .long-page-layout { grid-template-columns : 1fr; }

   .page-index { position : static; }

   .form-grid { grid-template-columns : 1fr; }

   .form-field-wide { grid-column : auto; }
}

@media (max-width : 32rem) {
   .site-header { padding-inline : var(--space-4); }

   .brand small { display : none; }

   .form-actions { align-items : stretch; flex-direction : column; }

   .form-actions .btn { width : 100%; }
}

/* Desktop dropdown */
.site-nav > .nav-dropdown {
   position : relative;
   flex     : 0 0 auto;
}

.nav-dropdown > summary {
   list-style : none;
   cursor     : pointer;
}

.nav-dropdown > summary::-webkit-details-marker {
   display : none;
}

.nav-dropdown:not([open]) > .dropdown-menu {
   display : none;
}

.nav-dropdown > .dropdown-menu {
   position      : absolute;
   z-index       : 30;
   top           : calc(100% + var(--space-2));
   left          : 0;

   display       : grid;
   width         : max-content;
   min-width     : 17rem;
   max-width     : min(24rem, calc(100vw - 2rem));

   padding       : var(--space-2);
   border        : 1px solid var(--border);
   border-radius : var(--radius-md);
   background    : var(--surface);
   box-shadow    : var(--shadow-md);
}

.nav-dropdown > .dropdown-menu .nav-link {
   justify-content : flex-start;
   white-space     : normal;
   border-radius   : var(--radius-sm);
}

.nav-dropdown.has-active-page > summary {
   color      : var(--accent-dark);
   background : var(--surface-soft);
}

/* Dropdown becomes an inline expandable group in the mobile menu. */
.site-header.nav-is-collapsed .nav-dropdown {
   width : 100%;
}

.site-header.nav-is-collapsed .nav-dropdown > summary {
   width : 100%;
}

.site-header.nav-is-collapsed .dropdown-menu {
   position   : static;
   width      : 100%;
   min-width  : 0;
   max-width  : none;
   margin-top : var(--space-2);
   box-shadow : none;
}