/* Orshina design system, redesign 2026-10.
   ---------------------------------------------------------------------------
   Shared tokens and components for the company pages (homepage and the guide /
   service pages). Loaded after brand-site.css on brand pages only; the catalog,
   profiles and admin keep their own layer.

   The palette IS the brand palette of brand-site.css (--brand-*), named here by
   role so components stop hard-coding hex values: deep navy grounds, warm
   paper, white cards, brand orange for actions and sun for highlights on navy.

   Contrast, measured: white on brand orange #e56f28 is 3.16:1, which passes
   only as large text, so every orange-filled control sets its label at 19px
   bold. Orange used as small text is the darker brand stop #bd4f15 (4.9:1 on
   white). Many readers here are in their sixties and seventies. */

:root {
  --o-paper: #f3f0ea;
  --o-paper-deep: #ebe5da;
  --o-canvas: var(--o-paper);
  --o-surface: #ffffff;
  --o-ink: #102a46;
  --o-ink-soft: #536170;
  --o-navy: #153d63;
  --o-navy-deep: #0b233d;
  --o-blue: #27678b;
  --o-on-navy: #ffffff;
  --o-on-navy-soft: #c9d6e3;
  --o-accent: #e56f28;
  --o-accent-hover: #bd4f15;
  --o-accent-text: #bd4f15;
  --o-accent-brand: #e56f28;
  --o-accent-on-navy: #f6bb72;
  --o-sun: #f2b548;
  --o-accent-soft: #fdf0e4;
  --o-accent-line: #f3d2b2;
  --o-wa: #1F7A4D;
  --o-wa-hover: #17623D;
  --o-line: rgba(16, 42, 70, .12);

  /* The navy ground of the brand hero, shared by every navy band. */
  --o-navy-ground:
    radial-gradient(circle at 84% 12%, rgba(229, 111, 40, .30), transparent 25rem),
    radial-gradient(circle at 7% 88%, rgba(58, 147, 168, .24), transparent 29rem),
    linear-gradient(118deg, #0b233d 0%, #123a5d 48%, #0d2c49 100%);

  --o-r-sm: 12px;
  --o-r-md: 18px;
  --o-r-lg: 26px;

  /* Three elevation steps, tinted to the navy ground, never pure black. */
  --o-e1: 0 1px 2px rgba(16, 42, 70, .06), 0 4px 14px rgba(16, 42, 70, .06);
  --o-e2: 0 14px 34px -14px rgba(16, 42, 70, .28), 0 2px 6px rgba(16, 42, 70, .06);
  --o-e3: 0 26px 76px -20px rgba(16, 42, 70, .40), 0 6px 14px rgba(16, 42, 70, .08);
  --o-edge: inset 0 1px 0 rgba(255, 255, 255, .7);

  --o-ease: cubic-bezier(.23, 1, .32, 1);
  --o-gutter: clamp(1rem, 4vw, 2rem);
  --o-section: clamp(3.25rem, 8vw, 6.5rem);
  --o-measure: 62ch;
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   One radius for every control on the page. 52px tall: comfortably above the
   44px touch floor for a thumb that is not steady. Labels are one to three
   words and never wrap at desktop. */
.o-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 52px;
  padding: .8rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms var(--o-ease), border-color 160ms var(--o-ease),
              color 160ms var(--o-ease), transform 120ms var(--o-ease), box-shadow 160ms var(--o-ease);
}
.o-btn:active { transform: scale(.97); }
.o-btn:focus-visible { outline: 3px solid var(--o-sun); outline-offset: 3px; }
.o-btn i { font-size: 1.05em; }

.o-btn--primary { background: var(--o-accent); color: #fff; font-size: 19px; box-shadow: 0 14px 30px -10px rgba(189, 79, 21, .45); }
.o-btn--lg { min-height: 58px; padding-inline: 1.9rem; }
.o-btn--wa { background: var(--o-wa); color: #fff; box-shadow: 0 8px 18px -8px rgba(31, 122, 77, .5); }
.o-btn--ghost { background: var(--o-surface); color: var(--o-navy); border-color: rgba(16, 42, 70, .18); }
.o-btn--on-navy { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .45); }

/* On the narrowest phones a label may wrap rather than overflow its column. */
@media (max-width: 400px) {
  .o-btn { white-space: normal; text-align: center; }
}

@media (hover: hover) and (pointer: fine) {
  .o-btn--primary:hover { background: var(--o-accent-hover); }
  .o-btn--wa:hover { background: var(--o-wa-hover); }
  .o-btn--ghost:hover { border-color: var(--o-accent); color: var(--o-accent-text); }
  .o-btn--on-navy:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
}

/* A phone number is read aloud and dialled by hand: tabular, LTR, never split. */
.o-num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Text link with an arrow that nudges on hover. */
.o-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  color: var(--o-accent-text);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}
.o-link i { transition: transform 160ms var(--o-ease); }
.o-link--on-navy { color: var(--o-accent-on-navy); }
@media (hover: hover) and (pointer: fine) { .o-link:hover i { transform: translateX(-3px); } }

/* Base form layout, moved here from partials/_article_styles.html. */
/* ── Call-me-back form ────────────────────────────────────────────────
   Sized for a thumb first: 16px inputs (anything smaller makes iOS Safari
   zoom the page on focus and the visitor loses their place), 52px tap
   targets, and a single-column stack until there is room for two. */
.brand-site .cf-card {
    margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--o-accent-line);
    border-radius: 20px;
    background: linear-gradient(180deg, var(--o-accent-soft) 0%, var(--o-surface) 62%);
    box-shadow: 0 10px 30px rgba(16,42,70,.07);
}
.brand-site .cf-h {
    display: flex; align-items: center; gap: .6rem;
    margin: 0 0 .45rem;
    font-size: clamp(1.35rem, 3.4vw, 1.75rem); font-weight: 820;
    color: var(--o-ink); line-height: 1.25;
}
.brand-site .cf-h i { color: var(--o-accent); }
.brand-site .cf-sub { margin: 0 0 1.15rem; color: var(--o-ink-soft); line-height: 1.7; font-size: .97rem; }
.brand-site .cf-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 640px) { .brand-site .cf-grid { grid-template-columns: 1fr 1fr; } }
.brand-site .cf-field { display: block; margin-bottom: .9rem; }
.brand-site .cf-grid .cf-field { margin-bottom: 0; }
.brand-site .cf-label {
    display: flex; align-items: baseline; gap: .4rem;
    margin-bottom: .35rem; font-weight: 700; color: var(--o-navy); font-size: .93rem;
}
.brand-site .cf-req { color: #C0392B; font-weight: 800; }
.brand-site .cf-opt { color: #8A94A2; font-weight: 500; font-size: .82rem; }
.brand-site .cf-input {
    width: 100%;
    padding: .85rem 1rem;
    border: 1.5px solid rgba(16, 42, 70, .18); border-radius: 12px;
    background: #fff; color: var(--o-ink);
    /* 16px exactly: iOS zooms any focused input below it. */
    font-size: 16px; line-height: 1.45;
    transition: border-color .15s, box-shadow .15s;
}
.brand-site .cf-input::placeholder { color: #A6B0BD; }
.brand-site .cf-input:focus {
    outline: none;
    border-color: var(--o-accent);
    box-shadow: 0 0 0 3px rgba(232,114,28,.16);
}
.brand-site .cf-input[aria-invalid="true"] { border-color: #C0392B; }
.brand-site .cf-textarea { resize: vertical; min-height: 88px; }
.brand-site .cf-hint { display: block; margin-top: .3rem; font-size: .8rem; color: #8A94A2; }
.brand-site .cf-submit {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; margin-top: 1.1rem;
    min-height: 54px; padding: .9rem 1.5rem;
    border: 0; border-radius: 14px;
    background: var(--o-accent); color: #fff;
    font-size: 1.05rem; font-weight: 800; cursor: pointer;
    box-shadow: 0 6px 18px rgba(232,114,28,.28);
    transition: background-color .15s, transform .05s, box-shadow .15s;
}
.brand-site .cf-submit:hover { background: var(--o-accent-hover); }
.brand-site .cf-submit:active { transform: translateY(1px); }
.brand-site .cf-submit:focus-visible { outline: 3px solid var(--o-navy); outline-offset: 2px; }
.brand-site .cf-submit[disabled] { background: #d9b597; box-shadow: none; cursor: default; }
@media (min-width: 640px) { .brand-site .cf-submit { width: auto; min-width: 260px; } }
.brand-site .cf-msg {
    margin: .9rem 0 0; padding: .8rem 1rem;
    border-radius: 12px; font-weight: 600; line-height: 1.6; font-size: .95rem;
}
.brand-site .cf-msg.is-error { background: #FDECEA; color: #A32B1C; border: 1px solid #F5C6C0; }
.brand-site .cf-msg.is-ok { background: #E8F7EE; color: #1B6B3A; border: 1px solid #BFE6CE; }
.brand-site .cf-consent { display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 .9rem; font-size: .9rem; color: var(--o-ink-soft); cursor: pointer; }
.brand-site .cf-consent input { margin-top: .2rem; width: 1rem; height: 1rem; accent-color: #1E4272; flex-shrink: 0; }
.brand-site .cf-alt { margin: 1rem 0 0; font-size: .9rem; color: var(--o-ink-soft); }
.brand-site .cf-alt a { color: var(--o-accent-text); font-weight: 700; }
.brand-site .cf-alt a:hover { text-decoration: underline; }
.brand-site .cf-alt span { margin: 0 .5rem; color: #C3CCD7; }

/* ── Call-me-back form (partials/_contact_request_form.html) ──────────────
   Visual layer only: the fields, endpoint and submit logic are untouched.
   16px+ inputs so iOS does not zoom into the field and lose the page. */
.brand-site .cf-card {
  border: 1px solid var(--o-line);
  border-radius: var(--o-r-lg);
  background: var(--o-surface);
  box-shadow: var(--o-e2);
  padding: clamp(1.25rem, 4vw, 2rem);
}
.brand-site .cf-h { color: var(--o-navy); font-size: clamp(1.3rem, 3.6vw, 1.6rem); font-weight: 800; line-height: 1.25; }
.brand-site .cf-sub { color: var(--o-ink-soft); font-size: 1rem; line-height: 1.7; }
.brand-site .cf-label { color: var(--o-ink); font-size: 1rem; font-weight: 700; }
.brand-site .cf-input {
  min-height: 52px;
  border: 1.5px solid rgba(16, 42, 70, .22);
  border-radius: var(--o-r-sm);
  background: #fff;
  color: var(--o-ink);
  font-size: 1.0625rem;
  transition: border-color 140ms var(--o-ease), box-shadow 140ms var(--o-ease);
}
.brand-site .cf-input:focus { outline: none; border-color: var(--o-accent); box-shadow: 0 0 0 4px rgba(229, 111, 40, .18); }
.brand-site .cf-input[aria-invalid="true"] { border-color: #B42318; box-shadow: 0 0 0 4px rgba(180, 35, 24, .12); }
.brand-site .cf-submit {
  min-height: 56px;
  border-radius: 14px;
  background: var(--o-accent);
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  box-shadow: 0 14px 30px -10px rgba(189, 79, 21, .45);
  transition: background-color 160ms var(--o-ease), transform 120ms var(--o-ease);
}
.brand-site .cf-submit:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .brand-site .cf-submit:hover { background: var(--o-accent-hover); } }
.brand-site .cf-alt a { color: var(--o-accent-text); font-weight: 800; }
.brand-site .cf-msg { border-radius: var(--o-r-sm); font-size: 1rem; font-weight: 700; }

/* ── Service-page action strip ───────────────────────────────────────────
   The three ways to start, placed right after the short answer: a reader who
   already knows this is the service they need should not have to finish the
   article to find a phone number. */
.o-start {
  display: grid;
  gap: .9rem;
  margin: 1.75rem 0;
  padding: clamp(1.1rem, 3.5vw, 1.5rem);
  border: 1px solid var(--o-accent-line);
  border-radius: var(--o-r-lg);
  background: linear-gradient(180deg, var(--o-accent-soft) 0%, var(--o-surface) 100%);
}
.o-start__h { margin: 0; color: var(--o-navy); font-size: 1.2rem; font-weight: 800; line-height: 1.35; }
.o-start__sub { margin: 0; color: var(--o-ink-soft); font-size: .98rem; line-height: 1.65; }
.o-start__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.o-start__hours { margin: 0; color: var(--o-ink-soft); font-size: .9rem; }
/* A page's own one-line CTA (page.intro_cta) in the same frame. */
.o-start--inline { margin: 1.5rem 0; }
.o-start--inline .o-start__sub { color: var(--o-ink); font-size: 1.02rem; }
.o-start--inline a { color: var(--o-accent-text) !important; font-weight: 800; text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 640px) {
  .o-start__actions .o-btn { flex: 1 1 100%; }
}

/* ── Comparison tables on a phone ────────────────────────────────────────
   A three-column table squeezed into 360px wraps every cell to one word per
   line. Below 640px each row becomes a small labelled block; the header cell
   text is carried into each cell by data-label (set in seo_page.html). */
@media (max-width: 640px) {
  .brand-site .art-table-stack thead { display: none; }
  .brand-site .art-table-stack,
  .brand-site .art-table-stack tbody,
  .brand-site .art-table-stack tr,
  .brand-site .art-table-stack td { display: block; width: 100%; }
  .brand-site .art-table-stack tr {
    margin-bottom: .75rem;
    border: 1px solid var(--o-line);
    border-radius: var(--o-r-md);
    background: #fff;
    padding: .35rem .9rem;
  }
  .brand-site .art-table-stack td { border: 0 !important; padding: .45rem 0 !important; text-align: start; }
  .brand-site .art-table-stack td + td { border-top: 1px solid var(--o-paper) !important; }
  .brand-site .art-table-stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .15rem;
    color: var(--o-ink-soft);
    font-size: .8rem;
    font-weight: 700;
  }
  .brand-site .art-table-stack td:first-child { color: var(--o-navy); font-size: 1.05rem; font-weight: 800; }
}

/* Mobile dock: the brand action colour on company pages. The dock / cookie
   notice stacking itself lives in redesign-v2.css, which every public page
   loads. */
@media (max-width: 700px) {
  .v2-mobile-dock .v2-mobile-dock__primary { background: var(--o-accent); font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .o-btn, .o-link i, .brand-site .cf-input, .brand-site .cf-submit { transition: none; }
  .o-btn:active, .brand-site .cf-submit:active { transform: none; }
}

/* ── Guide / service pages: closing band and link colour ─────────────────
   The closing CTA is the same navy band that ends the homepage, so every
   company page finishes the same way. Inline guide links move from #c66d00
   (3.9:1 on the orange tint) to the brand's dark orange. */
.o-final {
  position: relative;
  margin-top: 3rem;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border-radius: var(--o-r-lg);
  background: var(--o-navy-ground);
  box-shadow: var(--o-e3);
  color: #fff;
  text-align: center;
}
.o-final__h { margin: 0 0 .6rem; color: #fff; font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 800; line-height: 1.25; }
.o-final__p { max-width: 56ch; margin: 0 auto 1.4rem; color: var(--o-on-navy-soft); font-size: 1.05rem; line-height: 1.75; }
.brand-site .art-wrap a.text-\[\#c66d00\] { color: var(--o-accent-text); }
/* External calculator references (external_references.calc_reference_link):
   part of the sentence, not a call to action — paragraph colour, faint underline. */
/* Qualified by .art-section to outrank seo_page.html's inline orange `.art-section a`. */
.art-ref-link, .art-section a.art-ref-link { color: inherit; font-weight: inherit; text-decoration: underline;
  text-decoration-color: rgba(16, 42, 70, .35); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.art-ref-link:hover, .art-section a.art-ref-link:hover { text-decoration-color: currentColor; }