/* ==========================================================================
   Fresh Look Interiors DCS — shared site styles
   Reconstructed from the archived OnePress theme stylesheet, the theme's
   Customizer inline block, and the CSS Hero output. Values are quoted from
   reference/style-notes.md; nothing here is a fresh design decision.
   ========================================================================== */

:root {
  /* Brand — set by the Customizer, overriding the OnePress factory #03c4eb */
  --accent:            #46b7bf;

  --text:              #777777;
  --heading:           #333333;
  --logo-text:         #000000;
  --surface:           #ffffff;
  --surface-alt:       #f8f9f9;   /* .section-meta / .page-header */
  --eyebrow:           #aaaaaa;
  --rule:              #e9e9e9;

  --footer-bg:         #111111;
  --footer-text:       #bbbbbb;
  --footer-info-bg:    #222222;
  --footer-link:       #dddddd;

  --font-heading: "Raleway", Helvetica, Arial, sans-serif;
  --font-body:    "Open Sans", Helvetica, Arial, sans-serif;

  /* CLIENT-REQUESTED (September 2026). Christi asked for the display type to be
     "more stylish, maybe slanted" and picked Lora Italic from a specimen sheet.

     It is a THIRD token, not a replacement for --font-heading, and that is the
     whole point: --font-heading drives the navigation, the buttons, every form
     label and the gallery tabs as well as the headings. Swapping it wholesale
     would put a slanted serif on the Request a Quote button and on all 81 labels
     of the job application. --font-display is applied only to the headings that
     name things. See build-plan.md #52. */
  --font-display: "Lora", Georgia, "Times New Roman", serif;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
img { height: auto; max-width: 100%; vertical-align: middle; }

/* The theme scales its whole rem-based type ramp from a responsive root size.
   Missing this pinned every rem-derived value to one breakpoint's rendering —
   the footer heading rendered at its 767px size on a 1280px screen. */
html { font-size: 16px; }
@media (max-width: 991px) { html { font-size: 15px; } }
@media (max-width: 767px) { html { font-size: 14px; } }

body {
  margin: 0;
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 0.875rem;      /* theme: 14px / 0.875rem — scales with the root */
  line-height: 1.7;
  color: var(--text);
}

img { max-width: 100%; height: auto; border: 0; }

/* The theme's global bottom margin. Reinstated because dropping it left the
   author vcard and the sidebar menu without their 15px. */
ul, ol, dl, p, figure, pre, table, dt, dd, hr, address, .vcard { margin-bottom: 0.9375rem; margin-top: 0; }
ul li, ol li { margin: 8px 0; }
.entry-content li { margin-left: 2.5em; margin-bottom: 6px; }

a { color: var(--accent); text-decoration: none; outline: none; }
a:hover { color: var(--text); text-decoration: underline; }

::selection { background: #000000; color: #ffffff; }

h1, h2, h3, h4, h5, h6 {
  clear: both;
  margin: 0 0 0.9375rem;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--heading);
}
/* Bootstrap sets line-height 1.1 on every heading and the theme overrides it only
   for h1 and h2 — so h3 to h6 really are 1.1, not the 1.7 they inherit from body.
   That is the difference between a 22px and a 34px testimonial heading. */
h1 { font-size: 2.0625rem; line-height: 1.3; }
h2 { font-size: 1.5625rem; line-height: 1.2; }
h3, h4, h5, h6 { line-height: 1.1; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; margin-bottom: 12px; }
h5 { font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; }
h6 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
/* The theme steps the two largest headings up at 768px. */
@media (min-width: 768px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
}

/* Screen-reader-only, used by the skip link */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto; margin: 0;
  clip: auto; padding: 12px 20px;
  background: #fff; color: var(--accent);
}

/* ----------------------------------------------------------- container -- */
/* Bootstrap 4 widths, 15px gutters.
   .container is `relative` everywhere EXCEPT inside .site-info, where the live
   site computes `static` — that exception is what lets the footer's absolutely
   positioned back-to-top diamond anchor to .site-info rather than to the
   container, so it clears the copyright line instead of landing on it. */
