/*
 * Strike Marketing -- shared site styles.
 *
 * Same convention as clients/AST/website/assets/site.css and
 * clients/LICH/website/assets/site.css: anything that appears on more than one
 * page lives here, and each page keeps only its own page-specific rules in an
 * inline <style> block. Link this file LAST of the stylesheets in <head>, and
 * before any page-level <style>, so a page can still override it.
 *
 * Sections: theme -> base -> header -> hero -> partners -> services ->
 * solutions -> why choose us -> testimonials -> responsive.
 */

/* ---------- theme ---------- */
:root{
  /* Nav ink. These are the values specified for the header; note they differ
     slightly from clients/STK/assets/base.md, which has BRAND_DARK #0f1e1e
     and BRAND_PRIMARY #d14635. base.md still drives the generated forms and
     policy pages -- only the site chrome uses the two below. */
  --ink:#2C2B2B;
  --accent:#E33628;
  /* The deep brick the accent darkens into. Was repeated as a literal in the
     eyebrow, the solutions "Read More" link and the why-choose-us row titles;
     the testimonials dots made it a fourth, so it is a token now. */
  --maroon:#6B1811;
  /* site-wide face, referenced by body and by anything that has to restate it */
  --font:"Proxima Nova",sans-serif;
  /* Handwriting accent -- headline accents and callouts ONLY, never body text
     (handwritten-mailers.html is the one page that uses it). Caveat is loaded
     by that page's own <link>; the fallbacks keep it legible if it does not
     arrive. PROVISIONAL pick, swap freely: this token and .stk-hand below are
     the only two places the face is named. */
  --font-hand:"Caveat","Segoe Print","Bradley Hand",cursive;

  --white:#ffffff;
  --border:#e8e8e8;
  --shadow-header:0px 2px 21px 0px rgba(0,0,0,.19);

  /* Header height is DERIVED from the logo rather than picked.
     assets/logo.svg is 312x170 natural (aspect 1.835:1), so at the display
     height below it renders 154x84 and keeps its proportions from the
     width:auto on .stk-logo img. Change --logo-h and the bar, and the content
     offset under it, follow.

     84px, up from 64: at 64 the mark was about 110px wide in a 1246px bar, small
     next to the 235px footer logo. It is a vector file, so it scales cleanly. The
     bar's vertical padding came down (18 to 14) so the larger logo does not
     balloon the header. */
  --logo-natural-w:312;
  --logo-natural-h:170;
  --logo-h:84px;
  --header-pad-y:14px;
  /* 84 + 14 + 14 = 112px. site-nav.js replaces this with the header's real
     measured height once loaded, which is what keeps the offset correct when
     the bar wraps to two rows on narrow screens. */
  --header-h:calc(var(--logo-h) + var(--header-pad-y) * 2);

  /* the inner wrapper's specified width */
  --shell-w:1246px;
  --shell-gutter:24px;
  /* the uniform gap between page sections. Every section sets
     margin-top:var(--section-gap), so changing it here re-spaces the whole
     page rather than needing a per-section edit. */
  --section-gap:70px;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  /* Site-wide face. Set once here and inherited by everything, so the header
     nav, the dropdown items and the hero copy all take it from one place.

     NOTE: Proxima Nova is a licensed Adobe Fonts face -- it is not on Google
     Fonts and nothing in this project loads it yet (no @font-face, no Adobe
     kit <link>). Until a kit is added it resolves to the generic sans-serif
     fallback for any visitor without it installed locally. The declaration is
     correct; the delivery is the missing half. */
  font-family:var(--font);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
}
/* form controls do not inherit font-family from body on their own, so the
   site-wide face has to be handed to them explicitly */
button,input,select,textarea{font-family:inherit}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* the bar is fixed, so it is out of flow and would sit on top of the first
   section -- every page offsets its content by the bar's height */
.site-main{padding-top:var(--header-h)}

/* ---------- header ----------
   Full-bleed white bar, fixed to the top, with a 1246px content shell centred
   inside it. The bar itself carries no padding (the shell does), so the white
   and the shadow run edge to edge.

   width:100% rather than 100vw on purpose: on a scrolling page 100vw counts
   the classic scrollbar's width too, so a fixed 100vw element is ~15px wider
   than the content area and produces a horizontal scrollbar. For a fixed
   element with left:0 the two are otherwise identical -- 100% resolves against
   the viewport -- so this is the same full-bleed result without the overflow. */
.stk-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  margin-top:0;
  margin-bottom:0;
  padding:0;
  background:var(--white);
  box-shadow:var(--shadow-header);
}

/* the centred content shell. min() keeps the specified 1246px wherever there
   is room for it and goes fluid below that, which is the same idiom the AST
   and LICH shells use -- a hard width:1246px would push ~870px of horizontal
   overflow at 375px. */
.stk-header-inner{
  width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));
  margin:0 auto;
  padding:var(--header-pad-y) 0;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
}

/* --- column 1 (40%): logo, left aligned --- */
.stk-logo-col{flex:0 0 40%;max-width:40%;display:flex;justify-content:flex-start;align-items:center}
.stk-logo{display:inline-flex;align-items:center}
/* height drives it, width follows the 312x170 aspect */
.stk-logo img{height:var(--logo-h);width:auto}

/* --- column 2 (60%): nav, spread across the whole column --- */
.stk-nav-col{
  flex:0 0 60%;
  max-width:60%;
  /* stretch, not center: the nav items need to fill the shell's content height
     so the dropdown's top:100% lands on the bar's bottom edge rather than
     partway up it. Their own align-items:center still centres the labels. */
  align-self:stretch;
  display:flex;
  align-items:stretch;
}
/* width:100% so space-between has the full 60% to distribute -- that is what
   gives the wide even gaps rather than a tight cluster on one side */
.stk-nav{width:100%;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between}

/* --- nav items --- */
.stk-nav > a,
.stk-nav .stk-dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
  font-size:1rem;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  color:var(--ink);
  /* the specified 0.4s, on colour only */
  transition:color .4s ease;
}
.stk-nav > a:hover,.stk-nav > a:focus-visible,.stk-nav .stk-nav-item:hover > .stk-dropdown,.stk-nav .stk-nav-item:focus-within > .stk-dropdown{color:var(--accent)}
/* current page: the hover colour, permanently */
.stk-nav > a.active,.stk-nav .stk-dropdown.active{color:var(--accent)}

/* --- Services dropdown ---
   Same pattern as LICH's and AST's .nav-menu: opened by :hover for pointers
   and :focus-within for keyboards, so it needs no JavaScript. */
.stk-nav-item{position:relative;display:inline-flex;align-items:center}
.stk-dropdown{padding-right:1rem;cursor:pointer}
.stk-dropdown::after{
  content:"\25BE";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-size:.78rem;
  transition:transform .18s ease;
}
.stk-nav-item:hover > .stk-dropdown::after,.stk-nav-item:focus-within > .stk-dropdown::after{transform:translateY(-50%) rotate(180deg)}

.stk-nav-menu{
  position:absolute;
  /* Flush to the bottom of the nav item, which is stretched to the shell's
     content height. The previous `100% + var(--header-pad-y)` also cleared
     the bar's bottom padding, which put the panel level with the bar's outer
     edge -- correct, but 40px below the "Services" label, so it read as
     floating. Dropping the extra offset closes that to 22px and the panel now
     connects to the bar instead of hanging off it. */
  top:100%;
  /* Centred under the trigger -- the same pattern as LICH's and AST's
     .nav-menu -- so the label sits at the panel's top centre.
     .stk-nav-item is position:relative, which is what the 50% resolves
     against.

     --dd-shift is normally 0, leaving the panel exactly centred. It exists
     because "Services" is the last nav item and sits hard against the shell's
     right edge: below ~1294px a centred 230px panel hangs past the viewport,
     and because .stk-header is position:fixed its overflowing descendants do
     not add to the document's scroll width, so it clips silently rather than
     showing a scrollbar. site-nav.js measures each panel and writes a shift
     ONLY when it would leave the viewport, so centring is what you get
     wherever there is room for it. */
  left:50%;
  --dd-shift:0px;
  transform:translateX(calc(-50% + var(--dd-shift)));
  min-width:230px;
  max-width:calc(100vw - 32px);
  padding:8px 0;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.16);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:50;
  /* visibility flips instantly on the way IN and is delayed on the way OUT.
     Transitioning visibility itself leaves it computed `hidden` for the first
     frames, which stops a keyboard user tabbing straight into the menu. */
  transition:opacity .18s ease,visibility 0s linear .18s;
}
/* With top:100% the panel already meets the nav item's bottom edge, so there
   is no gap left to cross -- this stays as a small safety strip against
   sub-pixel rounding, and keeps the hover intact if the offset is ever
   reintroduced. Invisible either way. */
.stk-nav-menu::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.stk-nav-item:hover > .stk-nav-menu,.stk-nav-item:focus-within > .stk-nav-menu{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .18s ease,visibility 0s linear 0s}
.stk-nav-menu a{
  display:block;
  padding:10px 18px;
  font-size:.95rem;
  font-weight:700;
  white-space:nowrap;
  color:var(--ink);
  transition:color .4s ease,background-color .15s ease;
}
.stk-nav-menu a:hover,.stk-nav-menu a:focus-visible{color:var(--accent);background:#f6f6f6}
.stk-nav-menu a.active{color:var(--accent)}

/* ---------- hero ----------
   Full-bleed background band under the header. Structure lives on .stk-hero
   so other pages can reuse it, and the image comes from a per-page modifier
   (.stk-hero--home) -- the same split AST uses for .page-banner /
   .page-banner--blogs.

   It sits inside .site-main, which already carries padding-top:var(--header-h),
   so the band starts immediately below the fixed bar and nothing it holds can
   end up underneath it. No margin or padding of its own is needed for that.

   The artwork is TILED at its native size, not scaled to fill.
   assets/stk_hero-bg.webp is 1964x317 (aspect 6.2). Against a 765px band
   `cover` had to scale by height -- 765/317 = 2.41x -- which drew the bars
   about two and a half times wider than they were designed and amplified the
   file's gradient banding. background-size:auto keeps them at their intended
   317px, repeat-x carries the strip across any viewport width, and the band's
   remaining height below the strip falls through to the page's white. The
   artwork already fades to white along its bottom edge, so that hand-off is
   invisible.

   background-attachment is deliberately left at its default (scroll): this is
   an ordinary in-flow section background that moves with the page, not a
   parallax layer. */
.stk-hero{
  width:100%;
  /* min-height, not height: hero copy is being added in a follow-up and must
     be able to grow the band rather than be clipped by it */
  min-height:765px;
  /* native size, tiled sideways, pinned to the top edge. `center top`
     computes to 50% 0% -- the vertical 0% is what matters; the horizontal
     only sets the tiling phase. */
  background-size:auto;
  background-repeat:repeat-x;
  background-position:center top;
  /* centres .stk-hero-inner in the band. No vertical padding on purpose: at
     the 1246px shell the image column is 599px wide, so the 500x623 artwork
     renders 746px tall and fits inside 765px with room to spare -- adding
     padding would push the band past the specified height instead. */
  display:flex;
  align-items:center;
}
.stk-hero--home{background-image:url('stk_hero-bg.webp')}

/* --- hero content ---
   .stk-hero-inner repeats the header shell's width expression verbatim and
   reads the same --shell-w / --shell-gutter, so the two wrappers resolve to
   the same width and the same centring at every viewport -- the hero copy's
   left edge lines up with the logo, and the image's right edge with the last
   nav item. Changing the shell moves both. */
.stk-hero-inner{
  width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));
  margin:0 auto;
  display:grid;
  /* minmax(0,1fr) rather than 1fr: 1fr's implicit minimum is auto, so a long
     word or the image's intrinsic width could push a track past its half and
     break the 50:50 */
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:48px;
  align-items:center;
}
/* The small uppercase label above a section heading. Was a selector list of
   per-section classes (.stk-hero-eyebrow, .stk-partners-eyebrow, ...) that had
   to be extended for every new section; now one class the markup opts into, so
   a new section adds no CSS at all. Five uses: hero, partners, services,
   why-choose-us, testimonials. */
