/* An online statement (Share online, lib/online-page.php). The page is
   Preview from the editor (studio.css .flip, .flip__bar, .flip__book, the
   zoom and Dark / Light), filling the window; this file adds what a
   visitor needs on top: Contact us and its window, the PDF button, the
   pages stacked when there's no script, and phones. The button colour on
   the window is the statement's own accent (--acc, --on-acc). */
html, body.op-site { height: 100%; overflow: hidden; }
.op-flip { position: fixed; inset: 0; width: auto; height: auto; }
.op-flip .flip__title h1 { display: flex; flex-direction: column; min-width: 0; margin: 0; font: inherit; letter-spacing: 0; }
.op-flip .flip__title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-flip .flip__mode svg { width: 15px; height: 15px; }
.op-flip .btn { text-decoration: none; }
.op-flip .btn svg { width: 18px; height: 18px; }
.op-flip .flip__stage { position: relative; }
.op-made { position: absolute; right: 16px; bottom: 10px; font-size: 12px; color: rgba(255, 255, 255, .5); text-decoration: none; }
.op-made:hover { color: #fff; }
.flip--light .op-made { color: rgba(22, 27, 24, .5); }
.flip--light .op-made:hover { color: #161B18; }

/* Without script: the pages stacked, scrolling. */
.op-pages { display: grid; gap: 18px; width: min(560px, 100%); margin: 0 auto; }
.op-pages img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.op-flip:not(.is-book) .flip__stage { display: block; overflow: auto; }
.op-flip:not(.is-book) .flip__nav { visibility: hidden; }

/* Contact us: the window */
.op-contact { width: min(880px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); padding: 0; overflow: auto; border-radius: 18px; }
.op-contact[open] { display: block; }
.op-x { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--ink-62); cursor: pointer; z-index: 1; }
.op-x:hover { background: var(--amn-cream); color: var(--amn-black); }
.op-x svg, .op-facts svg, .op-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.op-contact__in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.op-contact__about { padding: 30px 28px; background: var(--amn-desert); border-right: 1px solid var(--ink-08); display: grid; align-content: start; gap: 16px; }
.op-contact__about h2 { font-size: 26px; line-height: 1.15; padding-right: 24px; }
.op-contact__lead { margin: -6px 0 0; color: var(--ink-62); font-size: 14.5px; }
.op-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.op-facts li { display: flex; gap: 12px; align-items: flex-start; }
.op-facts li > svg { margin-top: 13px; color: var(--acc, var(--amn-green)); flex: none; }
.op-facts small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-62); }
.op-facts span { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.op-facts a { text-decoration: underline; text-decoration-color: rgba(22, 27, 24, .25); text-underline-offset: 3px; }
.op-form { padding: 30px 28px 28px; display: grid; gap: 13px; align-content: start; }
.op-form h3 { font-size: 21px; padding-right: 36px; }
.op-form__lead { margin: -7px 0 0; color: var(--ink-62); font-size: 14px; }
.op-form label { display: grid; gap: 5px; font-size: 13.5px; font-weight: 600; }
.op-form label small { font-weight: 400; color: var(--ink-62); }
.op-form input, .op-form textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 15px; line-height: 1.4; color: var(--amn-black); padding: 10px 12px; border: 1px solid rgba(22, 27, 24, .22); border-radius: 10px; background: #fff; }
.op-form textarea { resize: vertical; min-height: 104px; }
.op-form input:focus, .op-form textarea:focus { outline: 2px solid var(--acc, var(--amn-green)); outline-offset: 0; border-color: transparent; }
.op-form [aria-invalid="true"] { border-color: var(--danger); }
.op-form__two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.op-form__small { margin: -3px 0 0; font-size: 12.5px; color: var(--ink-62); }
.op-form .op-send { justify-self: start; gap: 8px; background: var(--acc, var(--amn-green)); border-color: var(--acc, var(--amn-green)); color: var(--on-acc, #fff); }
.op-form .op-send:hover { filter: brightness(.94); background: var(--acc, var(--amn-green)); border-color: var(--acc, var(--amn-green)); }
.op-form__done { padding: 12px 14px; border-radius: 10px; background: #E9F5EC; color: #1C5B2E; font-size: 14.5px; outline: none; }
.op-form__err { padding: 12px 14px; border-radius: 10px; background: #FBEAE6; color: #8A2E1F; font-size: 14px; }
.op-form__done[hidden], .op-form__err[hidden] { display: none; }
.op-form.is-sent > :not(h3):not(.op-form__done) { display: none; }
.op-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Not found, or offline */
.op--gone { min-height: 100vh; display: grid; place-items: center; padding: 24px; margin: 0; font-family: 'DM Sans', system-ui, sans-serif; background: #EFECE4; color: #161B18; }
.op-gone { max-width: 460px; text-align: center; background: #fff; border: 1px solid rgba(22, 27, 24, .12); border-radius: 18px; padding: 36px 28px; }
.op-gone h1 { margin: 0 0 8px; font-size: 24px; }
.op-gone p { margin: 0 0 22px; color: rgba(22, 27, 24, .66); }
.op-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #FB5E00; color: #fff; font-weight: 600; text-decoration: none; }

/* Laptops: words beside the icons; narrower screens: icons only. */
@media (max-width: 1100px) {
  .op-flip .flip__mode span, .op-pdf span { display: none; }
  .op-flip .flip__mode button { padding: 6px 10px; }
}
/* Phones: the bar in two rows (who, and the actions; then the arrows), one
   page at a time, swipe to turn. Pinch zooms, so no zoom buttons. */
@media (max-width: 760px) {
  .op-flip .flip__bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'title actions' 'nav nav'; height: auto; row-gap: 6px; padding: 10px 12px 8px; }
  .op-flip .flip__title { grid-area: title; }
  .op-flip .flip__nav { grid-area: nav; justify-content: center; }
  .op-flip .flip__actions { grid-area: actions; gap: 6px; }
  .op-flip .flip__zoom { display: none; }
  .op-flip .flip__where { min-width: 120px; }
  .op-flip .flip__stage { padding: 12px 12px 24px; }
  .op-made { right: 0; left: 0; text-align: center; bottom: 6px; }
  .op-contact__in { grid-template-columns: 1fr; }
  .op-contact__about { border-right: 0; border-bottom: 1px solid var(--ink-08); padding: 24px 20px; }
  .op-form { padding: 22px 20px 24px; }
  .op-form__two { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .op-contact-btn span { display: none; }
  .op-flip .flip__mode { display: none; }
}

/* The business's own colour (2026-10-21, the online page editor): the
   Contact button, the chosen background switch, and "Ours" as a background. */
.op-flip .btn.flip__download.op-contact-btn { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.op-flip .btn.flip__download.op-contact-btn:hover { filter: brightness(.93); background: var(--acc); border-color: var(--acc); }
.op-flip .flip__mode button.is-active { background: var(--acc); color: var(--on-acc); }
.op-flip [hidden] { display: none !important; }
.op-flip.flip--brand { background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--acc) 88%, #fff), color-mix(in srgb, var(--acc) 62%, #000) 78%); }
.op-flip.flip--brand:not(.flip--light) .flip__bar { border-bottom-color: rgba(255, 255, 255, .14); }
.op-flip.flip--brand .flip__mode button.is-active { background: #fff; color: #161B18; }
.op-flip.flip--brand .btn.flip__download.op-contact-btn { background: #fff; border-color: #fff; color: #161B18; }
/* The logo, on a white tile so dark and light logos both show. */
.op-logo { grid-row: 1; height: 40px; max-width: 132px; object-fit: contain; padding: 4px 8px; border-radius: 9px; background: #fff; }
.op-flip .flip__bar:has(.op-logo:not([hidden])) { grid-template-columns: auto minmax(0, 1fr) auto minmax(max-content, 1fr); }
@media (max-width: 760px) {
  .op-logo { grid-area: logo; height: 32px; max-width: 90px; }
  .op-flip .flip__bar:has(.op-logo:not([hidden])) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'logo title actions' 'nav nav nav'; }
}

/* Read as text (2026-10-23): the statement's words, for anyone who'd rather
   read than flip, screen readers and search engines. */
.op-read { position: absolute; left: 16px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 12px; color: rgba(255, 255, 255, .62); cursor: pointer; }
.op-read:hover, .op-read:focus-visible { color: #fff; background: rgba(255, 255, 255, .08); }
.flip--light .op-read { color: rgba(22, 27, 24, .62); }
.flip--light .op-read:hover, .flip--light .op-read:focus-visible { color: #161B18; background: rgba(22, 27, 24, .06); }
.op-read svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.op-text { width: min(720px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); padding: 0; overflow: auto; border-radius: 18px; }
.op-text[open] { display: block; }
.op-text__in { padding: 34px 40px 40px; }
.op-text__in h2 { font-size: 26px; line-height: 1.15; margin: 0 40px 6px 0; }
.op-text__in section { padding: 22px 0 6px; border-top: 1px solid var(--ink-08); margin-top: 18px; }
.op-text__in h3 { font-size: 19px; line-height: 1.25; margin: 0 0 10px; }
.op-text__in h3 small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-62); margin-bottom: 4px; }
.op-text__in h4 { font-size: 15.5px; line-height: 1.3; margin: 16px 0 6px; }
.op-text__in p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--amn-black); max-width: 64ch; }
@media (max-width: 640px) { .op-text__in { padding: 26px 20px 28px; } .op-read span { display: none; } }