/* Bootstrap fixes a pixel WIDTH per breakpoint and caps it at 100% — it does not
   set width:100% with a max-width. The two differ below the first breakpoint,
   where the theme's container runs edge to edge (padding inside) rather than
   inset by 15px. Transcribed from the theme's bootstrap.min.css. */
.container {
  position: relative;
  margin-left: auto; margin-right: auto;
  padding-left: 15px; padding-right: 15px;
}
@media (min-width: 576px)  { .container { width: 540px;  max-width: 100%; } }
@media (min-width: 768px)  { .container { width: 720px;  max-width: 100%; } }
@media (min-width: 992px)  { .container { width: 960px;  max-width: 100%; } }
@media (min-width: 1200px) { .container { width: 1140px; max-width: 100%; } }

/* Bootstrap's row is a flex container, not a block. */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

/* -------------------------------------------------------------- header -- */
/* The archived header is 182px tall — the height of the floated logo — because the
   theme's JS makes it 'position: fixed', and a fixed element establishes a block
   formatting context, which contains floats. This rebuild uses 'position: sticky'
   (handoff.md, "The one behavioural departure"), and sticky does NOT establish one.
   The header therefore collapsed to 0px and every .page-header below it started at
   y=0, behind the logo, with its title shoved down by the float. Thirteen pages
   rendered that way. 'display: flow-root' restores the containment without the
   clipping 'overflow: hidden' would cause to the mobile dropdown.

   This is precisely the failure mode the sticky-vs-fixed note warned about; it went
   unseen because the rebuild's own 'is-sticky' class changed the element's key and
   took the header out of the comparison entirely. */
.site-header {
  display: flow-root;
  background: #ffffff;
  line-height: 75px;
  box-shadow: 0 5px 10px 0 rgba(50, 50, 50, 0.06);
  position: sticky;
  top: 0;
  z-index: 100;
}
/* The theme lays the header out with floats, not flex: .site-branding floats
   left and the menu floats right inside a full-width .header-right-wrapper. */
.site-branding { float: left; }
.site-brand-inner.has-logo-img { line-height: 60px; }
.site-branding .site-logo-div { line-height: 75px; }
/* The logo is NOT scaled down: it renders at its natural 300x182, which is what
   makes the header 182px tall on the live site. It is an inline, middle-aligned
   image, not a block. */
.site-branding img { display: inline; vertical-align: middle; width: 300px; height: auto; max-width: 100%; }

.main-navigation ul.onepress-menu {
  display: block;
  float: right;
  margin: 0; padding: 0;
  list-style: none;
}
.main-navigation ul.onepress-menu > li { float: left; }
/* The theme's own reset. Without it the shared 'ul li { margin: 8px 0 }' applies to
   the nav items and the menu renders 91px tall instead of 75px, every label 8px low. */
.onepress-menu * { margin: 0; padding: 0; list-style: none; }

.onepress-menu a {
  display: block;
  position: relative;
  padding: 0 17px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--heading);
  text-decoration: none;
}
.onepress-menu a:hover,
/* The theme's inline CSS scopes the current-item highlight to submenus
   ('.onepress-menu ul li.current-menu-item>a'), so on the live site the active
   top-level item rendered in the same #333 as every other one. Measured, not
   assumed — an earlier version highlighted the top-level item in teal. */
.onepress-menu ul li.current-menu-item > a { color: var(--accent); }
.onepress-menu > li:last-child > a { padding-right: 0; }