.stk-eyebrow{font-family:var(--font);font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:3px;color:var(--maroon);margin:0 0 18px}
.stk-hero-title{font-family:var(--font);font-size:56px;font-weight:700;line-height:1.2em;color:#000000;margin:0 0 22px}
/* the accent-coloured phrase inside a heading -- "Business Growth",
   "We Work", "Boost Your Brand", "Benefits of Partnering", "Satisfied
   Clients". The hero is listed separately because its heading is 56px rather
   than the 46px section scale, so it cannot share .stk-section-title. */
.stk-hero-title span,.stk-section-title span{color:var(--accent)}
/* no font-size or weight here on purpose -- the paragraph takes the site's
   base body text (16px / line-height 1.6 from body) */
.stk-hero-lead{font-family:var(--font);max-width:34em;margin:0 0 32px;color:var(--ink)}
/* .4s to match the nav links' colour transition */
.stk-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 34px;border:none;border-radius:20px;background:var(--accent);color:#ffffff;font-family:var(--font);font-size:20px;font-weight:700;line-height:1;cursor:pointer;transition:background-color .4s ease}
.stk-btn:hover,.stk-btn:focus-visible{background:#000000}
/* flex-shrink:0 so the arrow keeps its 24px box if the label ever wraps */
.stk-btn svg{flex:0 0 24px;width:24px;height:24px;display:block}
/* width:100% of the column, height:auto -- the natural 500x623 ratio is kept
   by not declaring a height at all */
.stk-hero-media img{width:100%;height:auto}

/* ---------- partners ----------
   Same 1246px shell as the header and the hero, from the same --shell-w /
   --shell-gutter, so all three sections share one set of left/right edges.
   Two rows -- the heading block, then the logo row -- everything centred. */
.stk-partners{margin-top:var(--section-gap)}
.stk-partners-inner{
  width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));
  margin:0 auto;
  display:grid;
  /* the two rows are the only children, so row-gap is the gap between them */
  row-gap:12px;
  justify-items:center;
  text-align:center;
}
.stk-partners-head{width:100%}
/* The 46px section heading, extracted from the same kind of growing selector
   list as .stk-eyebrow above. Four uses: partners, services, why-choose-us,
   testimonials. The hero's 56px h1 keeps its own .stk-hero-title. */
.stk-section-title{font-family:var(--font);font-size:46px;font-weight:700;line-height:1.3em;color:#000000;margin:0}
/* The 32px accent heading one step down from .stk-section-title -- the
   solutions cards' h3 and the footer's column headings. Extracted for the
   same reason as .stk-eyebrow and .stk-section-title above: it was a
   per-section rule that every new use would otherwise have had to copy. */
.stk-block-title{font-family:var(--font);font-size:32px;font-weight:700;line-height:1.2em;color:var(--accent);margin:0 0 14px}
/* flex rather than a 4-track grid: the cards are a fixed 200x50 instead of
   sharing the shell, so the row is 4*200 + 3*24 = 872px and justify-content
   centres it in the 1246px shell. wrap so they drop to a second row on narrow
   screens rather than overflowing. */
.stk-partners-logos{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
/* Real client brand cards -- the same project photo + transparent logo
   pairing the Partners page uses (see .stk-pt-card-photo), just smaller:
   the project photo as the card's own background, the logo as a contained
   (not cropped) foreground image so the mark stays fully legible, and the
   company name as a caption below. Hover lifts the card, matching
   .stk-pt-card on the Partners page it links to. */
.stk-partner{
  display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 148px;
  text-decoration:none;padding:14px;border-radius:16px;border:1px solid var(--border);
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.05);
  transition:transform .2s ease,box-shadow .2s ease;
}
.stk-partner:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.1)}
/* Logo only, no project photo -- the mark is a transparent PNG, so this is
   just a sizing box on the card's own white background. */
.stk-partner-logo{width:100%;height:88px;object-fit:contain}
.stk-partner span{font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--ink);text-align:center}

/* ---------- services ----------
   Same 1246px shell again, --section-gap below partners. 60:40 -- heading
   left, CTA
   right. minmax(0,...) on both tracks so a long word in the 46px heading
   cannot floor its track and break the ratio.

   align-items:center: the heading block runs to two or three lines while the
   button is one, so centring puts the button against the middle of the
   heading. end-aligning it dropped it level with the heading's last line,
   which read as an afterthought rather than a pair. */
.stk-services{margin-top:var(--section-gap)}
.stk-services-inner{
  width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,60fr) minmax(0,40fr);
  gap:48px;
  align-items:center;
}
/* the button is .stk-btn verbatim -- only the label differs -- so this column
   just pushes it to the right edge of the shell */
.stk-services-cta{display:flex;justify-content:flex-end}

/* ---------- solutions ----------
   The six service cards that continue the "Boost Your Brand" section, one
   --section-gap below it, on the same 1246px shell.

   A <ul>: six sibling items of one kind. list-style is dropped and the grid
   does the layout, so the two rows of three fall out of the wrap instead of
   being marked up as two rows -- one 30px gap is then both the row gap and the
   card gap, as specified.

   aspect-ratio:1 is what makes the cards square: the track width sets the
   height, so all six stay identical at any shell width without a hard-coded
   number to go stale. It is a preferred height, not a cap -- a card whose text
   ran long would still grow rather than clip its content.

   The specified checkerboard (pink, grey, pink / grey, pink, grey) is exactly
   odd/even in document order at three columns, so it needs no per-card
   classes; the 2-column rule below restates it as 4n to keep the alternation
   from turning into vertical stripes. */
/* padding-bottom, not margin-bottom: the 70px belongs to this section and has
   to sit INSIDE its box, so it stays put no matter what follows and cannot
   collapse into the next section's margin-top. It reads --section-gap because
   70px is the site's spacing unit, so changing that one value still re-spaces
   everything -- note the next section's own margin-top will then add to this,
   putting 140px between the last card row and whatever comes next. */
.stk-solutions{margin-top:var(--section-gap);padding-bottom:var(--section-gap)}
.stk-solutions-inner{width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto}
/* grid-auto-rows:1fr backs the aspect-ratio up: fr rows in a container of
   indefinite height all resolve to the tallest row's size, so if a long
   heading ever pushed one card past square the other five would follow it and
   the six would stay equal-sized. */
.stk-solutions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:30px;margin:0;padding:0;list-style:none}
.stk-solution{
  display:flex;
  flex-direction:column;
  /* the card's contents are all left-aligned; flex-start stops the icon and
     the link from stretching to the card's full width */
  align-items:flex-start;
  aspect-ratio:1;
  padding:40px;
  border-radius:20px;
  background:#F8F8F8;
}
.stk-solution:nth-child(odd){background:#FCECEA}
/* width/height restated in CSS as well as on the <img> so the box is reserved
   before the SVG loads and the text below it cannot jump */
.stk-solution-icon{width:60px;height:60px;margin:0 0 24px}
/* the cards' h3 carries .stk-block-title, so it needs no type rule here */
/* no font-size here on purpose -- same as .stk-hero-lead, the paragraph takes
   the site's base body text (16px / line-height 1.6 from body) */
.stk-solution p{margin:0 0 20px;color:var(--ink)}
/* margin-top:auto pins the link to the bottom of the square, so all six line
   up whatever their paragraph's length. .4s colour to #E33628 is the same
   transition the nav links use -- black is the filled button's hover, not a
   text link's. */
.stk-solution-more{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:700;line-height:1;color:var(--maroon);transition:color .4s ease}
.stk-solution-more:hover,.stk-solution-more:focus-visible{color:var(--accent)}
/* stroke:currentColor -- the arrow inherits the link's colour and so its hover
   transition too, which is what keeps the two from ever falling out of step */
.stk-solution-more svg{flex:0 0 20px;width:20px;height:20px;display:block;stroke:currentColor}

/* ---------- why choose us ----------
   A full-bleed #F8F8F8 band with the same 1246px shell centred inside it.

   The 70px is padding, not margin: this section has a background, so the
   space has to sit INSIDE the band -- as margin it would leave the grey
   wrapped tight around the content with the gap outside it. It still reads
   --section-gap, so the site's one spacing value drives it.

   Two equal columns on a deliberately tight 14px gutter, as specified. The
   real separation between picture and copy comes from the photo being 80% of
   its column: the 20% of empty column to its right is what does the work the
   gutter normally would.

   align-items:start is load-bearing. The award badge is anchored to the
   bottom of column 1, so that column's height has to be exactly the photo's
   -- if it stretched to the row height the badge would drift below the
   picture whenever the copy was taller. The copy is then re-centred with
   align-self, which keeps the two columns balanced. */
.stk-why{
  /* the icon box is a fixed square rather than the 10% track's width, which
     is what lets the roadmap line below be positioned in pure CSS: every
     offset it needs is derived from these three values */
  --why-icon:56px;
  --why-row-gap:30px;
  --why-line-inset:10px;
  padding:var(--section-gap) 0;
  background:#F8F8F8;
}
.stk-why-inner{
  width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:start;
}
.stk-why-copy{align-self:center}

/* column 1 -- the positioning context the badge is absolute against */
.stk-why-media{position:relative}
.stk-why-photo{width:80%;height:auto}
/* The badge straddles the photo's bottom edge, half over the picture and half
   below it. --award-h is derived from the file's natural 280x96, so the -50%
   offset is exactly half the badge's rendered height: change --award-w alone
   and the straddle still holds. (--award-w is kept in px on purpose -- a
   percentage here would resolve against the container's WIDTH in `width` but
   against its HEIGHT in `bottom`, and the two offsets would disagree.)
   left:40% is the centre of an 80%-wide photo sitting at the column's left
   edge, so the badge centres on the picture rather than on the column. */
.stk-why-award{
  --award-w:280px;
  --award-h:calc(var(--award-w) * 96 / 280);
  position:absolute;
  left:40%;
  bottom:calc(var(--award-h) * -0.5);
  width:var(--award-w);
  height:auto;
  transform:translateX(-50%);
}

/* The eyebrow and heading are not styled here -- the markup uses the shared
   .stk-eyebrow and .stk-section-title classes, which is what keeps the
   sections' matching type from drifting apart. */

/* "about 40px below the heading", with the 10px left inset */
.stk-why-list{margin:40px 0 0;padding:0 0 0 10px;list-style:none;display:grid;row-gap:var(--why-row-gap)}
/* 10:90, as specified, with the fr share taken after the gutter so the two
   tracks keep that ratio. minmax() floors the icon track at the box's own
   width so it cannot be squeezed narrower than the icon on small screens. */
.stk-why-row{position:relative;display:grid;grid-template-columns:minmax(var(--why-icon),10fr) minmax(0,90fr);column-gap:16px}

/* Black with white glyphs rather than the white background the brief floated:
   on a #F8F8F8 band a white box has almost no contrast, and black matches the
   badge already baked into stk_solutions-icon.svg one section above -- down to
   its radius, which is rounded on the top-left and bottom-right corners only
   (24px on that file's 60px box, so 22px here on 56px). It also makes the
   roadmap line read as joining the boxes rather than crossing them. */
.stk-why-icon{
  align-self:start;
  justify-self:start;
  width:var(--why-icon);
  height:var(--why-icon);
  /* the specified 5-10px, declared rather than implied: with the global
     border-box the icon below then fills whatever the padding leaves */
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:22px 0 22px 0;
  background:#000000;
  color:#ffffff;
}
/* height only, no width: these are Font Awesome paths drawn on a common
   512-unit em box, so matching their heights gives the three equal optical
   weight even though their viewBox widths differ (512, 448 and 576) -- the
   narrower one simply carries a little more air either side. fill follows the
   box's color. */
.stk-why-icon svg{height:100%;width:auto;display:block;fill:currentColor}

/* The roadmap connector: one line per gap, so :not(:last-child) leaves the
   third row without one. It runs from --why-line-inset below this icon to the
   same inset above the next one -- the negative `bottom` is what carries it
   out of this row and across the gap. Both ends are derived from the same
   variables as the layout, so changing the icon size or the row gap cannot
   leave the line short or overshooting. left is half the icon box, i.e.
   centred under the icon itself. */
.stk-why-row:not(:last-child)::before{
  content:'';
  position:absolute;
  top:calc(var(--why-icon) + var(--why-line-inset));
  bottom:calc(var(--why-line-inset) - var(--why-row-gap));
  left:calc(var(--why-icon) / 2);
  width:2px;
  margin-left:-1px;
  background:#000000;
}

.stk-why-item h3,.stk-why-item h4{font-family:var(--font);font-size:24px;font-weight:700;line-height:1.2em;color:var(--maroon);margin:0}
/* the h4 carries margin-bottom:0 as specified, so the gap between title and
   description is set here instead of being the paragraph's 1em default */
.stk-why-item p{margin:6px 0 0;color:var(--ink)}

/* ---------- testimonials ----------
   Full-bleed #FCECEA band with the 1246px shell centred inside it, laid out
   the same way as the why-choose-us band above: the 70px is padding rather
   than margin, because a section with a background has to hold its own space
   inside the coloured area.

   Two rows -- the heading block, then the carousel row -- on a 50px gap.
   Note the whole section needs no type rules: the eyebrow and heading use the
   shared .stk-eyebrow and .stk-section-title classes, which is the point of
   having extracted them. */
.stk-testimonials{padding:var(--section-gap) 0;background:#FCECEA}
.stk-testimonials-inner{
  width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));
  margin:0 auto;
  display:grid;
  row-gap:50px;
}
/* Row 2. 60:40 on the same minmax(0,Nfr) idiom as .stk-services-inner, so a
   long word cannot floor a track and break the ratio. Nothing here sets a
   height: the grid's default stretch alignment is what makes the column-2
   placeholder fill the row, and the row is sized by the carousel in column 1. */
