/* ==========================================================================
   GREEKA · About page. Loads AFTER stays.css and reuses its tokens
   (colours, Poppins, Playfair, top bar, footer, bottom nav, sheet).
   Mobile design follows the reference card; desktop is a wider composition.
   ========================================================================== */
:root {
  --font-num: "Lora", Georgia, "Times New Roman", serif;
  --font-display: "Playfair Display", Georgia, serif;
  --arch: 50% 50% 28px 28px / 40% 40% 28px 28px; /* arched-window frame, for 4:5 images */
  --gold-grad: linear-gradient(135deg, #f6dd98, var(--accent));
}
@media (min-width: 1024px) {
  :root { --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif; }
}

.about-page { font-size: 14.5px; }
:where(.about-page h1, .about-page h2, .about-page h3) { font-family: var(--font-display); color: var(--primary-dark); font-weight: 700; }
.wrap { width: min(100% - 32px, 1200px); margin-inline: auto; }
@media (min-width: 600px) { .wrap { width: min(100% - 48px, 1200px); } }
@media (min-width: 1024px) { .wrap { width: min(100% - 64px, 1200px); } }

/* Shared type */
.ab-copy p, .ab-head p, .ab-exp-intro > p, .ab-promise-card p, .ab-hero-text p { line-height: 1.8; }
.ab-sec { padding: 60px 0; }
.ab-sec h2, .ab-close h2 { font-size: clamp(28px, 7vw, 36px); line-height: 1.14; }
.ab-sec h2 { margin-top: 2px; }
.ab-copy p, .ab-head p, .ab-exp-intro > p { margin-top: 14px; color: var(--muted-foreground); max-width: 60ch; }
.ab-head { max-width: 720px; margin-bottom: 34px; }
.ab-head-center { margin-inline: auto; text-align: center; }
.ab-head-center .greeka-eyebrow { justify-content: center; }
.ab-head-center p { margin-inline: auto; }
.greeka-eyebrow.on-dark { color: #f1d58a; }
@media (min-width: 1024px) {
  .about-page { font-size: 16px; }
  .ab-sec { padding: 104px 0; }
  .ab-sec h2, .ab-close h2 { font-size: clamp(44px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -0.005em; }
  .greeka-eyebrow { font-size: 11px; }
  .ab-head { margin-bottom: 56px; }
}

/* ---------- Buttons ---------- */
.ab-btn { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 10px; padding: 0 26px; border: 1.5px solid transparent; border-radius: 999px; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: transform 160ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
.ab-btn:active { transform: scale(.97); }
.ab-btn .ic { font-size: 17px; }
.ab-btn-primary { background: linear-gradient(135deg, var(--primary), #3446c4); color: #fff !important; box-shadow: 0 10px 22px rgb(28 42 134 / 26%); }
.ab-btn-primary .ic { color: #f1d58a; transition: transform 200ms ease; }
.ab-btn-outline { border-color: var(--primary); background: transparent; color: var(--primary) !important; }
.ab-btn-gold { background: var(--gold-grad); color: #2b2108 !important; box-shadow: 0 10px 26px rgb(0 0 0 / 28%); }
.ab-btn-glass { border-color: rgb(255 255 255 / 45%); background: rgb(255 255 255 / 10%); color: #fff !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (hover: hover) {
  .ab-btn-primary:hover .ic { transform: translateX(3px); }
  .ab-btn-outline:hover { background: var(--primary); color: #fff !important; }
  .ab-btn-glass:hover { background: rgb(255 255 255 / 20%); }
  .ab-btn-gold:hover { transform: translateY(-2px); }
}
.ab-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ab-actions .ab-btn { flex: 1 1 200px; }
.ab-actions-center { justify-content: center; }
.ab-center { display: flex; justify-content: center; margin-top: 36px; }
@media (min-width: 1024px) { .ab-actions .ab-btn { flex: 0 0 auto; min-height: 56px; padding: 0 34px; } .ab-btn { font-size: 14px; } }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.ab-hero { padding: 0 0 8px; }
.ab-hero-grid { display: grid; gap: 26px; }
.ab-hero-grid.wrap { width: 100%; }               /* full-bleed card on phones, like the reference */
.ab-hero-text { padding: 0 16px; }

.ab-hero-media { position: relative; }
.ab-frame { position: relative; height: min(112vw, 460px); overflow: hidden; border-radius: 0 0 30px 30px; background: var(--primary-dark); isolation: isolate; box-shadow: 0 18px 40px rgb(22 32 54 / 22%); }
.ab-frame > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 900ms ease, transform 6s ease-out; }
.ab-frame > img.is-on { opacity: 1; transform: scale(1); }
.ab-frame-shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgb(13 21 80 / 46%) 0%, transparent 30%, transparent 48%, rgb(13 21 80 / 82%) 100%); pointer-events: none; }

.ab-round { position: absolute; z-index: 3; top: calc(16px + var(--safe-t)); display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgb(255 255 255 / 30%); border-radius: 13px; background: rgb(255 255 255 / 22%); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background 160ms ease, transform 160ms ease; }
.ab-round:active { transform: scale(.92); }
.ab-round:hover { background: rgb(255 255 255 / 34%); }
.ab-back { left: 16px; }
.ab-call { right: 16px; }

.ab-name { position: absolute; z-index: 2; bottom: 22px; left: 20px; right: 92px; color: #fff; }
.ab-name-title { font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: .06em; line-height: 1.1; text-shadow: 0 2px 14px rgb(0 0 0 / 35%); }
.ab-name-loc { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: rgb(255 255 255 / 90%); font-size: 12.5px; }
.ab-name-loc .ic { flex: 0 0 auto; color: #f1d58a; font-size: 14px; }

.ab-thumbs { position: absolute; z-index: 3; right: 14px; bottom: 18px; display: flex; flex-direction: column; gap: 9px; }
.ab-thumbs button { width: 48px; height: 48px; padding: 0; overflow: hidden; border: 2px solid rgb(255 255 255 / 85%); border-radius: 12px; background: var(--muted); cursor: pointer; opacity: .82; transition: transform 200ms ease, opacity 200ms ease, border-color 200ms ease; }
.ab-thumbs button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-thumbs button.is-on { border-color: var(--accent); opacity: 1; transform: scale(1.1); }
@media (hover: hover) { .ab-thumbs button:hover { opacity: 1; } }

.ab-hero-text h1 { margin-top: 2px; font-size: clamp(32px, 9vw, 40px); line-height: 1.1; }
.ab-lead { margin-top: 16px; color: var(--primary-dark); font-size: 15.5px; font-weight: 500; }
.ab-body { margin-top: 10px; color: var(--muted-foreground); }
.ab-tagline { margin-top: 18px; padding: 2px 0 2px 16px; border-left: 3px solid var(--accent); color: var(--primary); font-family: "Cormorant Garamond", var(--font-display); font-size: 21px; font-style: italic; font-weight: 600; line-height: 1.35 !important; }

/* Included with every stay (reference "Services & Facilities") */
.ab-includes { margin-top: 28px; padding: 24px 20px 22px; border: 1px solid var(--border); border-radius: 24px; background: var(--background); box-shadow: var(--shadow-sm); }
.ab-includes h2 { font-size: 20px; line-height: 1.2; }
.ab-includes ul { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.ab-includes li { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--foreground); font-size: 13px; font-weight: 500; line-height: 1.3; }
.ab-includes .ic { flex: 0 0 auto; width: 22px; height: 22px; fill: var(--primary); stroke: #fff; stroke-width: 2; }

@media (min-width: 600px) {
  .ab-hero { padding-top: 20px; }
  .ab-hero-grid.wrap { width: min(100% - 48px, 1200px); }
  .ab-hero-text { padding: 0; }
  .ab-frame { height: 460px; border-radius: 30px; }
  .ab-includes ul { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
  .ab-hero { padding: 56px 0 0; }
  .ab-hero-grid.wrap { width: min(100% - 64px, 1200px); grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 88px; }
  .ab-hero-media { order: 2; width: min(100%, 470px); margin-left: auto; padding-right: 26px; }
  .ab-hero-media::before { content: ""; position: absolute; z-index: 0; inset: 26px 0 -26px 26px; border: 1.5px solid rgb(217 169 63 / 70%); border-radius: var(--arch); pointer-events: none; }
  .ab-frame { height: auto; aspect-ratio: 4 / 5; border-radius: var(--arch); box-shadow: 0 30px 60px rgb(28 42 134 / 24%); }
  .ab-frame-shade { background: linear-gradient(180deg, transparent 55%, rgb(13 21 80 / 70%) 100%); }
  .ab-back, .ab-call { display: none; }
  .ab-name { right: 24px; bottom: 26px; left: 26px; padding: 14px 18px; border: 1px solid rgb(255 255 255 / 25%); border-radius: 18px; background: rgb(19 30 102 / 38%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .ab-name-title { font-size: 30px; }
  .ab-thumbs { right: 0; bottom: 120px; gap: 11px; }
  .ab-thumbs button { width: 58px; height: 58px; border-radius: 14px; border-color: #fff; box-shadow: 0 8px 20px rgb(22 32 54 / 28%); }
  .ab-thumbs button.is-on { border-color: var(--accent); }

  .ab-hero-text h1 { font-size: clamp(60px, 6.2vw, 92px); line-height: .98; letter-spacing: -0.01em; }
  .ab-hero-text .greeka-eyebrow { margin-bottom: 18px; }
  .ab-lead { max-width: 30em; margin-top: 26px; font-size: 19px; line-height: 1.7 !important; }
  .ab-body { max-width: 34em; margin-top: 14px; font-size: 16px; }
  .ab-tagline { margin-top: 28px; font-size: 27px; }

  .ab-includes { position: relative; z-index: 2; display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 40px; margin-top: 76px; padding: 32px 44px; border-radius: 28px; box-shadow: var(--shadow-md); }
  .ab-includes h2 { font-size: 34px; line-height: 1.05; }
  .ab-includes ul { margin: 0; gap: 18px 24px; }
  .ab-includes li { font-size: 14.5px; }
  .ab-includes .ic { width: 24px; height: 24px; }
}

/* Single load-in moment for the hero text */
@keyframes ab-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ab-hero-text > * { animation: ab-rise 700ms cubic-bezier(.2,.7,0,1) both; }
.ab-hero-text > :nth-child(2) { animation-delay: 80ms; }
.ab-hero-text > :nth-child(3) { animation-delay: 160ms; }
.ab-hero-text > :nth-child(4) { animation-delay: 240ms; }
.ab-hero-text > :nth-child(5) { animation-delay: 320ms; }
.ab-hero-text > :nth-child(6) { animation-delay: 400ms; }

/* ==========================================================================
   Shared split layout + arched image frames
   ========================================================================== */
.ab-split { display: grid; gap: 44px; }
.ab-arch { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--arch); background: var(--muted); box-shadow: 0 24px 50px rgb(28 42 134 / 18%); }
.ab-arch img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .ab-split { grid-template-columns: 1fr 1fr; align-items: center; gap: 96px; }
  .ab-split-top { align-items: start; }
}

/* ==========================================================================
   2. OUR STORY
   ========================================================================== */
.ab-story { background: var(--background); }
.ab-story-media { position: relative; width: min(82%, 400px); margin-bottom: 28px; }
.ab-inset { position: absolute; right: -16%; bottom: -26px; width: 52%; margin: 0; overflow: hidden; aspect-ratio: 1; border: 5px solid var(--background); border-radius: 24px; box-shadow: var(--shadow-md); }
.ab-inset img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-stamp { position: absolute; top: 9%; right: -8%; z-index: 2; display: grid; width: 92px; height: 92px; place-content: center; place-items: center; border: 4px solid var(--background); border-radius: 50%; background: var(--gold-grad); color: #2b2108; font-size: 9.5px; font-weight: 600; line-height: 1.25; text-align: center; box-shadow: var(--shadow-md); }
.ab-stamp strong { font-family: var(--font-num); font-size: 22px; font-weight: 700; font-variant-numeric: lining-nums; line-height: 1.1; }

.ab-quote { margin: 26px 0 0; padding: 18px 20px; border-left: 3px solid var(--accent); border-radius: 0 18px 18px 0; background: var(--accent-soft); color: var(--primary-dark); font-family: "Cormorant Garamond", var(--font-display); font-size: 20px; font-style: italic; font-weight: 600; line-height: 1.5; }
.ab-sign { margin-top: 20px !important; color: var(--primary) !important; font-weight: 600; }
@media (min-width: 1024px) {
  .ab-story-media { width: 78%; max-width: none; margin-bottom: 0; }
  .ab-inset { right: -24%; bottom: -36px; width: 50%; border-width: 6px; }
  .ab-stamp { top: 8%; right: -13%; width: 118px; height: 118px; font-size: 11px; }
  .ab-stamp strong { font-size: 28px; }
  .ab-quote { margin-top: 32px; padding: 22px 28px; font-size: 25px; }
  .ab-copy p { max-width: 54ch; }
}

/* ==========================================================================
   3. PHILOSOPHY (dark band)
   ========================================================================== */
.ab-dark { position: relative; overflow: hidden; background: radial-gradient(110% 70% at 85% -10%, rgb(52 70 196 / 55%), transparent 60%), linear-gradient(165deg, #1c2a86 0%, #131e66 55%, #0d1550 100%); color: rgb(255 255 255 / 76%); }
.ab-dark::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent) 30%, #f1d58a 50%, var(--accent) 70%, transparent); }
.ab-dark h2, .ab-dark h3 { color: #fff; }
.ab-dark .ab-head p { color: rgb(255 255 255 / 72%); }
.ab-principles { display: grid; gap: 14px; margin-top: 0; }
.ab-principles article { padding: 24px 22px 26px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 24px; background: rgb(255 255 255 / 6%); }
.ab-principles h3 { margin-top: 18px; font-size: 22px; line-height: 1.2; }
.ab-principles p { margin-top: 10px; color: rgb(255 255 255 / 72%); font-size: 14px; line-height: 1.75; }
.ab-ico { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgb(217 169 63 / 55%); border-radius: 50%; background: rgb(255 255 255 / 8%); color: #f1d58a; }
.ab-ico .ic { font-size: 23px; }
.ab-ico-light { flex: 0 0 auto; width: 48px; height: 48px; border-color: rgb(217 169 63 / 45%); background: var(--primary-soft); color: var(--primary); }
@media (min-width: 768px) { .ab-principles { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1024px) {
  .ab-principles { gap: 28px; }
  .ab-principles article { padding: 38px 32px 40px; }
  .ab-principles h3 { font-size: 30px; }
  .ab-principles p { font-size: 15.5px; }
  .ab-ico { width: 60px; height: 60px; }
  .ab-ico .ic { font-size: 26px; }
}

/* ==========================================================================
   4. THE GREEKA EXPERIENCE
   ========================================================================== */
.ab-wide { margin: 28px 0 0; overflow: hidden; aspect-ratio: 16 / 11; border-radius: 24px; box-shadow: var(--shadow-md); }
.ab-wide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-features { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ab-features li { display: flex; gap: 16px; padding: 22px 0; border-top: 1px solid var(--border); }
.ab-features li:last-child { border-bottom: 1px solid var(--border); }
.ab-features h3 { font-size: 20px; line-height: 1.2; }
.ab-features p { margin-top: 6px; color: var(--muted-foreground); font-size: 14px; line-height: 1.7; }
@media (min-width: 1024px) {
  .ab-exp-intro { position: sticky; top: 110px; }
  .ab-wide { margin-top: 40px; aspect-ratio: 4 / 3; border-radius: 28px; }
  .ab-features li { padding: 30px 0; gap: 22px; }
  .ab-features li:last-child { border-bottom: 0; }
  .ab-features li:nth-last-child(2) { border-bottom: 1px solid var(--border); }
  .ab-features h3 { font-size: 27px; }
  .ab-features p { font-size: 15.5px; }
  .ab-ico-light { width: 56px; height: 56px; }
}

/* ==========================================================================
   5. ACCOMMODATION
   ========================================================================== */
.ab-stays { background: var(--background); border-top: 1px solid var(--border); }
.ab-stay-grid { display: grid; gap: 22px; }
.ab-stay { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 24px; background: var(--background); box-shadow: 0 4px 18px rgb(22 32 54 / 7%); isolation: isolate; transition: transform 280ms cubic-bezier(.2,.7,0,1), box-shadow 280ms ease, border-color 280ms ease; }
.ab-stay-link { position: absolute; z-index: 4; inset: 0; border-radius: 24px; }
.ab-stay:has(.ab-stay-link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.ab-stay-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--muted); }
.ab-stay-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(.2,.7,0,1); }
.ab-stay-body { position: relative; display: flex; flex: 1; flex-direction: column; padding: 22px 20px 20px; }
.ab-stay-body::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--accent), #f1d58a 50%, var(--accent)); }
.ab-stay-body h3 { font-size: 22px; line-height: 1.2; }
.ab-stay-body > p { margin-top: 10px; color: var(--muted-foreground); font-size: 13.5px; line-height: 1.7; }
.ab-stay-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.ab-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0; line-height: 1.1; }
.ab-price small { flex: 0 0 100%; margin-bottom: 4px; color: var(--muted-foreground); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ab-price strong, .gk-price strong { color: var(--primary); font-family: var(--font-num); font-size: 26px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; letter-spacing: 0; white-space: nowrap; }
.ab-price span { color: var(--muted-foreground); font-size: 12px; }
.ab-go { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #3446c4); color: #f1d58a; box-shadow: 0 8px 18px rgb(28 42 134 / 26%); transition: background 260ms ease, color 260ms ease, transform 260ms ease; }
.ab-go .ic { font-size: 19px; }
@media (hover: hover) {
  .ab-stay:hover { transform: translateY(-5px); border-color: rgb(217 169 63 / 70%); box-shadow: 0 22px 44px rgb(28 42 134 / 17%); }
  .ab-stay:hover .ab-stay-photo img { transform: scale(1.06); }
  .ab-stay:hover .ab-go { background: var(--gold-grad); color: var(--primary-dark); transform: translateX(2px); }
}
@media (min-width: 640px) and (max-width: 899.98px) {
  .ab-stay { flex-direction: row; }
  .ab-stay-photo { flex: 0 0 44%; aspect-ratio: auto; min-height: 240px; }
}
@media (min-width: 900px) { .ab-stay-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } }
@media (min-width: 1024px) {
  .ab-stay-body { padding: 28px 26px 24px; }
  .ab-stay-body h3 { font-size: 27px; }
  .ab-stay-body > p { font-size: 14.5px; }
  .ab-price strong, .gk-price strong { font-size: 30px; }
}

/* ==========================================================================
   6. LOCATION
   ========================================================================== */
.ab-list-title { margin-top: 30px; font-size: 20px; }
.ab-nearby { display: grid; gap: 0; margin: 12px 0 28px; padding: 0; list-style: none; max-width: 520px; }
.ab-nearby li { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; font-size: 14px; }
.ab-nearby span { color: var(--foreground); font-weight: 500; }
.ab-nearby i { flex: 1; min-width: 14px; border-bottom: 1.5px dotted #c3cadb; transform: translateY(-3px); }
.ab-nearby b { font-family: var(--font-num); font-size: 15px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; color: var(--primary); white-space: nowrap; }
.ab-nearby .is-near { margin-bottom: 4px; padding: 12px 16px; border: 1px solid rgb(217 169 63 / 60%); border-radius: 16px; background: var(--accent-soft); }
.ab-nearby .is-near i { border-bottom-color: rgb(217 169 63 / 70%); }
.ab-nearby .is-near b { padding: 3px 12px; border-radius: 999px; background: var(--primary); color: #fff; font-family: "Poppins", system-ui, sans-serif; font-size: 11.5px; letter-spacing: .02em; }
.ab-arch figcaption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; gap: 4px; padding: 80px 22px 24px; background: linear-gradient(180deg, transparent, rgb(13 21 80 / 86%)); color: #fff; text-align: center; }
.ab-arch figcaption strong { font-family: "Cormorant Garamond", var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.25; }
.ab-arch figcaption span { color: #f1d58a; font-size: 11.5px; letter-spacing: .06em; }
.ab-loc-media { width: min(100%, 440px); margin-inline: auto; }
@media (min-width: 1024px) {
  .ab-nearby li { padding: 15px 0; font-size: 15.5px; }
  .ab-nearby b { font-size: 17px; }
  .ab-nearby .is-near b { font-size: 12.5px; }
  .ab-list-title { margin-top: 38px; font-size: 28px; }
  .ab-loc-media { width: min(100%, 480px); margin-right: 0; padding-bottom: 26px; padding-right: 26px; position: relative; }
  .ab-loc-media::before { content: ""; position: absolute; z-index: 0; inset: 26px 0 0 26px; border: 1.5px solid rgb(217 169 63 / 70%); border-radius: var(--arch); }
  .ab-loc-media .ab-arch { z-index: 1; }
  .ab-arch figcaption strong { font-size: 28px; }
}

/* ==========================================================================
   7. PROMISE
   ========================================================================== */
.ab-promise { background: linear-gradient(180deg, var(--accent-soft), #fffaf0); }
.ab-promise-card { position: relative; max-width: 780px; margin-inline: auto; text-align: center; }
.ab-promise-card::before { content: ""; display: block; width: 54px; height: 34px; margin: 0 auto 22px; border: 2px solid var(--accent); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.ab-promise-card .greeka-eyebrow { justify-content: center; }
.ab-promise-card .greeka-eyebrow::after { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #f1d58a, var(--accent)); }
.ab-promise-card h2 { margin-bottom: 6px; }
.ab-promise-card p { margin: 14px auto 0; color: #4a5468; }
.ab-promise-card .ab-sign { margin-top: 26px !important; color: var(--primary) !important; font-family: "Cormorant Garamond", var(--font-display); font-size: 22px; font-style: italic; font-weight: 600; line-height: 1.5 !important; }
@media (min-width: 1024px) { .ab-promise-card p { font-size: 17px; } .ab-promise-card .ab-sign { font-size: 30px; margin-top: 36px !important; } }

/* ==========================================================================
   8. CLOSING CTA
   ========================================================================== */
.ab-close { position: relative; overflow: hidden; margin-top: 0; background: var(--primary-dark); color: #fff; isolation: isolate; }
.ab-close > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-close-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgb(13 21 80 / 78%), rgb(19 30 102 / 88%)); }
.ab-close-inner { padding: 76px 0 84px; text-align: center; }
.ab-close h2 { margin-inline: auto; max-width: 14em; color: #fff; }
.ab-close-inner > p { max-width: 38em; margin: 16px auto 0; color: rgb(255 255 255 / 80%); line-height: 1.8; }
.ab-close-inner > .ab-close-tag { color: #f1d58a; font-family: "Cormorant Garamond", var(--font-display); font-size: 22px; font-style: italic; font-weight: 600; }
.ab-close .ab-actions { margin-top: 30px; }
.ab-close .ab-actions .ab-btn { flex: 1 1 180px; max-width: 260px; }
@media (min-width: 1024px) {
  .ab-close-inner { padding: 130px 0 138px; }
  .ab-close-inner > p { font-size: 17px; }
  .ab-close-inner > .ab-close-tag { margin-top: 22px; font-size: 30px; }
  .ab-close .ab-actions .ab-btn { flex: 0 0 auto; max-width: none; }
}

/* Footer sits right after the closing band, so drop its rounded top */
.about-page .greeka-footer { margin-top: 0; border-radius: 0; }
.about-page .greeka-footer::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ab-hero-text > * { animation: none; }
  .ab-frame > img { transition: none; transform: none; }
}