/* ---------------------------------------------------------------------------
   CLIENT-REQUESTED DEPARTURE (August 2026): the menu is vertically centred.

   The header is 182px tall — the height of the logo — but the nav's line-height is
   75px and it was floated, so it sat in the top 75px with 107px of white space
   beneath it. The original rendered that way too; Christi asked for it centred.

   The container becomes a flex row with align-items:center, so the menu centres
   against whatever the logo's height actually is rather than against a number
   hardcoded here. The floats are switched off only where flex replaces them.
   Below 1141px the hamburger centres the same way.

   To revert: delete this block.
   --------------------------------------------------------------------------- */
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header .site-branding { float: none; flex: 0 0 auto; }
.site-header .header-right-wrapper {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
}
.site-header .main-navigation ul.onepress-menu { float: none; }
@media screen and (max-width: 1140px) {
  /* The collapsed menu still has width:100% and would eat the row, shrinking the
     35px hamburger to 13px. It takes no space; the open dropdown does not need it
     either, being absolutely positioned against .container. */
  .site-header .main-navigation { flex: 0 0 0; width: 0; }
  .site-header #nav-toggle { float: none; flex: 0 0 35px; order: 2; }
  /* The dropdown opened at a hardcoded 75px, which was already half-way up the
     182px header in the original and is now half-way up the centred hamburger.
     100% puts it directly below the header at whatever height the logo gives it. */
  .site-header .onepress-menu.onepress-menu-mobile { top: 100%; }
}

/* --------------------------------------------------- mobile navigation ---
   Transcribed from the theme rather than invented. An earlier version guessed at
   this and got three things wrong: it collapsed at 991px instead of 1140px, it
   rendered the literal word "MENU" instead of the hamburger, and it stacked the
   menu as a flex column instead of the theme's absolutely-positioned panel.     */

#nav-toggle {
  display: none;
  float: right;
  position: relative;
  width: 35px;
  margin-left: 15px;
  overflow: hidden;
  white-space: nowrap;
  color: transparent;          /* the word "Menu" is hidden; the bars are drawn below */
  cursor: pointer;
}
#nav-toggle span {
  position: absolute;
  top: 50%; right: 5px;
  margin-top: -2px;
  display: inline-block;
  height: 3px; width: 24px;
  background: #000000;
}
#nav-toggle span::before,
#nav-toggle span::after {
  position: absolute;
  display: inline-block;
  height: 3px; width: 24px;
  right: 0;
  background: #000000;
  content: "";
}
#nav-toggle span::before { top: -8px; }
#nav-toggle span::after  { top: 8px; }
/* The open state. The theme rotates the two bars but never moves them off their
   -8px / +8px offsets, so they stay 17px apart and meet at one end: the "close"
   button renders as a chevron, not a cross. That is the theme's own bug, faithfully
   reproduced until now. The two `top: 0` lines below are the fix — they make the
   bars concentric, which is what turns them into an X. Everything else is the
   theme's, unchanged. */
#nav-toggle.nav-is-visible span { background: transparent; }
#nav-toggle.nav-is-visible span::before,
#nav-toggle.nav-is-visible span::after { top: 0; }
#nav-toggle.nav-is-visible span::before { transform: translateX(4px) translateY(-1px) rotate(45deg); }
#nav-toggle.nav-is-visible span::after  { transform: translateX(4px) translateY(0) rotate(-45deg); }

