/* ==========================================================================
   specialtyky.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 {
  --sk-ink: #071222;
  --sk-brand: #5b6f8f;
  --sk-slate: #4f5d6d;
  --sk-text: #333;
  --sk-muted: #6b7280;
  --sk-line: rgba(255, 255, 255, .12);

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

  --sk-gutter: 20px;          /* one horizontal gutter used everywhere */
  --sk-section: 48px;         /* one vertical rhythm step */
  --sk-headerh: 64px;         /* mobile header height */
  --sk-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(--sk-display) !important;
}

/* ---------- hidden at every width; the <=900 block switches them on -------
   sk-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). */
#skBurger,
#skNav,
#skBackdrop,
#skHero { display: none; }

/* NB: .skEmptyCell is tagged by sk-mobile.js at every width but is only
   collapsed inside the <=900px block below. On desktop those cells are the
   spacer columns and rails that hold the footer's six-column layout apart —
   hiding them there would reflow it. */

/* ==========================================================================
   <= 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; }
  /* every box this file gives padding to is also forced to width:100%, so it
     has to measure border-box or it overflows its parent by the padding —
     and an overflowing child inside the CMS's <center> wrappers drags the
     whole column off-screen to the LEFT, not just past the right edge */
  .bigTable > tbody > tr > td, .contentTable > tbody > tr > td,
  .column001, .column002, .column003, .column004, .column005, .column006,
  .gallery01 { box-sizing: border-box !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(--sk-gutter) !important;
    padding-right: var(--sk-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(--sk-body); font-size: 16px; line-height: 1.65; color: var(--sk-text); }
  h1, h1 span {
    font-family: var(--sk-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(--sk-headerh) !important;
    background: var(--sk-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(--sk-headerh) !important;
  }
  .header .headerRow td {
    display: flex !important;
    align-items: center !important;
    height: var(--sk-headerh) !important;
    padding: 0 !important;
  }
  .header .headerRow td:first-child { flex: 1 1 auto; padding-left: var(--sk-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(--sk-headerh) !important; }
  #rowSlideshow > td { padding-top: 0 !important; }
  /* #rowHome carries an ID, so the section-rhythm rule further down outranks
     the line above (1,0,1 beats 0,2,3 even with !important on both) and the
     heading slides under the fixed bar. Only the 404 page has #rowHome first
     — every other page opens with the slideshow row — so the offset has to be
     restated there at ID specificity. */
  #rowHome:first-child > td {
    padding-top: calc(var(--sk-headerh) + var(--sk-section)) !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. */
  #skBurger {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    height: 40px;
    margin-right: var(--sk-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;
  }
  #skBurger:hover { background: rgba(255, 255, 255, .16); }
  #skBurger .skBars {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 22px; flex: 0 0 22px;
  }
  #skBurger .skBars span {
    display: block; width: 22px; height: 3px; margin: 0;
    background: #fff; border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease;
  }
  #skBurger .skLabel {
    color: #fff;
    font-family: var(--sk-body);
    font-size: 12px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
    line-height: 1;
  }
  #skBurger[aria-expanded="true"] .skBars span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  #skBurger[aria-expanded="true"] .skBars span:nth-child(2) { opacity: 0; }
  #skBurger[aria-expanded="true"] .skBars span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* ---- slide-in nav ---------------------------------------------------- */
  #skNav {
    display: block !important;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(84%, 340px);
    background: var(--sk-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(--sk-headerh) + 12px) 0 40px;
    box-shadow: -4px 0 24px rgba(0, 0, 0, .35);
  }
  #skNav.open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
  #skNav a {
    display: flex; align-items: center;
    min-height: var(--sk-tap);
    padding: 0 26px;
    font-family: var(--sk-display);
    font-size: 19px;
    letter-spacing: .02em;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid var(--sk-line);
  }
  #skNav a:hover, #skNav a:focus-visible { background: rgba(255, 255, 255, .07); }
  #skNav a[aria-current="page"] { color: #fff; box-shadow: inset 3px 0 0 var(--sk-brand); }
  #skBackdrop {
    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;
  }
  #skBackdrop.open { opacity: 1; pointer-events: auto; }
  body.skNavOpen { 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 sk-mobile.js rebuilds the hero as plain markup (#skHero)
     from the slide's own image and text. */
  #layerslider-container-fw, #layerslider { display: none !important; }

  #skHero {
    display: block;
    position: relative;
    height: 62vw;
    min-height: 280px;
    max-height: 420px;
    background-color: var(--sk-ink);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  #skHero::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;
  }
  #skHero .skHeroInner {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 0 var(--sk-gutter) 9%;
    text-align: center;
    box-sizing: border-box;
  }
  #skHero h1 {
    color: #fff !important;
    font-family: var(--sk-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);
  }
  #skHero p {
    color: #fff !important;
    font-family: var(--sk-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(--sk-section) !important;
    padding-bottom: var(--sk-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; }
  /* On desktop the panel's inset comes from two `width:50px` rail cells either
     side of the copy. Un-tabled those become full-width empty blocks, giving
     the text no horizontal inset at all — it sits flush against the black
     edge. sk-mobile.js tags them blank; the panel carries the padding itself
     instead, matching the page gutter so the copy lines up with the rest of
     the page. */
  #rowSubFooter11 td[style*="#000000"] {
    padding: 30px var(--sk-gutter) !important;
    box-sizing: border-box !important;
  }
  /* the panel opens with a <span><br></span> spacer that doubles the gap under
     the padding above */
  #rowSubFooter11 td[style*="#000000"] > span:first-child { display: none !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(--sk-brand) !important; text-align: center; }
  #rowSubFooter51 table td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  /* the cells holding only &nbsp; or <br>; each becomes its own ~27px empty
     line box once un-tabled. Stated at ID specificity so it outranks the
     display:block rule above. */
  .skEmptyCell, #rowSubFooter51 td.skEmptyCell { display: none !important; }
  /* stray <br> between the layout cells; the ones inside the address panel's
     <span>s are real line breaks and are not direct children */
  #rowSubFooter51 td > br { display: none !important; }
  /* the address panel is the one cell that keeps its own dark background */
  #rowSubFooter51 td[style*="#000000"] {
    background: #000 !important;
    padding: 22px var(--sk-gutter) !important;
    margin-top: 22px;
    box-sizing: border-box !important;
  }
  #rowSubFooter51 td[style*="#000000"] span { line-height: 1.6 !important; }
  #rowSubFooter51 .footerlink2 {
    display: inline-block;
    min-height: 40px; line-height: 40px;
    font-size: 16px;
  }
  #rowSubFooter51 .footerlink {
    display: block !important;
    min-height: var(--sk-tap);
    line-height: var(--sk-tap);
    font-family: var(--sk-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 { --sk-gutter: 16px; --sk-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. */
.skForm { max-width: 620px; margin: 8px auto 0; text-align: left; }
.skMsg { max-width: 620px; margin-left: auto; margin-right: auto; text-align: left; }
.skForm .skRow { margin: 0 0 14px; }
.skForm .skTwo { display: flex; gap: 14px; }
.skForm .skTwo > .skRow { flex: 1 1 0; margin-bottom: 0; }
.skForm label {
  display: block;
  font-family: var(--sk-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sk-muted);
  margin: 0 0 6px;
}
.skForm input[type="text"],
.skForm input[type="email"],
.skForm input[type="tel"],
.skForm select,
.skForm textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-family: var(--sk-body);
  font-size: 16px;              /* 16px stops iOS zooming on focus */
  line-height: 1.4;
  color: var(--sk-text);
  background: #fff;
  border: 1px solid #d3d8df;
  border-radius: 3px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* the CMS form opened with a required "Contact:" dropdown that routes the
   message; the native control is kept but given the same box as the inputs,
   with a drawn chevron so it does not read as a disabled field */
.skForm select {
  height: 46px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234f5d6d' stroke-width='1.7' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.skForm textarea { min-height: 150px; resize: vertical; }
.skForm input:focus, .skForm select:focus, .skForm textarea:focus {
  outline: none;
  border-color: var(--sk-brand);
  box-shadow: 0 0 0 3px rgba(91, 111, 143, .18);
}
.skSubmit {
  display: inline-block;
  min-height: var(--sk-tap);
  padding: 14px 34px;
  border: 0; border-radius: 3px;
  background: var(--sk-ink);
  color: #fff;
  font-family: var(--sk-body);
  font-size: 14px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  transition: background .16s ease;
}
.skSubmit:hover { background: var(--sk-brand); }
.skHp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skMsg { padding: 15px 18px; margin: 0 0 20px; border-radius: 3px; font-size: 16px; line-height: 1.5; }
.skMsgOk { background: #edf5ee; border: 1px solid #b7d8bd; color: #1e5128; }
.skMsgErr { background: #fdeceb; border: 1px solid #f2b8b4; color: #9d2620; }

@media (max-width: 600px) {
  .skForm .skTwo { display: block; }
  .skForm .skTwo > .skRow { margin-bottom: 14px; }
  .skSubmit { width: 100%; }
}