@font-face {
  font-family:"Instrument Serif";
  src:url("./assets/fonts/instrument-serif.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:"Instrument Serif";
  src:url("./assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-style:italic;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:Inter;
  src:url("./assets/fonts/inter.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

:root {
  --ink:#20382c;
  --dark:#192e24;
  --paper:#fffdf8;
  --canvas:#f6f6ef;
  --sage:#dce5ce;
  --sage-soft:#edf0e5;
  --muted:#556358;
  --border:#e3e6db;
  --terracotta:#a45336;
  --serif:"Instrument Serif", Georgia, serif;
  --sans:"Inter", Arial, sans-serif;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--canvas);
  font-synthesis:none;
  color-scheme:light;
}
*, *::before, *::after { box-sizing:border-box; }
body { margin:0; min-width:320px; }
a { color:inherit; text-decoration:none; }
button, input, select, textarea { font:inherit; }
button { color:inherit; cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline:2px solid #58816a; outline-offset:3px; }
img { display:block; max-width:100%; }
button svg, a svg { flex-shrink:0; }
[hidden] { display:none !important; }
.skip { position:fixed; z-index:20; top:8px; left:8px; padding:12px 16px; border-radius:8px; background:var(--paper); transform:translateY(-150%); }
.skip:focus { transform:none; }
.brand { display:inline-flex; align-items:center; gap:11px; white-space:nowrap; flex-shrink:0; }
.brand img { width:38px; height:38px; object-fit:cover; border-radius:9px; flex:none; }
.brand > span { font-family:var(--serif); font-size:27px; line-height:1; letter-spacing:-.035em; }
.brand em { font-weight:400; }
.eyebrow { color:var(--muted); font-size:.7rem; font-weight:700; letter-spacing:.16em; display:flex; gap:9px; align-items:center; margin:0; }
.eyebrow > span { background:#658662; width:7px; height:7px; border-radius:100%; }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:12px; border:1px solid transparent; border-radius:8px; min-height:45px; padding:11px 16px; font-size:.87rem; font-weight:650; text-align:center; transition:background .18s, border-color .18s, color .18s; }
.btn-primary { background:var(--ink); color:#fffef8; }
.btn-primary:hover { background:#335541; }
.btn-outline { border-color:#d9dfd0; background:transparent; }
.btn-outline:hover { background:var(--sage-soft); border-color:#bac7b2; }
.btn-light { background:var(--sage); color:var(--ink); }
.btn-light:hover { background:#f1f3e7; }
.quiet-link, .text-button { display:inline-flex; align-items:center; gap:8px; font-size:.86rem; font-weight:650; }
.quiet-link:hover, .text-button:hover { text-decoration:underline; text-underline-offset:4px; }
.text-button { padding:0; background:none; border:0; text-align:left; }
.web-wrap { max-width:1260px; width:calc(100% - 96px); margin-inline:auto; }
.web-header { border-bottom:1px solid var(--border); }
.web-nav { min-height:79px; display:flex; align-items:center; justify-content:space-between; gap:22px; }
.web-nav nav { display:flex; align-items:center; gap:30px; font-size:.88rem; font-weight:550; color:#43554a; }
.web-nav nav a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:5px; }
.hero { display:grid; grid-template-columns:1.03fr 1fr; gap:64px; align-items:center; padding-block:36px 49px; }
.hero-copy { padding-block:25px; }
.hero h1 { font:400 clamp(58px,7.1vw,112px)/.89 var(--serif); margin:23px 0; letter-spacing:-.047em; }
.hero h1 em { color:#597654; font-weight:400; }
.hero-copy > p:not(.eyebrow) { color:var(--muted); line-height:1.6; max-width:405px; font-size:clamp(.95rem,1.4vw,1.12rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:13px 19px; align-items:center; margin-top:27px; }
.hero-note { display:flex; gap:8px; align-items:center; margin-top:31px; color:var(--muted); font-size:.8rem; }
.hero-photo { margin:0; height:clamp(420px,42vw,590px); border-radius:12px; overflow:hidden; background:#777457; }
.hero-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 63%; }
.service-section { background:#ecefe3; padding:52px 0 60px; }
.web-section-head { display:flex; gap:12px 24px; justify-content:space-between; align-items:end; margin-bottom:26px; }
.web-section-head h2, .about-inner h2 { font:400 clamp(42px,5vw,64px)/.95 var(--serif); letter-spacing:-.03em; margin:0; }
.web-section-head p { color:var(--muted); margin:0 0 3px; }
.service-grid, .flow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.service-card { border:1px solid var(--border); border-radius:11px; background:var(--paper); padding:26px; display:flex; flex-direction:column; align-items:flex-start; }
.service-icon { width:43px; height:43px; display:grid; place-items:center; border-radius:9px; background:var(--sage-soft); }
.service-card h3, .flow-grid h3 { font:400 32px/1.05 var(--serif); margin:18px 0 5px; }
.service-card p, .flow-grid p { font-size:.88rem; line-height:1.65; color:var(--muted); margin:9px 0 20px; }
.service-card .service-detail { margin:0; color:#46614e; font-size:.76rem; font-weight:650; }
.service-card .text-button { margin-top:auto; }
.flow-section { padding-block:57px; }
.flow-grid { padding:0; list-style:none; margin:0; }
.flow-grid li { padding:20px 20px 0 0; border-top:1px solid #cbd4c0; }
.flow-grid li > span { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--sage-soft); color:#37543d; font-weight:700; font-size:.8rem; }
.flow-grid p { max-width:290px; }
.about-section { background:var(--dark); color:#f8f7ee; }
.about-inner { padding-block:50px; display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; }
.about-inner .eyebrow { color:#b9cab4; margin-bottom:15px; }
.about-inner p:not(.eyebrow) { line-height:1.65; margin:0 0 19px; color:#e4eadb; max-width:485px; }
.web-footer > div { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:15px; min-height:91px; padding-block:16px; }
.web-footer > div > span { color:var(--muted); font-size:.8rem; }
.web-footer > div > a:last-child { font-size:.83rem; font-weight:600; display:flex; gap:6px; align-items:center; }

.login { display:grid; grid-template-columns:minmax(475px,1fr) minmax(0, .92fr); min-height:100dvh; background:var(--paper); }
.login-side { display:flex; flex-direction:column; min-height:100dvh; padding:26px clamp(28px,4.4vw,75px) 22px; }
.login-header { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.login-content { width:100%; max-width:525px; margin:auto; padding:42px 0; }
.login-content h1 { font:400 clamp(54px,5.5vw,84px)/.94 var(--serif); letter-spacing:-.035em; margin:17px 0 12px; }
.login-description { font-size:.98rem; color:var(--muted); line-height:1.55; margin:0 0 25px; }
.login-content fieldset { margin:0; padding:0; border:0; min-width:0; }
.login-content legend { margin:0 0 10px; font-size:.8rem; font-weight:650; padding:0; }
.role-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.role-tile { position:relative; display:block; cursor:pointer; }
.role-tile input { position:absolute; opacity:0; width:1px; height:1px; }
.role-card { display:grid; grid-template-columns:31px 1fr 12px; align-items:center; min-height:69px; gap:8px; border:1px solid #e1e4da; border-radius:8px; background:#f9f9f3; padding:10px; }
.role-card:hover { border-color:#a3b498; }
.role-icon { width:31px; height:31px; border-radius:6px; display:grid; place-items:center; background:var(--sage-soft); }
.role-card strong { display:block; font-size:.78rem; margin-bottom:3px; }
.role-card small { display:block; color:var(--muted); font-size:.66rem; line-height:1.32; }
.role-indicator { width:12px; height:12px; border:1px solid #849283; border-radius:50%; }
.role-tile input:checked + .role-card { border-color:#6d8967; background:#eff3e8; }
.role-tile input:checked + .role-card .role-indicator { border:4px solid #4e6f51; }
.role-tile input:focus-visible + .role-card { outline:2px solid #4e6f51; outline-offset:2px; }
.login-submit { width:100%; margin-top:14px; justify-content:space-between; padding-inline:15px; }
.login-note { display:flex; gap:8px; align-items:center; font-size:.76rem; color:var(--muted); margin:17px 0 0; }
.login-footer { color:var(--muted); font-size:.74rem; }
.login-photo { margin:14px 14px 14px 0; position:relative; min-height:610px; overflow:hidden; border-radius:12px; background:#6f6d4d; }
.login-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 66%; }
.login-photo::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent, #122017c9); }
.login-photo figcaption { position:absolute; z-index:1; bottom:35px; left:36px; right:28px; color:white; font:400 clamp(34px,4.3vw,65px)/1 var(--serif); }
.login-photo figcaption span { display:block; width:35px; height:1px; background:#e3e5cd; margin-bottom:15px; }

.panel-shell { --sidebar-width:234px; display:grid; grid-template-columns:var(--sidebar-width) minmax(0, 1fr); min-height:100dvh; }
.panel-shell.is-compact { --sidebar-width:76px; }
.sidebar { position:sticky; top:0; display:flex; flex-direction:column; align-self:start; height:100dvh; min-height:450px; padding:20px 13px 14px; background:#1e352a; color:#e3ece0; overflow-x:hidden; overflow-y:auto; }
.sidebar-brand { padding:1px 7px 21px; }
.sidebar .brand { gap:8px; }
.sidebar .brand img { width:34px; height:34px; border-radius:8px; }
.sidebar .brand > span { color:#fafaf1; font-size:22px; }
.sidebar-role { display:flex; align-items:center; gap:9px; padding:10px; border:1px solid #ffffff22; border-radius:8px; margin:0 0 19px; white-space:nowrap; }
.sidebar-role-icon { width:32px; height:32px; flex:none; display:grid; place-items:center; background:#dce5ce; color:var(--ink); border-radius:7px; }
.sidebar-role strong, .sidebar-role small { display:block; }
.sidebar-role strong { color:#fffdf6; font-size:.77rem; font-weight:650; margin-bottom:3px; }
.sidebar-role small { color:#b7c8b8; font-size:.66rem; }
.nav-group { margin-bottom:19px; }
.nav-group p { margin:0 9px 8px; color:#b1c3b3; font-size:.64rem; font-weight:650; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; }
.nav-group a, .sidebar-bottom > * { min-height:38px; display:flex; gap:10px; align-items:center; color:#d7e3d8; padding:7px 10px; margin:2px 0; border-radius:7px; font-size:.81rem; white-space:nowrap; }
.nav-group a[aria-current] { background:#dce5ce; color:#20382c; font-weight:700; }
.nav-group a:hover:not([aria-current]), .sidebar-bottom > :hover { background:#ffffff12; }
.sidebar-bottom { margin-top:auto; padding-top:8px; border-top:1px solid #ffffff20; }
.sidebar-bottom button { border:0; text-align:left; background:none; width:100%; }
.is-compact .sidebar-brand { padding-inline:8px; }
.is-compact .sidebar .brand > span, .is-compact .sidebar-role > span:last-child, .is-compact .sidebar .nav-group a > span, .is-compact .sidebar-bottom > * > span { display:none; }
.is-compact .sidebar .nav-group p { color:transparent; border-bottom:1px solid #ffffff22; margin-inline:7px; margin-bottom:7px; height:0; }
.is-compact .sidebar-role { padding:7px; justify-content:center; }
.is-compact .sidebar nav a, .is-compact .sidebar-bottom > * { justify-content:center; }
.panel-main { min-width:0; }
.panel-header { height:64px; display:flex; justify-content:space-between; align-items:center; gap:15px; padding-inline:clamp(17px,3vw,42px); border-bottom:1px solid var(--border); background:#fbfcf6; position:sticky; top:0; z-index:4; }
.panel-breadcrumb, .header-actions { display:flex; align-items:center; min-width:0; gap:12px; font-size:.81rem; }
.panel-breadcrumb > span:last-child { color:var(--ink); font-weight:650; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.bread-home, .bread-divider { color:var(--muted); }
.icon-btn { display:grid; flex:none; place-items:center; border:0; padding:0; background:transparent; width:36px; height:36px; border-radius:7px; color:var(--ink); }
.icon-btn:hover { background:var(--sage-soft); }
.mobile-nav { display:none; }
.nav-scrim { display:none; }
.profile-menu { position:relative; }
.profile-menu summary { display:flex; align-items:center; gap:7px; padding:4px 6px 4px 4px; cursor:pointer; list-style:none; border-radius:7px; font-size:.77rem; font-weight:650; }
.profile-menu summary::-webkit-details-marker { display:none; }
.profile-menu summary:hover { background:var(--sage-soft); }
.avatar { display:grid; place-items:center; background:#e4ead8; color:var(--ink); border-radius:50%; width:29px; height:29px; font-size:.66rem; }
.profile-list { position:absolute; right:0; top:calc(100% + 8px); width:max-content; background:var(--paper); border:1px solid var(--border); box-shadow:0 8px 24px #20382c20; border-radius:8px; padding:5px; }
.profile-list a, .profile-list button { width:100%; display:flex; gap:8px; align-items:center; font-size:.79rem; background:none; border:0; border-radius:5px; padding:9px; color:var(--ink); }
.profile-list a:hover, .profile-list button:hover { background:var(--sage-soft); }
.dashboard-content { min-width:0; padding:26px clamp(17px,3vw,42px) 38px; }

.modal { color:var(--ink); background:var(--paper); width:min(100% - 28px,505px); border:1px solid #d7e1cf; border-radius:13px; padding:22px; max-height:calc(100dvh - 32px); box-shadow:0 15px 60px #14251938; }
.modal::backdrop { background:#13231ab7; }
.modal-header { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:14px; }
.modal h2 { font:400 36px/1 var(--serif); margin:0; }
.modal p { color:var(--muted); font-size:.85rem; line-height:1.55; }
.form-field { display:grid; gap:6px; color:var(--ink); font-size:.78rem; font-weight:650; margin:0 0 11px; }
.form-field input, .form-field select { width:100%; min-height:42px; border-radius:7px; border:1px solid #cbd7c7; padding:8px 10px; background:#fcfcf7; color:var(--ink); }
.modal .btn-primary { margin-top:8px; }
.search-results a { display:grid; grid-template-columns:19px 1fr 18px; align-items:center; gap:8px; border-radius:7px; padding:10px; font-size:.86rem; }
.search-results a:hover { background:var(--sage-soft); }
.booking-summary { background:var(--sage-soft); border-radius:8px; padding:11px 13px; }
.booking-summary p { margin:3px 0; }
.booking-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:13px; align-items:center; }
#toast { position:fixed; z-index:15; right:18px; bottom:18px; max-width:min(390px,calc(100% - 36px)); opacity:0; transform:translateY(8px); pointer-events:none; padding:11px 15px; border-radius:8px; background:#20382c; color:#fffdf8; box-shadow:0 4px 16px #0003; font-size:.82rem; transition:opacity .2s, transform .2s; }
#toast.visible { opacity:1; transform:translateY(0); }

@media (max-width:1020px) {
  .web-wrap { width:calc(100% - 52px); }
  .hero { gap:31px; }
  .web-nav nav { gap:15px; }
  .sidebar { padding-inline:10px; }
  .panel-shell { --sidebar-width:211px; }
}
@media (max-width:800px) {
  .panel-shell, .panel-shell.is-compact { display:block; }
  .sidebar { position:fixed; inset:0 auto 0 0; width:min(275px,calc(100% - 50px)); z-index:10; visibility:hidden; transform:translateX(-105%); transition:transform .2s, visibility .2s; padding-inline:14px; min-height:0; }
  .nav-open .sidebar { visibility:visible; transform:none; }
  .nav-open .nav-scrim { display:block; position:fixed; inset:0; z-index:9; border:0; background:#13231a9c; }
  .is-compact .sidebar .brand > span, .is-compact .sidebar-role > span:last-child, .is-compact .sidebar .nav-group a > span, .is-compact .sidebar-bottom > * > span { display:block; }
  .is-compact .sidebar .nav-group p { color:#b1c3b3; border:0; height:auto; }
  .is-compact .sidebar-role, .is-compact .sidebar nav a, .is-compact .sidebar-bottom > * { justify-content:flex-start; }
  .mobile-nav { display:grid; }
  .collapse-nav { display:none; }
  .panel-header { height:58px; }
  .web-nav nav { display:none; }
  .hero { grid-template-columns:1fr 1fr; gap:22px; }
  .hero-photo { height:430px; }
  .service-grid { gap:11px; }
  .service-card { padding:17px; }
  .login { grid-template-columns:minmax(420px,1fr) .5fr; }
  .login-side { padding-inline:22px; }
  .login-photo figcaption { bottom:22px; left:19px; }
}
@media (max-width:620px) {
  .web-wrap { width:calc(100% - 32px); }
  .web-nav { min-height:66px; gap:8px; }
  .web-nav .brand > span { font-size:21px; }
  .web-nav .brand { gap:6px; }
  .web-nav .brand img { width:33px; height:33px; }
  .web-enter { padding:7px 9px; font-size:.74rem; min-height:36px; gap:4px; }
  .web-enter svg { width:13px; }
  .hero { grid-template-columns:1fr; padding-block:30px 25px; gap:20px; }
  .hero-copy { padding-block:0; }
  .hero h1 { font-size:clamp(58px,11.9vw,85px); margin:15px 0; }
  .hero-actions { margin-top:17px; }
  .hero-note { margin-top:17px; }
  .hero-photo { height:clamp(245px,69vw,420px); }
  .service-section, .flow-section { padding-block:33px; }
  .service-grid, .flow-grid, .about-inner { grid-template-columns:1fr; }
  .web-section-head { display:block; margin-bottom:19px; }
  .web-section-head p { margin:8px 0 0; font-size:.85rem; }
  .service-card h3 { margin-top:12px; }
  .flow-grid li { padding-top:12px; }
  .flow-grid h3 { margin-top:10px; }
  .about-inner { padding-block:34px; gap:16px; }
  .login { display:flex; flex-direction:column; min-height:100dvh; }
  .login-side { min-height:auto; padding:15px 17px; }
  .login-header .brand > span { font-size:22px; }
  .login-header .brand { gap:6px; }
  .login-header .brand img { width:33px; height:33px; }
  .login-header .quiet-link { font-size:.74rem; gap:4px; }
  .login-content { padding:30px 0 14px; }
  .login-content h1 { font-size:clamp(50px,11vw,72px); }
  .login-description { margin-bottom:17px; font-size:.89rem; }
  .login-footer { display:none; }
  .login-photo { margin:0 14px 14px; min-height:190px; }
  .login-photo figcaption { font-size:35px; }
  .login-photo img { object-position:center 65%; }
  .profile-label { display:none; }
  .panel-header { padding-inline:11px; }
  .dashboard-content { padding:17px 12px 24px; }
  .panel-breadcrumb, .header-actions { gap:6px; }
}
@media (max-width:360px) {
  .role-card { grid-template-columns:27px 1fr; padding:8px; gap:5px; }
  .role-icon { width:25px; height:25px; }
  .role-indicator { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; }
}
