/* ==========================================================================
   Sporometrics refined interior template — page shell + interior layout.
   Same design system as the home page (css/tokens + components), but the home
   billboard row is SWAPPED: silver title panel + section sub-nav on the LEFT,
   orange banner on the RIGHT, and the white content panel is inset from the
   left so the silver sub-nav rows stay visible beside it.
   Loaded on the Services subtree (see meta.php / sporo_use_refined()).
   NOTE: the page-shell block below (body/canvas/masthead/nav/footer) is kept in
   sync with css/home.css by hand — extract to a shared shell.css in a later pass.
   ========================================================================== */

/* ===== Page shell (mirrors css/home.css) ================================= */
*{ box-sizing:border-box }
body{ margin:0; color:var(--text-body);
  background:linear-gradient(to bottom,
    #ffffff 0%, #ffffff 39%, #e5e5e5 55.5%, #e1e1e1 69%, #e5e5e5 82.5%, #ffffff 99%, #ffffff 100%) fixed;
  font-family:var(--font-body); font-size:var(--fs-base); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; }
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  filter:url(#grain); opacity:.78 }
body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 1100px 260px at 50% 0%,
    rgba(255,255,255,1) 0%, rgba(255,255,255,1) 45%, rgba(255,255,255,0) 100%) }
a{ color:var(--link); text-decoration:none } a:hover{ color:var(--link-hover) }
img{ max-width:100%; height:auto; display:block }
.canvas{ max-width:1080px; margin:0 auto; padding:20px 20px 0 }
.section{ margin-bottom:var(--sp-6) }

/* Masthead */
.masthead{ display:flex; justify-content:space-between; align-items:flex-end; padding:8px 4px 16px; gap:16px }
.masthead .logo img{ height:56px }
.masthead .tagline img{ height:62px }

/* Header nav row */
.navrow{ position:relative; z-index:30 }
.navrow.section{ margin-bottom:0 }
.spo-nav{ width:90%; margin-left:auto; margin-right:auto; min-height:45px }
.hamburger, .drawer, .scrim{ display:none }
#navtoggle{ display:none }
.spo-search form{ display:flex; align-items:center; margin:0 }
.spo-search input[type=search],
.spo-search input[type=text]{ background:transparent; border:0; outline:0; color:#fff;
  font:var(--fw-regular) var(--fs-sm) var(--font-body); width:158px; transition:width var(--mo-hover) }