.stk-testimonials-cards{display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);gap:40px}

/* ---- carousel (column 1) ----
   Three slides on one horizontal track, one visible at a time, moved by a
   transform on the track. No library: assets/site-carousel.js drives it with
   Pointer Events, and drives any other [data-stk-carousel] on the page too. */
/* --slide-bleed is how far a slide's content is allowed to hang BELOW the
   viewport. overflow:hidden clips at the padding edge, so this padding is
   what lets it show; 0 for a plain carousel, and the testimonials section
   raises it to its bubble's tail height. Without it the tail is silently
   eaten by the clip -- the horizontal clipping, which is the whole point of
   the viewport, is unaffected either way. */
.stk-carousel{display:flex;flex-direction:column;--slide-bleed:0px}
/* the window -- one slide wide, the other two clipped */
.stk-carousel-viewport{overflow:hidden;padding-bottom:var(--slide-bleed)}
/* touch-action:pan-y is load-bearing on touch devices: it hands the browser
   the vertical gesture (so the page still scrolls) while keeping the
   horizontal one for the drag. user-select:none stops a drag that starts on
   text from turning into a text selection instead. */
.stk-carousel-track{
  display:flex;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
  transition:transform .35s ease;
}
/* while the pointer is down the track has to track the finger exactly, so the
   easing is switched off for the duration rather than fighting the drag */
.stk-carousel-track.is-dragging{transition:none;cursor:grabbing}
/* flex-basis 100% of the viewport, so one -100% step is exactly one slide */
.stk-carousel-slide{flex:0 0 100%;min-width:0}

/* The white speech bubble. 90% of the slide -- and therefore of the column --
   centred with the same `margin:0 auto` the section shells use. The slide
   stays a full 100% wide, so one -100% step is still exactly one slide; only
   the bubble inside it is inset.

   90 rather than 85: at the 1246px shell it leaves 36px each side, which is
   near enough the section's own 40px column gap that the whitespace around
   the bubble reads as one rhythm. 85% leaves 54px insets against a 94px gap
   to the placeholder beside it, which reads loose by comparison.

   min-height keeps the three slides (unequal quote lengths) a constant
   card height, so the carousel doesn't jump as it steps between them. */
.stk-bubble{
  position:relative;
  width:90%;
  min-height:220px;
  margin:0 auto;
  padding:32px 36px;
  border-radius:20px;
  background:var(--white);
}
/* Quote mark, text, star row, then the author line -- in that order, same as
   the live site's bubble. */
.stk-bubble-quote{display:block;width:32px;height:auto;margin:0 0 12px}
.stk-bubble-text{font-family:var(--font);font-size:15px;line-height:1.6em;color:var(--ink);margin:0 0 16px}
.stk-bubble-stars{display:block;width:98px;height:auto;margin:0 0 20px}
.stk-bubble-author{display:flex;align-items:center;gap:12px}
.stk-bubble-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 48px}
.stk-bubble-name{font-family:var(--font);font-style:normal;font-size:15px;font-weight:700;color:var(--ink);display:block}
.stk-bubble-role{font-family:var(--font);font-size:13px;color:#8a8a8a;display:block}
/* The tail, bottom-left, which is what makes it read as a speech bubble
   rather than a plain card. Delete this rule and the --slide-bleed below for
   a plain card.

   It is absolutely positioned, so it adds no height of its own -- which is
   exactly why the carousel viewport has to be told to let it bleed out, or
   overflow:hidden crops it flush with the bubble's bottom edge. */
.stk-bubble::after{
  content:'';
  position:absolute;
  top:100%;
  left:44px;
  width:0;
  height:0;
  border:14px solid transparent;
  border-bottom:0;
  border-top-color:var(--white);
}
/* the 14px above, handed to the viewport so the tail is inside the clip */
.stk-testimonials .stk-carousel{--slide-bleed:14px}

/* one dot row under the slides, centred */
.stk-carousel-dots{display:flex;justify-content:center;gap:4px;margin-top:22px}
/* Real <button>s, so the dots are focusable and announced. The button itself
   is a 24px transparent hit area with the visible 10px dot drawn inside it: a
   bare 10px button is far too small to hit reliably on touch, and expanding
   it to the full 44px guideline would make neighbouring dots' targets
   overlap. */
.stk-dot{
  position:relative;
  width:24px;
  height:24px;
  padding:0;
  border:none;
  border-radius:50%;
  background:none;
  cursor:pointer;
}
.stk-dot::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  /* the same brick as the eyebrow, via the shared token */
  background:var(--maroon);
  transform:translate(-50%,-50%);
  /* .4s, the site's colour-transition timing */
  transition:background-color .4s ease;
}
.stk-dot.is-active::before{background:var(--accent)}
.stk-dot:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---- placeholder (column 2) ----
   Visual scaffolding only. No height of its own: it stretches to the row,
   i.e. to the carousel's height, which is what fills the column. */
.stk-testimonials-placeholder{border:2px dashed #B9B9B9;border-radius:20px}

/* ---------- closing CTA ----------
   White band, 70px of padding, the same 1246px shell. The 70px is padding
   rather than margin for the same reason as the two bands above it -- and
   here it also keeps the white from collapsing into the body's white, which
   a margin would do invisibly.

   The whole section adds no type or button CSS: the eyebrow is .stk-eyebrow,
   the heading .stk-section-title and the button .stk-btn, all three already
   shared. Only the band and the centring are new.

   justify-items:center centres the three blocks (the button is an
   inline-flex button, so it would otherwise sit left); text-align:center
   centres the wrapped lines inside the eyebrow and heading. Both are needed
   -- neither does the other's job. */
.stk-cta{padding:var(--section-gap) 0;background:var(--white)}
.stk-cta-inner{
  width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));
  margin:0 auto;
  display:grid;
  justify-items:center;
  text-align:center;
}
/* The heading is long enough to run the full 1246px on one line, which reads
   badly centred -- a centred heading wants a measure it can break over. This
   caps it so it breaks into two balanced lines and stays centred in the
   shell, which is the "content block centred within the shell" the design
   calls for. */
.stk-cta-title{max-width:900px}
/* the 32px the hero uses between its lead paragraph and the same button */
.stk-cta .stk-btn{margin-top:32px}

/* ---------- footer ----------
   Black band, 30px of padding, the same 1246px shell. Inside the shell, two
   stacked rows: the three content columns, then the legal row.

   --footer-muted: pure white body copy on black is harsh at 16px, so the
   paragraphs sit a step below white while the links stay full white to read
   as the interactive things. */
.stk-footer{
  --footer-muted:#D9D9D9;
  padding:30px 0;
  background:#000000;
}
/* the shell only -- a plain block, so the rows inside it stack and each can
   span its full width (which is what gives the divider the shell's width) */
.stk-footer-inner{
  width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));
  margin:0 auto;
}
/* Three equal columns on a 40px gap, all left-aligned.
   align-items:start so the columns keep their own heights rather than
   stretching to the tallest. */
.stk-footer-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;
  align-items:start;
}
.stk-footer-logo{display:inline-block;margin:0 0 18px}
/* The specified 235px, height:auto so the file's own 153:81 ratio holds.
   No colour treatment of any kind, and none needed: the footer points at
   assets/stk_white-logo.svg, a dedicated light-on-dark asset (#fff mark with
   #e33628 accents), rather than the header's assets/logo.svg, whose #0F1E1E
   wordmark sits at about 1.22:1 against this black band. */