/* The theme collapses the menu at 1140px, not at a bootstrap breakpoint. */
@media screen and (max-width: 1140px) {
  #nav-toggle { display: block; }
  .main-navigation .onepress-menu {
    width: 100% !important;
    display: block;
    height: 0;
    overflow: hidden;
    background: #fff;
    float: none;
  }
  .main-navigation .onepress-menu > li { float: none; }
  .onepress-menu.onepress-menu-mobile {
    position: absolute;
    top: 75px; right: 0;
    width: 100%;
    height: auto;
    z-index: 800;
    overflow: auto !important;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .onepress-menu.onepress-menu-mobile li {
    line-height: 20px;
    background: #ffffff;
    border-top: 1px solid var(--rule);
    width: 100% !important;
  }
  .onepress-menu.onepress-menu-mobile > li:first-child { border-top: 0 none; }
  .onepress-menu.onepress-menu-mobile > li > a { padding: 12px 20px; }
  .onepress-menu.onepress-menu-mobile a { color: var(--text); }
  .onepress-menu.onepress-menu-mobile a:hover { color: #000000; }
}

/* --------------------------------------------------------- page header -- */
.page-header {
  position: relative;
  padding: 30px 0;
  background: var(--surface-alt);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
/* Computed from the live page: 24px Raleway 600, uppercase, 1px tracking —
   NOT the 33px base h1. */
.page-header .entry-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* --------------------------------------------------------- breadcrumbs -- */
/* Yoast breadcrumb trail. The theme draws the separator twice over: a literal
   "»" text node in the markup, plus a CSS triangle pair on each link. Both were
   on the live page, so both are reproduced. */
.breadcrumbs {
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 10px;                    /* 12px only from 720px up — theme rule */
  color: #858585;
}
@media screen and (min-width: 720px) { .breadcrumbs { font-size: 12px; } }
.breadcrumbs a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs span { position: relative; margin-right: 40px; }
.breadcrumbs span span { margin-right: 0; }
.breadcrumbs a::before {
  content: "";
  display: inline-block;
  position: absolute;
  right: -23px; top: 3px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid rgba(0, 0, 0, 0.2);
}
.breadcrumbs a::after {
  content: "";
  display: inline-block;
  position: absolute;
  right: -22px; top: 4px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #ffffff;
}

/* ------------------------------------------------------ page content ----- */
/* Standard (non-slider) pages put their content inside the theme container. */
#content-inside { padding-top: 0; }
.entry-content { margin-bottom: 30px; }
/* The theme's clearfix. Not cosmetic: it contains floated children (the tile
   figures on /certificates-contracts/) and stops the last child's bottom margin
   collapsing through, which is what makes .entry-content 396px rather than 371px
   on the view-* pages. Verified against the live site. */
.entry-content::before,
.entry-content::after { content: ""; display: table; clear: both; }

/* Gutenberg block classes the editor emitted. Measured on the live pages:
   .has-normal-font-size resolves to 16px/27.2px, a bare paragraph to 14px/23.8px. */
.entry-content p {
  margin: 0 0 0.9375rem;
  font-size: 0.875rem;
  line-height: 1.7;
}
/* WordPress preset sizes are literal pixels (--wp--preset--font-size--normal:16px),
   not rem — these two do NOT move with the root ramp. */
.entry-content p.has-normal-font-size { font-size: 16px; line-height: 1.7; }
.has-text-align-center { text-align: center; }

.wp-block-image { margin: 0 0 0.875rem; }
.wp-block-image figure { margin: 0; }
/* The theme centres an aligncenter figure by making it a shrink-to-fit table with
   auto side margins — not by text-align. The image inside stays inline. */
.wp-block-image figure.aligncenter {
  display: table;
  margin-left: auto;
  margin-right: auto;
  text-align: start;
}
.wp-block-image figure.aligncenter img { display: inline; vertical-align: bottom; }

/* ------------------------------------------------- sidebar page layout --- */
/* The /download/ pages use the theme's right-sidebar layout. Measured on the live
   site: an 1140px container holding an 830px content column (40px top/bottom,
   39px right padding) beside a 280px sidebar (40px top/bottom, 39px left). */
/* The theme floats .content-area on EVERY page, not just sidebar ones, which is
   why the archived #content-inside collapses to 0 height throughout. .site-content
   carries the clearfix that keeps the footer below it. */

/* Floats, not flex — matching the theme exactly. The percentage width and the
   1px borders with a -1px sidebar margin are what produce 830px / 280px inside a
   1110px area, and a collapsed (0-height) #content-inside. */
/* A 1px top rule under the header, pulled up 1px so it sits flush. */
/* The pull-up is unconditional in the theme. What exempts /certificates-contracts/
   is its body class: WordPress adds 'hiding-page-title' to pages using the
   full-width template, and the theme zeroes the margin for those. Keying this to
   '.page-header + .site-content' happened to give the right answer on twelve pages
   and the wrong one on the homepage, which has no page-header but does pull up. */
.site-content { border-top: 1px solid var(--rule); margin-top: -1px; }
.hiding-page-title .site-content { margin-top: 0; }

/* The theme clears at .site-content, NOT at #content-inside — which is why the
   archived #content-inside measures 0 tall while its floats overflow it. */
.site-content::before,
.site-content::after { content: ""; display: table; clear: both; }
/* The theme puts the column padding on the IDs and the float on the classes, and
   its sidebar breakpoint is 940px — not one of Bootstrap's. Below 940 the columns
   stack at full width and keep their 40px vertical padding; only #secondary's top
   padding is dropped, so the stacked sidebar sits directly under the article. */
#primary   { padding-top: 40px; padding-bottom: 40px; }
#secondary { padding-top: 0;    padding-bottom: 40px; }

.content-area { width: 100%; float: none; }
.sidebar      { width: 100%; float: none; }

@media screen and (min-width: 940px) {
  #secondary { padding-top: 40px; }
  .content-area { float: left; }
  .sidebar { width: 25.2252252252%; float: left; }
  .right-sidebar .content-area {
    width: 74.7747747748%;
    padding-right: 39px;
    border-right: 1px solid var(--rule);
  }
  .right-sidebar .sidebar {
    padding-left: 39px;
    border-left: 1px solid var(--rule);
    margin-left: -1px;
  }
}

.widget { margin-bottom: 40px; }
.widget_nav_menu ul { margin: 0 0 0.9375rem; padding: 0; list-style: none; }
/* The theme's own clearfix on sidebar lists. It is load-bearing beyond clearing: the
   generated box stops the last item's 8px bottom margin collapsing out through the
   list's edge, which is the whole 8px the menu was short. */
.sidebar .widget ul::after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
/* A fixed 14px in the theme, not a rem — the sidebar links do not shrink with the
   root ramp, so the widget is the same height at 500px as at 1280px. */
.sidebar .widget a { font-size: 14px; }
.widget_nav_menu li a { color: var(--text); }
.widget_nav_menu li a:hover { color: var(--accent); }

/* The article's own heading, distinct from the page-header h1: Open Sans 32px/48px
   weight 500 (the page-header h1 is Raleway 24px/600). Verified on the live page. */
.entry-header .entry-title {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: 25px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--heading);
  text-transform: none;
  letter-spacing: -0.6px;
}
@media screen and (min-width: 940px) {
  .entry-header .entry-title { font-size: 32px; line-height: 1.5; }
}
.entry-meta {
  margin: 0 0 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  line-height: 1.7;
  font-weight: 600;
  /* It renders UPPERCASE on the live site — "POSTED ON JANUARY 26, 2019" —
     which is what makes the line 213px rather than 156px. */
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text);
}
/* Links inside the meta line take the accent colour, not the body grey. */
.entry-meta a { color: var(--accent); }
.entry-meta .updated.hide { display: none; }

/* --------------------------------------------- Gutenberg column blocks --- */
/* The contact page carries an empty three-column block. It renders as zero-height
   whitespace, but it is in the original, so it is reproduced. The nowrap rule came
   from the page's own core-block-supports inline <style>. */
.wp-block-columns {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 1.75em;   /* WordPress's own unit: em of the 0.875rem context */
  /* WordPress's default block gap, 2em. At the 14px inherited size that is 28px,
     which is what makes each of three columns 351px inside a 1110px content area
     (1110 - 2x28 = 1054, /3 = 351). Measured against the live page. */
  gap: 2em;
}
.wp-block-column { flex: 1 1 0; min-width: 0; }
/* WordPress stacks columns below 782px by giving each a 100% flex-basis. Without
   that, wrapping alone changes nothing: flex-basis:0 still lets three columns
   share one line. */
@media (max-width: 781px) {
  .wp-block-columns { flex-wrap: wrap; }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; }
}

