/*
 * あおぞら不動産 公開サイト共通スタイル
 * Tailwind CDNを段階的に縮小するための独自CSS基盤です。
 */
:root {
  --ao-color-primary: #0ea5e9;
  --ao-color-primary-dark: #0284c7;
  --ao-color-primary-pale: #e0f2fe;
  --ao-color-primary-soft: #f0f9ff;
  --ao-color-text: #334155;
  --ao-color-heading: #0f172a;
  --ao-color-muted: #64748b;
  --ao-color-bg: #f8fafc;
  --ao-color-surface: #ffffff;
  --ao-color-border: #e2e8f0;
  --ao-container: 1300px;
  --ao-content: 1000px;
  --ao-radius-sm: 8px;
  --ao-radius: 16px;
  --ao-radius-lg: 24px;
  --ao-shadow: 0 4px 20px rgba(15, 23, 42, .05);
  --ao-shadow-card: 0 10px 30px rgba(14, 165, 233, .08);
  --ao-space-1: .5rem;
  --ao-space-2: 1rem;
  --ao-space-3: 1.5rem;
  --ao-space-4: 2rem;
  --ao-line: 1.75;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ao-site,
body {
  margin: 0;
  min-width: 0;
  background: var(--ao-color-bg);
  color: var(--ao-color-text);
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  line-height: var(--ao-line);
}
img { max-width: 100%; height: auto; }
a { color: inherit; }

.ao-container { width: min(100% - 2rem, var(--ao-container)); margin-inline: auto; }
.ao-content { width: min(100% - 2rem, var(--ao-content)); margin-inline: auto; }
.ao-section { margin-block: var(--ao-space-4); }
.ao-card {
  background: var(--ao-color-surface);
  border: 1px solid var(--ao-color-border);
  border-radius: var(--ao-radius);
  box-shadow: var(--ao-shadow);
}
.ao-heading { color: var(--ao-color-heading); font-weight: 800; line-height: 1.45; }
.ao-lead { color: var(--ao-color-muted); line-height: 1.9; }
.ao-grid { display: grid; gap: var(--ao-space-2); }
.ao-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .7rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.ao-button:hover { transform: translateY(-1px); }
.ao-button-primary { color: #fff; background: var(--ao-color-primary); }
.ao-button-primary:hover { background: var(--ao-color-primary-dark); }
.ao-button-secondary { color: var(--ao-color-primary-dark); background: #fff; border-color: var(--ao-color-primary); }
.ao-button-secondary:hover { background: var(--ao-color-primary-soft); }

/* Header */
.ao-desktop-header { display: none; }
.main-header,
.ao-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 15px 20px;
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--ao-shadow);
  backdrop-filter: blur(10px);
}
.main-header-inner,
.ao-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, var(--ao-container));
  margin-inline: auto;
  gap: 1rem;
}
.ao-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.main-header img,
.ao-brand img { width: auto; height: 42px; transition: transform .3s ease; }
.main-header img:hover,
.ao-brand img:hover { transform: scale(1.02); }
.ao-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; min-width: 0; }
.ao-header-nav { display: none; gap: 1.5rem; align-items: center; color: #475569; font-size: .875rem; font-weight: 700; }
.ao-header-nav a { text-decoration: none; }
.ao-header-nav a:hover { color: var(--ao-color-primary); }
.ao-header-phone {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  border: 1px solid var(--ao-color-border);
  border-radius: 12px;
  background: var(--ao-color-bg);
  color: var(--ao-color-heading);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(.875rem, 1.5vw, 1.125rem);
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
.ao-header-phone:hover { color: var(--ao-color-primary); }
.ao-header-phone__icon { color: var(--ao-color-primary); font-size: .85em; }
.ao-header-cta { font-size: .875rem; white-space: nowrap; }

/* Footer and mobile action bar */
.aozora-footer {
  padding: 5rem 1.25rem 1.875rem;
  background: var(--ao-color-heading);
  color: rgba(255, 255, 255, .7);
}
.aozora-footer-inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: min(100%, 1000px);
  margin-inline: auto;
}
.af-col { min-width: 0; }
.af-company-name { margin-bottom: .75rem; color: #fff; font-size: 1.2rem; font-weight: 800; letter-spacing: .05em; }
.af-address { margin-bottom: 1.5rem; color: #cbd5e1; font-size: .95rem; font-style: normal; }
.af-contact-row { display: flex; align-items: center; margin-bottom: .75rem; gap: .9rem; }
.af-badge { min-width: 65px; padding: 4px 10px; border-radius: 6px; background: var(--ao-color-primary-dark); color: #fff; font-size: .75rem; font-weight: 700; text-align: center; }
.af-tel { color: #fff; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 1.4rem; font-weight: 800; text-decoration: none; }
.af-link { color: #38bdf8; font-size: .95rem; font-weight: 700; text-decoration: none; }
.af-link:hover { color: #bae6fd; text-decoration: underline; }
.af-business-hours { margin-top: .9rem; color: #94a3b8; font-size: .85rem; font-weight: 500; }
.af-info-box { padding: 1.875rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 20px; background: rgba(255, 255, 255, .03); }
.af-info-list { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; padding: 0; }
.af-info-item dt { margin-bottom: 4px; color: #94a3b8; font-size: .8rem; font-weight: 700; letter-spacing: .05em; }
.af-info-item dd { margin: 0; color: #f8fafc; font-size: 1rem; font-weight: 500; }
.af-partners { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.af-partner-link { display: block; transition: opacity .2s ease; }
.af-partner-link:hover { opacity: .8; }
.af-partner-image { display: block; border: 0; }
.af-partner-image--boxed { box-sizing: content-box; padding: 4px; border-radius: 6px; background: #fff; object-fit: contain; }
.af-bottom { margin-top: 3.75rem; padding-top: 1.875rem; border-top: 1px solid rgba(255, 255, 255, .08); text-align: center; }
.af-bottom-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 1.5625rem; margin-bottom: 1.25rem; }
.af-bottom-links a { color: #94a3b8; font-size: .9rem; font-weight: 500; text-decoration: none; }
.af-bottom-links a:hover { color: #38bdf8; }
.af-copyright { margin: 0; color: #64748b; font-size: .8rem; }
.ao-mobile-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--ao-color-border);
  background: #fff;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, .05);
}
.ao-mobile-nav__item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: .45rem .25rem;
  color: var(--ao-color-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.ao-mobile-nav__item + .ao-mobile-nav__item { border-left: 1px solid #f1f5f9; }
.ao-mobile-nav__item:hover { color: var(--ao-color-primary); }
.ao-mobile-nav__item--cta { color: #fff; background: var(--ao-color-primary); }
.ao-mobile-nav__item--cta:hover { color: #fff; background: var(--ao-color-primary-dark); }
.ao-mobile-nav__icon { margin-bottom: .15rem; font-size: 1.25rem; line-height: 1; }

/* Reusable content components used by the top page and regional LPs */
.ao-breadcrumb { width: min(100% - 2rem, var(--ao-container)); margin: 0 auto; padding: .75rem 0; color: var(--ao-color-muted); font-size: .75rem; }
.ao-page-main { width: min(100% - 2rem, var(--ao-container)); margin: 0 auto; padding-block: 2rem 2.5rem; }
.ao-top-hero { background: var(--ao-color-primary-pale); }
.ao-top-lead { max-width: var(--ao-content); margin: 0 auto 2rem; padding: 1.5rem; text-align: center; }
.ao-top-lead h1 { margin: 0 0 1rem; color: var(--ao-color-heading); font-size: clamp(1.25rem, 3vw, 1.875rem); font-weight: 800; line-height: 1.45; }
.ao-top-lead p { max-width: 64rem; margin: 0 auto; color: #475569; font-size: clamp(.875rem, 1.7vw, 1rem); line-height: 1.9; }
.ao-area-guide { display: grid; gap: 2rem; margin-bottom: 2rem; }
.ao-area-guide > div,
.ao-area-guide > section { border-radius: var(--ao-radius); }
.ao-area-intro { width: min(100% - 2rem, var(--ao-container)); margin: 2rem auto 0; padding: 1.5rem; }
.ao-area-intro h2,
.ao-area-guide h2 { margin: 0 0 1rem; color: var(--ao-color-heading); font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight: 800; line-height: 1.45; }
.ao-area-intro p { margin: 0; color: #475569; font-size: .9375rem; line-height: 1.9; }
.ao-area-card { background: #fff; border: 1px solid var(--ao-color-border); border-radius: var(--ao-radius); box-shadow: var(--ao-shadow); }
.ao-area-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.ao-faq { display: grid; gap: 1rem; }
.ao-faq article { padding: 1.25rem; border: 1px solid var(--ao-color-border); border-radius: .75rem; background: var(--ao-color-bg); }
.ao-faq h3 { margin: 0 0 .5rem; color: var(--ao-color-heading); font-size: 1rem; line-height: 1.55; }
.ao-faq p { margin: 0; color: #475569; font-size: .9375rem; line-height: 1.8; }
.ao-cta { padding: 1.5rem; border: 1px solid var(--ao-color-primary-pale); border-radius: var(--ao-radius); background: var(--ao-color-primary-soft); text-align: center; }
.ao-flow { display: grid; gap: 1rem; }

/* Existing utility-era components retained while pages are migrated. */
.sticky-column { position: sticky; top: 90px; }
.area-btn {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border: 1px solid var(--ao-color-border);
  border-radius: var(--ao-radius-sm);
  background: var(--ao-color-bg);
  color: var(--ao-color-heading);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.area-btn:hover { transform: translateY(-2px); border-color: var(--ao-color-primary); background: var(--ao-color-primary-soft); color: #0369a1; box-shadow: 0 4px 6px rgba(14, 165, 233, .1); }
.area-btn.active-area { border-color: var(--ao-color-primary); background: var(--ao-color-primary-pale); color: #0369a1; }
.area-btn.disabled-area { border-style: dashed; background: #f1f5f9; color: #94a3b8; cursor: not-allowed; pointer-events: none; }

@media (max-width: 767px) {
  body.ao-site { padding-bottom: 65px; }
  .sticky-column { position: static; }
  .ao-header-phone { font-size: .875rem; }
  .ao-header-cta { min-height: 40px; padding-inline: .85rem; font-size: .75rem; }
}
@media (min-width: 768px) {
  body.ao-site { padding-bottom: 0; }
  .ao-desktop-header { display: block; }
  .ao-mobile-nav { display: none; }
  .aozora-footer-inner { flex-direction: row; justify-content: space-between; gap: 5rem; }
  .af-col { flex: 1 1 0; }
  .af-partners { align-items: flex-end; }
  .ao-area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .ao-header-nav { display: flex; }
}

/* Content, news and form components.  These are site-owned components, not a
   framework runtime; they also provide the small compatibility layer needed
   while legacy markup is progressively given semantic class names. */
.ao-blog-page, .ao-article-page, .ao-news-page, .ao-reservation-page { padding-bottom: 4rem; }
.ao-blog-page main, .ao-article-page main, .ao-news-page main, .ao-reservation-page main { min-width: 0; }
.ao-blog-grid { display: grid; gap: 1.5rem; }
.ao-blog-card { display: flex; overflow: hidden; background: #fff; border: 1px solid var(--ao-color-border); border-radius: .75rem; box-shadow: var(--ao-shadow); }
.ao-blog-card:hover { box-shadow: var(--ao-shadow-card); }
.ao-blog-image { display: block; overflow: hidden; background: #f1f5f9; }
.ao-blog-image img { display: block; width: 100%; height: 100%; min-height: 12rem; object-fit: cover; }
.ao-blog-meta { display: flex; align-items: center; gap: .75rem; color: #94a3b8; font-size: .75rem; font-weight: 700; }
.ao-article { background: #fff; border: 1px solid var(--ao-color-border); border-radius: .75rem; box-shadow: var(--ao-shadow); }
.ao-article__header { margin-bottom: 1.5rem; }
.ao-article__title { margin: 0; color: var(--ao-color-heading); font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 900; line-height: 1.5; }
.ao-prose { color: #334155; font-size: 1rem; line-height: 1.9; overflow-wrap: anywhere; }
.ao-prose > :first-child { margin-top: 0; }
.ao-prose h2 { margin: 2.25rem 0 1rem; padding: .65rem 0 .65rem .9rem; border-left: 4px solid var(--ao-color-primary); color: var(--ao-color-heading); font-size: 1.35rem; line-height: 1.55; }
.ao-prose h3 { margin: 1.75rem 0 .75rem; color: #1e293b; font-size: 1.12rem; line-height: 1.6; }
.ao-prose p { margin: 0 0 1.2rem; }
.ao-prose ul, .ao-prose ol { margin: 0 0 1.2rem; padding-left: 1.5rem; }
.ao-prose li + li { margin-top: .35rem; }
.ao-prose table { display: block; width: 100%; margin: 1.5rem 0; border-collapse: collapse; overflow-x: auto; white-space: normal; }
.ao-prose th, .ao-prose td { min-width: 7rem; padding: .65rem .75rem; border: 1px solid var(--ao-color-border); vertical-align: top; }
.ao-prose th { background: #f8fafc; color: var(--ao-color-heading); }
.ao-prose blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 4px solid #bae6fd; background: #f0f9ff; color: #475569; }
.ao-prose img { display: block; max-width: 100%; height: auto; margin: 1.5rem auto; border-radius: .5rem; }
.ao-news-list { display: grid; gap: 1.5rem; }
.ao-news-card { background: #fff; border: 1px solid var(--ao-color-border); border-radius: 1rem; box-shadow: var(--ao-shadow); }
.ao-form { display: grid; gap: 2rem; }
.ao-form-group { display: grid; gap: .55rem; }
.ao-form-label { color: var(--ao-color-heading); font-weight: 700; }
.ao-input, .ao-select, .ao-textarea { width: 100%; min-height: 44px; padding: .7rem .85rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff; color: var(--ao-color-heading); font: inherit; }
.ao-textarea { min-height: 8rem; resize: vertical; }
.ao-input:focus, .ao-select:focus, .ao-textarea:focus, .ao-submit:focus-visible, .ao-button:focus-visible { outline: 3px solid rgba(14, 165, 233, .35); outline-offset: 2px; border-color: var(--ao-color-primary); }
.ao-input:disabled, .ao-select:disabled, .ao-textarea:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }
.ao-form-error { color: #b91c1c; font-size: .875rem; font-weight: 700; }
.ao-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75rem 1.5rem; border: 0; border-radius: 999px; background: var(--ao-color-primary); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.ao-submit:hover { background: var(--ao-color-primary-dark); }

/* Framework-free compatibility for existing public markup.  Only utilities
   present on public pages are represented here, so no third-party runtime is
   downloaded at render time. */
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.hidden { display: none; } .block { display: block; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; }
.flex { display: flex; } .grid { display: grid; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; }
.flex-shrink-0, .shrink-0 { flex-shrink: 0; } .flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; }
.relative { position: relative; } .absolute { position: absolute; } .sticky { position: sticky; } .top-0 { top: 0; } .left-0 { left: 0; } .left-1\/2 { left: 50%; } .z-50 { z-index: 50; }
.mx-auto { margin-left: auto; margin-right: auto; } .mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mt-8 { margin-top: 2rem; } .mt-12 { margin-top: 3rem; }
.mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; }
.mr-1\.5 { margin-right: .375rem; } .mr-2 { margin-right: .5rem; }
.p-2 { padding: .5rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .p-10 { padding: 2.5rem; }
.px-2 { padding-inline: .5rem; } .px-2\.5 { padding-inline: .625rem; } .px-3 { padding-inline: .75rem; } .px-4 { padding-inline: 1rem; } .px-5 { padding-inline: 1.25rem; } .px-6 { padding-inline: 1.5rem; } .px-8 { padding-inline: 2rem; }
.py-1 { padding-block: .25rem; } .py-1\.5 { padding-block: .375rem; } .py-2 { padding-block: .5rem; } .py-2\.5 { padding-block: .625rem; } .py-3 { padding-block: .75rem; } .py-6 { padding-block: 1.5rem; } .py-10 { padding-block: 2.5rem; } .py-12 { padding-block: 3rem; }
.pt-6 { padding-top: 1.5rem; } .pt-8 { padding-top: 2rem; } .pb-2 { padding-bottom: .5rem; } .pb-4 { padding-bottom: 1rem; } .pb-16 { padding-bottom: 4rem; }
.gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .space-y-3 > * + * { margin-top: .75rem; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-6 > * + * { margin-top: 1.5rem; } .space-y-8 > * + * { margin-top: 2rem; }
.w-full { width: 100%; } .w-auto { width: auto; } .w-16 { width: 4rem; } .h-10 { height: 2.5rem; } .h-12 { height: 3rem; } .h-16 { height: 4rem; } .h-48 { height: 12rem; } .h-auto { height: auto; }
.max-w-3xl { max-width: 48rem; } .max-w-6xl { max-width: 72rem; } .max-w-\[1000px\] { max-width: 1000px; } .max-w-\[400px\] { max-width: 400px; }
.overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .object-cover { object-fit: cover; } .object-contain { object-fit: contain; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre-wrap { white-space: pre-wrap; } .line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.text-center { text-align: center; } .text-xs { font-size: .75rem; } .text-sm { font-size: .875rem; } .text-base { font-size: 1rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.875rem; } .text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; }
.font-medium { font-weight: 500; } .font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; } .font-black { font-weight: 900; } .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.leading-snug { line-height: 1.375; } .leading-relaxed { line-height: 1.625; } .leading-loose { line-height: 2; }
.text-white { color: #fff; } .text-slate-400 { color: #94a3b8; } .text-slate-500 { color: #64748b; } .text-slate-600 { color: #475569; } .text-slate-700 { color: #334155; } .text-slate-800 { color: #1e293b; } .text-sky-600, .text-\[\#0EA5E9\] { color: #0ea5e9; } .text-\[\#0F172A\] { color: #0f172a; } .text-\[\#1E293B\] { color: #1e293b; } .text-\[\#475569\] { color: #475569; } .text-\[\#64748B\] { color: #64748b; } .text-\[\#0369A1\] { color: #0369a1; } .text-\[\#16A34A\] { color: #16a34a; } .text-\[\#F59E0B\] { color: #f59e0b; } .text-\[\#B91C1C\] { color: #b91c1c; }
.bg-white { background-color: #fff; } .bg-slate-50 { background-color: #f8fafc; } .bg-slate-100 { background-color: #f1f5f9; } .bg-\[\#0EA5E9\] { background-color: #0ea5e9; } .bg-\[\#0284C7\] { background-color: #0284c7; } .bg-\[\#0369A1\] { background-color: #0369a1; } .bg-\[\#F0F9FF\] { background-color: #f0f9ff; } .bg-\[\#F0FDF4\] { background-color: #f0fdf4; } .bg-\[\#F1F5F9\] { background-color: #f1f5f9; } .bg-\[\#FEF2F2\] { background-color: #fef2f2; } .bg-\[\#FFFBEB\] { background-color: #fffbeb; }
.border { border: 1px solid var(--ao-color-border); } .border-b { border-bottom: 1px solid var(--ao-color-border); } .border-t { border-top: 1px solid var(--ao-color-border); } .border-2 { border-width: 2px; border-style: solid; } .border-\[3px\] { border-width: 3px; border-style: solid; } .border-slate-100 { border-color: #f1f5f9; } .border-slate-200 { border-color: #e2e8f0; } .border-slate-300 { border-color: #cbd5e1; } .border-white { border-color: #fff; } .border-yellow-200 { border-color: #fde68a; } .border-\[\#38BDF8\] { border-color: #38bdf8; } .border-\[\#E2E8F0\] { border-color: #e2e8f0; } .border-\[\#CBD5E1\] { border-color: #cbd5e1; } .border-\[\#F1F5F9\] { border-color: #f1f5f9; } .border-\[\#FECACA\] { border-color: #fecaca; } .border-\[\#BAE6FD\], .border-\[\#bae6fd\] { border-color: #bae6fd; } .border-\[\#BBF7D0\] { border-color: #bbf7d0; }
.rounded { border-radius: .25rem; } .rounded-lg { border-radius: .5rem; } .rounded-xl { border-radius: .75rem; } .rounded-2xl { border-radius: 1rem; } .rounded-full { border-radius: 999px; } .rounded-b-lg { border-bottom-right-radius: .5rem; border-bottom-left-radius: .5rem; }
.shadow { box-shadow: 0 1px 3px rgba(15,23,42,.15); } .shadow-sm { box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.cursor-pointer { cursor: pointer; } .cursor-not-allowed { cursor: not-allowed; } .opacity-70 { opacity: .7; } .transition, .transition-colors, .transition-shadow { transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s; }
.hover\:underline:hover { text-decoration: underline; } .hover\:text-sky-600:hover, .hover\:text-\[\#0EA5E9\]:hover { color: #0ea5e9; } .hover\:bg-slate-50:hover { background-color: #f8fafc; } .hover\:bg-slate-200:hover { background-color: #e2e8f0; } .hover\:bg-\[\#0284C7\]:hover { background-color: #0284c7; } .hover\:bg-\[\#0369A1\]:hover { background-color: #0369a1; } .hover\:shadow-md:hover { box-shadow: 0 4px 6px rgba(15,23,42,.12); }
.focus\:outline-none:focus { outline: 0; } .focus\:border-\[\#38BDF8\]:focus { border-color: #38bdf8; } .focus\:ring-1:focus { box-shadow: 0 0 0 1px currentColor; }

@media (min-width: 640px) { .sm\:flex-row { flex-direction: row; } .sm\:w-2\/5 { width: 40%; } .sm\:h-full { height: 100%; } }
@media (min-width: 768px) { .md\:static { position: static; } .md\:flex { display: flex; } .md\:hidden { display: none; } .md\:flex-row { flex-direction: row; } .md\:items-center { align-items: center; } .md\:w-auto { width: auto; } .md\:pb-0 { padding-bottom: 0; } .md\:p-8 { padding: 2rem; } .md\:p-10 { padding: 2.5rem; } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .md\:gap-6 { gap: 1.5rem; } .md\:px-5 { padding-inline: 1.25rem; } .md\:text-sm { font-size: .875rem; } .md\:text-lg { font-size: 1.125rem; } .md\:text-3xl { font-size: 1.875rem; } }
@media (min-width: 1024px) { .lg\:flex-row { flex-direction: row; } .lg\:w-1\/3 { width: 33.333333%; } .lg\:w-2\/3 { width: 66.666667%; } }
@media (min-width: 1280px) { .xl\:flex { display: flex; } }
@media (max-width: 639px) { .ao-blog-card { flex-direction: column; } .ao-blog-image img { min-height: 0; height: 12rem; } }

/* Phase 5B regional and editorial image components */
.ao-area-hero { position: relative; width: calc(100% - 40px); max-width: 960px; height: clamp(17rem, 20vw, 18rem); min-height: 0; max-height: 18rem; margin-inline: auto; overflow: hidden; }
.ao-area-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ao-area-hero > div { position: relative; z-index: 1; min-height: inherit; }
.ao-area-visual-section { margin-inline: auto; }
.ao-area-visuals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; width: min(100%, 56.25rem); margin-inline: auto; }
.ao-area-visual { min-width: 0; margin: 0; overflow: hidden; }
.ao-area-visual:only-child { width: min(100%, 32.5rem); margin-inline: auto; }
.ao-card-image { display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 1rem; border-radius: .5rem; object-fit: cover; background: #e2e8f0; }
.ao-area-visual .ao-card-image { height: 220px; margin: 0; border-radius: 0; aspect-ratio: auto; }
.ao-area-visual figcaption { padding: .75rem 1rem; color: var(--ao-color-muted); font-size: .8125rem; font-weight: 700; line-height: 1.5; }

/* Top page: keep the central information hub wider than both sidebars. */
.ao-top-main { width: min(100% - 2rem, 1360px); }
.ao-top-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
.ao-top-sidebar, .ao-top-content { min-width: 0; align-self: start; }
.ao-top-sidebar { height: auto; min-height: 0; }
.ao-flow-section { margin-top: 2rem; }
.ao-flow-section > h2 { margin: 0 0 1rem; }
.ao-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.ao-flow__item { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; align-items: start; min-width: 0; padding: 1rem; border: 1px solid var(--ao-color-border); border-radius: .75rem; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.ao-flow__step { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border-radius: 999px; background: var(--ao-color-primary); color: #fff; font-size: .75rem; font-weight: 800; line-height: 1; }
.ao-flow__content { min-width: 0; }
.ao-flow__content h3 { margin: 0; color: var(--ao-color-heading); font-size: .9375rem; line-height: 1.5; }
.ao-flow__content p { margin: .25rem 0 0; color: #475569; line-height: 1.7; }
.ao-faq-section { margin-top: 2.5rem; }
@media (min-width: 1024px) {
  .ao-top-layout { grid-template-columns: minmax(220px, .8fr) minmax(460px, 1.6fr) minmax(220px, .8fr); }
  .ao-top-sidebar { position: sticky; top: 5.75rem; align-self: start; height: fit-content; }
}
@media (min-width: 640px) {
  .ao-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .ao-area-visuals { grid-template-columns: minmax(0, 1fr); }
  .ao-area-visual:only-child { width: 100%; }
  .ao-area-hero { height: 18rem; }
  .ao-area-visual .ao-card-image { height: 190px; }
}

/* Legacy area-page content images: replace removed utility-only sizing with explicit component rules. */
.ao-area-inline-card--single > .ao-area-inline-image--single { display: block; width: min(100%, 32.5rem); height: 220px; margin-inline: auto; object-fit: cover; }
.ao-area-inline-split__media { width: min(100%, 20rem); flex: 0 0 min(100%, 20rem); }
.ao-area-inline-split__image { display: block; width: 100%; height: 220px; object-fit: cover; }
.ao-area-inline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; width: min(100%, 56.25rem); margin-inline: auto; }
.ao-area-inline-card--pair { max-width: 27.5rem; width: 100%; }
.ao-area-inline-image--pair { display: block; width: 100%; height: 220px; object-fit: cover; }
.ao-area-process-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; width: min(100%, 56.25rem); margin-inline: auto; }
.ao-area-process-card { min-width: 0; max-width: 27.5rem; width: 100%; }
.ao-area-process-image { display: block; width: 100%; height: 180px; object-fit: contain; }
@media (max-width: 639px) {
  .ao-area-inline-card--single > .ao-area-inline-image--single,
  .ao-area-inline-split__image,
  .ao-area-inline-image--pair { height: 190px; }
  .ao-area-inline-split__media { width: 100%; flex-basis: auto; }
  .ao-area-inline-grid,
  .ao-area-process-grid { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .ao-area-inline-card--pair,
  .ao-area-process-card { max-width: none; }
  .ao-area-process-image { height: 180px; }
}

/* Remaining reservation and notification controls used by the public pages. */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mr-3 { margin-right: .75rem; } .ml-1 { margin-left: .25rem; } .px-1\.5 { padding-inline: .375rem; } .px-10 { padding-inline: 2.5rem; } .py-0\.5 { padding-block: .125rem; } .py-4 { padding-block: 1rem; }
.text-\[0\.65rem\] { font-size: .65rem; } .text-\[\#334155\] { color: #334155; } .text-\[\#94A3B8\] { color: #94a3b8; }
.bg-\[\#0F172A\] { background-color: #0f172a; } .bg-\[\#EF4444\] { background-color: #ef4444; }
.border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; } .border-\[\#E0F2FE\] { border-color: #e0f2fe; }
.shadow-lg { box-shadow: 0 10px 15px rgba(15,23,42,.15); } .transform { transform: translateZ(0); } .transition-all { transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s; }
.hover\:bg-\[\#F0F9FF\]:hover { background-color: #f0f9ff; } .hover\:border-\[\#0EA5E9\]:hover { border-color: #0ea5e9; } .hover\:shadow-xl:hover { box-shadow: 0 20px 25px rgba(15,23,42,.16); } .hover\:-translate-y-1:hover { transform: translateY(-.25rem); }

/* Phase 5C: shared regional LP reading hierarchy. */
.ao-area-page-intro { width: min(100% - 2rem, 60rem); margin: 2rem auto 1.5rem; }
.ao-area-page-intro .ao-area-reading { width: min(100%, 51.25rem); margin-inline: auto; text-align: center; }
.ao-area-page-intro span { display: inline-flex; margin-bottom: .875rem; color: #fff; }
.ao-area-page-intro h1 { margin: 0; color: var(--ao-color-heading); font-size: clamp(1.65rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.35; text-shadow: none; }
.ao-area-page-intro p { margin: .625rem auto 0; color: #475569; font-size: clamp(.9rem, 1.5vw, 1.05rem); line-height: 1.8; }
.ao-area-page-intro p:last-child { width: fit-content; max-width: 100%; padding: .5rem .875rem; border: 1px solid var(--ao-color-primary-pale); border-radius: .5rem; background: var(--ao-color-primary-soft); color: #475569; font-size: .8125rem; font-weight: 700; }
.ao-area-hero { width: calc(100% - 40px); max-width: 960px; height: clamp(17rem, 20vw, 18rem); margin: 0 auto; border-radius: var(--ao-radius); }
.ao-area-page { width: min(100% - 2rem, 77.5rem); padding-block: 3rem 4rem; }
.ao-area-layout { display: block; }
.ao-area-main { width: min(100%, 60rem); min-width: 0; margin-inline: auto; display: grid; gap: 3.5rem; }
.ao-area-main > * { min-width: 0; margin-top: 0; margin-bottom: 0; }
.ao-area-sidebar { display: none; min-width: 0; }
.ao-area-reading { width: min(100%, 51.25rem); margin-inline: auto; }
.ao-area-section { border-color: var(--ao-color-border); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.ao-area-section h2,
.ao-area-visual-section > h2 { position: relative; margin-bottom: 1.25rem; padding: 0 0 .75rem .875rem; border-bottom: 1px solid var(--ao-color-border); color: var(--ao-color-heading); font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.45; }
.ao-area-section h2::before,
.ao-area-visual-section > h2::before { position: absolute; top: .2rem; bottom: .9rem; left: 0; width: .25rem; border-radius: 999px; background: var(--ao-color-primary); content: ""; }
.ao-area-section h3 { color: #334155; font-size: 1rem; line-height: 1.55; }
.ao-area-intro { width: min(100% - 2rem, 60rem); margin: 0 auto; padding: 0; }
.ao-area-intro .ao-area-card { padding: 1.75rem; }
.ao-area-intro p { max-width: 51.25rem; margin: 0 auto; font-size: 1rem; line-height: 1.95; }
.ao-area-visual-section { width: min(100% - 2rem, 60rem); margin: 0 auto; padding: 3rem 0 0; }
.ao-area-visual-section > h2 { width: min(100%, 51.25rem); margin-inline: auto; }
.ao-area-guide { gap: 3.5rem; margin: 0; }
.ao-area-guide > .ao-area-section { margin: 0; }
.ao-area-section--related { width: min(100%, 60rem); margin-inline: auto; }
.ao-area-section--representative,
.ao-area-section--inheritance,
.ao-area-section--valuation,
.ao-area-section--faq { background: #fff; }
.ao-area-section--property,
.ao-area-section--process { background: #fafdff; }
.ao-area-feature-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.ao-area-feature-grid li { min-width: 0; padding: .875rem 1rem; border: 1px solid #e0f2fe; border-radius: .625rem; background: #fafdff; line-height: 1.8; }
.ao-area-chips { margin: 0; padding: 0; list-style: none; }
.ao-area-chips li { color: #334155; font-size: .8125rem; font-weight: 700; }
.ao-property-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.ao-property-card { min-width: 0; padding: 1.25rem; border-color: #dbeafe; background: #fff; }
.ao-property-card p { margin: 0; line-height: 1.85; }
.ao-area-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; width: min(100%, 51.25rem); margin: 1.25rem auto 0; padding: 0; list-style: none; }
.ao-area-options li { padding: .7rem .8rem; border: 1px solid #e0f2fe; border-radius: .5rem; background: #fafdff; color: #475569; font-size: .875rem; line-height: 1.5; }
.ao-valuation-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.ao-valuation-item { min-width: 0; border: 1px solid #e0f2fe; background: #fafdff; line-height: 1.75; }
.ao-area-section--faq { width: min(100%, 51.25rem); margin-inline: auto; }
.ao-area-section--faq .ao-faq { gap: .875rem; }
.ao-area-section--faq .ao-faq article { padding: 1.125rem 1.25rem; border-left: 3px solid var(--ao-color-primary); background: #fafdff; }
.ao-area-section--faq .ao-faq h3 { margin-bottom: .5rem; color: var(--ao-color-heading); }
.ao-area-section--faq .ao-faq p { line-height: 1.85; }
.ao-area-market-section { width: min(100%, 51.25rem); margin-inline: auto; }
.ao-area-market-section > h2 { text-align: left; }
.ao-area-market-section h3 { line-height: 1.65; }
.ao-area-market-section p { line-height: 1.85; }
.ao-area-cta { width: min(100%, 51.25rem); margin-inline: auto; padding: 1.5rem; }
.ao-area-cta a { max-width: 100%; }
@media (min-width: 640px) {
  .ao-area-feature-grid,
  .ao-valuation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ao-property-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ao-area-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .ao-area-layout { display: grid; grid-template-columns: minmax(10rem, 11rem) minmax(0, 51.25rem) minmax(10rem, 11rem); gap: 2rem; align-items: start; justify-content: center; }
  .ao-area-main { width: 100%; }
  .ao-area-sidebar { display: block; align-self: start; }
}
@media (max-width: 639px) {
  .ao-area-page-intro { width: min(100% - 2rem, 60rem); margin-top: 1.25rem; }
  .ao-area-page-intro h1 { font-size: 1.55rem; }
  .ao-area-page-intro p { font-size: .875rem; }
  .ao-area-hero { width: calc(100% - 32px); height: 18rem; }
  .ao-area-page { width: min(100% - 2rem, 77.5rem); padding-block: 2.25rem 3rem; }
  .ao-area-main { gap: 2.75rem; }
  .ao-area-intro .ao-area-card,
  .ao-area-section { padding: 1.25rem; }
  .ao-area-visual-section { padding-top: 2.5rem; }
  .ao-area-options { grid-template-columns: minmax(0, 1fr); }
}

/* Phase 5D: regional LPs prioritise the reading column with one compact support rail. */
.ao-area-layout { display: block; }
.ao-area-main { width: min(100%, 60rem); }
.ao-area-sidebar--right { display: block; width: min(100%, 51.25rem); margin: 0 auto; min-width: 0; }
.ao-area-sidebar-card { margin: 0 0 1rem; padding: 1.25rem; border: 1px solid var(--ao-color-border); border-radius: .875rem; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.ao-area-sidebar-card:last-child { margin-bottom: 0; }
.ao-area-sidebar-card--cta { border-color: var(--ao-color-primary-pale); background: linear-gradient(145deg, #fff 0%, var(--ao-color-primary-soft) 100%); }
.ao-area-sidebar-card__title { margin: 0 0 .5rem; color: var(--ao-color-heading); font-size: 1rem; font-weight: 800; line-height: 1.5; }
.ao-area-sidebar-card__text { margin: 0 0 1rem; color: #475569; font-size: .875rem; line-height: 1.7; }
.ao-area-sidebar-card__button { display: flex; min-height: 2.75rem; align-items: center; justify-content: center; padding: .65rem .75rem; border-radius: .625rem; color: #fff; font-size: .875rem; font-weight: 800; line-height: 1.4; text-align: center; text-decoration: none; }
.ao-area-sidebar-card__button:hover { opacity: .9; }
.ao-area-sidebar-card__phone { display: block; margin-top: .875rem; font-size: .875rem; font-weight: 800; line-height: 1.5; text-align: center; text-decoration: none; }
.ao-area-sidebar-card__phone:hover { text-decoration: underline; }
.ao-area-sidebar-card ul { margin: 0; padding: 0; list-style: none; }
.ao-area-sidebar-card li { min-width: 0; }
.ao-area-sidebar-card li a { overflow-wrap: anywhere; line-height: 1.65; }
.ao-area-reservation-section { width: min(100%, 51.25rem); margin-inline: auto; }
.ao-area-reservation-card { padding: 1.5rem; }

@media (min-width: 1024px) {
  .ao-area-layout { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 2rem; align-items: start; }
  .ao-area-main { width: 100%; margin: 0; }
  .ao-area-sidebar--right { position: sticky; top: 5.75rem; align-self: start; width: 100%; height: fit-content; margin: 0; }
}

@media (max-width: 1023px) {
  .ao-area-sidebar--right { position: static; margin-top: 2.75rem; }
}

@media (max-width: 639px) {
  .ao-area-sidebar-card,
  .ao-area-reservation-card { padding: 1.125rem; }
}