.stk-footer-logo img{width:235px;height:auto}
.stk-footer p{margin:0;color:var(--footer-muted)}
/* the column headings are .stk-block-title; only the space below them is
   specific to the footer */
.stk-footer .stk-block-title{margin:0 0 18px}

/* The nav list -- the header's six items, same labels and order, with
   Services carrying its own flyout below. */
.stk-footer-links{margin:0;padding:0;list-style:none;display:grid;row-gap:10px}
/* Deliberately `> li > a` and not a bare descendant selector: the Services
   flyout's own links live deeper, and .stk-footer-links a would tie with
   .stk-nav-menu a on specificity (one class, one type each) and win on source
   order -- painting white text onto the flyout's white panel. Restricting
   this to the list's own links removes the clash at the source instead of
   layering an override on top of it. */
.stk-footer-links > li > a{color:var(--white);transition:color .4s ease}
.stk-footer-links > li > a:hover,.stk-footer-links > li > a:focus-visible{color:var(--accent)}

/* ---- footer Services flyout ----
   The same components as the header -- .stk-nav-item, .stk-dropdown,
   .stk-nav-menu -- so the trigger behaviour is identical by construction:
   :hover for pointers, :focus-within for keyboards, no JavaScript. The panel
   also keeps the header's white background, 1px border, radius, shadow,
   --ink item colour and hover-to-accent, which is what makes it legible on
   black without a second set of colours to maintain.

   Only the geometry is adapted: the header drops its panel below the trigger,
   this one puts it to the RIGHT with their bottom edges flush. */
.stk-footer .stk-nav-menu{
  /* clear the header's top:100% and re-anchor to the bottom edge */
  top:auto;
  bottom:0;
  /* out to the right of the trigger, past its caret */
  left:100%;
  margin-left:12px;
  /* the header centres its panel with translateX(-50%); this one is not
     centred on anything, so the transform has to be cancelled outright --
     otherwise the panel sits half its own width to the left. This also makes
     the --dd-shift that site-nav.js writes a no-op, and that script is
     scoped to the header anyway. */
  transform:none;
}
/* The header's hover bridge is a strip above the panel, because its panel
   sits below the trigger. Here the pointer travels sideways across the 12px
   margin, so the strip moves to the panel's left edge and runs its full
   height -- without it the panel closes mid-journey. */
.stk-footer .stk-nav-menu::before{
  top:0;
  bottom:0;
  left:-12px;
  right:auto;
  width:12px;
  height:auto;
}
/* .stk-dropdown's caret is absolutely positioned against .stk-nav-item, so
   the item has to shrink-wrap the trigger. In the header it does that on its
   own (inline-flex in a flex row); here it is a grid item and would stretch
   the full column, throwing the caret to the far right of the column. */
.stk-footer .stk-nav-item{justify-self:start}
/* the caret points the way the panel opens */
.stk-footer .stk-dropdown::after{content:"\25B8"}
/* ...and so it must not flip 180deg on open the way the header's does, which
   would point it back at the trigger */
.stk-footer .stk-nav-item:hover > .stk-dropdown::after,.stk-footer .stk-nav-item:focus-within > .stk-dropdown::after{transform:translateY(-50%)}

/* The sign-up row: 60:40 on a 10px gap.

   minmax(max-content,40fr) on the button rather than minmax(0,40fr): 40% of
   this column drops below the ~116px "Sign Up" needs at around 1050px, and a
   plain fr track lets the label wrap to two lines there (measured: the button
   grows 52px -> 72px). Flooring the track at the button's own max-content
   width means it can never wrap at any width -- 60:40 holds wherever there is
   room for it, and the input yields the few pixels when there is not. It also
   re-measures itself if the real Proxima Nova is ever loaded, which a
   hard-coded breakpoint would not. */
.stk-newsletter{margin-top:18px;display:grid;grid-template-columns:minmax(0,60fr) minmax(max-content,40fr);gap:10px}
/* 20px radius to pair with the button beside it */
.stk-newsletter input{width:100%;min-width:0;padding:16px 18px;border:none;border-radius:20px;background:var(--white);color:var(--ink);font-size:1rem}
.stk-newsletter input::placeholder{color:#8A8A8A}
/* .stk-btn narrowed to fit the 40% track: the shared 34px of side padding
   leaves less room than "Sign Up" needs at 20px in a track this size. Only
   the padding and the fill are touched -- colour, radius, weight and the
   0.4s black hover still come from the shared rule. */
.stk-newsletter .stk-btn{width:100%;min-width:0;justify-content:center;padding:16px 20px}

/* ---- footer legal row ----
   The divider is this row's border-top rather than its own element: the row
   is already a shell-width block, so the border is exactly the width of the
   three columns above it, and "space above the line" / "space below the line"
   become margin-top and padding-top -- one element, no chance of the two
   drifting out of alignment.

   rgba(255,255,255,.25) rather than solid white: over #000 that paints as
   rgb(64,64,64), which reads as a separator without competing with the white
   text either side of it. Solid white at 1px is a hard rule across the whole
   shell and pulls the eye straight to it.

   36px above and below, between the footer's own 30px padding and the 40px
   column gap.

   space-between with exactly TWO flex children: the copyright sentence and
   the link group. That is what pins one to each edge without the links
   themselves being spread apart -- the pieces inside the group are held
   together by its own 12px gap, so the free space can only ever land in the
   one place between the two groups. Wrapping the links in their own element
   is the whole mechanism; with four loose children, space-between would
   scatter all four across the row.

   flex-wrap so the two groups stack rather than overflow on narrow screens.
   Once wrapped there is one item per line, space-between has nothing to
   distribute, and both lines fall back to the left edge. */
.stk-footer-legal{
  margin-top:36px;
  padding-top:36px;
  border-top:1px solid rgba(255,255,255,.25);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--footer-muted);
}
/* the right-hand group: its own flex row, so the two links and the separator
   stay 12px apart no matter how much free space the row has */
.stk-footer-legal-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* the links a step brighter than the sentence, the same split the columns
   above use, and the site's own hover: --accent over .4s */
.stk-footer-legal a{color:var(--white);transition:color .4s ease}
.stk-footer-legal a:hover,.stk-footer-legal a:focus-visible{color:var(--accent)}
/* the "|" is decoration between two links -- muted so it does not read as a
   third link, and aria-hidden in the markup so it is not announced */
.stk-footer-legal-sep{color:rgba(255,255,255,.4)}

/* ---------- header: responsive ----------
   The two columns hold their 40:60 split while the shell is wide enough for
   the nav to sit on one line. Below that the shell wraps -- logo row, then a
   full-width nav row -- which is what --header-h being measured at runtime is
   for: the bar is taller once it wraps. */
@media (max-width:1100px){
  /* static fallback for the wrapped bar, in case site-nav.js has not run.
     Must sit inside a selector -- a bare custom property in a media block is
     not valid CSS and is dropped. */
  :root{--logo-h:72px;--header-h:180px}
  .stk-header-inner{flex-wrap:wrap;justify-content:center}
  .stk-logo-col{flex:0 0 100%;max-width:100%;justify-content:center}
  .stk-nav-col{flex:0 0 100%;max-width:100%;margin-top:12px}
  .stk-nav{flex-wrap:wrap;justify-content:center;gap:10px 26px}
}
@media (max-width:640px){
  :root{--logo-h:64px;--header-pad-y:14px;--header-h:200px}
  .stk-nav > a,.stk-nav .stk-dropdown{font-size:.95rem}
  .stk-nav{gap:8px 20px}
  /* right-anchoring is inherited from the base rule; only the width comes
     down, so a 230px panel cannot outgrow a 327px shell */
  .stk-nav-menu{min-width:200px}
}

/* ---------- solutions: responsive ----------
   Measured: at the 1246px shell each card is a 379px track holding 346px of
   content, so the square has ~33px of slack. Just under 1200px the "Paid
   Advertising and Promotion" heading takes a third line and the content
   outgrows the square -- so the third column goes at 1200px, while the square
   is still exact, rather than after it has already broken.

   The square is dropped along with the third column instead of being carried
   down: a half-shell card would be a ~560px square holding ~330px of content,
   which is a lot of empty box. With aspect-ratio off, the grid-auto-rows:1fr
   on the base rule takes over and sizes every card to the tallest one, so the
   six stay equal-sized either way -- by the ratio above 1200px and by the row
   below it. (The two cannot be combined: aspect-ratio wins over both
   align-self:stretch and height:100%, and in each case Chrome then drives the
   card's WIDTH off the stretched height and it overflows its track.) */