.spo-search .search-submit{ position:absolute; left:-9999px }
.spo-search .search-ico{ display:none }
@media (max-width:1023px){
  .spo-search input[type=search],
  .spo-search input[type=text]{ width:0; padding:0 }
  .spo-search:focus-within input[type=search],
  .spo-search:focus-within input[type=text]{ width:144px; margin-right:6px }
  .spo-search{ padding-top:var(--sp-1); padding-bottom:var(--sp-1) }
  .spo-search .search-ico{ order:2; display:flex; align-items:center; justify-content:center;
    width:24px; height:24px; color:#fff; cursor:pointer }
  .spo-search .search-ico svg{ width:18px; height:18px; display:block }
  .spo-tab::before{ display:none }
  .spo-tab .tab-label::after{ content:"\203A"; margin-left:.32em;
    font:var(--fw-medium) 1.55em/0 var(--font-display); color:var(--chevron);
    -webkit-text-stroke:3px #fff; paint-order:stroke fill; vertical-align:0 }
  .spo-tab:hover .tab-label::after,
  .spo-tab.is-current .tab-label::after{ color:var(--chevron-hover) }
}

/* Footer (mirrors css/home.css) */
.footer{ background:var(--n-600); color:#dcdcdc; margin-top:var(--sp-8); border-radius:var(--r-card) var(--r-card) 0 0 }
.footer .inner{ max-width:1080px; margin:0 auto; padding:var(--sp-6) 24px;
  display:grid; grid-template-columns:2.4fr 1.1fr 1fr; gap:var(--sp-6); align-items:start }
.footer a{ color:#eee } .footer a:hover{ color:var(--link) }
.footer .fnav{ display:flex; flex-wrap:wrap; gap:10px 18px; font:var(--fw-bold) var(--fs-xs) var(--font-body);
  text-transform:uppercase; letter-spacing:var(--tr-label); margin-bottom:var(--sp-4) }
.footer .fnav ul{ list-style:none; margin:0; padding:0; display:contents }
.footer .addr{ font-size:var(--fs-sm); line-height:1.7 }
.footer .badges{ display:flex; gap:var(--sp-2); margin-bottom:var(--sp-3); flex-wrap:wrap }
.footer .spo-badge{ transition:background var(--mo-hover) }
.footer .spo-badge:hover{ background:var(--link-hover); color:#fff }
.footer .foot-legal{ text-align:right }

/* ===== Interior layout =================================================== */
/* One grid drives the whole top region so the silver rows on the left align
   with the white content panel on the right:
       ┌ title  ┬ banner  ┐   (row 1)
       └ subnav ┴ content ┘   (row 2)
   The content panel is pulled up to tuck under the orange banner; the sub-nav
   sits in the left column, revealed beside the (narrower) content panel. */
.interior{ display:grid;
  grid-template-columns:300px 1fr;
  grid-template-areas:"title banner" "subnav content";
  column-gap:var(--sp-5); row-gap:var(--sp-3);
  align-items:start;
  position:relative; margin-top:-22px;   /* nav overlaps the top edge */
  /* no z-index here: keeping .interior out of its own stacking context lets the
     hero image (below) rise above the nav bar (z-index:30) to sit on top of all. */
}

/* Big silver page title ("Services ›"). Extends up to the top of the orange
   banner and joins it into one monolithic block: the title's right corners and
   the banner's left corners are squared off and the gap between them is closed. */
.ih-title{ grid-area:title; align-self:stretch; display:flex; align-items:center;
  background:var(--grad-silver); border:1px solid rgba(0,0,0,.12);
  border-radius:var(--r-tab) 0 0 var(--r-tab); box-shadow:var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.6);
  padding:var(--sp-4) var(--sp-5); }
.ih-title .spo-title{ color:var(--heading-orange); white-space:nowrap; gap:6px; }  /* tighter than the default 12px between "Services" and the chevron */
.ih-title .t-chev{ color:var(--heading-orange); font-family:var(--font-display);
  font-weight:var(--fw-regular); font-size:1.8em; line-height:1;
  transform:translateY(-0.072em); }   /* Breuer Text Regular, +20%; optical nudge so the "›" ink centre matches the text (glyph sits low in its box) */

/* Section sub-nav (silver tab list, left column, below the title) */
.ih-subnav{ grid-area:subnav; align-self:start; }
.ih-subnav .spo-tablist .spo-tab{ min-height:0; padding-top:var(--sp-4); padding-bottom:var(--sp-4); }

/* Services landing: the sub-nav sits flush under the title (gap closed) and its
   right edge abuts the white panel's left edge (29% = 100% - panel 66% - 5%).
   Only its bottom-left corner stays rounded (top corners + bottom-right squared)
   so it reads as one piece with the title above and the panel to its right. */
.interior--landing .ih-subnav{ grid-column:1 / -1; grid-row:2; justify-self:start; align-self:start;
  width:calc(29% + 30px); margin-top:calc(-1 * var(--sp-3)); }   /* 30px past the panel's left edge → tucks under the panel */
/* Widening pushes the right-side chevrons out; add matching right padding so
   they stay in the same on-screen position. */
.interior--landing .ih-subnav .spo-tab{ padding-right:calc(var(--sp-4) + 30px); }
/* Continuous #E4E4E4 → #C9C9C9 across title + sub-nav, done PIECEWISE so it works
   for any number of tabs (About/Sectors have more, with wrapping): the title
   runs E4E4E4→D4D4D4 over its own height and the tablist picks up at D4D4D4→
   C9C9C9 over its own height, so the value matches at the seam regardless of
   heights. Seam border dropped; a white line sits at the top of the tablist. */
.interior--landing .ih-title{ border-radius:var(--r-tab) 0 0 0;
  background-image:linear-gradient(180deg,#E4E4E4,#D4D4D4); border-bottom-width:0; }
.interior--landing .ih-subnav .spo-tablist{ border-radius:0 0 0 var(--r-tab);
  background-image:linear-gradient(180deg,#D4D4D4,#C9C9C9);
  border-top-width:0; box-shadow:var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.9); }
/* Sub-nav chevrons move to the RIGHT of each tab and point right ("›"). */
.interior--landing .ih-subnav .spo-tab::before{ display:none; }
.interior--landing .ih-subnav .spo-tab .tab-label::after{ display:none; }
.interior--landing .ih-subnav .spo-tab::after{ content:"\203A";
  font:var(--fw-medium) 1.8em/0 var(--font-display); color:var(--chevron);
  -webkit-text-stroke:3px #fff; paint-order:stroke fill; }
.interior--landing .ih-subnav .spo-tab:hover::after,
.interior--landing .ih-subnav .spo-tab.is-current::after{ color:var(--chevron-hover); }

/* Orange banner (top-right). Left corners squared and pulled left to abut the
   silver title block (closing the column gap) → one joined block. */
.ih-banner{ grid-area:banner; position:relative; margin-left:calc(-1 * var(--sp-5));
  height:149px;                      /* FIXED: lower border lands at viewport 278px, flush with
                                        the hero box bottom (top 129 + 149). Must not grow with
                                        the subtitle box or the hero alignment breaks. */
  display:flex; align-items:center; justify-content:flex-end;
  border-radius:0 var(--r-banner) var(--r-banner) 0; }
.ih-banner .ih-subtitle{ position:relative; z-index:2;
  display:flex; align-items:center; justify-content:flex-end; text-align:right;
  flex:none; width:276px; height:125px; overflow:hidden;
  font:var(--fw-regular) var(--fs-2xl) var(--font-display); color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.25); }

/* Hero image box (desktop): a FIXED box the image is dropped into at its natural
   size — no scaling — so subpage hero PNGs can be designed to fit it exactly
   (use transparency so the box doesn't block the masthead/nav beneath it).
   Positioned relative to .interior; pointer-events:none so it never blocks links. */
.ih-fig{ position:absolute; left:38.5%; top:-129px; width:368px; height:278px;
  z-index:100; pointer-events:none; }   /* on top of everything, incl. the nav (30) */
.ih-fig img{ display:block; width:100%; height:auto; }   /* hero art is authored at 2× the box; renders at box width = half size */

/* White content panel (bottom-right), tucked up under the banner */
.interior .content-panel{ grid-area:content; align-self:start;
  margin-top:-40px; position:relative; z-index:2; }

/* Body typography inside the white panel */
.post-body{ min-width:0; }
.post-body .post-title{ font:var(--fw-regular) var(--fs-2xl) var(--font-display);
  color:var(--heading-grey); letter-spacing:var(--tr-display); margin:0 0 var(--sp-4); }
.post-body h2{ font:var(--fw-regular) var(--fs-xl) var(--font-display); color:var(--heading-grey);
  margin:var(--sp-5) 0 var(--sp-2); }
.post-body h2.subtitle{ color:var(--heading-grey); }
.post-body h3{ font:var(--fw-bold) var(--fs-lg) var(--font-display); color:var(--heading-orange); margin:var(--sp-4) 0 var(--sp-2); }
.post-body h4{ font:var(--fw-bold) var(--fs-base) var(--font-body); margin:var(--sp-3) 0 var(--sp-1); }
.post-body p{ margin:0 0 var(--sp-4); font-size:14px; }
.post-body a{ color:var(--link); } .post-body a:hover{ color:var(--link-hover); }
.post-body ul,.post-body ol{ margin:0 0 var(--sp-4) 1.3em; padding:0; }
.post-body li{ margin:.2em 0; }
.post-body img{ height:auto; }
/* Never let embedded media overflow the content column. */
.post-body :where(img,iframe,video,embed,object,svg,table){ max-width:100%; }
.post-body :where(img,video){ height:auto; }
.post-body iframe{ display:block; }

/* [catlist] related-post lists (List Category Posts plugin) — tighter than body copy */
.post-body ul.lcp_catlist{ margin-bottom:var(--sp-3); }
.post-body ul.lcp_catlist li{ font-size:13px; line-height:1.3; margin:.05em 0; }

/* Detail-page test lists (catlist output + legacy "h2link" links) */
.post-body .h2link{ font:var(--fw-bold) var(--fs-sm) var(--font-body); text-transform:uppercase;
  letter-spacing:.015em; margin:.15em 0; }
.post-body .h2link a{ color:var(--n-600); } .post-body .h2link a:hover{ color:var(--link); }

/* Services landing 3-column block (<ul class="threecolumn">) */
.post-body .threecolumn{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-8); }
.post-body .threecolumn > li{ margin:0; }
.post-body .threecolumn h4{ font:var(--fw-regular) var(--fs-xl) var(--font-display);
  color:var(--n-600); margin:var(--sp-2) 0 var(--sp-3); }
.post-body .threecolumn h4 small{ display:block; color:var(--text-muted); font-weight:var(--fw-bold);
  font-size:.62em; text-transform:none; }
.post-body .threecolumn img{ height:60px; width:auto; margin-bottom:var(--sp-2); }

/* Sidebar (Categories + Quick Links) */
.landing-panel.has-side{ display:grid; grid-template-columns:1fr 220px; gap:var(--sp-8); align-items:start; }
.side{ min-width:0; }
.side-head{ font:var(--fw-bold) var(--fs-lg) var(--font-display); color:var(--heading-orange);
  margin:0 0 var(--sp-2); }
.side-head + .side-head{ margin-top:var(--sp-6); }
.side ul{ list-style:none; margin:0 0 var(--sp-2); padding:0; }
.side li{ margin:0; }
.side li a{ display:block; padding:.14em 0;
  font:var(--fw-bold) 11px/1.15 var(--font-body); text-transform:uppercase;
  letter-spacing:.015em; color:var(--n-600); }
.side li a:hover{ color:var(--link); }
/* Grey chevron after each sidebar link (Categories, Quick Links, page lists,
   archives) to read as a link — matches the home Quick Links/testlist chevron. */
.side li a::after{ content:"\203A"; margin-left:.06em; color:var(--n-600);
  font-family:var(--font-display); font-weight:var(--fw-medium); font-size:1.5em;
  line-height:0; vertical-align:-.06em; }
.side li a:hover::after{ color:var(--link); -webkit-text-stroke:.04em var(--link); }
.side .side-list li.current_page_item > a,
.side .side-list li.current-cat > a{ color:var(--link); }
.side .side-list li.current_page_item > a::after,
.side .side-list li.current-cat > a::after{ color:var(--link); }

/* Resources listing pages (Web-Log / Publications / Equipment): post feed +
   single-post meta line. Excerpt/meta type matches the .post-body 14px scale. */
.post-meta{ font:var(--fw-regular) var(--fs-xs) var(--font-body); color:var(--text-muted);
  margin:0 0 var(--sp-4); text-transform:uppercase; letter-spacing:.015em; }
.post-list{ list-style:none; margin:var(--sp-4) 0 0; padding:0; }
.post-item{ padding:0 0 var(--sp-5); margin:0 0 var(--sp-5); border-bottom:var(--border-divider); }
.post-item:last-child{ border-bottom:0; padding-bottom:0; margin-bottom:0; }
.post-item-title{ font:var(--fw-regular) var(--fs-xl) var(--font-display);
  color:var(--heading-grey); margin:0 0 var(--sp-1); }
.post-item-title a{ color:var(--heading-grey); }
.post-item-title a:hover{ color:var(--link); }
.post-excerpt{ margin:var(--sp-2) 0 var(--sp-3); }
.post-excerpt p{ font-size:14px; margin:0 0 var(--sp-2); }
.post-item .spo-btn{ margin-top:var(--sp-1); }
/* The orange "Read more" pill sits inside .post-body, where `.post-body a` (orange)
   would otherwise repaint its label orange-on-orange. Force the button text white. */
.post-body a.spo-btn, .post-body a.spo-btn:hover{ color:#fff; }

/* Pagination (paginate_links) */
.post-pagination{ margin-top:var(--sp-6); }
.post-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:32px; padding:0 var(--sp-2); margin:0 4px 4px 0;
  border:var(--border-rim); border-radius:var(--r-input);
  font:var(--fw-bold) var(--fs-sm) var(--font-body); color:var(--n-600); text-decoration:none; }
.post-pagination .page-numbers.current{ background:var(--heading-orange);
  border-color:var(--heading-orange); color:#fff; }
.post-pagination a.page-numbers:hover{ border-color:var(--heading-orange); color:var(--heading-orange); }
.post-pagination .page-numbers.dots{ border:0; }

/* ===== Services landing: shared home White Content Panel ================= */
/* The 3-column services card (services-card.php), reused from the front page.
   Styles mirror css/home.css so the card is identical to the splash version. */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-10) }
.col-head{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-2) }
/* Card heading is a link to its section — keep the two-tone type, add a hover cue. */
a.col-head{ text-decoration:none; }
a.col-head .word2{ transition:color var(--mo-hover); }
a.col-head:hover .word2{ color:var(--heading-orange); }
.col-icon{ height:46px; width:auto; flex:none }
.col .lead{ margin:var(--sp-2) 0 var(--sp-4); color:var(--text-body); font-size:15px; line-height:1.55 }
.testlist{ list-style:none; margin:var(--sp-2) 0 0; padding:0 }
.testlist li{ padding:0 }
.testlist li a{ display:block; padding:.32em 0 .32em 1.15em; text-indent:-1.15em; line-height:1.25;
  font:var(--fw-bold) var(--fs-sm) var(--font-body); text-transform:uppercase;
  letter-spacing:.015em; color:var(--n-600) }
.testlist li a:hover{ color:var(--link) }
.testlist .spo-chevron{ display:none }
.testlist li a::after{ content:"\203A"; margin-left:.06em; color:var(--n-600);
  font-family:var(--font-display); font-weight:var(--fw-medium); font-size:1.7em;
  line-height:0; vertical-align:-.06em }
.testlist li a:hover::after{ color:var(--link); -webkit-text-stroke:.04em var(--link) }

/* Landing panel positioned like the splash White Content Panel (90% centred,
   floated up over the billboard row by the same 22px). */
/* The joined block is re-proportioned to title 40% / orange 60% (overall width
   unchanged). The white panel sits in the grid content cell — flush under the
   orange 60% column — and is pulled up to overlap the joined block by 22px, the
   same overlap the nav bar has at the top (row-gap + 22). */
.interior--landing{ grid-template-columns:40% calc(60% - var(--sp-5)) }
.landing-panel{ position:relative; z-index:2 }
.interior--landing .landing-panel{ grid-column:1 / -1; grid-row:2; align-self:start;
  width:66%;                                     /* 66% of the combined joined-block width */
  margin-left:auto; margin-right:5%;             /* right edge aligns with the 90%-wide nav bar */
  margin-top:calc(-22px - var(--sp-3)) }         /* overlap the joined block by 22px */
.landing-panel--narrow .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)) }