/* The block heading has no size of its own: it inherits the theme's h2, which is
   1.5625rem stepped up to 2rem at 768px. Writing 32px here pinned it flat, so it
   stayed 32px where the live page showed 30px at 900 and 21.875px at 500. */
.entry-content h2.wp-block-heading {
  margin: 0 0 0.9375rem;
  line-height: 1.2;
  font-weight: 600;
}
.entry-content p.has-medium-font-size { font-size: 20px; line-height: 1.7; }

/* The embedded Google Form. Keeps the original 640x855 box but never overflows
   a narrow viewport. */
.entry-content iframe {
  display: block;
  max-width: 100%;
  border: 0;
}

/* -------------------------------------------------------------- footer -- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  font-size: 14px;
}
.site-footer a { color: var(--footer-text); }

/* The social block sits in a col-md-8 offset-md-2, i.e. 8/12 centred — which is
   what makes it 730px inside the 1110px container rather than full width. */
.footer-connect { padding: 5rem 0; text-align: center; }   /* rem: 80/75/70 across the ramp */
/* The offsets resolve against the .row, which is 30px wider than the container's
   content box because of its -15px side margins — that is why the offset is 190px
   at 1280px, not 185px. */
.footer-connect .col-md-8 { position: relative; width: 66.666667%; margin-left: 16.666667%; padding: 0 15px; }
@media (max-width: 767px) { .footer-connect .col-md-8 { width: 100%; margin-left: 0; } }
/* The theme sets no font-size here, so it takes the h5 ramp: 0.9375rem, which is
   15px at desktop, 14.0625px below 991px and 13.125px below 767px. Hard-coding
   13.125px pinned the smallest of the three at every width. */
