/*
Theme Name: SEO Praxis
Theme URI: https://seopraxis.com/
Author: Webhaus LLC
Description: The seopraxis.com theme, direction D2 (2026-10-20): the site's own palette, the wordmark in Vipnagorgialla, line icons, a 96% layout, and a Mac-style monitor at the right edge of the home page from which the real site screenshots fly out. Article content comes from the niche-sites publisher as plain HTML.
Version: 0.6.9
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: seopraxis
*/

/* ---------- tokens ---------- */
@font-face{font-family:"Vips";src:url("assets/fonts/vipnagorgialla-web.ttf") format("truetype");font-display:swap}
:root{--bg:#f8fafc;--white:#fff;--text:#353740;--ink:#24262e;--muted:#6b7380;--label:#8bacc1;--line:#e3e8ee;
  --steel:#336699;--steel2:#397ead;--sky:#4ab0e0;--orange:#f2964f;--orange2:#ffbf6b;--lime:#97bd13;--lime2:#86a90f;--red:#e2443b;
  --navy:#1f3a52;--grey:#f3f5f8;--band:#2b72ab;
  --grad:linear-gradient(100deg,#336699,#4ab0e0);--col:760px;--radius:18px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.55;overflow-x:hidden}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.08;letter-spacing:-.025em;font-weight:700;color:var(--ink)}
h1{font-size:clamp(2.2rem,3.6vw,3.6rem)}
h2{font-size:clamp(1.7rem,2.6vw,2.5rem)}
h3{font-size:1.12rem;letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:var(--steel)}
a:hover{color:var(--steel2)}
img{max-width:100%;height:auto}
.wrap{width:96%;margin-left:auto;margin-right:auto}
.measure{max-width:44em}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;gap:.5em;background:var(--steel);color:#fff;text-decoration:none;font-weight:600;padding:.75em 1.2em;border-radius:12px;border:1.5px solid var(--steel);cursor:pointer;font:inherit;font-weight:600;line-height:1.2}
.btn:hover{background:var(--steel2);border-color:var(--steel2);color:#fff}
.btn.ghost{background:transparent;color:var(--steel)}
.btn.ghost:hover{background:rgba(51,102,153,.08)}
.btn.green{background:var(--lime);border-color:var(--lime);color:#fff}
.btn.green:hover{background:var(--lime2);border-color:var(--lime2);color:#fff}
.ico{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.3em}
.ico-s{width:18px;height:18px}
.ico-xs{width:15px;height:15px;vertical-align:-.2em;margin-right:.35em}
.kicker{display:flex;align-items:center;gap:.5em;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.74rem;color:var(--label);margin:0 0 .9em}
.kicker .ico{width:16px;height:16px;color:var(--lime)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:8px 14px;z-index:20;border-radius:0 0 8px 0}
.skip:focus{left:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:5;background:rgba(248,250,252,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;transition:padding .2s}
.site-head.is-compact .nav{padding:7px 0}
.mark{text-decoration:none;flex:none}
.mark b,.foot-name b{font-family:Vips,Inter,sans-serif;font-weight:400;font-size:1.85rem;letter-spacing:.02em;color:#8a9eb3;transition:font-size .2s}
.mark b i,.foot-name b i{font-style:normal;color:#336699}
.site-head.is-compact .mark b{font-size:1.5rem}
.navbar{display:flex;gap:22px;flex-wrap:nowrap;align-items:center}
.navbar a{text-decoration:none;color:var(--muted);font-weight:500;display:inline-flex;align-items:center;gap:.3em;white-space:nowrap}
.navbar a:hover,.navbar a.on{color:var(--steel)}
/* search is an icon on the bar (owner, 2026-11-08); the word shows only in the folded menu */
.nav-search .ico{margin:0}
.nav-search span{display:none}
.head-acts{display:flex;align-items:center;gap:8px;flex:none}
/* the portal button and the hamburger share one size (owner, 2026-11-08: the hamburger matches the portal button) */
.head-acts .btn,.burger{box-sizing:border-box;min-height:48px}
.btn.portal{background:var(--white);color:var(--steel);border-color:var(--steel);font-weight:700}
.btn.portal:hover{background:rgba(51,102,153,.08);color:var(--steel)}
.burger{display:none;align-items:center;justify-content:center;min-width:48px;padding:0 .7em;background:var(--white);border:1.5px solid var(--steel);border-radius:12px;color:var(--steel);cursor:pointer}
.burger:hover{background:rgba(51,102,153,.08)}
.burger .ico{width:26px;height:26px}
.site-search{padding:0 0 12px}
.site-search[hidden]{display:none}
.ask{display:flex;max-width:640px;margin:0 auto;gap:8px}
.ask input{flex:1;min-width:0;font:inherit;padding:.6em .9em;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);-webkit-appearance:none;appearance:none}
.ask input::placeholder{color:var(--muted)}
.ask .btn{flex:none;padding:.6em 1em}
.answers{margin-top:18px}
.answers[hidden]{display:none}
.answers .qa{border-top:1px solid var(--line);padding:8px 0}
.answers .qa summary{cursor:pointer;font-weight:600;color:var(--ink)}
.answers .qa p{margin:6px 0;color:var(--muted)}
.answers .answers-more,.answers .answers-none{border-top:2px solid var(--line);padding-top:8px;margin:8px 0 0;font-size:.92rem}

/* ---------- home: hero, the monitor and the launch ---------- */
.hero{position:relative;padding:48px 0 0;overflow:hidden}
.hero::before{content:"";position:absolute;left:50%;top:-20%;width:min(1400px,100vw);height:110%;transform:translateX(-50%);
  background:radial-gradient(30% 35% at 70% 40%,rgba(74,176,224,.2),transparent 70%),radial-gradient(26% 30% at 88% 70%,rgba(242,150,79,.16),transparent 70%),radial-gradient(24% 26% at 18% 70%,rgba(151,189,19,.12),transparent 70%),radial-gradient(30% 30% at 22% 25%,rgba(51,102,153,.1),transparent 70%);filter:blur(28px);pointer-events:none}
.hero .grid{position:relative;display:grid;grid-template-columns:minmax(360px,520px) 1fr;gap:0;align-items:center;margin-left:2%;margin-right:0}
.hero .copy{position:relative;z-index:3;padding-right:28px;background:linear-gradient(90deg,rgba(248,250,252,.98) 70%,rgba(248,250,252,0))}
.hero h1{font-size:clamp(2.4rem,3.6vw,3.9rem);line-height:1.05}
.hero p.lead{font-size:1.15rem;color:var(--muted);max-width:30em}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.scene{position:relative;height:520px;perspective:1600px;perspective-origin:30% 50%}
.mac{position:absolute;right:-2%;top:50%;width:min(500px,64%);transform:translateY(-55%) rotateY(-32deg);transform-style:preserve-3d;transform-origin:50% 50%}
.mac svg.monitor{display:block;width:100%;height:auto;filter:drop-shadow(0 40px 60px rgba(40,60,90,.28))}
/* the screen area of the monitor drawing, in percent of its box (viewBox 0 0 1000 860: screen x 38..962, y 36..612) */
.launch-deck{position:absolute;left:3.8%;top:4.2%;width:92.4%;height:67%;transform-style:preserve-3d}
.launch-deck .stay{position:absolute;left:6%;top:4%;width:88%;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.launch-deck .stay img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
/* The field: a flat layer over the scene that holds the launched screenshots (assets/app.js places and moves them).
   On load the cards sit as a stack over the monitor's screen (tilted like it), leave together along one slightly
   curved path (each card the base distance times its rank, so they separate as they slow), settle, and bob. A tap
   brings a card to the front; on desktops a card can be dragged anywhere inside the scene. One card stays on the
   monitor (.stay). Without JavaScript the field is hidden and the monitor shows the first screenshot. */
.field{position:absolute;inset:0;perspective:1600px;perspective-origin:30% 50%;pointer-events:none;z-index:2}   /* the scene's own perspective, so a card can sit exactly on the screen */
.field .shot{position:absolute;left:0;top:0;width:var(--w,280px);aspect-ratio:16/10;transform:rotateY(-32deg);border-radius:6px;background:#fff;box-shadow:0 18px 40px rgba(20,30,50,.26),0 0 0 1px rgba(0,0,0,.16);transform-origin:50% 50%;will-change:transform;opacity:0;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.field .shot.is-placed{opacity:1}
.field .shot.is-dragging{cursor:grabbing;box-shadow:0 28px 60px rgba(20,30,50,.34),0 0 0 1px rgba(0,0,0,.2)}
.field .shot .bob{width:100%;height:100%;border-radius:6px;overflow:hidden}
.field .shot .bob img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}
.field .shot.is-bobbing .bob{animation:bob var(--bobdur,6s) ease-in-out var(--bobdelay,0s) infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(.35deg)}}
.no-js .field{display:none}
.field .shot:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.scene.is-still .field .shot .bob,.ticker.is-still span{animation-play-state:paused}
.scene .cap{position:absolute;left:0;right:4%;bottom:6px;margin:0;font-size:.78rem;color:var(--muted);text-align:right;display:flex;justify-content:flex-end;gap:.4em;align-items:center}
.scene .cap .ico{width:14px;height:14px;color:var(--lime)}
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white);overflow:hidden;white-space:nowrap;padding:12px 0;font-weight:600;font-size:1rem;color:var(--ink)}
.ticker span{display:inline-block;padding-right:3em;animation:tick 44s linear infinite}
.ticker i{font-style:normal;color:var(--orange);padding:0 .8em}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .field .shot .bob{animation:none}
  .ticker span{animation:none}
  .slide,.slide.is-on{transition:none}
  .marquee .track{animation:none;flex-wrap:wrap}
  .marquee ul[aria-hidden]{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .tools ul{flex-wrap:wrap;gap:14px 32px}
  .nav,.mark b{transition:none}
}

/* ---------- home: tools, services, verticals, client voices, steps, articles, people, contact; the portfolio grid ---------- */
.tools{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white)}
.tools .row{display:flex;align-items:center;gap:28px}
.tools .lbl{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--label);font-weight:600;flex:none}
/* the marks scroll by as a marquee: three copies of the list in one track, moved by one list's width (owner, 2026-11-07) */
.marquee{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee .track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .track,.tools.is-still .track{animation-play-state:paused}
.tools ul{list-style:none;margin:0;padding:0 24px 0 0;display:flex;gap:48px;align-items:center;flex:none}
.tools li{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:600;font-size:1rem;white-space:nowrap}
.tools img{height:32px;width:32px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
/* the home sections breathe (owner, 2026-11-07: "too busy if they're so close together") */
.main-home section{padding:104px 0}
.main-home section>.wrap>h2{margin-bottom:40px}
.main-home .alt+.alt{border-top:0}
.main-home .alt{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bento{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;gap:16px}
.box{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:6px}
.ib{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--steel);background:rgba(74,176,224,.14);margin-bottom:6px}
.ib.o{color:#b65f1c;background:rgba(242,150,79,.18)}
.ib.l{color:#5f7a06;background:rgba(151,189,19,.2)}
.box p{color:var(--muted);flex:1}
.box a.more{text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:.35em}
.box.big{background:var(--steel);color:#fff;border-color:var(--steel)}
.box.big h3,.box.big p{color:#fff}.box.big p{color:#d7e3ef}.box.big a{color:#ffbf6b}
.box.big .num{font-weight:700;font-size:3.4rem;line-height:1;letter-spacing:-.04em;color:#fff}
.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 28px}
.cols .ib{background:rgba(51,102,153,.1);margin-bottom:10px}
.who-photo{display:block;margin-bottom:18px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;transition:transform .25s ease,box-shadow .25s ease}
.who-photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.who-photo:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,30,50,.14)}
.who p.muted{font-size:.97rem}
.folio{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px 18px}
.folio li{position:relative}
.folio a{text-decoration:none;color:inherit;display:block}
.folio img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:10px;border:1px solid var(--line);background:#fff;transition:transform .25s ease,box-shadow .25s ease}
.folio a:hover img{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,30,50,.14)}
.folio b{display:block;font-weight:600;margin-top:10px;color:var(--ink)}
.folio small{display:block;color:var(--muted);font-size:.86rem;line-height:1.35}
.folio .yr{position:absolute;right:8px;top:8px;font-size:.7rem;font-weight:600;background:rgba(255,255,255,.94);color:var(--steel);padding:2px 8px;border-radius:999px;border:1px solid var(--line);z-index:1}
.folio .more{display:inline-block;margin-top:4px;font-size:.84rem;font-weight:600;color:var(--steel)}
.two{display:grid;grid-template-columns:1fr 2fr;gap:44px;align-items:start}
.steps-home{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.steps-home li{padding:22px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.steps-home .ib{width:42px;height:42px;border-radius:10px;margin-bottom:10px}
.steps-home b{display:block;margin-bottom:6px;color:var(--ink)}
.steps-home p{color:var(--muted);margin:0;font-size:.95rem}
.rv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:40px}
.rv-head h2{margin-bottom:0}
.rv-nav{display:flex;gap:8px;flex:none}
.rv-btn{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:var(--white);color:var(--steel);display:grid;place-items:center;cursor:pointer;padding:0;transition:.2s}
.rv-btn:hover{border-color:var(--steel);background:var(--steel);color:#fff}
.rv-btn .ico{width:20px;height:20px}
.slider{display:grid}
.slide{grid-area:1/1;margin:0;display:grid;grid-template-columns:minmax(240px,400px) 1fr;gap:44px;align-items:center;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.slide.is-on{opacity:1;visibility:visible;transition:opacity .6s ease}
.slide-media{position:relative;padding-bottom:28px}
.slide-media .site,.slide-media .gcard{display:block;width:100%;aspect-ratio:16/10;border-radius:10px;border:1px solid var(--line);background:#fff;box-shadow:0 14px 34px rgba(20,30,50,.12)}
.slide-media .site{object-fit:cover;object-position:top}
.slide-media .gcard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-weight:600;font-size:.95rem}
.gcard .stars{color:var(--orange);font-size:1.7rem;letter-spacing:.08em;line-height:1}
.slide-media .face{position:absolute;left:20px;bottom:0;width:64px;height:64px;border-radius:50%;border:3px solid var(--white);box-shadow:0 4px 12px rgba(0,0,0,.16);background:var(--white);object-fit:cover}
.face.init{display:grid;place-items:center;font-weight:700;color:#fff;background:var(--steel);font-size:1.5rem}
.slide blockquote{margin:0;font-size:clamp(1.12rem,1.5vw,1.4rem);line-height:1.5;color:var(--ink)}
.slide blockquote .ico{color:var(--orange);width:30px;height:30px;display:block;margin-bottom:12px}
.slide blockquote p{margin:0}
.slide figcaption{margin-top:18px;font-size:.95rem;color:var(--muted)}
.slide figcaption b{display:block;color:var(--ink);font-size:1rem}
.slide figcaption small{display:block;margin-top:5px;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--label);font-weight:600}
.dots{list-style:none;padding:0;margin:26px 0 0;display:flex;gap:10px;justify-content:center}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0;transition:.2s}
.dots button[aria-selected="true"]{background:var(--steel);transform:scale(1.3)}
.rv-google{text-align:center;margin:18px 0 0;font-size:.92rem}
.people{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.person{display:flex;gap:16px;padding:22px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);position:relative}
.person .ph{width:72px;height:72px;border-radius:50%;background:var(--grad);flex:none;opacity:.45;object-fit:cover}
.person img.ph{opacity:1;background:var(--steel)}
.person p{color:var(--muted);margin:0;font-size:.95rem}
.person .li{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:#0a66c2;color:#fff;text-decoration:none}
.person .li .ico{width:18px;height:18px;fill:currentColor;stroke:none}
.arts{list-style:none;padding:0;margin:0;columns:2;column-gap:40px}
.arts li{padding:14px 0;border-top:1px solid var(--line);display:flex;gap:16px;align-items:flex-start;break-inside:avoid}
.arts .thumb{flex:none;width:140px;aspect-ratio:16/10;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:rgba(74,176,224,.14);display:grid;place-items:center;color:var(--steel)}
.arts .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.arts .ico{color:var(--orange)}
.arts a{text-decoration:none;color:var(--ink);font-weight:600}
.arts small{display:block;color:var(--muted)}
.contact{background:var(--ink);color:#dfe3ef}
.contact h2{color:#fff}.contact .kicker{color:var(--orange2)}.contact .kicker .ico{color:var(--orange2)}.contact p{color:#c9cfe0}.contact a{color:#ffbf6b}
.form-box{background:var(--white);padding:24px;border-radius:var(--radius);color:var(--text);max-width:640px}
.form-box p{color:var(--text)}
.form-box a{color:var(--steel)}
.form-box .btn.green{color:#fff}
.form-box label{font-size:.85rem;color:var(--muted);display:block;margin-bottom:4px}
.form-box input[type="text"],.form-box input[type="email"],.form-box input[type="url"],.form-box input[type="tel"],.form-box textarea{width:100%;font:inherit;padding:.7em .9em;border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:12px}
.form-box textarea{min-height:120px}
.form-box input[type="submit"],.form-box .wpcf7-submit{background:var(--lime);border:1.5px solid var(--lime);color:#fff;font:inherit;font-weight:600;padding:.75em 1.2em;border-radius:12px;cursor:pointer}

/* ---------- article: head and the text column ---------- */
.main-article{padding-top:22px}
.crumbs{font-size:.88rem;color:var(--muted);margin:0 0 18px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--steel)}
.entry .head{max-width:var(--col);margin:0 auto 22px}
.entry .head .kicker{margin-bottom:.7em}
.entry-title{font-size:clamp(2rem,3.4vw,3.2rem);line-height:1.08;margin:0 0 .35em}
.deck{font-size:1.18rem;color:var(--muted);max-width:36em;margin:0 0 .6em}
.meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.9rem;color:var(--muted);margin:0}
.meta span{display:inline-flex;align-items:center}
.hero-fig{max-width:1000px;margin:0 auto 6px;border-radius:var(--radius);overflow:hidden;background:var(--white);border:1px solid var(--line)}
.hero-fig img{display:block;width:100%;height:auto}
.hero-credit{max-width:1000px;margin:0 auto 26px;font-size:.78rem;color:var(--muted);text-align:right}
.entry-text{max-width:var(--col);margin:0 auto}
.entry-text>*:first-child{margin-top:0}
.entry-text p{margin:0 0 1.05em}
.entry-text h2{font-size:1.75rem;margin:44px 0 12px;scroll-margin-top:90px}
.entry-text h3{font-size:1.25rem;margin:26px 0 6px}
.entry-text ul,.entry-text ol{padding-left:1.3em;margin:0 0 1.05em}
.entry-text li{margin-bottom:.35em}
.entry-text li::marker{color:var(--steel)}
.entry-text sup.cite{font-size:.62em;line-height:0;margin-left:1px}
.entry-text sup.cite a{text-decoration:none;color:var(--steel)}
.entry-text blockquote{margin:26px 0;padding:0 0 0 22px;border-left:3px solid var(--line);color:var(--muted)}
.entry-text img{border-radius:10px}
.link-pending{color:var(--text)}
/* the publisher's components */
.key-facts{border:1px solid var(--line);border-left:4px solid var(--sky);border-radius:0 var(--radius) var(--radius) 0;padding:18px 22px 8px;margin:0 0 26px;background:var(--white)}
.key-facts .key-facts-label{font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.74rem;color:var(--label);margin:0 0 6px}
.key-facts ul{margin-bottom:.8em}
.aff-note{font-size:.85rem;line-height:1.55;color:var(--muted);border:1px dashed var(--line);border-radius:10px;padding:10px 14px;margin:0 0 26px!important;background:var(--white)}
.entry-text .callout{display:flow-root;clear:both;margin:26px 0;padding:18px 22px;border-left:4px solid var(--orange);background:rgba(242,150,79,.08);border-radius:0 12px 12px 0;color:var(--text)}
.entry-text .callout p:last-child{margin-bottom:0}
.callout-label{font-weight:700;color:#b65f1c;margin-right:6px}
.entry-text .callout-good{border-left-color:var(--lime);background:rgba(151,189,19,.1)}
.entry-text .callout-good .callout-label{color:#5f7a06}
.entry-text ol.steps{list-style:none;padding:0;counter-reset:s;margin:18px 0}
.entry-text ol.steps>li{counter-increment:s;position:relative;padding:4px 0 14px 56px;border-bottom:1px solid var(--line);margin-bottom:12px;min-height:46px}
.entry-text ol.steps>li::before{content:counter(s);position:absolute;left:0;top:2px;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--steel);background:rgba(74,176,224,.14)}
.entry-text figure{margin:0}
.entry-text .article-photo,.entry-text .inline-fig{float:right;width:46%;margin:6px 0 16px 26px}
.entry-text .article-photo img{width:100%;height:auto}
.entry-text .article-photo figcaption{margin-top:6px;font-size:.8rem;color:var(--muted)}
.table-wrap{overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.table-wrap table{border-collapse:collapse;width:100%;font-size:.92rem;line-height:1.45}
.table-wrap th{font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.74rem;text-align:left;color:var(--label);border-bottom:1px solid var(--line);padding:10px 12px;background:var(--bg)}
.table-wrap td{border-bottom:1px solid var(--line);padding:9px 12px;vertical-align:top}
.table-wrap tr:last-child td{border-bottom:0}
.faq-item{border-top:1px solid var(--line);padding:4px 0}
.faq-item:last-of-type{border-bottom:1px solid var(--line)}
.faq-item+:not(.faq-item){margin-top:24px}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{margin:10px 0;font-size:1.1rem}
.faq-item summary::after{content:"+";flex:none;font-size:1.5rem;line-height:1;color:var(--steel)}
.faq-item[open] summary::after{content:"\2013"}
.faq-answer p{margin:0 0 14px}
.related-articles{clear:both;margin:40px 0 0;border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;background:var(--white)}
.entry-text .related-articles h2{margin:0 0 10px;font-size:1.4rem}
.related-articles ul{columns:2;column-gap:26px;margin:0;padding-left:1.1em}
.related-articles li{break-inside:avoid;margin-bottom:6px}
.entry-text h2#sources{font-size:1.3rem}
.sources ol{font-size:.85rem;line-height:1.5;color:var(--muted);padding-left:1.6em}
.sources li{margin-bottom:.4em;overflow-wrap:anywhere}
.sources-link{margin-top:24px;font-size:.9rem}
.entry-cta{clear:both;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:40px 0;padding:22px 24px;background:var(--steel);color:#fff;border-radius:var(--radius)}
.entry-cta p{margin:0;color:#d7e3ef}
.entry-cta .entry-cta-title{font-weight:700;font-size:1.15rem;color:#fff;margin-bottom:4px}
.entry-cta .btn{flex:none}

/* ---------- listings, search, 404 ---------- */
.main-listing{padding-top:22px}
.listing-head{max-width:var(--col);margin:0 auto 26px}
.listing-head .deck p{margin:0 0 .6em}
.section-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.section-nav a{text-decoration:none;font-size:.9rem;font-weight:600;color:var(--steel);border:1px solid var(--line);background:var(--white);border-radius:999px;padding:5px 12px;display:inline-flex;align-items:center}
.section-nav a.on,.section-nav a:hover{background:var(--steel);border-color:var(--steel);color:#fff}
.search-big{max-width:640px;margin:18px 0 0}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tile{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tile a{display:block;color:inherit;text-decoration:none;padding:0 0 18px}
.tile .tile-shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--line);margin-bottom:12px}
.tile .kicker{padding:0 18px;margin:12px 0 6px}
.tile h3{padding:0 18px;font-size:1.15rem;line-height:1.2;margin:0 0 6px}
.tile p{padding:0 18px;margin:0;font-size:.92rem;line-height:1.5;color:var(--muted)}
.tile a:hover h3{color:var(--steel)}
.pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:24px 0 0}
.pagination a,.pagination span{border:1px solid var(--line);border-radius:10px;padding:4px 12px;text-decoration:none;color:var(--ink);background:var(--white)}
.pagination .current{background:var(--steel);border-color:var(--steel);color:#fff}
.empty{color:var(--muted);margin:30px 0 14px}
.lost .listing-head{text-align:left}

/* ---------- footer ---------- */
.site-foot{margin-top:72px;border-top:1px solid var(--line);padding:32px 0 44px;color:var(--muted);font-size:.9rem;background:var(--bg)}
.main-home+.site-foot{margin-top:0}
.frow{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
.foot-name{margin:0 0 4px}
.foot-name b{font-size:1.3rem}
.site-foot p{margin:0 0 4px}
.site-foot a{color:var(--muted)}
.site-foot a:hover{color:var(--steel)}
.foot-nav{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-nav a{text-decoration:none}
.foot-legal{margin-top:16px!important;font-size:.8rem;max-width:62em}

/* ---------- 0.6.0: the textures of the 2023 home page the owner likes (2026-11-08), on the new page's bones ----------
   Uppercase steel-blue headings, the steel honeycomb band (the ticker rides on it), three centered services with large thin
   sky-blue icons, grey sections that fade in and out (0.6.1; slanted edges before), the four icon colours as chips on the group photos, a faint honeycomb
   behind the client voices, the deep-blue contact section, a navy footer and the lime portal button. */
.main-home{background:#fff}
.main-home h2{text-transform:uppercase;color:var(--steel);letter-spacing:.02em;font-size:clamp(1.55rem,2.3vw,2.15rem);line-height:1.15;font-weight:800}
.main-home section>.wrap>.kicker{justify-content:center}
.main-home section>.wrap>h2{text-align:center}
.main-home .alt{border:0}
.btn.portal{background:var(--lime);border-color:var(--lime);color:#fff}
.btn.portal:hover{background:var(--lime2);border-color:var(--lime2);color:#fff}
.burger{border-color:var(--lime)}
.ticker{margin-top:26px;border:0;background:var(--band);color:#fff;padding:22px 0}
.ticker i{color:var(--orange2)}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 48px;text-align:center;max-width:1180px;margin:0 auto}
.svc-item{display:flex;flex-direction:column;align-items:center}
.svc-ico{width:64px;height:64px;color:var(--sky);stroke-width:1.15;margin-bottom:18px}
.svc-item h3{font-size:1.18rem;margin-bottom:.5em}
.svc-item p{color:var(--muted);max-width:30em;flex:1}
.svc-item a.more{text-decoration:none;font-weight:600;color:var(--sky);display:inline-flex;align-items:center;gap:.35em}
.svc-item a.more:hover{color:var(--steel)}
.svc-foot{text-align:center;margin:44px 0 0;color:var(--muted)}
.svc-foot a{text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:.35em}
.main-home #who,.main-home #how{background:linear-gradient(to bottom,#fff 0,var(--grey) 110px,var(--grey) calc(100% - 110px),#fff 100%);padding:124px 0}
.who{position:relative}
.who-media{position:relative;margin-bottom:30px}
.who-photo{margin-bottom:0;border:0;box-shadow:0 10px 26px rgba(20,30,50,.12)}
.who .chip{position:absolute;left:16px;bottom:-20px;width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(20,30,50,.16);color:var(--steel)}
.who .chip .ico{width:26px;height:26px}
.chip.t-l{color:var(--lime)}.chip.t-r{color:var(--red)}.chip.t-o{color:var(--orange)}
.ib.r{color:#c9302c;background:rgba(226,68,59,.14)}
.main-home #reviews{position:relative;overflow:hidden}
.main-home #reviews::before{content:"";position:absolute;left:-6%;top:-10%;width:60%;height:120%;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248.5%22 height=%2284.0%22 viewBox=%220 0 48.5 84.0%22 fill=%22#eef2f6%22%3E%3Cpolygon points=%2224.2,2.8 46.1,15.4 46.1,40.6 24.2,53.2 2.4,40.6 2.4,15.4%22/%3E%3Cpolygon points=%220.0,44.8 21.8,57.4 21.8,82.6 0.0,95.2 -21.8,82.6 -21.8,57.4%22/%3E%3Cpolygon points=%2248.5,44.8 70.3,57.4 70.3,82.6 48.5,95.2 26.7,82.6 26.7,57.4%22/%3E%3C/svg%3E");background-size:196px 336px;-webkit-mask-image:radial-gradient(60% 75% at 30% 50%,#000 35%,transparent 100%);mask-image:radial-gradient(60% 75% at 30% 50%,#000 35%,transparent 100%);pointer-events:none}
.main-home .rv-head{position:relative;justify-content:center;text-align:center}
.main-home .rv-head .kicker{justify-content:center}
.main-home .rv-head h2{text-align:center}
.main-home .rv-nav{position:absolute;right:0;bottom:4px}
.main-home #reviews>.wrap{position:relative}
.main-home #about{border-top:1px solid var(--line)}
.contact{background:var(--steel) url("assets/weave.png");color:#e3ecf5}
.contact h2{color:#fff}.contact .kicker{color:var(--orange2)}.contact .kicker .ico{color:var(--orange2)}.contact p{color:#dbe6f1}.contact a{color:#ffd597}
.site-foot{background:var(--navy);border-top:0;color:#b9c7d4}
.site-foot .foot-name b{color:#9fb3c6}.site-foot .foot-name b i{color:#fff}
.site-foot a{color:#d6e0ea}.site-foot a:hover{color:#fff}
.site-foot .foot-legal{color:#8fa3b6;margin:16px auto 0;max-width:none}
.site-foot .foot-legal span{white-space:nowrap}
.entry-note{margin:28px 0 0;font-size:.82rem;color:var(--muted)}
.entry-note a{color:var(--muted)}
.form-box .wpcf7-form p{margin:0}
.form-box .wpcf7-form-control-wrap{display:block}
.form-box .wpcf7-not-valid-tip{display:block;margin:-8px 0 10px;font-size:.82rem;color:#c9302c}
.form-box .wpcf7-response-output{margin:14px 0 0;padding:.7em .9em;border:1px solid var(--line);border-radius:10px;font-size:.92rem}
.form-box .wpcf7-spinner{margin-left:10px}
/* 0.6.3: the form is tighter and its labels are placeholders (the label text stays for screen readers) */
.form-box{padding:18px;max-width:520px}
.form-box label{margin:0}
.form-box .wpcf7-form br{display:none}
.form-box input[type="text"],.form-box input[type="email"],.form-box input[type="url"],.form-box input[type="tel"],.form-box textarea{padding:.6em .85em;margin-bottom:10px;font-size:1rem;color:var(--text)}
.form-box textarea{display:block;height:7.2em;min-height:0;resize:vertical}
.form-box ::placeholder{color:var(--muted);opacity:1}
.form-box input:focus,.form-box textarea:focus{outline:2px solid var(--sky);outline-offset:1px;border-color:var(--sky)}
.form-box input[type="submit"]:hover,.form-box .wpcf7-submit:hover{background:var(--lime2);border-color:var(--lime2)}
@media (max-width:1100px){.form-box{max-width:640px}}
/* 0.6.4: white text on every green button, lifted by a soft shadow; the contact pair sits in the middle of the page */
.btn.green,.btn.portal,.form-box input[type="submit"],.form-box .wpcf7-submit{text-shadow:0 1px 2px rgba(45,62,0,.55);box-shadow:0 8px 18px -8px rgba(60,82,0,.7)}
.btn.green .ico,.btn.portal .ico{filter:drop-shadow(0 1px 1px rgba(45,62,0,.5))}
.contact .two{grid-template-columns:minmax(0,440px) minmax(0,520px);justify-content:center;align-items:center;gap:64px}
@media (max-width:1100px){.contact .two{grid-template-columns:minmax(0,640px);gap:30px}}

/* ---------- narrower screens ---------- */
@media (max-width:1180px){
  .hero .grid{grid-template-columns:minmax(340px,440px) 1fr}
  .mac{width:min(420px,56%)}
  .scene{height:460px}
}
@media (max-width:1100px){
  .bento{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1fr 1fr}
  .folio{grid-template-columns:repeat(3,1fr)}
  .two{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* the menu folds behind the hamburger from 1080 px down. Measured 2026-11-08 without the Start-a-conversation button: wordmark
   225 + links 528 + portal 171 + gaps 32 = 956 px, which fits the 96% wrap from about 1000 px; 1080 leaves room for a longer label */
@media (max-width:1080px){
  .navbar{display:none}
  .navbar.is-open{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;order:4;padding:6px 0 4px;border-top:1px solid var(--line);margin-top:8px}
  .navbar.is-open a{padding:9px 0;border-bottom:1px solid var(--line)}
  .navbar.is-open .nav-search span{display:inline}
  .navbar.is-open .nav-search .ico{margin-right:.35em}
  .burger{display:inline-flex}
  .nav{flex-wrap:wrap}
}
@media (max-width:980px){
  .btn.portal span{display:none}
  .btn.portal{min-width:48px;padding:0 .7em;justify-content:center}
  .hero .grid{grid-template-columns:1fr;margin-left:0}
  .hero .copy{padding:0 2%;background:none}
  .scene{height:400px;perspective:1100px;perspective-origin:30% 50%}
  .mac{right:-3%;width:min(420px,80%)}
  .steps-home{grid-template-columns:1fr 1fr}
  .people{grid-template-columns:1fr}
  .tools .row{flex-direction:column;align-items:stretch;gap:14px}
  .arts .thumb{width:112px}
  .folio{grid-template-columns:repeat(2,1fr)}
  .slide{grid-template-columns:1fr;gap:26px}
  .slide-media{max-width:420px}
  .rv-head{align-items:flex-start}
  .arts{columns:1}
  .main-home section{padding:72px 0}
  .main-home section>.wrap>h2{margin-bottom:28px}
  .entry-text .article-photo,.entry-text .inline-fig{float:none;width:100%;margin:16px 0}
}
@media (max-width:560px){
  body{font-size:16px}
  .bento,.cols,.steps-home{grid-template-columns:1fr}
  .main-home section{padding:56px 0}
  .arts .thumb{width:96px}
  .scene{height:300px;perspective:800px}
  .mac{width:min(320px,88%);right:-4%}
  .hero{padding:32px 0 0}
  .tiles{grid-template-columns:1fr}
  .related-articles ul{columns:1}
  .entry-cta{padding:18px}
}

/* ---------- 0.6.0 on narrower screens ---------- */
@media (max-width:980px){
  .svc{grid-template-columns:1fr 1fr;gap:34px}
  .main-home #who,.main-home #how{background:linear-gradient(to bottom,#fff 0,var(--grey) 70px,var(--grey) calc(100% - 70px),#fff 100%);padding:92px 0}
  .ticker{padding:16px 0}
}
@media (max-width:560px){
  .svc{grid-template-columns:1fr}
  .main-home #who,.main-home #how{padding:76px 0}
}
/* 0.6.5: the Who we work with page: one section per group, the photo on one half, the list and a button on the other, sides alternating */
.groups{max-width:1120px;margin:54px auto 0;display:grid;gap:72px}
.group{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.group:nth-child(even) .group-media{order:2}
.group-media{position:relative}
.group-media img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius);box-shadow:0 14px 34px rgba(20,30,50,.14)}
.group-media .chip{position:absolute;left:22px;bottom:-24px;width:54px;height:54px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(20,30,50,.16);color:var(--steel)}
.group:nth-child(even) .group-media .chip{left:auto;right:22px}
.group-media .chip .ico{width:28px;height:28px}
.group-media .chip.t-l{color:var(--lime)}.group-media .chip.t-r{color:var(--red)}.group-media .chip.t-o{color:var(--orange)}
.group h2{margin:0 0 .55em;font-size:clamp(1.5rem,2.2vw,2rem)}
.group ul{list-style:none;padding:0;margin:0 0 24px}
.group li{display:flex;align-items:center;gap:.65em;padding:.5em 0;font-size:1.06rem;border-bottom:1px solid var(--line)}
.group li .ico{width:18px;height:18px;color:var(--lime)}
.groups+.entry-cta{max-width:1120px;margin:76px auto 44px}
.who-more{margin:34px 0 0;text-align:center}
@media (max-width:820px){.groups{gap:56px;margin-top:40px}.group{grid-template-columns:1fr;gap:40px}.group:nth-child(even) .group-media{order:0}.group:nth-child(even) .group-media .chip{left:22px;right:auto}}
/* 0.6.7: a page with a featured image opens with it as a full-width hero under a dark overlay, crumbs at the top, the title at the bottom */
.page-hero{position:relative;width:100vw;margin:-22px 0 38px calc(50% - 50vw);min-height:380px;display:flex;background:var(--navy);overflow:hidden}
.page-hero-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 20%}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,36,54,.52) 0,rgba(18,36,54,.8) 100%)}
.page-hero-in{position:relative;z-index:1;width:96%;margin:0 auto;padding:22px 0 38px;display:flex;flex-direction:column}
.page-hero .crumbs,.page-hero .crumbs a{color:#d3deea}
.page-hero .crumbs a:hover{color:#fff}
.page-hero .head{width:100%;margin:auto auto 0;padding-top:48px}
.page-hero .entry-title{color:#fff;margin-bottom:0;text-shadow:0 2px 14px rgba(10,20,32,.45)}
.page-hero .kicker{color:#cfe0ef}
@media (max-width:820px){.page-hero{min-height:270px;margin-bottom:28px}.page-hero-in{padding-bottom:26px}.page-hero .head{padding-top:30px}}