/* ==========================================================================
   siohio.com — responsive / design layer for the flattened FlexSite build.
   Loaded last, after publicstyle.css, mbcsmbmcp.css and responsive.css.

   Tokens below are taken from the live site so mobile stays on-brand:
     ink        #071222   fixed header, nav panel
     brand      #5b6f8f   H1 display colour, sub-footer 5 band
     slate      #4f5d6d   secondary surface
     body text  #333333
     display    Playfair Display 700   body  Rubik 400
   ========================================================================== */

:root {
  --si-ink: #071222;
  --si-brand: #5b6f8f;
  --si-slate: #4f5d6d;
  --si-text: #333;
  --si-muted: #6b7280;
  --si-line: rgba(255, 255, 255, .12);

  --si-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --si-body: "Rubik", "Segoe UI", Helvetica, Arial, sans-serif;

  --si-gutter: 20px;          /* one horizontal gutter used everywhere */
  --si-section: 48px;         /* one vertical rhythm step */
  --si-headerh: 64px;         /* mobile header height */
  --si-tap: 52px;             /* minimum touch target */
}

/* The CMS declares "playfair Display", sans-serif — a serif face with a
   sans fallback, so a font failure silently changes the whole voice.
   Restore a serif fallback stack wherever the display face is used. */
h1, .ls-s1 h1, #mbmcpebul_table a, .pageHeader {
  font-family: var(--si-display) !important;
}

/* ---------- hidden at every width; the <=900 block switches them on -------
   si-mobile.js injects the burger, panel, backdrop AND the mobile hero on
   every page, so each needs a base-level hide or it leaks onto desktop (the
   hero would render a second time above the real slider). */
#siBurger,
#siNav,
#siBackdrop,
#siHero { display: none; }

/* cells in the footer nav table that hold no link — tagged by si-mobile.js.
   Left visible they add a stray &nbsp; line between each pair of links, which
   is what made the mobile footer spacing uneven. */
.siEmptyCell { display: none !important; }

/* ==========================================================================
   <= 900px
   ========================================================================== */