@media (max-width:1200px){
  .stk-solutions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stk-solution{aspect-ratio:auto}
  /* the checkerboard restated for two columns: pink is now 1,4,5,8..., since
     plain odd/even here would paint whole columns rather than alternate.
     :nth-child(n) is the reset -- it matches all six at the same specificity
     as the rule below it, so which cards are pink is decided in one place. */
  .stk-solution:nth-child(n){background:#F8F8F8}
  .stk-solution:nth-child(4n+1),.stk-solution:nth-child(4n){background:#FCECEA}
}
@media (max-width:640px){
  .stk-solutions-grid{grid-template-columns:minmax(0,1fr)}
  /* 40px of padding on a ~330px card leaves too little for the 32px heading */
  .stk-solution{padding:32px}
  /* one column alternates correctly in document order again */
  .stk-solution:nth-child(n){background:#F8F8F8}
  .stk-solution:nth-child(odd){background:#FCECEA}
}

/* ---------- why choose us: responsive ----------
   The columns stack at 980px: below that the copy column is under ~460px and
   the 46px heading starts breaking badly against the photo beside it.

   The row gap has to clear the badge. It hangs half its height (48px at
   280px wide) below the photo, and once stacked the copy sits directly under
   that, so a 14px gutter would put the copy behind it. */
@media (max-width:980px){
  .stk-why-inner{grid-template-columns:minmax(0,1fr);gap:72px}
  /* the photo goes full-width up to its natural 463px and centres, so the
     stacked column does not blow it up past its own resolution */
  .stk-why-photo{width:100%;max-width:463px;margin:0 auto}
  /* centred photo, so the badge centres on the column too */
  .stk-why-award{left:50%}
  .stk-why-copy{align-self:auto}
}
@media (max-width:640px){
  /* 280px would overflow the shell at a 320px viewport (272px of it) */
  .stk-why-award{--award-w:200px}
  .stk-why{--why-icon:48px;--why-row-gap:26px}
}

/* ---------- testimonials: responsive ----------
   Stacks at 980px, the same point as the why-choose-us band above: below that
   the 60% carousel column is under 560px and the 40% placeholder is a sliver. */
@media (max-width:980px){
  /* only the tracks change -- the 40px gap carries over as the row gap once
     stacked, rather than introducing a second, arbitrary number */
  .stk-testimonials-cards{grid-template-columns:minmax(0,1fr)}
  /* Stacked, the placeholder is alone in its own row with nothing to stretch
     against, so it would collapse to 0 and vanish. It needs a height of its
     own only here. */
  .stk-testimonials-placeholder{min-height:220px}
}

/* ---------- footer: responsive ----------
   Stacks at 980px, the same point as the why-choose-us and testimonials
   bands: below that each of the three columns is under 285px, which is too
   narrow for the 32px headings. The sign-up row needs no breakpoint of its
   own -- see the max-content floor on its button track. */
@media (max-width:980px){
  .stk-footer-cols{grid-template-columns:minmax(0,1fr);gap:32px}
}
/* Below the mobile breakpoint the Services flyout stops flying sideways and
   drops below its trigger, i.e. back to the header's geometry.

   Measured reason: at a 320px viewport the panel starts 113px in (gutter +
   trigger + margin) and is 207px wide, which puts its right edge 0.81px past
   the viewport -- and because it keeps layout while closed
   (visibility:hidden, not display:none) that lands as a real 1px of document
   scroll width. Dropping it below the trigger also just reads better in a
   single-column footer, where there is no column beside it to fly into. */
@media (max-width:640px){
  .stk-footer .stk-nav-menu{
    top:100%;
    bottom:auto;
    left:0;
    margin-left:0;
    /* never wider than the shell it sits in */
    max-width:calc(100vw - var(--shell-gutter) * 2);
  }
  /* the pointer now travels downward again, so the bridge goes back on top */
  .stk-footer .stk-nav-menu::before{top:-8px;bottom:auto;left:0;right:0;width:auto;height:8px}
  /* and the caret points down, like the header's */
  .stk-footer .stk-dropdown::after{content:"\25BE"}
}

/* the caret rotation, the panel fade, the slide animation and the dot's
   colour fade are all decorative. The carousel still works with the
   transition off -- it just cuts between slides instead of sliding. */
@media (prefers-reduced-motion:reduce){
  .stk-nav-menu,.stk-dropdown::after,.stk-nav > a,.stk-nav .stk-dropdown{transition:none}
  .stk-carousel-track,.stk-dot::before{transition:none}
}

/* ==========================================================================
   SERVICE PAGES (shared across all six: SEO, Lead Generation, Call Center,
   Website Buildout, Data Analytics, Custom Tech Buildouts)

   The live site built each of these six as its own bespoke Elementor layout
   -- different colour themes, different section order -- not one template
   with swapped copy. Rather than write six one-off stylesheets, these are
   the shared building blocks each page's own inline <style> assembles and
   retints (via the --svc-* custom properties) to match its live page.
   ========================================================================== */

/* ---- hero ----
   Two variants, matching what the six pages actually do:
   --contained: media sits in the grid column, normal flow (SEO's boxed
     illustration on a light band).
   --bleed: media is an absolutely-positioned layer that reaches the
     viewport's right edge with no gutter (Call Center's full-bleed photo).
     This is the "no side whitespace" case -- it must NOT be inset like the
     rest of the page's shell-bound sections. */
.stk-svc-hero{position:relative;overflow:hidden;background:var(--svc-bg,#fff);color:var(--svc-ink,var(--ink))}
.stk-svc-hero-inner{
  position:relative;z-index:1;
  width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));
  margin:0 auto;padding:90px 0;
  display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:40px;align-items:center;
}
.stk-svc-eyebrow{font-family:var(--font);font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--svc-accent,var(--accent));margin:0 0 10px}
.stk-svc-title{font-family:var(--font);font-size:46px;font-weight:800;line-height:1.15em;margin:0 0 18px}
.stk-svc-title em,.stk-svc-title span{color:var(--svc-accent,var(--accent));font-style:normal}
.stk-svc-sub{font-family:var(--font);font-size:16px;line-height:1.6em;opacity:.85;margin:0 0 28px;max-width:46ch}
.stk-svc-badges{display:flex;flex-wrap:wrap;gap:20px;margin-top:22px;font-family:var(--font);font-size:14px;font-weight:600}
.stk-svc-badges span{display:inline-flex;align-items:center;gap:8px}
.stk-svc-hero-media img{display:block;width:100%;height:auto}
/* --bleed: the media is a direct child of the SECTION, not of
   .stk-svc-hero-inner -- .stk-svc-hero-inner is shell-width-capped
   (max var(--shell-w)), so a media child positioned inside it can only ever
   bleed to that 1246px edge, not the true viewport edge. min-height on the
   section is what makes top/right/bottom resolve at all: percentage/inset
   positioning against an ancestor whose height is CSS "auto" (which a
   content-sized section is) computes to auto too, per spec -- the image
   then silently falls back to its intrinsic aspect ratio and can render far
   short of the band, or effectively vanish on a very wide/short source
   image. Confirmed against a real Chromium render before shipping this. */
.stk-svc-hero--bleed{min-height:560px}
.stk-svc-hero--bleed .stk-svc-hero-inner{grid-template-columns:minmax(0,1fr)}
.stk-svc-hero--bleed .stk-svc-hero-copy{max-width:48%}
.stk-svc-hero--bleed .stk-svc-hero-media{position:absolute;top:0;right:0;bottom:0;width:64%}
/* object-position:right, not left/center -- every one of these source
   images (Playwright-captured as the live page's own hero background-image)
   puts its subject toward the right two-thirds and its left edge is either
   plain background fill or a transparent diagonal cutout. "left" was
   centring the crop on that empty region and pushing the actual laptop/
   photo subject half off the visible box. */
.stk-svc-hero--bleed .stk-svc-hero-media img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus,right center)}
@media (max-width:900px){
  .stk-svc-hero-inner{grid-template-columns:minmax(0,1fr);padding:56px 0}
  .stk-svc-hero--bleed{min-height:0}
  .stk-svc-hero--bleed .stk-svc-hero-copy{max-width:none}
  .stk-svc-hero--bleed .stk-svc-hero-media{position:relative;top:auto;right:auto;bottom:auto;width:auto;height:clamp(260px,78vw,360px);margin:0}
}

/* ---- icon grid: "Our Services" / "Our SEO Services" etc. ----
   Eyebrow (optional) + a heading flanked by two rule lines, then 4 cards. */
.stk-svc-grid-section{padding:var(--section-gap) 0;background:var(--svc-grid-bg,#fff)}
.stk-svc-grid-inner{width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto}
.stk-svc-grid-head{display:flex;align-items:center;justify-content:center;gap:20px;margin:0 0 46px;text-align:center}
.stk-svc-grid-head::before,.stk-svc-grid-head::after{content:'';flex:1 1 auto;max-width:220px;height:1px;background:var(--border)}
.stk-svc-grid-head h2{font-family:var(--font);font-size:28px;font-weight:800;margin:0;white-space:nowrap}
.stk-svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.stk-svc-card{background:var(--svc-card-bg,#fff);border:1px solid var(--border);border-radius:16px;padding:36px 24px;text-align:center;box-shadow:0 2px 14px rgba(0,0,0,.04)}
.stk-svc-card img{width:64px;height:64px;object-fit:contain;margin:0 auto 20px}
.stk-svc-card h3{font-family:var(--font);font-size:18px;font-weight:800;margin:0 0 10px;color:var(--svc-card-title,var(--ink))}
.stk-svc-card p{font-family:var(--font);font-size:14px;line-height:1.55em;color:#6b6b6b;margin:0}
.stk-svc-card-rule{width:36px;height:3px;background:var(--svc-accent,var(--accent));margin:18px auto 0;border-radius:2px}
@media (max-width:900px){.stk-svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.stk-svc-grid{grid-template-columns:minmax(0,1fr)}.stk-svc-grid-head h2{white-space:normal}}

/* Lead Generation's mixed grid: 6 plain icon cards + 2 wide horizontal
   cards stacked in the space of the last 2 columns (matches the live page's
   irregular row-2 layout). */
.stk-svc-wide-stack{grid-column:span 2;display:grid;gap:20px}
@media (max-width:900px){.stk-svc-wide-stack{grid-column:span 2}}
@media (max-width:560px){.stk-svc-wide-stack{grid-column:span 1}}
.stk-svc-card--wide{display:flex;align-items:flex-start;gap:16px;text-align:left;padding:22px 24px}
.stk-svc-card--wide img{width:40px;height:40px;margin:0;flex:0 0 40px}
.stk-svc-card--wide h3{margin:0 0 6px}

/* dark band: image + heading/checklist, two columns (Website Buildout's
   "Why Choose Us" section) */
.stk-svc-dark-split{padding:var(--section-gap) 0;background:#0d0d0d;color:#fff}
.stk-svc-dark-split-inner{width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto;display:grid;grid-template-columns:minmax(0,50fr) minmax(0,50fr);gap:48px;align-items:center}
.stk-svc-dark-split img{width:100%;height:auto;display:block}
.stk-svc-dark-split h2{font-family:var(--font);font-size:32px;font-weight:800;margin:0 0 14px}
.stk-svc-dark-split > div > p{font-family:var(--font);font-size:15px;color:#c7c7c7;margin:0 0 22px}
.stk-svc-dark-split .stk-svc-checklist li{color:#fff}
@media (max-width:900px){.stk-svc-dark-split-inner{grid-template-columns:minmax(0,1fr)}}

/* ---- CTA with illustration (SEO's "Ready to Elevate" band) ---- */
.stk-svc-cta-illus{padding:var(--section-gap) 0;background:var(--svc-cta-bg,#f8f8f8)}
.stk-svc-cta-illus-inner{width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto;display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:40px;align-items:center}
.stk-svc-cta-illus h2{font-family:var(--font);font-size:32px;font-weight:800;margin:0 0 12px}
.stk-svc-cta-illus p{font-family:var(--font);font-size:15px;color:#5a5a5a;margin:0 0 24px}
.stk-svc-cta-illus img{width:100%;height:auto;display:block}
@media (max-width:900px){.stk-svc-cta-illus-inner{grid-template-columns:minmax(0,1fr)}.stk-svc-cta-illus img{order:-1}}

/* ---- process: numbered cards, 2x2 with connecting arrows (SEO variant) ---- */
.stk-svc-process{padding:var(--section-gap) 0;background:#fff}
.stk-svc-process-inner{width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto;display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:40px;align-items:start}
.stk-svc-process-head{display:flex;align-items:center;gap:20px;margin:0 0 30px}
.stk-svc-process-head::after{content:'';flex:1 1 auto;height:1px;background:var(--border)}
.stk-svc-process-head h2{font-family:var(--font);font-size:22px;font-weight:800;margin:0;white-space:nowrap}
.stk-svc-process-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;position:relative}
.stk-svc-process-card{border:1px solid var(--border);border-radius:14px;padding:20px 22px;box-shadow:0 2px 10px rgba(0,0,0,.03)}
.stk-svc-process-card .num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ink);font-family:var(--font);font-weight:700;font-size:14px;margin-bottom:10px}
.stk-svc-process-card h3,.stk-svc-process-card h4{font-family:var(--font);font-size:16px;font-weight:800;margin:0 0 6px}
.stk-svc-process-card p{font-family:var(--font);font-size:13px;color:#6b6b6b;margin:0;line-height:1.5em}
.stk-svc-process-formbox{border:2px solid var(--border);border-radius:20px;min-height:520px;overflow:hidden}
/* the iframe heights below are only the fallback: assets/site-inquiry.js sets the real
   height from the form itself, so the form always shows whole and never scrolls */
.stk-svc-process-formbox iframe{width:100%;height:100%;min-height:520px;border:0;display:block}
@media (max-width:900px){.stk-svc-process-inner{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.stk-svc-process-cards{grid-template-columns:minmax(0,1fr)}}

/* ---- process: connected numbered dots, one row (Call Center variant) ---- */
/* --dot is the size of each step's badge. The badge artwork already carries its own ring,
   step number and glyph, so it IS the circle -- it was being squeezed to 28px inside a second
   CSS ring, which left the number and glyph illegible. Everything that has to line up with
   it (the dashed connector) reads this one variable. */
.stk-svc-dots{--dot:96px;padding:64px 0;background:var(--svc-dots-bg,#0d0d0d);color:#fff;text-align:center}
.stk-svc-dots h2{font-family:var(--font);font-size:24px;font-weight:800;margin:0 0 40px}
.stk-svc-dots-row{width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.stk-svc-dot-step{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:14px;position:relative}
.stk-svc-dot-step::before{content:'';position:absolute;top:calc(var(--dot) / 2);left:calc(-50% + var(--dot) / 2);width:calc(100% - var(--dot));height:0;border-top:2px dashed var(--svc-accent,var(--accent))}
.stk-svc-dot-step:first-child::before{display:none}
.stk-svc-dot-num{width:var(--dot);height:var(--dot);display:flex;align-items:center;justify-content:center;font-weight:700;position:relative;z-index:1}
.stk-svc-dot-num img{width:100%;height:100%;object-fit:contain}
.stk-svc-dot-step h4{font-family:var(--font);font-size:15px;font-weight:700;margin:0}
.stk-svc-dot-step p{font-family:var(--font);font-size:12.5px;color:#bdbdbd;margin:0;max-width:22ch}
@media (max-width:760px){.stk-svc-dots{--dot:88px}.stk-svc-dots-row{flex-direction:column;align-items:stretch;gap:32px}.stk-svc-dot-step::before{display:none}}

/* ---- results: copy + checklist left, form box right ---- */
.stk-svc-results{padding:var(--section-gap) 0;background:#fff}
.stk-svc-results-inner{width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto;display:grid;grid-template-columns:minmax(0,50fr) minmax(0,50fr);gap:40px;align-items:start}
.stk-svc-results h2{font-family:var(--font);font-size:32px;font-weight:800;line-height:1.25em;margin:0 0 14px}
.stk-svc-results p{font-family:var(--font);font-size:15px;color:#5a5a5a;margin:0 0 22px}
.stk-svc-checklist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.stk-svc-checklist li{display:flex;align-items:center;gap:10px;font-family:var(--font);font-size:14.5px;color:var(--ink)}
.stk-svc-checklist li::before{content:'\2713';display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--svc-accent,var(--accent));color:#fff;font-size:12px;flex:0 0 20px}
.stk-svc-results-formbox{border:2px solid var(--border);border-radius:20px;min-height:520px;overflow:hidden}
.stk-svc-results-formbox iframe{width:100%;height:100%;min-height:520px;border:0;display:block}
@media (max-width:900px){.stk-svc-results-inner{grid-template-columns:minmax(0,1fr)}}

/* Data Analytics' icon rows under its chart image (Revenue Trends /
   Performance KPIs / Real-Time Reports) */
.stk-svc-icon-rows{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:20px}
.stk-svc-icon-row{display:flex;align-items:flex-start;gap:16px;padding-top:20px;border-top:1px solid var(--border)}
.stk-svc-icon-rows li:first-child .stk-svc-icon-row{padding-top:0;border-top:0}
.stk-svc-icon-row img{width:44px;height:44px;flex:0 0 44px}
.stk-svc-icon-row h4{font-family:var(--font);font-size:17px;font-weight:800;margin:0 0 4px}
.stk-svc-icon-row p{font-family:var(--font);font-size:14px;color:#6b6b6b;margin:0}

/* Custom Tech Buildouts' "How We Build" bar: a dark rounded band, steps in
   a single row separated by arrows */
.stk-svc-steps-bar{background:#0d0d0d;border-radius:20px;padding:32px 40px;text-align:center;width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto}
.stk-svc-steps-bar h2{font-family:var(--font);font-size:24px;font-weight:800;color:#fff;margin:0 0 22px}
.stk-svc-steps-row{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.stk-svc-steps-row span.step{font-family:var(--font);font-size:16px;font-weight:700;color:#fff;letter-spacing:.03em}
.stk-svc-steps-row span.arrow{color:var(--svc-accent,var(--accent));font-weight:700}

/* ==========================================================================
   PAGE HEADER (About Us, Contact Us: banner photo + title/breadcrumb card)
   ========================================================================== */
.stk-page-header{position:relative}
.stk-page-header-photo{width:100%;height:320px;object-fit:cover;display:block}
.stk-page-header-card{
  position:absolute;left:0;bottom:-1px;
  margin-left:max(var(--shell-gutter),calc((100% - var(--shell-w)) / 2));
  background:#fff;padding:24px 40px;border-radius:12px 12px 0 0;
  box-shadow:0 -2px 14px rgba(0,0,0,.06);
}
.stk-page-header-card h1{font-family:var(--font);font-size:28px;font-weight:800;margin:0 0 6px}
.stk-page-header-crumbs{font-family:var(--font);font-size:13px;color:#8a8a8a}
.stk-page-header-crumbs a{color:#8a8a8a;text-decoration:none}
.stk-page-header-crumbs .current{color:var(--accent)}
@media (max-width:640px){
  .stk-page-header-photo{height:200px}
  .stk-page-header-card{padding:18px 22px}
  .stk-page-header-card h1{font-size:22px}
}

/* ==========================================================================
   FAQ ACCORDION (About Us, Contact Us -- identical question set)
   ========================================================================== */
.stk-faq{padding:var(--section-gap) 0}
.stk-faq-inner{width:min(900px,calc(100% - var(--shell-gutter) * 2));margin:0 auto;text-align:center}
.stk-faq-list{margin-top:36px;display:grid;gap:14px;text-align:left}
.stk-faq-item{border-radius:14px;background:#f6f6f6;overflow:hidden}
.stk-faq-item.is-open{background:#FCECEA}
.stk-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:0;padding:20px 24px;font-family:var(--font);font-size:15.5px;font-weight:700;text-align:left;cursor:pointer;color:var(--ink)}
.stk-faq-item.is-open .stk-faq-q{color:var(--accent)}
.stk-faq-q .icon{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:14px;transition:transform .2s ease}
.stk-faq-item.is-open .stk-faq-q .icon{transform:rotate(45deg)}
/* visibility is what takes a closed answer out of the accessibility tree --
   max-height alone only clips it, so a screen reader read every answer.
   It flips after the slide on the way shut and before it on the way open. */
.stk-faq-a{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .25s ease,visibility 0s linear .25s}
/* 600px, was 200px: a four-or-five-line answer at phone width is already past
   200px once the padding is counted, and overflow:hidden clipped it silently.
   It is a ceiling for the transition, not a height -- the answer still only
   takes the room it needs. */
.stk-faq-item.is-open .stk-faq-a{max-height:600px;visibility:visible;transition:max-height .25s ease,visibility 0s}
.stk-faq-a p{margin:0;padding:0 24px 20px;font-family:var(--font);font-size:14.5px;line-height:1.6em;color:#5a5a5a}

/* ==========================================================================
   ABOUT US: who-we-are, services grid (reuses .stk-solution cards), core
   strengths
   ========================================================================== */
.stk-about-who{padding:var(--section-gap) 0}
.stk-about-who-inner{width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto;display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:56px;align-items:center}
.stk-about-who-media{background:#FCECEA;border-radius:24px;padding:24px}
.stk-about-who-media img{width:100%;height:auto;display:block;border-radius:16px}
.stk-about-who h2{font-family:var(--font);font-size:36px;font-weight:800;margin:0 0 16px}
.stk-about-who p{font-family:var(--font);font-size:15px;line-height:1.7em;color:#5a5a5a;margin:0 0 24px}
@media (max-width:900px){.stk-about-who-inner{grid-template-columns:minmax(0,1fr)}}

.stk-about-services{padding:var(--section-gap) 0;text-align:center}
.stk-about-services-inner{width:min(900px,calc(100% - var(--shell-gutter) * 2));margin:0 auto}
/* Combined selector (not just .stk-about-services-grid) so this beats
   .stk-solutions-grid's own responsive rules at every breakpoint, including
   inside its media queries -- two classes outrank one regardless of source
   order. Without this, .stk-solutions-grid's mobile override lost the
   cascade to this rule and forced 2 columns (and overflow) on a 390px
   screen. */
.stk-about-services-grid.stk-solutions-grid{margin-top:40px;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;text-align:left}
@media (max-width:640px){
  .stk-about-services-grid.stk-solutions-grid{grid-template-columns:minmax(0,1fr)}
}

.stk-about-strengths{padding:var(--section-gap) 0;background:#F8F8F8}
.stk-about-strengths-inner{width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto;display:grid;grid-template-columns:minmax(0,50fr) minmax(0,50fr);gap:56px;align-items:center}
.stk-about-strengths h2{font-family:var(--font);font-size:36px;font-weight:800;margin:0 0 16px}
.stk-about-strengths > div > p{font-family:var(--font);font-size:15px;line-height:1.7em;color:#5a5a5a;margin:0 0 26px}
.stk-strengths-stats{display:flex;gap:36px}
.stk-strengths-stat svg{margin-bottom:8px}
.stk-strengths-stat strong{display:block;font-family:var(--font);font-size:26px;font-weight:800}
.stk-strengths-stat span{font-family:var(--font);font-size:13px;color:#6b6b6b}
.stk-about-strengths-media{position:relative;border-radius:20px;overflow:hidden}
.stk-about-strengths-media img{width:100%;height:auto;display:block}
@media (max-width:900px){.stk-about-strengths-inner{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   PARTNERS PAGE
   ========================================================================== */
.stk-partners-page{padding:64px 0 var(--section-gap)}
.stk-partners-page-inner{width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto}
.stk-partners-page-head{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:40px;align-items:start;padding-bottom:36px;border-bottom:1px solid var(--border)}
.stk-partners-page-head h1{font-family:var(--font);font-size:40px;font-weight:800;margin:8px 0 0}
.stk-partners-page-head h1 span{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:6px}
.stk-partners-page-sub{font-family:var(--font);font-size:15px;color:#5a5a5a;margin:0 0 20px}
.stk-pt-mini-stats{display:flex;gap:28px;flex-wrap:wrap}
.stk-pt-mini-stat{display:flex;align-items:center;gap:12px}
/* The source icon images already carry their own circle (a generated
   asset, not a plain glyph), so this is just a sizing box -- no border/
   background of its own, or it doubles up as a ring-around-a-ring. */
.stk-pt-mini-stat .ico{width:44px;height:44px;flex:0 0 44px;display:flex;align-items:center;justify-content:center}
.stk-pt-mini-stat .ico img{width:100%;height:100%}
.stk-pt-mini-stat strong{display:block;font-family:var(--font);font-size:15px;font-weight:800}
.stk-pt-mini-stat span{font-family:var(--font);font-size:12.5px;color:#8a8a8a}
.stk-partners-page-body{display:grid;grid-template-columns:minmax(0,26fr) minmax(0,74fr);gap:48px;margin-top:44px}
.stk-pt-sidebar-stat{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--border)}
.stk-pt-sidebar-stat img{width:44px;height:44px;flex:0 0 44px}
.stk-pt-sidebar-stat strong{display:block;font-family:var(--font);font-size:24px;font-weight:800}
.stk-pt-sidebar-stat span{font-family:var(--font);font-size:13px;color:#6b6b6b}
.stk-pt-sidebar-cta{margin-top:24px}
.stk-pt-sidebar-cta p{font-family:var(--font);font-size:14px;font-weight:700;margin:0 0 12px}
.stk-pt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.stk-pt-card{border-radius:16px;overflow:hidden;border:1px solid var(--border);display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.stk-pt-card:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.12)}
/* Two layers: the real project photo as the card's own background, and the
   client's logo -- a transparent PNG -- as a contained foreground image, so
   the photo shows through around the mark. object-fit:contain (not cover)
   is what keeps the logo legible at its own aspect ratio instead of being
   cropped/blown up to fill the box. */
.stk-pt-card-photo{position:relative;height:180px;background-size:cover;background-position:center}
.stk-pt-card-photo img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain;display:block}
.stk-pt-card-tag{position:absolute;left:14px;bottom:14px;background:#0d0d0d;color:#fff;font-family:var(--font);font-size:12px;font-weight:700;padding:6px 12px;border-radius:6px;z-index:1}
.stk-pt-card-body{padding:20px;flex:1;display:flex;flex-direction:column}
.stk-pt-card-body h3{font-family:var(--font);font-size:18px;font-weight:800;margin:0 0 8px}
.stk-pt-card-body p{font-family:var(--font);font-size:13.5px;line-height:1.55em;color:#6b6b6b;margin:0;flex:1}
.stk-pt-visit{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;text-decoration:none;font-family:var(--font);font-weight:700;font-size:14px;padding:14px;border-radius:0 0 14px 14px;margin:18px -20px -20px;transition:background-color .2s ease}
.stk-pt-visit:hover{background:#b8281c}
@media (max-width:980px){.stk-partners-page-head{grid-template-columns:minmax(0,1fr)}.stk-partners-page-body{grid-template-columns:minmax(0,1fr)}.stk-pt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.stk-pt-grid{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   SERVICES HUB (services.html)
   ========================================================================== */
.stk-svcs-hero{position:relative;background:#f2f2f2}
.stk-svcs-hero img{width:100%;height:420px;object-fit:cover;display:block}
.stk-svcs-hero-copy{position:absolute;left:0;top:0;height:100%;display:flex;flex-direction:column;justify-content:center;width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto;right:0}
.stk-svcs-hero-copy h1{font-family:var(--font);font-size:44px;font-weight:800;line-height:1.15em;margin:8px 0 0;max-width:9ch}
.stk-svcs-hero-copy h1 span{color:var(--accent)}
.stk-svcs-grid-section{padding:var(--section-gap) 0}
.stk-svcs-grid-inner{width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.stk-svcs-card{border:1px solid var(--border);border-radius:16px;padding:32px;box-shadow:0 2px 14px rgba(0,0,0,.04)}
.stk-svcs-card img{width:64px;height:64px;border-radius:14px;margin:0 0 20px}
.stk-svcs-card h3{font-family:var(--font);font-size:22px;font-weight:800;margin:0 0 10px}
.stk-svcs-card p{font-family:var(--font);font-size:14px;line-height:1.55em;color:#6b6b6b;margin:0 0 18px}
.stk-svcs-card ul{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--border);padding-top:18px;display:grid;gap:8px}
.stk-svcs-card li{font-family:var(--font);font-size:13.5px;color:var(--ink);padding-left:22px;position:relative}
.stk-svcs-card li::before{content:'\2713';position:absolute;left:0;color:var(--accent);font-weight:700}
@media (max-width:980px){.stk-svcs-grid-inner{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.stk-svcs-grid-inner{grid-template-columns:minmax(0,1fr)}.stk-svcs-hero-copy h1{max-width:none;font-size:32px}}

/* ==========================================================================
   SERVICE DETAIL (generic template page every home-page solution card links to)
   ========================================================================== */
.stk-svcdetail-hero{padding:var(--section-gap) 0}
.stk-svcdetail-hero-inner{width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto;display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:56px;align-items:center}
.stk-svcdetail-hero-media{background:#FCECEA;border-radius:24px;padding:24px}
.stk-svcdetail-hero-media img{width:100%;height:auto;display:block;border-radius:16px}
.stk-svcdetail-hero h1{font-family:var(--font);font-size:36px;font-weight:800;margin:0 0 16px}
.stk-svcdetail-hero p{font-family:var(--font);font-size:15px;line-height:1.7em;color:#5a5a5a;margin:0 0 24px}
.stk-svcdetail-overview{padding:0 0 var(--section-gap)}
.stk-svcdetail-overview-inner{width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto}
.stk-svcdetail-overview h2{font-family:var(--font);font-size:20px;font-weight:800;margin:0 0 12px}
.stk-svcdetail-overview p{font-family:var(--font);font-size:14.5px;line-height:1.7em;color:#5a5a5a;margin:0 0 32px;max-width:90ch}
.stk-svcdetail-body{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:40px;align-items:start}
.stk-svcdetail-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.stk-svcdetail-list li{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);font-family:var(--font);font-size:14px;line-height:1.5em;color:var(--ink)}
.stk-svcdetail-list li .num{flex:0 0 20px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;margin-top:1px}
.stk-svcdetail-body img{width:100%;height:auto;border-radius:16px;display:block}
.stk-svcdetail-other{padding:0 0 var(--section-gap)}
.stk-svcdetail-other-inner{width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto}
.stk-svcdetail-other h2{font-family:var(--font);font-size:22px;font-weight:800;margin:0 0 28px}
.stk-svcdetail-other-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:900px){.stk-svcdetail-hero-inner{grid-template-columns:minmax(0,1fr)}.stk-svcdetail-body{grid-template-columns:minmax(0,1fr)}.stk-svcdetail-other-grid{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   BLOG LISTING (blog.html)
   ========================================================================== */
.stk-blog-list{padding:64px 0 var(--section-gap)}
.stk-blog-list-inner{width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto;text-align:center}
.stk-blog-list h2{font-family:var(--font);font-size:36px;font-weight:800;line-height:1.3em;margin:12px 0 0}
.stk-blog-list h2 span{color:var(--accent)}
.stk-blog-grid{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;text-align:left}
.stk-blog-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 14px rgba(0,0,0,.05)}
.stk-blog-card img{width:100%;height:190px;object-fit:cover;display:block}
.stk-blog-card-body{padding:20px 22px 24px}
.stk-blog-cat{font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);display:block;margin:0 0 8px}
.stk-blog-card h3{font-family:var(--font);font-size:18px;font-weight:800;line-height:1.35em;margin:0 0 10px}
.stk-blog-card h3 a{color:inherit;text-decoration:none}
.stk-blog-date{font-family:var(--font);font-size:13px;color:#8a8a8a}
@media (max-width:980px){.stk-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.stk-blog-grid{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   BLOG POST
   ========================================================================== */
.stk-post-header{padding:64px 0 32px;background:#F5F5F5}
.stk-post-header-inner{width:min(900px,calc(100% - var(--shell-gutter) * 2));margin:0 auto}
.stk-post-header .stk-eyebrow{margin:0 0 10px}
.stk-post-header h1{font-family:var(--font);font-size:34px;font-weight:800;line-height:1.3em;margin:0 0 20px}
.stk-post-meta{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid var(--border);font-family:var(--font);font-size:13.5px;color:#6b6b6b}
.stk-post-body-section{padding:var(--section-gap) 0}
.stk-post-body-inner{width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto;display:grid;grid-template-columns:minmax(0,72fr) minmax(0,28fr);gap:48px;align-items:start}
.stk-post-featured{width:100%;height:auto;border-radius:16px;display:block;margin:0 0 14px}
.stk-post-caption{font-family:var(--font);font-size:14px;color:#6b6b6b;margin:0 0 32px;line-height:1.6em}
.stk-post-content h3{font-family:var(--font);font-size:22px;font-weight:800;margin:32px 0 14px}
.stk-post-content p{font-family:var(--font);font-size:15px;line-height:1.75em;color:var(--ink);margin:0 0 16px}
.stk-post-content ul{margin:0 0 16px;padding-left:22px;display:grid;gap:8px}
.stk-post-content li{font-family:var(--font);font-size:15px;line-height:1.6em;color:var(--ink)}
.stk-post-sidebar{background:#F8F8F8;border-radius:16px;padding:28px}
.stk-post-sidebar h2{font-family:var(--font);font-size:18px;font-weight:800;margin:0 0 16px}
.stk-post-sidebar ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.stk-post-sidebar a{font-family:var(--font);font-size:14px;color:var(--ink);text-decoration:none}
.stk-post-sidebar a:hover{color:var(--accent)}
.stk-post-share{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:28px;margin-top:28px;border-top:1px solid var(--border)}
.stk-post-share p{font-family:var(--font);font-size:15px;font-weight:700;margin:0}
.stk-post-share-links{display:flex;gap:10px;flex-wrap:wrap}
.stk-post-share-links a{background:#B9B3F5;color:#fff;font-family:var(--font);font-size:13px;font-weight:600;padding:8px 16px;border-radius:20px;text-decoration:none}
.stk-post-author{margin-top:24px;background:#FCECEA;border-radius:16px;padding:22px 26px;display:flex;align-items:flex-start;gap:18px}
.stk-post-author img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:0 0 64px}
.stk-post-author h3{font-family:var(--font);font-size:16px;font-weight:800;margin:0 0 6px}
.stk-post-author p{font-family:var(--font);font-size:13.5px;line-height:1.55em;color:#5a5a5a;margin:0}
.stk-post-related{padding:var(--section-gap) 0;background:#F8F8F8}
.stk-post-related-inner{width:min(var(--shell-w),calc(100% - var(--shell-gutter) * 2));margin:0 auto}
.stk-post-related-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 32px}
.stk-post-related-head h2{font-family:var(--font);font-size:28px;font-weight:800;margin:0}
@media (max-width:900px){.stk-post-body-inner{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   LEGAL PAGES (Privacy Policy, Terms and Condition)
   ========================================================================== */
.stk-legal{padding:64px 0 var(--section-gap)}
.stk-legal-inner{width:min(860px,calc(100% - var(--shell-gutter) * 2));margin:0 auto}
.stk-legal-title{font-family:var(--font);font-size:42px;font-weight:800;text-align:center;margin:0 0 20px}
.stk-legal-rule{width:340px;max-width:100%;height:2px;background:var(--accent);margin:0 auto 40px}
.stk-legal-intro{text-align:center;margin:0 0 40px}
.stk-legal-intro h2{font-family:var(--font);font-size:22px;font-weight:800;margin:0 0 16px}
.stk-legal-intro ul{list-style:none;margin:0 auto;padding:0;display:inline-block;text-align:left}
.stk-legal-intro li{font-family:var(--font);font-size:15px;color:var(--ink);margin:0 0 8px;padding-left:26px;position:relative}
.stk-legal-intro li::before{content:'\2713';position:absolute;left:0;color:var(--accent);font-weight:700}
.stk-legal-divider{border:0;border-top:1px solid var(--border);margin:0 0 40px}
.stk-legal-section{margin:0 0 28px}
.stk-legal-section + .stk-legal-section{padding-top:28px;border-top:1px solid var(--border)}
.stk-legal-section h2{font-family:var(--font);font-size:24px;font-weight:800;margin:0 0 14px}
.stk-legal-section p{font-family:var(--font);font-size:15px;line-height:1.7em;color:var(--ink);margin:0 0 14px}
.stk-legal-section a{color:var(--accent)}
.stk-legal-cta{display:flex;align-items:center;gap:20px;margin-top:40px;flex-wrap:wrap}
.stk-legal-cta p{font-family:var(--font);font-size:14px;color:#5a5a5a;margin:0}
@media (max-width:640px){.stk-legal-title{font-size:32px}}

/* ==========================================================================
   STICKY MOBILE CTA (in-store-lead-generation.html)
   One .stk-btn pinned to the bottom of the viewport on phones, so the page's
   main action is always a thumb away. Hidden everywhere above the site's
   mobile breakpoint (640px -- the same one the header, solutions, why and
   footer use), where the page's own buttons are already in reach.

   Markup: <div class="stk-sticky-cta"><a class="stk-btn">...</a></div> as a
   direct child of <body>, plus class="has-sticky-cta" on <body> so the footer
   leaves room for it. The button is .stk-btn verbatim; this only positions it.
   ========================================================================== */
.stk-sticky-cta{display:none}
@media (max-width:640px){
  .stk-sticky-cta{
    display:block;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    /* under the header (100) so its dropdown always wins */
    z-index:90;
    padding:12px var(--shell-gutter) calc(12px + env(safe-area-inset-bottom,0px));
    background:var(--white);
    /* the header's shadow, flipped to fall upward */
    box-shadow:0 -2px 21px 0 rgba(0,0,0,.19);
    transform:translateY(0);
    /* .4s, the site's transition timing; visibility flips after the slide on
       the way out so a hidden bar cannot be tabbed to */
    transition:transform .4s ease,visibility 0s linear 0s;
  }
  .stk-sticky-cta.is-hidden{
    transform:translateY(100%);
    visibility:hidden;
    transition:transform .4s ease,visibility 0s linear .4s;
  }
  .stk-sticky-cta .stk-btn{display:flex;justify-content:center;width:100%}
  /* the footer's black band has to run under the bar, not leave a white strip:
     the bar is ~84px (12 + 60 + 12), so the footer grows by that much */
  body.has-sticky-cta .stk-footer{padding-bottom:calc(30px + 84px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){
  .stk-sticky-cta,.stk-sticky-cta.is-hidden{transition:none}
}

/* ==========================================================================
   SERVICE PAGE BUILDING BLOCKS
   Shared by in-store-lead-generation.html and handwritten-mailers.html, so the
   two pages (and any later one) use the SAME comparison cards, step cards,
   form embed and hero fix rather than each carrying its own copy. The FAQ
   accordion (.stk-faq) and the sticky mobile CTA (.stk-sticky-cta) live in
   their own sections above.

   Body class: <body class="stk-svc-page has-sticky-cta">.
   ========================================================================== */

/* hero CTA group: the page's primary and secondary buttons, both plain .stk-btn */
.stk-svc-ctas{display:flex;flex-wrap:wrap;gap:16px}

/* Rectangular-photo hero (modifier on .stk-svc-hero--bleed).
   The bleed hero lets its copy run to 48% and its photo start at 36%, because
   the live pages' photos have a transparent diagonal cutout on their left edge.
   A rectangular photo has no cutout, so the headline ran over it: copy and
   photo get their own halves instead. Wide screens only -- below 900px the
   bleed rules above stack them and this must not override that. */
@media (min-width:901px){
  .stk-svc-hero--photo.stk-svc-hero--bleed .stk-svc-hero-copy{max-width:46%}
  .stk-svc-hero--photo.stk-svc-hero--bleed .stk-svc-hero-media{width:50%}
}

/* section head = the flanked-rule heading the service pages use, plus a
   centred lede under it */
.stk-svc-grid-head--lede{margin-bottom:14px}
.stk-svc-lede{font-family:var(--font);font-size:15px;line-height:1.6em;color:#5a5a5a;max-width:62ch;margin:0 auto 40px;text-align:center}

/* "How it works": the SEO page's numbered process cards as one row of four */
.stk-svc-step-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.stk-svc-step-cards .stk-svc-process-card{padding:24px 22px}
.stk-svc-step-cards .stk-svc-process-card p{font-size:14px}
@media (max-width:900px){.stk-svc-step-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.stk-svc-step-cards{grid-template-columns:minmax(0,1fr)}}

/* three service cards in a row, each led by the home page's black icon badge.
   --why-icon is normally set by .stk-why, so it is restated for the badge's
   width/height. */
.stk-svc-cards-3{--why-icon:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.stk-svc-cards-3 .stk-why-icon{margin:0 auto 20px}
@media (max-width:900px){.stk-svc-cards-3{grid-template-columns:minmax(0,1fr)}}

/* side-by-side comparison cards: service cards, left-aligned, CTA pinned to the
   bottom, one accent-bordered "featured" card */
.stk-svc-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.stk-svc-plan{display:flex;flex-direction:column;text-align:left;padding:36px 32px}
.stk-svc-plan--featured{border:2px solid var(--accent)}
.stk-svc-plan .stk-svc-eyebrow{margin:0 0 8px}
.stk-svc-plan h3{font-size:24px}
.stk-svc-plan .stk-svc-checklist{margin:20px 0 28px}
.stk-svc-plan .stk-svc-checklist li{align-items:flex-start}
.stk-svc-plan .stk-svc-checklist li::before{margin-top:1px}
.stk-svc-plan .stk-btn{margin-top:auto;align-self:flex-start}
@media (max-width:760px){.stk-svc-compare{grid-template-columns:minmax(0,1fr)}}

/* the white card on the illustration side of a .stk-svc-cta-illus band */
.stk-svc-sidecard{text-align:left;padding:32px}
.stk-svc-sidecard img{width:98px;height:auto;margin:0 0 16px}
.stk-svc-sidecard h3{font-size:18px}
.stk-svc-sidecard .stk-svc-checklist{margin-top:16px}

/* the in-house inquiry form: a cross-origin iframe that reports its own height
   (site-inquiry.js); the fixed height is the pre-report fallback. Anchors (#inquiry,
   #how-it-works) land below the fixed header instead of underneath it. */
.stk-svc-results,.stk-svc-grid-section{scroll-margin-top:var(--header-h)}
.stk-svc-results--inhouse .stk-svc-results-formbox iframe{height:1100px}

/* The longer button labels ("Ask About Exclusive Territories") have to wrap at
   390px, so on service pages the button gets a tighter face and a real
   line-height, and the hero's pair go full width. */
@media (max-width:640px){
  .stk-svc-page .stk-btn{font-size:19px;padding:16px 24px;line-height:1.2;text-align:left}
  .stk-svc-ctas .stk-btn{width:100%;justify-content:space-between}
}

/* ---- handwriting accent (see --font-hand) ----
   Caveat has a small x-height next to Proxima Nova, so it is sized up in em to
   sit level with the heading it is inside. */
.stk-hand{font-family:var(--font-hand);font-weight:700;font-style:normal;font-size:1.25em;line-height:1;letter-spacing:0}

/* ---- statistic callout ---- */
.stk-svc-stat{display:flex;flex-direction:column;align-items:center;text-align:center;background:#FCECEA;border-radius:20px;padding:40px 32px}
.stk-svc-stat-num{font-family:var(--font-hand);font-weight:700;font-size:112px;line-height:.9;color:var(--accent)}
.stk-svc-stat-label{font-family:var(--font);font-size:22px;font-weight:800;line-height:1.3em;color:var(--ink);max-width:28ch;margin:12px 0 0}
.stk-svc-stat-note{font-family:var(--font);font-size:13px;color:#6b6b6b;margin:14px 0 0}
@media (max-width:640px){.stk-svc-stat{padding:32px 24px}.stk-svc-stat-num{font-size:84px}.stk-svc-stat-label{font-size:19px}}

/* ==========================================================================
   ACCESSIBILITY ADDITIONS
   ========================================================================== */

/* Skip link: the first thing a keyboard user tabs to, invisible until then.
   Every page opens with <a class="stk-skip" href="#main"> and its <main id="main">. */
.stk-skip{position:absolute;left:12px;top:-120px;z-index:200;padding:12px 18px;border-radius:10px;background:var(--white);color:var(--ink);font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.16);transition:top .18s ease}
.stk-skip:focus{top:12px}

/* The browser's default focus ring is near-black, which disappears on the dark
   service hero. A white ring with a gap reads on both the band and the button. */
.stk-svc-hero .stk-btn:focus-visible{outline:3px solid #ffffff;outline-offset:3px}

/* Everything that animates for decoration stops for visitors who ask. The
   nav, carousel and sticky bar were already covered above; the FAQ slide and
   icon turn, the skip link, and the page's smooth anchor scrolling were not. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stk-faq-a,.stk-faq-item.is-open .stk-faq-a,.stk-faq-q .icon,.stk-skip{transition:none}
}

/* ---- graphic heroes (Lead Generation, Data Analytics, SEO) ----
   A hero image that is a graphic on an empty canvas, not a full-bleed photo. The
   files are cropped to the graphic itself (assets/*-hero-crop.webp) and shown
   whole, centred in the image area with some air, instead of cover-cropped:
   cover cut Data Analytics' edges off, and the old uncropped files left a small
   graphic floating in a mostly empty band. */
.stk-svc-hero--graphic .stk-svc-hero-media img{object-fit:contain;object-position:center;padding:40px}
@media (max-width:900px){.stk-svc-hero--graphic .stk-svc-hero-media img{padding:20px 16px}}
/* the contained (SEO) variant sizes the image by its column, so no padding, and the
   column is a little wider to give the graphic more room */
.stk-svc-hero--contained.stk-svc-hero--graphic .stk-svc-hero-media img{padding:0}
@media (min-width:901px){.stk-svc-hero--contained.stk-svc-hero--graphic .stk-svc-hero-inner{grid-template-columns:minmax(0,46fr) minmax(0,54fr)}}

/* A CTA band whose right-hand side is a wide illustration (SEO's "Ready to Elevate"):
   the picture gets the larger share of the row, 60% rather than 45%, so it reads as
   large as the band it sits in. The in-store and handwritten bands put a card there
   and keep the default split. */
@media (min-width:901px){.stk-svc-cta-illus--art .stk-svc-cta-illus-inner{grid-template-columns:minmax(0,40fr) minmax(0,60fr)}}