.footer-connect .follow-heading {
  margin: 0 0 20px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #ffffff;
}
/* Inline, not inline-block. The theme never changes the display, and making these
   inline-block gives each 30px glyph its own box — the icon row renders 51px tall
   instead of 30px. */
.footer-social-icons a {
  margin: 0 13px;
  font-size: 30px;
  color: #ffffff;
}
.footer-social-icons a:hover { color: var(--accent); text-decoration: none; }

/* The one container the theme leaves static — see the note on .container. */
.site-info > .container { position: static; }

.site-info {
  position: relative;
  padding: 35px 0;
  text-align: center;
  background: var(--footer-info-bg);
  font-weight: 500;
  color: var(--footer-text);
}
.site-info a { color: var(--footer-link); }
.site-info .sep { margin: 0; }

/* Back-to-top: a 50x50 tab rotated -45deg into a diamond, sitting half-out of the
   top edge of the copyright bar. Absolutely positioned, so it adds no height to
   .site-info. The icon is counter-rotated +45deg. Anchored 60px from the right at
   desktop; the theme only centres it below 940px (see the media query further down),
   which is why it never collides with the centred copyright line. */
.site-footer .btt a {
  position: absolute;
  top: -25px; right: 60px; left: auto;
  margin: auto;
  width: 50px; height: 50px;
  line-height: 50px;
  border-radius: 0 20px 0 0;
  background: #222222;
  color: #999999;
  font-size: 30px;
  z-index: 99;
  transform: rotate(-45deg);
  transition: all 0.2s linear 0s;
}
.site-footer .btt a:hover { color: var(--accent); text-decoration: none; }
.site-footer .btt a i { display: inline-block; transform: rotate(45deg); margin-left: 3px; }

@media screen and (max-width: 940px) {
  .site-footer .btt a { right: 0; left: 0; }
}

/* -------------------------------------------------------------- button -- */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;         /* bootstrap; the theme changes only the type */
  border: 1px solid transparent;
  border-radius: 2px;
  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
  /* No font-family. The theme never sets one on .btn, so buttons inherit the body
     face (Open Sans), not the Raleway used for headings. */
  font-size: 0.8125rem;         /* theme: 13px / 0.8125rem */
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.btn:hover { text-decoration: none; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1.0625rem; }

