/* wi-ui.css — Wrap It! UI kit (2026-10-17), from design/wrapit-ui-component-kit.png.
   Tokens + components only. Loaded site-wide after each page's own stylesheet. Display font = Barlow Condensed
   (already loaded on every page from Google Fonts); body copy keeps each page's existing body font. */
:root{
  --wi-yellow:#FDC802; --wi-yellow-grad:linear-gradient(180deg,#FDD303,#FDC004);
  --wi-black:#111110; --wi-btn-black:#171817; --wi-paper:#F7F6F3; --wi-line:#D9D7D7; --wi-text-muted:#575757;
  --wi-radius:4px; --wi-shadow:0 6px 16px rgba(0,0,0,.18);
  --wi-display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  /* arrow + play glyphs as masks, so they take whatever colour the variant sets */
  --wi-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.5h13.4l-5.1-5.1L13.4 3.3 22.1 12l-8.7 8.7-2.1-2.1 5.1-5.1H3z'/%3E%3C/svg%3E");
}
/* ---------- buttons ---------- */
/* defaults at single-class weight so every variant (also single-class) can override them */
.wi-btn{--wi-fg:#fff;--wi-bg:var(--wi-btn-black);--wi-arrow-c:var(--wi-yellow);--wi-bd:transparent}
.wi-btn.wi-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:44px;padding:.72em 1.25em;
  font-family:var(--wi-display)!important;font-weight:800!important;font-size:1.06rem;line-height:1.05;letter-spacing:.03em!important;text-transform:uppercase!important;
  color:var(--wi-fg)!important;background:var(--wi-bg)!important;border:2px solid var(--wi-bd)!important;border-radius:var(--wi-radius);
  text-decoration:none!important;cursor:pointer;box-shadow:none;clip-path:none;transition:background .16s,color .16s,border-color .16s,transform .16s;
  -webkit-font-smoothing:antialiased;white-space:nowrap}