/* ===== Responsive ======================================================== */
@media (max-width:1023px){
  /* --- Mobile interior header (mock-up layout) ----------------------------
     One continuous silver panel backs the block: "Services ›" at the top-left,
     then the sub-nav rows below. The hero bleeds up on the RIGHT (right-aligned
     with the nav); the orange page-title panel floats on the LEFT, its right
     edge meeting the hero's left edge. Content follows underneath. */
  .interior{ display:block; margin-top:-22px; --ih-band-h:250px; }   /* --ih-band-h = silver header height; --22px nav overlap */

  /* Silver title panel (the "header"): "Services ›" top-left + a band below
     hosting the floating orange panel and hero. Bottom squared so the sub-nav
     continues it. Its height = --ih-band-h. */
  .ih-title{ align-self:auto; }
  .interior--landing .ih-title{ display:block;
    border-radius:var(--r-tab) var(--r-tab) 0 0;
    background-image:linear-gradient(180deg,#E4E4E4,#D6D6D6);
    padding:30px 5% 0; min-height:var(--ih-band-h); }   /* 5% = the nav's side inset */

  /* Hero: spans the band from the orange panel's left edge (5%) across to the
     silver header's right margin (right:0), so the image flows CONTINUOUSLY
     behind the orange panel rather than being cut at its right edge. Height spans
     the nav-bar bottom (22px overlap) → silver header bottom; object-fit fills it.
     z-index sits above the silver panel background, below the orange panel and
     the raised "Services ›" title. */
  .ih-fig{ left:5%; right:0; top:22px; transform:none;
    width:auto; height:calc(var(--ih-band-h) - 22px); z-index:2; overflow:hidden; }
  /* Image scales to the FULL band height (top & bottom anchored to the silver
     panel — no central zoom) and is right-aligned; the horizontal difference
     (image wider or narrower than the box) falls on the LEFT, which is hidden
     behind the orange panel. */
  .ih-fig img{ position:absolute; right:0; top:0; height:100%; width:auto; max-width:none; display:block; }
  /* Compressed views: don't show the big silver section title at all — the current
     section is indicated by the orange nav link instead (see .spo-nav a.is-section). */
  .interior--landing .ih-title .spo-title{ display:none; }
  .spo-nav a.is-section{ color:var(--heading-orange); }

  /* Orange page-title panel: left edge = nav's left (5%); right edge = hero's left
     edge (5% nav inset + 38% hero width = 43% from the right). */
  .interior--landing .ih-banner{ position:absolute; left:5%; right:43%; top:92px;
    height:84px; min-height:0; margin-left:0; padding:var(--sp-3); border-radius:var(--r-banner);
    align-items:center; justify-content:center; z-index:100; }   /* on top of all interior + nav */
  .interior--landing .ih-banner .ih-subtitle{ position:static; overflow:visible;
    width:100%; height:auto; white-space:normal; line-height:1.15; font-size:22px;
    justify-content:center; text-align:center; padding:0; }

  /* Sub-nav rows continue the silver panel below the title block (full width). */
  .interior--landing .ih-subnav{ display:block; width:100%; justify-self:stretch; margin-top:0; }
  .interior--landing .ih-subnav .spo-tab{ padding-right:var(--sp-4); }
  .interior--landing .ih-subnav .spo-tablist{ width:100%; border-radius:0 0 var(--r-tab) var(--r-tab);
    background-image:linear-gradient(180deg,#D6D6D6,#C9C9C9); border-top-width:1px;
    box-shadow:var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.6); }

  /* Content below. */
  .interior--landing .landing-panel{ width:auto; margin:var(--sp-4) 0 0; }
  .landing-panel.has-side{ grid-template-columns:1fr; }
  .side{ border-top:var(--border-divider); padding-top:var(--sp-4); }
  .post-body .threecolumn{ grid-template-columns:1fr 1fr; gap:var(--sp-6); }
  .grid-3{ grid-template-columns:1fr 1fr; gap:var(--sp-6) }
  .footer .inner{ grid-template-columns:1fr 1fr }
  .footer .foot-legal{ text-align:left }
}
@media (max-width:639px){
  .canvas{ padding:14px 12px 0 }
  .masthead{ flex-direction:column; align-items:center; gap:6px; text-align:center }
  .masthead .tagline img{ height:51px }
  .spo-nav{ gap:7px; padding:6px var(--sp-1) }
  .spo-nav a{ letter-spacing:0; font-size:15px }
  .ih-title{ padding-top:28px; }   /* clear the nav bar that overlaps the first row */
  .ih-title .spo-title{ white-space:normal; font-size:34px; }
  /* hero top/height/width inherited from the max-width:1023px block (nav-bottom → header-bottom) */
  .post-body .threecolumn{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr }
  .landing-panel--narrow .grid-3{ grid-template-columns:1fr }
  .spo-card{ border-radius:var(--r-banner) }
  .footer .inner{ grid-template-columns:1fr }
}