@media (max-width: 900px) {

  /* ---- reset the legacy table layout ----------------------------------- */
  /* Every page is nested fixed-width tables (1200px). A <table> will not
     render narrower than its min-content width whatever width you set, so
     the cells are taken out of table layout entirely and stack in source
     order. The slider and the Elfsight gallery manage their own layout. */
  table, tbody, tr, td, th {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }
  td, th { padding-left: 0 !important; padding-right: 0 !important; }
  colgroup, col { display: none !important; }
  #layerslider table, #layerslider tbody, #layerslider tr, #layerslider td,
  [class*="elfsight"] table, [class*="elfsight"] tbody,
  [class*="elfsight"] tr, [class*="elfsight"] td { display: revert !important; }

  .bigTable, .contentTable, .headerRow {
    width: 100% !important;
    max-width: 100% !important;
  }
  img { max-width: 100%; height: auto; }
  iframe { max-width: 100% !important; }
  div[style*="width:"], p[style*="width:"], span[style*="width:"],
  img[style*="width:"] { max-width: 100% !important; }
  #layerslider, #layerslider *, #layerslider-container-fw { max-width: none !important; }
  body { overflow-x: hidden; }

  /* one gutter, applied on the CELLS — padding on a <table> does not inset
     its rows */
  .bigTable > tbody > tr > td {
    padding-left: var(--si-gutter) !important;
    padding-right: var(--si-gutter) !important;
  }
  /* full-bleed sections opt out */
  #rowSlideshow > td,
  #rowSubFooter41 > td,
  .bigTable > tbody > tr > td.headerCell {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ---- content columns: align to the one gutter ------------------------ */
  /* The CMS's own responsive.css gives .column001..005 `width:92%; padding:3%`
     below 680px. Those percentage gutters sit INSIDE the cell gutter and do
     not resolve to the same value, which is why headings landed 26px from the
     left but 33px from the right. They are also inline-block, so they
     shrink-wrap and inherit inline whitespace. Normalise all of them to plain
     blocks and let the cell own the horizontal gutter. */
  .column001, .column002, .column003, .column004, .column005, .column006 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 26px !important;
    text-align: left !important;
  }
  .column001:last-child, .column002:last-child,
  .column003:last-child, .column004:last-child { margin-bottom: 0 !important; }
  /* the CMS leaves these wrappers at line-height 20px, which is tight for
     16px copy; match the body rhythm */
  .column001, .column002, .column003 { line-height: 1.65 !important; }
  /* column003 is the right-hand image column on desktop */
  .column003 img { display: block; width: 100%; height: auto; }

  /* ---- typography: one scale, used everywhere -------------------------- */
  body { font-family: var(--si-body); font-size: 16px; line-height: 1.65; color: var(--si-text); }
  h1, h1 span {
    font-family: var(--si-display) !important;
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    margin: 0 0 .5em !important;
  }
  h2, h2 span {
    font-size: clamp(21px, 5.4vw, 28px) !important;
    line-height: 1.3 !important;
    margin: 0 0 .6em !important;
  }
  h3, h3 span { font-size: clamp(18px, 4.6vw, 22px) !important; line-height: 1.35 !important; }
  p, li, td { font-size: 16px !important; line-height: 1.65 !important; }
  /* the CMS pins font-size inline on nearly every span — override it, or the
     scale above is cosmetic only */
  #pageBody span[style*="font-size"], .bigTable span[style*="font-size"] {
    font-size: inherit !important;
  }
  h1 span[style*="font-size"] { font-size: clamp(28px, 8vw, 40px) !important; }
  h2 span[style*="font-size"] { font-size: clamp(21px, 5.4vw, 28px) !important; }

  /* ---- header ---------------------------------------------------------- */
  .header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    height: var(--si-headerh) !important;
    background: var(--si-ink) !important;
    z-index: 2000;
    display: flex !important;
    align-items: center !important;
  }
  .header .headerRow,
  .header .headerRow tbody,
  .header .headerRow tr {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    height: var(--si-headerh) !important;
  }
  .header .headerRow td {
    display: flex !important;
    align-items: center !important;
    height: var(--si-headerh) !important;
    padding: 0 !important;
  }
  .header .headerRow td:first-child { flex: 1 1 auto; padding-left: var(--si-gutter) !important; }
  /* the desktop menu cell collapses; the burger takes its place */
  .header .headerRow td:last-child { flex: 0 0 auto; }
  #imgBannerLogo { max-height: 38px !important; width: auto !important; display: block; }
  #mbmcpebul_table { display: none !important; }

  /* the hero sits behind the fixed header by design; every other page needs
     the header's height back as top padding */
  .bigTable > tbody > tr:first-child > td { padding-top: var(--si-headerh) !important; }
  #rowSlideshow > td { padding-top: 0 !important; }

  /* ---- hamburger ------------------------------------------------------- */
  /* Three 2px hairlines at the screen edge were easy to miss entirely, so the
     control is a labelled button with a visible outline. */
  #siBurger {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    height: 40px;
    margin-right: var(--si-gutter);
    padding: 0 12px 0 10px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: none;
  }
  #siBurger:hover { background: rgba(255, 255, 255, .16); }
  #siBurger .siBars {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 22px; flex: 0 0 22px;
  }
  #siBurger .siBars span {
    display: block; width: 22px; height: 3px; margin: 0;
    background: #fff; border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease;
  }
  #siBurger .siLabel {
    color: #fff;
    font-family: var(--si-body);
    font-size: 12px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
    line-height: 1;
  }
  #siBurger[aria-expanded="true"] .siBars span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  #siBurger[aria-expanded="true"] .siBars span:nth-child(2) { opacity: 0; }
  #siBurger[aria-expanded="true"] .siBars span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* ---- slide-in nav ---------------------------------------------------- */
  #siNav {
    display: block !important;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(84%, 340px);
    background: var(--si-ink);
    z-index: 2100;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s .28s;
    padding: calc(var(--si-headerh) + 12px) 0 40px;
    box-shadow: -4px 0 24px rgba(0, 0, 0, .35);
  }
  #siNav.open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
  #siNav a {
    display: flex; align-items: center;
    min-height: var(--si-tap);
    padding: 0 26px;
    font-family: var(--si-display);
    font-size: 19px;
    letter-spacing: .02em;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid var(--si-line);
  }
  #siNav a:hover, #siNav a:focus-visible { background: rgba(255, 255, 255, .07); }
  #siNav a[aria-current="page"] { color: #fff; box-shadow: inset 3px 0 0 var(--si-brand); }
  #siBackdrop {
    display: block !important;
    position: fixed; inset: 0;
    background: rgba(7, 18, 34, .55);
    z-index: 2050;
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
  }
  #siBackdrop.open { opacity: 1; pointer-events: auto; }
  body.siNavOpen { overflow: hidden; }

  /* ---- hero ------------------------------------------------------------ */
  /* LayerSlider runs responsive:false with a 1200px sublayer container AND it
     RENAMES the markup's .ls-s1/.ls-s2 layers to .ls-l1/.ls-l2 on init, while
     keeping their desktop pixel offsets (top:245px;left:245px) as inline
     styles. Styling the source class names therefore has no effect at all
     after init. Rather than chase its generated DOM, the slider is hidden
     below 900px and si-mobile.js rebuilds the hero as plain markup (#siHero)
     from the slide's own image and text. */
  #layerslider-container-fw, #layerslider { display: none !important; }

  #siHero {
    display: block;
    position: relative;
    height: 62vw;
    min-height: 280px;
    max-height: 420px;
    background-color: var(--si-ink);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  #siHero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7,18,34,.22) 0%, rgba(7,18,34,.68) 100%);
    pointer-events: none;
  }
  #siHero .siHeroInner {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 0 var(--si-gutter) 9%;
    text-align: center;
    box-sizing: border-box;
  }
  #siHero h1 {
    color: #fff !important;
    font-family: var(--si-display) !important;
    font-size: clamp(28px, 7.6vw, 44px) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    margin: 0 0 10px !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
  }
  #siHero p {
    color: #fff !important;
    font-family: var(--si-body) !important;
    font-size: clamp(13px, 3.5vw, 17px) !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
  }

  /* ---- section rhythm -------------------------------------------------- */
  #rowHome > td,
  [id^="rowSubFooter"] > td {
    padding-top: var(--si-section) !important;
    padding-bottom: var(--si-section) !important;
  }
  .spacerRow { display: none !important; }

  /* ---- home: the three service cards ----------------------------------- */
  .hvr-float-shadow {
    display: block !important;
    width: 100% !important;
    margin: 0 0 22px !important;
    transform: none !important;   /* the hover lift is meaningless on touch */
  }
  .hvr-float-shadow:last-child { margin-bottom: 0 !important; }
  .hvr-float-shadow:before { display: none !important; }
  .hvr-float-shadow img { width: 100% !important; }

  /* ---- sub-footer bands ------------------------------------------------ */
  .subFooter1Cell, #rowSubFooter11 > td {
    background-size: cover !important;
    background-position: center !important;
  }
  /* the "Who We Are" copy sits in a dark panel over the photo — keep it
     readable and full width instead of its desktop offset */
  #rowSubFooter11 [style*="background"] { max-width: 100% !important; }

  /* ---- contact-info strip --------------------------------------------- */
  /* Icon and value are separate <td>s; as blocks they would stack one per
     line. Put the INNER cells back inline so each icon stays with its value,
     and scope it to `table td` so the section cell keeps the page rhythm. */
  /* outer wrapper cells stay stacked: heading, then the detail block */
  #rowSubFooter31 > td { text-align: center !important; }
  #rowSubFooter31 h1 { text-align: center !important; }
  /* The icon/value cells sit THREE tables deep (contentTable > layout table >
     detail table). Only that innermost level goes inline, so each icon stays
     beside its value; every wrapper above it stays a centred block. Matching
     a shallower level turns the wrappers into zero-width inline boxes and
     collapses the whole section. */
  #rowSubFooter31 table table table td {
    display: inline-block !important;
    width: auto !important;
    vertical-align: middle !important;
    padding: 2px 1px !important;
  }
  /* the spacer row of &nbsp; cells above the details */
  #rowSubFooter31 table table table tr:first-child { display: none !important; }
  #rowSubFooter31 img { vertical-align: middle; margin-right: 4px; }
  #rowSubFooter31 strong { font-weight: 500; }

  /* ---- map band: full bleed, no rhythm padding ------------------------- */
  #rowSubFooter41 > td {
    height: 220px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* ---- footer navigation ----------------------------------------------- */
  /* Six links laid out as a 2x3 table on desktop; on a phone they were 21px
     tall inline text — far below a usable tap target. Stack them as a real
     menu on the brand band. */
  #rowSubFooter51 > td { background: var(--si-brand) !important; text-align: center; }
  #rowSubFooter51 table td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
  }
  #rowSubFooter51 .footerlink {
    display: block !important;
    min-height: var(--si-tap);
    line-height: var(--si-tap);
    font-family: var(--si-display);
    font-size: 17px;
    letter-spacing: .05em;
    color: #fff !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
  }
  #rowSubFooter51 .footerlink:hover { background: rgba(255, 255, 255, .08); }
  #rowSubFooter51 img[src*="footerlogo"] {
    display: block; margin: 0 auto 20px; max-height: 74px; width: auto;
  }

  /* ---- copyright bar ---------------------------------------------------- */
  #rowFooter1 > td {
    background: #000 !important;
    text-align: center;
    padding-top: 22px !important; padding-bottom: 22px !important;
  }
  #rowFooter1 p { font-size: 12px !important; letter-spacing: .04em; margin: 0 !important; }
  #rowFooter1 img { max-height: 46px; width: auto; }

  /* ---- Elfsight gallery ------------------------------------------------ */
  [class*="elfsight-app"] { width: 100% !important; max-width: 100% !important; }
}