.wi-btn::after{content:"";flex:0 0 auto;width:1em;height:1em;background:var(--wi-arrow-c);-webkit-mask:var(--wi-arrow) center/contain no-repeat;mask:var(--wi-arrow) center/contain no-repeat;transition:transform .16s,background .16s}
.wi-btn:hover::after{transform:translateX(3px)}
.wi-btn.wi-btn--noarrow::after{display:none}
.wi-btn:focus-visible{outline:3px solid var(--wi-yellow);outline-offset:3px}
.wi-on-light .wi-btn:focus-visible,.wi-btn--tertiary:focus-visible,.wi-btn--ghost:focus-visible{outline-color:var(--wi-black)}
/* 1 primary: yellow gradient, black label + arrow; hover = black, white label, yellow arrow, yellow border */
.wi-btn--primary{--wi-fg:var(--wi-black);--wi-arrow-c:var(--wi-black);--wi-bg:var(--wi-yellow-grad);box-shadow:var(--wi-shadow)!important}
.wi-btn--primary:hover,.wi-btn--primary:focus-visible{--wi-fg:#fff;--wi-arrow-c:var(--wi-yellow);--wi-bd:var(--wi-yellow);--wi-bg:var(--wi-btn-black)}
/* 2 secondary: black, white label, yellow arrow + border */
.wi-btn--secondary{--wi-bd:var(--wi-yellow)}
.wi-btn--secondary:hover{--wi-fg:var(--wi-black);--wi-arrow-c:var(--wi-black);--wi-bg:var(--wi-yellow-grad)}
/* 3 tertiary: paper, black border + label, yellow arrow */
.wi-btn--tertiary{--wi-fg:var(--wi-black);--wi-bg:var(--wi-paper);--wi-bd:var(--wi-black)}
.wi-btn--tertiary:hover{--wi-bg:#fff;--wi-arrow-c:var(--wi-black)}
/* 4 nav: black, white label; current page = yellow underline; hover = yellow fill, black label */
.wi-btn.wi-btn--nav{position:relative;font-size:.98rem;padding:.6em .95em;min-height:44px}
.wi-btn--nav[aria-current="page"]::before{content:"";position:absolute;left:.95em;right:.95em;bottom:5px;height:3px;background:var(--wi-yellow);border-radius:2px}
.wi-btn--nav:hover{--wi-fg:var(--wi-black);--wi-arrow-c:var(--wi-black);--wi-bg:var(--wi-yellow-grad)}
/* 5 outline: black, 2px yellow border, a bit smaller than secondary */
.wi-btn.wi-btn--outline{--wi-bd:var(--wi-yellow);font-size:.98rem;padding:.62em 1.05em;min-height:44px}
.wi-btn--outline:hover{--wi-bg:#262725}
/* 6 ghost: transparent, light border, black label, yellow arrow. On dark sections the label turns white. */
.wi-btn--ghost{--wi-fg:var(--wi-black);--wi-bg:transparent;--wi-bd:var(--wi-line)}
.wi-btn--ghost:hover{--wi-bd:var(--wi-black)}
.wi-dark .wi-btn--ghost,.wi-btn--ghost.wi-on-dark{--wi-fg:#fff;--wi-bd:rgba(255,255,255,.35)}
.wi-dark .wi-btn--ghost:hover,.wi-btn--ghost.wi-on-dark:hover{--wi-bd:var(--wi-yellow)}
/* 7 small: compact primary */
.wi-btn.wi-btn--small{--wi-fg:var(--wi-black);--wi-arrow-c:var(--wi-black);--wi-bg:var(--wi-yellow-grad);font-size:.92rem;padding:.5em .9em;min-height:44px;box-shadow:var(--wi-shadow)}
.wi-btn--small:hover{--wi-fg:#fff;--wi-arrow-c:var(--wi-yellow);--wi-bd:var(--wi-yellow);--wi-bg:var(--wi-btn-black)}
/* 8 play video: black, yellow circle with black play glyph, white label */
.wi-btn.wi-btn--play{gap:.7em;padding-left:.6em}
.wi-btn--play::after{display:none}
.wi-btn--play::before{content:"";flex:0 0 auto;width:1.9em;height:1.9em;border-radius:50%;background:var(--wi-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111110' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/62% no-repeat}
.wi-btn--play:hover{--wi-bd:var(--wi-yellow)}
.wi-btn.wi-btn--block{display:flex;width:100%}
/* header: compact kit buttons so the whole nav fits on one line */
nav.menu .wi-btn.wi-btn,.nav-links .wi-btn.wi-btn{font-size:.9rem;padding:.5em .78em;min-height:44px;box-shadow:none!important}
nav.menu{gap:6px!important}.nav-links{gap:6px!important}
nav.menu .wi-btn--nav,.nav-links .wi-btn--nav{--wi-bg:transparent;--wi-bd:transparent}
nav.menu .wi-btn--nav:hover,.nav-links .wi-btn--nav:hover{--wi-bg:var(--wi-yellow-grad);--wi-fg:var(--wi-black)}
@media (max-width:1200px){nav.menu .wi-btn.wi-btn,.nav-links .wi-btn.wi-btn{font-size:.84rem;padding:.45em .6em}}
@media (max-width:900px){nav.menu.open,.nav-links.open{gap:10px!important}nav.menu.open .wi-btn,.nav-links.open .wi-btn{width:100%;justify-content:flex-start}}
/* form button rows on the quote/partner forms */
.btn-row .wi-btn:last-child{margin-left:auto}
/* ---------- 9 bold number steps 01-04 ---------- */
.wi-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:34px;border-top:1px solid var(--wi-line);padding-top:30px}
.wi-step{display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:start;padding:0 22px;border-left:1px solid var(--wi-line)}
.wi-step:first-child{border-left:0;padding-left:0}
.wi-step-num{font-family:var(--wi-display);font-weight:900;font-size:clamp(4.2rem,7vw,6.4rem);line-height:.82;letter-spacing:-.02em;color:var(--wi-yellow);padding-right:18px;border-right:1px solid var(--wi-line);align-self:stretch}
.wi-step h3{font-family:var(--wi-display);font-weight:800;text-transform:uppercase;font-size:1.32rem;line-height:1.08;color:var(--wi-black);margin:2px 0 8px}
.wi-step p{font-size:.95rem;line-height:1.55;color:var(--wi-text-muted);margin:0}
.wi-dark .wi-steps{border-top-color:#2c2c2a}.wi-dark .wi-step{border-left-color:#2c2c2a}.wi-dark .wi-step-num{border-right-color:#2c2c2a}
.wi-dark .wi-step h3{color:#fff}.wi-dark .wi-step p{color:#bdbab1}
/* ---------- 10 feature icon cards ---------- */
.wi-features{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:30px}
.wi-feature{display:flex;align-items:center;gap:14px;background:var(--wi-black);border:1px solid #2a2a28;border-radius:6px;padding:14px 16px;min-height:76px;
  color:#fff;text-decoration:none;font-family:var(--wi-display);font-weight:800;text-transform:uppercase;font-size:1.12rem;line-height:1.05;transition:border-color .16s,transform .16s}
.wi-feature:hover{border-color:var(--wi-yellow);transform:translateY(-2px)}
.wi-feature:focus-visible{outline:3px solid var(--wi-yellow);outline-offset:3px}
.wi-hex{flex:0 0 auto;width:46px;height:52px;display:grid;place-items:center;background:var(--wi-yellow);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.wi-hex svg{width:24px;height:24px;fill:var(--wi-black)}
.wi-feature .wi-sep{flex:0 0 1px;align-self:stretch;background:var(--wi-yellow);opacity:.55;margin:4px 0}
.wi-feature .wi-label{flex:1}
.wi-feature::after{content:"";flex:0 0 auto;width:1em;height:1em;background:var(--wi-yellow);-webkit-mask:var(--wi-arrow) center/contain no-repeat;mask:var(--wi-arrow) center/contain no-repeat}
/* ---------- 11 vertical step list ---------- */
.wi-vsteps{list-style:none;margin:24px 0 0;padding:0}
.wi-vsteps li{position:relative;display:grid;grid-template-columns:56px 1fr;gap:16px;padding-bottom:26px}
.wi-vsteps li:not(:last-child)::before{content:"";position:absolute;left:27px;top:56px;bottom:0;width:2px;background:var(--wi-yellow)}
.wi-vsteps .wi-vnum{width:56px;height:56px;border-radius:50%;background:var(--wi-yellow);color:var(--wi-black);display:grid;place-items:center;font-family:var(--wi-display);font-weight:900;font-size:1.6rem}
.wi-vsteps h3{font-family:var(--wi-display);font-weight:800;text-transform:uppercase;font-size:1.15rem;margin:6px 0 4px;color:inherit}
.wi-vsteps p{margin:0;font-size:.93rem;line-height:1.5;color:var(--wi-text-muted)}
.wi-dark .wi-vsteps p{color:#bdbab1}
/* ---------- 12 stats panel (only rendered once Wesley confirms the numbers) ---------- */
.wi-stats{display:flex;background:var(--wi-black);border-radius:6px;padding:28px 10px}
.wi-stat{flex:1;text-align:center;padding:0 16px;border-left:2px solid var(--wi-yellow)}
.wi-stat:first-child{border-left:0}
.wi-stat b{display:block;font-family:var(--wi-display);font-weight:900;font-size:clamp(3rem,6vw,4.6rem);line-height:.9;color:var(--wi-yellow)}
.wi-stat span{display:block;margin-top:8px;font-family:var(--wi-display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff}
/* ---------- media: work photos + play overlay ---------- */
.wi-media{position:relative;margin:0;border-radius:8px;overflow:hidden;background:#141414}
.wi-media img,.wi-media video{display:block;width:100%;height:auto}
.wi-media .wi-play-on{position:absolute;left:12px;bottom:12px}
.wi-media figcaption{padding:10px 12px 12px;font-size:.88rem;line-height:1.45;color:#cfccc4;background:#141414}
.wi-media figcaption b{display:block;color:#fff;font-family:var(--wi-display);font-weight:800;text-transform:uppercase;font-size:1.02rem;letter-spacing:.02em;margin-bottom:2px}
/* ---------- responsive ---------- */
@media (max-width:1100px){.wi-features{grid-template-columns:repeat(3,1fr)}.wi-steps{grid-template-columns:1fr 1fr;row-gap:30px}.wi-step:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:640px){
  .wi-steps{grid-template-columns:1fr}.wi-step{border-left:0;padding:0}.wi-step-num{font-size:4.2rem}
  .wi-features{grid-template-columns:1fr}.wi-stats{flex-direction:column;gap:22px}.wi-stat{border-left:0;border-top:2px solid var(--wi-yellow);padding-top:18px}.wi-stat:first-child{border-top:0;padding-top:0}
  .wi-btn{white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){.wi-btn,.wi-btn::after,.wi-feature{transition:none}.wi-btn:hover::after,.wi-feature:hover{transform:none}}