:root { color-scheme: dark; --photo-opacity: .45; --edge-opacity: 1; color: #f1e8db; background: #060807; font-family: Georgia, 'Times New Roman', serif; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; }
button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.hero { min-height: 100vh; min-height: 100svh; position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr auto; overflow: clip; padding: 30px clamp(22px, 3.2vw, 64px); }
.photograph, .vignette { position: absolute; inset: 0; pointer-events: none; z-index: -2; }
.photograph { background: #060807; }
.photograph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: var(--photo-opacity); }
.foreground { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.foreground[hidden] { display: none; }
.rose-layer { display: block; width: 100%; height: 100%; }
.rose-layer image { opacity: var(--photo-opacity); }
.portrait-petal { display: none; }
.topline, .bottomline { position: relative; z-index: 3; }
.tagline { z-index: 3; }
.vignette { z-index: -1; opacity: var(--edge-opacity); background: radial-gradient(ellipse at 50% 46%, transparent 30%, rgb(0 0 0 / .16) 72%, rgb(0 0 0 / .48) 100%), linear-gradient(180deg, rgb(0 0 0 / .22), transparent 22%, transparent 75%, rgb(0 0 0 / .28)); }
.topline, .bottomline { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; letter-spacing: .025em; }
.topline { min-height: 24px; }
.topline > :first-child { font-size: 18px; letter-spacing: -.03em; }
.topline i { font-weight: 400; }
.disciplines { font-family: Arial, sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.centerpiece { align-self: center; text-align: center; position: relative; margin-block: 50px; }
.wordmark { width: 90%; margin: 0 auto; font-size: inherit; line-height: 0; }
.wordmark svg { display: block; width: 100%; height: auto; overflow: visible; }
.tagline { position: absolute; top: calc(100% + 18px); width: 100%; margin: 0; font-size: clamp(15px, 1.5vw, 23px); font-weight: 400; letter-spacing: -.025em; }
.bottomline { min-height: 32px; font-family: Arial, sans-serif; font-size: 10px; letter-spacing: .05em; }
.edition { font-size: 9px; letter-spacing: .15em; }
.workshop { position: fixed; right: 22px; top: 76px; z-index: 10; width: 260px; max-width: calc(100vw - 44px); border: 1px solid #ffffff40; background: #101512f2; border-radius: 3px; font-family: Arial, sans-serif; font-size: 12px; box-shadow: 0 8px 32px #0003; }
.workshop[hidden] { display: none; }
.workshop summary { padding: 14px 16px; cursor: pointer; list-style: none; }
.workshop summary::-webkit-details-marker { display: none; }
.workshop summary span { float: right; }
.settings { padding: 4px 16px 18px; }
.settings label { display: flex; justify-content: space-between; align-items: center; }
.settings input[type=range] { display: block; width: 100%; margin: 14px 0 20px; accent-color: #e2b2af; }
.settings .toggle { justify-content: flex-start; gap: 10px; min-height: 40px; }
.settings input[type=checkbox] { accent-color: #e2b2af; width: 16px; height: 16px; }
.settings p { color: #c5c8c5; font-size: 11px; line-height: 1.5; }
.settings button { background: transparent; border: 1px solid #ffffff60; min-height: 36px; padding: 8px 12px; }
@media (max-width: 600px) {
  .portrait-petal { display: inline; }
  .hero { padding: 22px 20px; }
  .topline > :first-child { font-size: 17px; }
  .disciplines { max-width: 110px; text-align: right; font-size: 8px; line-height: 1.6; }
  .centerpiece { margin-inline: -8px; }
  .tagline { font-size: 17px; max-width: 260px; left: 50%; transform: translateX(-50%); line-height: 1.5; top: calc(100% + 24px); }
  .photograph img { object-position: 50% 50%; }
  .workshop { top: 70px; right: 20px; }
}
@media (max-height: 500px) and (min-width: 601px) {
  .hero { padding-block: 16px; }
  .centerpiece { width: 100%; margin: 30px auto 55px; }
  .wordmark { max-width: 97.2vh; }
  .tagline { top: calc(100% + 5px); font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .glyph { opacity: 1 !important; transform: none !important; } .photograph img, .rose-layer { transform: none !important; } }

.compare { color: inherit; text-decoration: none; padding-block: 14px; font-size: 10px; }
.compare:hover { text-decoration: underline; text-underline-offset: 5px; }
.compare:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

.brand-name { white-space: nowrap; }
.brand-word, .tagline-text { display: inline-block; }
/* Animate the inner span so portrait centering on .tagline stays intact. */
@media (prefers-reduced-motion: reduce) {
  .brand-word, .tagline-text { opacity: 1 !important; transform: none !important; }
}

/* Keep completed text visible after replay cancellation or a viewport change. */
:root[data-lettering="complete"] .glyph,
:root[data-lettering="complete"] .brand-word,
:root[data-lettering="complete"] .tagline-text {
  opacity: 1 !important;
  transform: none !important;
}

.workshop { max-height: calc(100svh - 96px); overflow-y: auto; }
.settings #tagline-timing { margin-bottom: 6px; min-height: 28px; }
.timing-scale { display: flex; justify-content: space-between; gap: 10px; color: #c5c8c5; font-size: 10px; }
#tagline-timing-value { font-variant-numeric: tabular-nums; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-actions button { min-height: 44px; }

/* The landing page extends the accepted ivory header. */
:root { --paper:#f1e8db; --ink:#25332b; --wine:#481a24; --line:rgba(241,232,219,.25); }
html { scroll-behavior:smooth; }
body { -webkit-font-smoothing:antialiased; }
a {color:inherit;} [hidden] {display:none!important;}
.hero {color:var(--paper);}
.topline nav {display:flex;gap:30px;font:11px Arial,sans-serif;}
.topline nav a {text-decoration:none;min-height:44px;display:flex;align-items:center;}
.topline nav a:last-child {border-bottom:1px solid #f1e8db80;}
.bottomline .scroll-link {text-decoration:none;font-size:11px;padding:15px 0;}
.section {padding:110px max(6vw,24px);scroll-margin-top:24px;}
.eyebrow {font:10px/1.5 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;margin:0 0 46px;}
h2,h3,p {font-weight:400;}
h2 {font-size:clamp(44px,5.8vw,86px);line-height:1.02;letter-spacing:-.055em;margin:0;}
h2 em {font-weight:400;}
.section p:not(.eyebrow):not(.preview-note):not(.reply):not(.form-status):not(.signup-status) {font-size:20px;line-height:1.6;}
.introduction {background:var(--paper);color:var(--ink);}
.intro-layout {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:9vw;align-items:end;}
.statement {font-size:clamp(50px,7.1vw,105px);}
.intro-copy {max-width:420px;}
.intro-copy p:first-child {margin-top:0;}
.text-link {font:12px Arial,sans-serif;display:inline-flex;gap:40px;text-decoration:none;padding:20px 0 12px;border-bottom:1px solid currentColor;margin-top:14px;}
.text-link span {font-size:18px;}
.possibilities {background:#18261e;}
.section-heading {display:flex;justify-content:space-between;gap:50px;align-items:start;margin-bottom:70px;}
.section-heading h2 {width:65%;}
.type-row {display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,.8fr) 44px;gap:30px;align-items:center;border-top:1px solid var(--line);padding:30px 0;}
.type-row:last-child {border-bottom:1px solid var(--line);}
.index {font-size:13px;font-style:italic;opacity:.65;}
.type-row h3 {font-size:clamp(26px,3vw,43px);letter-spacing:-.04em;margin:0;}
.section .type-row p {font-size:17px!important;max-width:32ch;margin:0;opacity:.8;}
.type-row a {display:grid;place-items:center;min-height:44px;font-size:24px;text-decoration:none;}
.inquiry-section {background:var(--wine);}
.inquiry-layout {display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:10vw;}
.inquiry-intro > p:not(.eyebrow) {max-width:31ch;}
.reply {border-top:1px solid var(--line);padding-top:24px;margin-top:50px;font:11px Arial,sans-serif;letter-spacing:.04em;display:flex;align-items:center;gap:20px;}
.reply span {font:italic 40px Georgia,serif;letter-spacing:-.05em;}
.inquiry-form {padding-top:12px;}
.inquiry-form label {display:block;font:12px/1.5 Arial,sans-serif;}
.field-pair {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;}
.inquiry-form input:not([type=file]),textarea {width:100%;min-width:0;display:block;border:0;border-bottom:1px solid var(--line);background:transparent;color:inherit;min-height:46px;margin-bottom:30px;border-radius:0;font:18px/1.5 Georgia,serif;}
textarea {resize:vertical;padding-top:10px;}
.attachment {position:relative;padding:22px;border:1px dashed var(--line);cursor:pointer;}
.attachment span {float:right;font-size:23px;line-height:1;}
.attachment small {display:block;opacity:.65;font-size:11px;margin-top:8px;}
.attachment input {position:absolute;inset:0;opacity:0;width:100%;cursor:pointer;}
.attachment:focus-within {outline:2px solid var(--paper);outline-offset:4px;}
.file-list {padding:0;list-style:none;font:12px/1.5 Arial,sans-serif;overflow-wrap:anywhere;}
.file-list li {display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:4px;}
.file-list button {background:none;border:0;min-width:44px;min-height:44px;}
.form-actions {display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px;}
.action {display:flex;justify-content:space-between;gap:40px;min-height:52px;padding:16px 24px;background:var(--paper);border:1px solid var(--paper);color:var(--wine);font:12px Arial,sans-serif;}
.preview-note {font:11px/1.5 Arial,sans-serif;opacity:.65;}
.form-status,.signup-status {font:14px/1.5 Arial,sans-serif;}
.updates-section {background:#e4d8c6;color:var(--ink);}
.updates-layout {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.65fr);gap:14vw;align-items:end;}
.updates-layout p {margin-top:0;}
.signup-form {display:flex;align-items:center;border-bottom:1px solid currentColor;margin:30px 0 12px;}
.signup-form input {min-width:0;width:100%;padding:14px 0;min-height:52px;border:0;background:transparent;color:inherit;font:18px Georgia,serif;}
.signup-form input::placeholder {color:inherit;opacity:.7;}
.signup-form button {background:none;border:0;min-width:52px;min-height:52px;font-size:25px;}
.page-footer {display:flex;justify-content:space-between;align-items:center;gap:30px;padding:50px max(6vw,24px);background:#18261e;font:11px/1.5 Arial,sans-serif;}
.page-footer a {text-decoration:none;min-height:44px;display:flex;align-items:center;}
.page-footer .footer-name {font:24px Georgia,serif;display:block;padding-block:10px;white-space:nowrap;}
.page-footer span {opacity:.65;}
.sr-only {position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;}
a:focus-visible,textarea:focus-visible {outline:2px solid currentColor;outline-offset:5px;}
/* This is the exact ground from the existing HMBO garden landing pages,
   with no garden SVG, canvas, botanical illustrations, or foreground plants. */
body.gradient {background:#141810;}
.gradient main {background:radial-gradient(92vw 62vh at 50% 118%, rgba(122,30,35,.52),transparent 70%),radial-gradient(70vw 50vh at 10% -12%,rgba(74,15,20,.45),transparent 68%),#141810;background-attachment:fixed;}
.gradient .section {background:transparent;color:var(--paper);border-bottom:1px solid rgba(176,141,87,.22);}
.gradient .eyebrow,.gradient .index {color:#cdb48e;}
.gradient .page-footer {background:#141810;}
.gradient .introduction .statement em {color:#cdb48e;}
.gradient .inquiry-section .action {color:#2a1417;}
@media (max-width:800px) {
 .section {padding:75px 25px;}
 .intro-layout,.inquiry-layout,.updates-layout {grid-template-columns:1fr;gap:38px;}
 .section-heading {display:block;margin-bottom:45px;}
 .section-heading h2 {width:100%;}
 .eyebrow {margin-bottom:28px;}
 .intro-copy {max-width:100%;}
 .type-row {grid-template-columns:24px minmax(0,1fr) 44px;gap:12px;}
 .type-row p {grid-column:2;grid-row:2;}
 .type-row a {grid-column:3;grid-row:1 / 3;}
 .type-row h3 {font-size:30px;}
 .reply {margin-top:30px;}
 .page-footer {flex-wrap:wrap;gap:15px;}
 .page-footer span {order:3;flex-basis:100%;}
 .topline nav {gap:16px;}
 .topline nav a:first-child {display:none;}
 .topline nav a {font-size:10px;}
 .gradient main {background-attachment:scroll;background-size:100% 100%;}
}
@media(max-width:430px){.field-pair{grid-template-columns:1fr;gap:0}.topline nav a:nth-child(2){display:none}.section p:not(.eyebrow){font-size:18px}.page-footer .footer-name{font-size:21px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1!important;transform:none!important}}

.inquiry-intro .reply {max-width:none;}
.reply span {white-space:nowrap;flex-shrink:0;}

/* Draw arrows as paths so phones cannot substitute emoji glyphs. */
.arrow-icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -.125em; }
.bottomline { justify-content: flex-end; }

/* Scroll-drawn rules retain the original border's size and color. */
.has-drawn-rule { position: relative; border-top-color: transparent; border-bottom-color: transparent; }
.type-row.has-drawn-rule:last-child { border-bottom-color: transparent; }
.field-line { display: block; margin-bottom: 30px; }
.inquiry-form .field-line input, .inquiry-form .field-line textarea { margin-bottom: 0; }
.field-line.has-drawn-rule input, .field-line.has-drawn-rule textarea { border-bottom-color: transparent; }
.drawn-rule { position: absolute; left: 0; right: 0; display: block; transform-origin: left center; pointer-events: none; }
.drawn-rule--top { top: -1px; }
.drawn-rule--bottom { bottom: -1px; }
.field-line .drawn-rule--bottom { bottom: 0; }
@media (prefers-reduced-motion: reduce) { .drawn-rule { transform: none !important; } }

/* The main page chapters stack; individual services stay in normal flow. */
main.section-stack { position: relative; isolation: isolate; }
main.section-stack > .section {
  position: sticky;
  top: var(--section-stop, 0px);
  min-height: 100svh;
  box-shadow: 0 -24px 40px -32px rgba(0,0,0,.5);
}
main.section-stack > .section:nth-child(1) { z-index: 1; }
main.section-stack > .section:nth-child(2) { z-index: 2; }
main.section-stack > .section:nth-child(3) { z-index: 3; }
main.section-stack > .section:nth-child(4) { z-index: 4; }
@media (prefers-reduced-motion: reduce) {
  main.section-stack > .section { position: relative; top: auto; min-height: 0; box-shadow: none; }
}

/* Hold the hero behind the incoming chapter while each letter lifts out. */
:root[data-version="4"] .foreground { display: none !important; }
:root[data-version="4"] .topline nav { display: none; }
:root[data-version="4"] .topline .brand-name { text-decoration: none; min-height: 44px; align-content: center; }
:root[data-version="4"] .topline .brand-name:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
:root[data-version="4"] .settings .toggle:has(#depth) { display: none; }
.hero.has-scroll-exit { position: sticky; top: 0; z-index: 0; }
:root[data-version="4"] main,
:root[data-version="4"] .page-footer { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero.has-scroll-exit { position: relative; }
  .hero-exit-letter { transform: none !important; opacity: 1 !important; }
}
.topline { min-height: 56px; }
@media (max-width: 1100px) {
  .topline nav a:not(:last-child) { display: none; }
}
@media (max-width: 600px) {
  .topline > .brand-name { max-width: 72px; font-size: 14px; white-space: normal; }
  .topline nav { max-width: 67px; text-align: right; }
  .topline nav a { line-height: 1.5; }
}
@media (max-height: 500px) and (min-width: 601px) {
}

/* All versions use the approved fuller portrait petal; desktop keeps its mask. */
.portrait-petal-full { display: none; }
@media (max-width: 600px) {
  .portrait-petal { display: none; }
  .portrait-petal-full { display: inline; }
  .topline > .brand-name { max-width: 60px; font-size: 13px; }
  .topline nav { max-width: 56px; }
}
@media (max-width: 360px) {
  .topline > .brand-name { max-width: 46px; font-size: 12px; }
  .topline nav { max-width: 42px; font-size: 9px; }
}

/* Live form states. Honeypots stay outside the visible layout. */
.bot-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;}
.form-status,.signup-status{min-height:1.5em;line-height:1.6;}
button:disabled{cursor:wait;opacity:.55;}
.file-list button{min-width:44px;min-height:44px;}
textarea:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:5px;}