/* ==========================================================================
   <= 600px — tighten the scale one more step
   ========================================================================== */
@media (max-width: 600px) {
  :root { --si-gutter: 16px; --si-section: 38px; }
  #layerslider, #layerslider-container-fw { height: 72vw !important; }
}

/* ==========================================================================
   Contact / quote form — all widths
   ========================================================================== */
/* The contact page centres its heading and address block, so the form is
   centred to match — but its own contents stay left-aligned, because centred
   labels and inputs read as decoration rather than a form. */
.siForm { max-width: 620px; margin: 8px auto 0; text-align: left; }
.siMsg { max-width: 620px; margin-left: auto; margin-right: auto; text-align: left; }
.siForm .siRow { margin: 0 0 14px; }
.siForm .siTwo { display: flex; gap: 14px; }
.siForm .siTwo > .siRow { flex: 1 1 0; margin-bottom: 0; }
.siForm label {
  display: block;
  font-family: var(--si-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--si-muted);
  margin: 0 0 6px;
}
.siForm input[type="text"],
.siForm input[type="email"],
.siForm input[type="tel"],
.siForm textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-family: var(--si-body);
  font-size: 16px;              /* 16px stops iOS zooming on focus */
  line-height: 1.4;
  color: var(--si-text);
  background: #fff;
  border: 1px solid #d3d8df;
  border-radius: 3px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.siForm textarea { min-height: 150px; resize: vertical; }
.siForm input:focus, .siForm textarea:focus {
  outline: none;
  border-color: var(--si-brand);
  box-shadow: 0 0 0 3px rgba(91, 111, 143, .18);
}
.siSubmit {
  display: inline-block;
  min-height: var(--si-tap);
  padding: 14px 34px;
  border: 0; border-radius: 3px;
  background: var(--si-ink);
  color: #fff;
  font-family: var(--si-body);
  font-size: 14px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  transition: background .16s ease;
}
.siSubmit:hover { background: var(--si-brand); }
.siHp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.siMsg { padding: 15px 18px; margin: 0 0 20px; border-radius: 3px; font-size: 16px; line-height: 1.5; }
.siMsgOk { background: #edf5ee; border: 1px solid #b7d8bd; color: #1e5128; }
.siMsgErr { background: #fdeceb; border: 1px solid #f2b8b4; color: #9d2620; }

@media (max-width: 600px) {
  .siForm .siTwo { display: block; }
  .siForm .siTwo > .siRow { margin-bottom: 14px; }
  .siSubmit { width: 100%; }
}