.btn-theme-primary { background: var(--accent); color: #ffffff; }
.btn-theme-primary:hover { background: var(--accent); color: #ffffff; }

.btn-theme-primary-outline {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.btn-theme-primary-outline:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.btn-secondary-outline {
  box-shadow: none;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.9);
  color: rgba(255, 255, 255, 0.9);
}
.btn-secondary-outline:hover { background: #ffffff; color: #333333; }

/* ------------------------------------------------- missing-asset marker --
   Placeholder for images the Internet Archive never captured. Deliberately
   loud: a missing asset must never be mistaken for a design choice, and must
   never be silently swapped for a different photograph.
   See reference/missing-assets.md.                                         */
.missing-asset {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 2px dashed #c0392b;
  background: repeating-linear-gradient(
    45deg, #fdf2f0, #fdf2f0 10px, #f9e4e1 10px, #f9e4e1 20px
  );
  color: #c0392b;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}
.missing-asset strong { display: block; font-size: 12px; }
.missing-asset code { font-size: 10px; word-break: break-all; }
.missing-asset span { display: block; }

/* Sized variants: each occupies exactly the box the real image would, so the
   page's proportions are the finished proportions. */
.missing-asset--tile {
  /* The originals are 500x500 but sit in 351px columns, so they render at 351.
     A replaced element shrinks under max-width; a span does not, so the figure is
     given the width instead (below) and the placeholder simply fills it. */
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1 / 1;
}

/* Tile figures take the column width, which is what a 500px image capped by
   max-width:100% resolves to. Works identically once the real images land.
   NOT the alignleft ones: those are shrink-to-fit tables, and the space they get
   is the column minus their own 14px right margin, so the two left-aligned tiles
   render 337px against the third one's 351px. Forcing width:100% here flattened
   that difference and pushed the figure past its column. */
.wp-block-column .wp-block-image figure:not(.alignleft),
.wp-block-column figure.wp-block-image:not(.alignleft) { width: 100%; }
.missing-asset--icon {
  width: 48px; height: 48px;
  padding: 2px;
  gap: 0;
  font-size: 8px;
  line-height: 1.1;
}
.missing-asset--icon strong { font-size: 8px; }
.missing-asset--icon code { font-size: 7px; }

.missing-asset--sidebar { width: 200px; height: 150px; max-width: 100%; }

.missing-asset--banner {
  width: 445px;             /* 890x166 original, displayed at half size */
  height: 83px;
  max-width: 100%;
  margin: 0 auto;
}
a .missing-asset { text-decoration: none; cursor: pointer; }
a:hover .missing-asset { border-color: #7a1f16; background-color: #f7e0dc; }

/* ---------------------------------------------- block alignment + rule --- */
/* WordPress's block-library alignment, which wins over the theme's older rule:
   the figure is a shrink-to-fit table with `0.5em 1em 0.5em 0` margins — 7px 14px
   at the inherited 14px. */
.alignleft { display: inline; float: left; margin-right: 3.5em; }
.wp-block-image figure.alignleft {
  display: table;
  float: left;
  margin: 0.5em 1em 0.5em 0;
}
.wp-block-image figure.size-large:not(.alignleft):not(.aligncenter) { margin-bottom: 1em; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }
.wp-block-image img { display: block; height: auto; max-width: 100%; width: auto; }

/* Measured on the live page: content height 1px, a 2px BOTTOM border and no top
   border (theme `hr{border:0;height:1px}` plus core's is-style-wide bottom rule),
   giving a 3px box at 0.4 opacity. */
.wp-block-separator {
  /* content-box on purpose: the global border-box reset would fold the 2px border
     into the 1px height and render a 2px rule instead of the live site's 3px. */
  box-sizing: content-box;
  border: 0;
  height: 1px;
  margin: 0 0 20px;
  background: transparent;
}
.wp-block-separator.is-style-wide { border-bottom: 2px solid; width: 100%; }
.wp-block-separator.has-css-opacity { opacity: 0.4; }

/* --------------------------------------------------- back-to-top flash ---
   The arrow carried 'wow flash' with data-wow-duration="2s"; WOW.js added the
   'animated' class when it scrolled into view and animate.css did the rest. The
   two keyframes and the two classes are all that block needed, transcribed from
   animate.min.css. */
@keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } }
.animated { animation-duration: 1s; animation-fill-mode: both; }
.flash { animation-name: flash; }
@media (prefers-reduced-motion: reduce) {
  .animated { animation: none; }
}

/* ------------------------------------------- certificates hub nav tiles ---
   These were 500x500 images that were never recovered. Until they arrive the tiles
   are text cards rather than boxes announcing a missing file — they navigate just as
   well, and they do not read as a broken build to a visitor. When the artwork lands,
   put the <img> back inside the same <a> and delete this block. */
/* The two tiles sit in figures the original sized differently — one shrink-to-fit at
   337px, one filling its column at 351px. That difference was invisible when they held
   images of the same size; as text cards it just reads as misalignment. */
.wp-block-column .wp-block-image figure:has(.cc-tile),
.wp-block-column figure:has(.cc-tile) { width: 100%; margin-right: 0; }

.cc-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 24px 20px;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: 3px;
  background: var(--surface-alt);
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out;
}
.cc-tile:hover {
  background: #ffffff;
  border-color: var(--accent);
  text-decoration: none;
  transform: translateY(-2px);
}
.cc-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cc-tile__label {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--heading);
}
.cc-tile:hover .cc-tile__label { color: var(--accent); }

/* The "certified and insured" banner image was never recovered and nobody knows what
   it said, so the wording here claims only what the filename does. */
.cc-banner-pending {
  display: block;
  margin: 0 auto;
  padding: 10px 16px;
  max-width: 445px;
  border: 1px dashed var(--rule);
  border-radius: 3px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-style: italic;
  text-align: center;
}

/* ------------------------------------------------------- embedded forms ---
   Both Google Forms sit in .entry-content at a fixed pixel width the theme never
   centred — 640px on the contact page, 800px on the jobs page — so each one hugged
   the left edge of a 1110px column. Centred and allowed to use the width available,
   matching what the homepage contact section already does.
   Client-requested, August 2026. */
.entry-content iframe[src*="docs.google.com/forms"] {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  border: 0;
}

/* ------------------------------------------------ contact page details ---
   The phone number, email and location as text on /contact-us/. Christi asked for
   them; they were only ever inside the Google Form iframe, which is another origin
   and therefore invisible to search engines and answer engines alike. The
   .address-* classes are the theme's own, reused so this matches the homepage. */
.contact-details {
  margin: 34px auto 0;
  padding: 26px 28px 18px;
  max-width: 460px;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: 3px;
  background: var(--surface-alt);
}
.contact-details .address-box::after { content: ""; display: table; clear: both; }
.contact-details .address-contact { margin-top: 5px; margin-bottom: 15px; }
.contact-details .address-contact span.fa-stack { float: left; color: #aaaaaa; }
.contact-details .address-contact .fa-inverse { font-size: 12px; }
.contact-details .address-content {
  display: block;
  padding-left: 45px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  line-height: 2;
  color: var(--accent);
}
.contact-details .address-content a { color: var(--accent); }
.contact-details .address-content a:hover { color: var(--heading); text-decoration: underline; }

/* The phone number in the contact block is a tel: link now, so it needs to stop
   inheriting the link blue and keep looking like the line of text it sits in. */
.address-content a { color: inherit; }
.address-content a:hover { color: var(--accent); text-decoration: none; }

/* ------------------------------------------------------ display headings ---
   CLIENT-REQUESTED (September 2026): Christi picked Lora Italic for the headings
   that name things — the business name, the service names and About Christi.
   She was explicit that the description text underneath stays as it is, so
   --font-body is untouched.

   Scoped deliberately. Navigation, buttons, form labels, gallery tabs and the
   hero all keep --font-heading: a slanted serif on a button or a field label
   reads as a mistake, not as styling. See build-plan.md #52. */
.section-title-area .section-title,
.services-block .services-consult__title,
.services-block .service-card__body .service-card__title,
.bark-cta__title,
.jobs-form-title {
  font-family: var(--font-display);
  font-style: italic;
}