/* Altaswiq Agencia - base stylesheet
   Design tokens, base, header, shared components, sections, footer, responsive.
   Type roles: --f-head (headings + buttons), --f-body (everything else). */

/* ---------- design tokens (night default / day overrides) ---------- */
:root{
  --bg:#0C0C0C; --card:#161614; --card2:#1F1E1A; --panel:rgba(17,17,16,0.72); --hdrbg:rgba(12,12,12,0.35); --chip:rgba(12,12,12,0.75);
  --ink:#F5F1E8; --t85:rgba(245,241,232,0.85); --t75:rgba(245,241,232,0.75); --t70:rgba(245,241,232,0.7); --t60:rgba(245,241,232,0.6); --t55:rgba(245,241,232,0.55); --t50:rgba(245,241,232,0.5); --t45:rgba(245,241,232,0.45); --t40:rgba(245,241,232,0.4);
  --gold:#C99B3F; --goldt:#C99B3F; --goldt-hov:#E0B968; --wlink-hov:#FFFFFF; --cta-hov:#C99B3F; --fcta-hov:#C99B3F; --fnav-hov:#C99B3F; --fhead:#C99B3F;
  --line:rgba(245,241,232,0.09); --line-soft:rgba(245,241,232,0.07); --line18:rgba(245,241,232,0.18); --line-strong:rgba(245,241,232,0.25); --line30:rgba(245,241,232,0.3);
  --pill-bg:#F5F1E8; --pill-ink:#0C0C0C; --btn-dark:#0C0C0C; --ok:#3FBF6B;
  --shadow:0 30px 70px -24px rgba(0,0,0,0.7);
  --vig:radial-gradient(ellipse 90% 70% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  --neon-op:0.55; --neon-blur:blur(1px);
  /* brand type roles */
  /* Display face. The design's big headings, buttons and numbers are set at
     weight 800-900; Times New Roman has no weight above bold, which is why
     they rendered light. Archivo carries the full range. Swap the two lines
     below to go back to a serif display face. */
  --f-head:'Archivo',system-ui,-apple-system,Segoe UI,sans-serif;
  --f-serif:'Times New Roman','Tinos',Times,serif;
  --f-body:'Manrope',system-ui,-apple-system,Segoe UI,sans-serif;
}
html[data-theme="light"]{
  --bg:#FAFAFA; --card:#FFFFFF; --card2:#E9E4D6; --panel:rgba(255,255,255,0.66); --hdrbg:rgba(255,255,255,0.62); --chip:rgba(255,255,255,0.72);
  --ink:#1A150C; --t85:rgba(29,23,12,0.95); --t75:rgba(29,23,12,0.91); --t70:rgba(29,23,12,0.87); --t60:rgba(29,23,12,0.78); --t55:rgba(29,23,12,0.74); --t50:rgba(29,23,12,0.7); --t45:rgba(29,23,12,0.65); --t40:rgba(29,23,12,0.6);
  --goldt:#8F6A15; --goldt-hov:#6B4E0E; --wlink-hov:#1A150C; --cta-hov:#8F6A15; --fcta-hov:#8F6A15; --fnav-hov:#0C0C0C; --fhead:#0C0C0C;
  --line:rgba(35,28,14,0.18); --line-soft:rgba(35,28,14,0.14); --line18:rgba(35,28,14,0.18); --line-strong:rgba(35,28,14,0.18); --line30:rgba(35,28,14,0.18);
  --pill-bg:#1A150C; --pill-ink:#F6F2E8; --btn-dark:#EFEBDF;
  --shadow:0 24px 55px -26px rgba(95,75,25,0.3);
  --vig:radial-gradient(ellipse 90% 70% at 50% 45%, rgba(255,255,255,0) 55%, rgba(250,250,250,0.75) 100%);
  --neon-op:1; --neon-blur:blur(2px);
}
/* ---------- base ---------- */
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);font-family:var(--f-body);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--goldt);text-decoration:none}
a:hover{color:var(--goldt-hov)}
h1,h2{margin:0}
#page{position:relative;z-index:0}
/* day/night image pairs */
.lgo-n{display:inline-block}.lgo-d{display:none}
html[data-theme="light"] .lgo-n{display:none}
html[data-theme="light"] .lgo-d{display:inline-block}
/* neon background layer */
.neon-fix{position:fixed;inset:0;z-index:-1;pointer-events:none}
.neon-layer{position:absolute;inset:0;overflow:hidden;opacity:var(--neon-op);filter:var(--neon-blur)}
.neon-layer canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.neon-logo{position:absolute;left:calc(50% - 128px);top:calc(50% - 128px);width:256px;height:256px;filter:drop-shadow(0 0 14px rgba(255,212,0,0.3))}
.neon-vig{position:absolute;inset:0;background:var(--vig)}
/* ---------- header ---------- */
/* The header stays put while the page moves, so the menu is reachable from
   anywhere. It sits above the page but below the mobile menu panel and any
   modal. The blur keeps content readable as it passes underneath. */
.site-hd{position:sticky;top:0;z-index:120;display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background:var(--hdrbg);border-bottom:1px solid var(--line);font-family:var(--f-body);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px)}
.nav-desktop{display:flex;gap:5px;background:var(--card);border:1px solid var(--line);border-radius:100px;padding:5px}
.nav-a{padding:9px 19px;border-radius:100px;font-size:13.5px;font-weight:600;color:var(--t60)}
.nav-a:hover{color:var(--goldt-hov)}
.nav-a.on{background:var(--pill-bg);color:var(--pill-ink);font-weight:700}
.theme-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid rgba(201,155,63,0.55);border-radius:50%;cursor:pointer;color:var(--goldt);padding:0}
.btn-cta{background:var(--gold);color:#0C0C0C;border-radius:100px;font-weight:800}
.btn-cta:hover{background:var(--cta-hov);color:#FFFFFF}
.hamburger{display:none;flex:none;width:40px;height:40px;border-radius:50%;background:var(--card);border:1px solid var(--line-strong);color:var(--ink);font-size:16px;cursor:pointer;align-items:center;justify-content:center;padding:0}
.m-menu{display:none;position:fixed;top:78px;left:14px;right:14px;z-index:300;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:8px;flex-direction:column;box-shadow:0 30px 60px -18px rgba(0,0,0,0.75);font-family:var(--f-body)}
.m-menu.open{display:flex}
.m-a{display:block;padding:13px 16px;border-radius:12px;font-size:14.5px;font-weight:600;color:var(--t75)}
.m-a.on{background:rgba(201,155,63,0.14);color:var(--goldt);font-weight:800}
/* ---------- shared components ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px}
.hb:hover{border-color:var(--goldt)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--ink);border-radius:100px;font-weight:800}
.btn-ghost:hover{color:var(--goldt);border-color:var(--goldt)}
.ulink{font-family:var(--f-head);font-size:13.5px;font-weight:800;color:var(--goldt);border-bottom:2px solid var(--goldt);padding-bottom:2px}
.wlink{color:var(--goldt)}
.wlink:hover{color:var(--wlink-hov);border-color:var(--wlink-hov)}
.goldlink{color:var(--goldt)}
.goldlink:hover{color:var(--goldt-hov)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
/* ---------- sections ---------- */
.sec-hero{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding:80px 48px 64px;align-items:center}
.g-metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.g-metrics>div{padding:32px 48px;border-right:1px solid var(--line)}
.g-metrics>div:last-child{border-right:none}
.sec-services{padding:72px 48px}
.g-services{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g-svc-top{grid-column:1 / -1;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;border-radius:16px;padding:34px 38px}
.sec-process{padding:0 48px 72px}
.panel{position:relative;overflow:hidden;border:1px solid rgba(201,155,63,0.3);border-radius:20px;padding:48px;background:var(--panel)}
.g-proc{display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr;gap:8px;align-items:stretch}
.sec-clients{padding:64px 48px;border-top:1px solid var(--line)}
.g-clients{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.client-card{display:flex;align-items:center;gap:14px;border-radius:14px;padding:18px 20px}
.sec-trust{padding:72px 48px;border-top:1px solid var(--line)}
.g-trust{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.g-trust-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g-proof{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.case-link{display:block;padding:52px 48px;background:#C99B3F}
.quote-col{padding:52px 48px;display:flex;flex-direction:column;justify-content:center}
.viewall{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:10px;padding:20px 48px;border-top:1px solid var(--line);font-family:var(--f-head);font-size:13.5px;font-weight:800;letter-spacing:0.14em}
.sec-reviews{padding:64px 48px;background:var(--panel);border-top:1px solid var(--line)}
.g-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sec-blog{padding:64px 48px 72px;border-top:1px solid var(--line)}
.g-blog{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cover{display:flex;align-items:center;justify-content:center;height:170px;background:var(--card2);border-bottom:1px solid var(--line);color:var(--t40);font-size:11px;font-weight:700;letter-spacing:0.14em}
.sec-faq{padding:72px 48px;border-top:1px solid var(--line);font-family:var(--f-body)}
.g-faq{display:grid;grid-template-columns:360px 1fr;gap:64px;align-items:start}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:hover{border-color:var(--goldt)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:21px 0;cursor:pointer}
.faq-qt{font-family:var(--f-head);font-size:16.5px;font-weight:700;line-height:1.45;color:var(--ink)}
.faq-item.open .faq-qt{color:var(--goldt)}
.faq-ic{flex:none;width:30px;height:30px;border:1px solid rgba(201,155,63,0.5);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--goldt)}
.faq-a{display:none;font-size:14.5px;line-height:1.75;color:var(--t60);padding:0 0 24px}
.faq-item.open .faq-a{display:block}
/* ---------- video marquee + modal ---------- */
@keyframes atq-marquee{0%{transform:translateX(0)}100%{transform:translateX(-200%)}}
@keyframes atq-marquee-m{0%{transform:translateX(0)}100%{transform:translateX(-400%)}}
@keyframes atq-marquee-s{0%{transform:translateX(0)}100%{transform:translateX(-640%)}}
/* Both marquees are built in JS, so the container is empty in the HTML.
   Without a reserved height the page jumps by the full card height the
   moment the script runs - the single biggest source of layout shift on
   the homepage. The video card is a fixed 220px still plus its caption.

   The video row's height is only reserved while the strips are switched on.
   With the toggle off, service pages still carry an empty .mq in their pasted
   markup that site.js removes on load - reserving space for that would leave
   a tall gap and cause the very shift this is meant to remove. */
.mq{display:flex;animation:atq-marquee 32s linear infinite}
body:not(.atq-no-video) .mq{min-height:312px}
.mq-card{flex:none;width:25%;padding:0 8px}
.vmodal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:1000;align-items:center;justify-content:center}
.vmodal.open{display:flex}
.vbox{position:relative;height:86vh;aspect-ratio:9 / 16;max-width:92vw}
.vclose{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(12,12,12,0.85);border:1px solid rgba(245,241,232,0.4);color:#F5F1E8;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
/* ---------- footer ---------- */
.ft{font-family:var(--f-body)}
.ft a{color:var(--t60)}
.ft a:hover{color:var(--goldt)}
.ft a.fnav:hover{color:var(--fnav-hov)}
.ft-cta{margin:0 48px;background:#C99B3F;border-radius:24px;padding:56px 56px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.btn-fcta{flex:none;padding:19px 40px;background:var(--btn-dark);color:var(--ink);font-family:var(--f-head);font-size:15px;font-weight:800;border-radius:100px}
.ft .btn-fcta{color:var(--ink)}
.ft .btn-fcta:hover{color:var(--fcta-hov)}
.ft-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding:64px 48px 48px}
.ft-head{font-family:var(--f-head);font-size:12px;font-weight:800;letter-spacing:0.16em;color:var(--fhead);margin-bottom:4px}
.ft-bar{display:flex;justify-content:space-between;padding:22px 48px;border-top:1px solid var(--line);font-size:12.5px;color:var(--t40)}
.soc{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
/* The headline word and the dashboard both swap their own text on a timer.
   Every swap changes the text width, which changes where the line wraps, which
   moves everything below it - a fresh layout shift every few seconds for as
   long as the page is open. Reserving the space each one needs stops that.
   Overshooting is safe here: the word sits at the end of its line and the note
   sits at the bottom of the card, so spare space is invisible. */
#flipWord{min-width:5.3em;text-align:left}
#dashProject{min-height:15px}
#dashNote{display:block;min-height:34px}
@media (max-width:900px){#dashNote{min-height:50px}}
/* split-flap board - the dashboard numbers turn over like an airport display */
:root{--sf-bg:#141310;--sf-edge:rgba(201,155,63,0.22);--sf-seam:rgba(0,0,0,0.55);--sf-shadow:rgba(0,0,0,0.45)}
html[data-theme="light"]{--sf-bg:#EFEADC;--sf-edge:rgba(35,28,14,0.16);--sf-seam:rgba(35,28,14,0.22);--sf-shadow:rgba(35,28,14,0.14)}
.atq-sf{display:inline-flex;align-items:stretch;gap:3px;line-height:1;vertical-align:baseline}
.atq-sf-c{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0.62em;padding:0.14em 0.06em;border-radius:3px;background:var(--sf-bg);box-shadow:inset 0 0 0 1px var(--sf-edge),0 1px 2px var(--sf-shadow);font-variant-numeric:tabular-nums;overflow:hidden;perspective:140px}
.atq-sf-c::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--sf-seam);pointer-events:none}
.atq-sf-c>i{font-style:normal;display:block;transform-origin:center top;backface-visibility:hidden}
.atq-sf-c.is-flip>i{animation:atqFlap 0.09s ease-out}
.atq-sf-c.is-gap{background:none;box-shadow:none;min-width:0.26em}
.atq-sf-c.is-gap::after{display:none}
@keyframes atqFlap{from{transform:rotateX(-88deg);opacity:0.3}to{transform:rotateX(0);opacity:1}}
.atq-sf-sm .atq-sf-c{border-radius:2px;padding:0.2em 0.12em;min-width:0.66em}
@media (prefers-reduced-motion:reduce){.atq-sf-c.is-flip>i{animation:none}}
/* Local SEO page: grids and world-map styling. These classes only exist
   on that page's design, so they were never in this stylesheet. */
.g-map{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.g-two{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.g-hero2{display:grid;grid-template-columns:1.12fr 1fr;gap:52px;align-items:center}
.wmap{position:relative}
.wmap-tip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-100%);transition:opacity .12s ease;background:var(--card);border:1px solid rgba(224,58,47,0.55);border-radius:10px;padding:9px 13px;box-shadow:0 12px 30px -10px rgba(0,0,0,0.5);white-space:nowrap;z-index:5}
.wmap-tip.on{opacity:1}
.wmap-pin{cursor:pointer}
.wmap-zoom{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:6px;z-index:6}
.wmap-zb{width:34px;height:34px;border-radius:9px;background:var(--card);border:1px solid var(--line18);color:var(--ink);font-family:var(--f-head);font-size:15px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.wmap-zb:hover{border-color:var(--goldt);color:var(--goldt)}
.wmap-zl{position:absolute;right:14px;top:14px;z-index:6;padding:6px 12px;border-radius:100px;background:var(--card);border:1px solid var(--line18);font-family:var(--f-head);font-size:11px;font-weight:800;letter-spacing:0.06em;color:var(--t60);pointer-events:none}
.wmap-glow circle{animation:wmapPulse 3.4s ease-in-out infinite}
.wmap-tag{pointer-events:none;position:absolute;left:2%;bottom:4%;max-width:280px;background:var(--card);border:1px solid rgba(201,155,63,0.4);border-radius:14px;padding:18px 20px}
@keyframes wmapPulse{0%,100%{opacity:1}50%{opacity:0.55}} .wmap-tag{pointer-events:none;position:absolute;left:2%;bottom:4%;max-width:280px;background:var(--card);border:1px solid rgba(201,155,63,0.4);border-radius:14px;padding:18px 20px} @media (max-width: 760px){.wmap-tag{position:static;max-width:none;margin-top:18px}} @media (max-width: 760px){ .wmap-zoom{right:8px;bottom:8px} .wmap-zb{width:40px;height:40px} .wmap-zl{right:8px;top:8px;font-size:10px;padding:5px 10px} .wmap-tip{font-size:12px} }
@media (max-width: 1024px){.g-hero2{grid-template-columns:1fr}.g-map{grid-template-columns:repeat(2,1fr)}.g-two{grid-template-columns:1fr;gap:28px}}
@media (max-width: 760px){.g-map{grid-template-columns:1fr}.wmap-tag{position:static;max-width:none;margin-top:18px}.wmap-zoom{right:8px;bottom:8px}.wmap-zb{width:40px;height:40px}.wmap-zl{right:8px;top:8px;font-size:10px;padding:5px 10px}.wmap-tip{font-size:12px}}

/* footer map card - brand-tinted street map, real Google embed only on click */
:root{--mapland:#121210;--maproad:rgba(245,241,232,0.10)}
html[data-theme="light"]{--mapland:#F1EDE3;--maproad:rgba(35,28,14,0.10)}
.ft-map{position:relative;width:100%;max-width:290px;margin-top:14px;border:1px solid var(--line);border-radius:14px;overflow:hidden;line-height:0}
.ft-map:hover{border-color:var(--goldt)}
.ft-map-load{display:block;width:100%;padding:0;margin:0;border:0;background:none;cursor:pointer;line-height:0}
.ft-map-load svg{display:block;width:100%;height:auto}
.ft-map-tag{position:absolute;left:11px;bottom:9px;font-family:var(--f-head);font-size:9px;font-weight:800;letter-spacing:0.16em;color:var(--goldt);line-height:1;pointer-events:none}
.ft-map-open{position:absolute;top:8px;right:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:100px;background:rgba(12,12,12,0.78);border:1px solid var(--line18);font-size:10.5px;font-weight:700;line-height:1;color:var(--goldt);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ft .ft-map-open{color:var(--goldt)}
.ft .ft-map-open:hover{color:var(--goldt-hov);border-color:var(--goldt)}
html[data-theme="light"] .ft-map-open{background:rgba(255,255,255,0.85)}
.ft-map-ring{transform-box:fill-box;transform-origin:center;animation:atqPin 2.8s ease-out infinite}
@keyframes atqPin{0%{transform:scale(0.28);opacity:0.85}70%{transform:scale(1);opacity:0}100%{transform:scale(1);opacity:0}}
.ft-map iframe{display:block;width:100%;height:112px;border:0;filter:invert(0.92) hue-rotate(185deg) saturate(0.7) contrast(0.94)}
html[data-theme="light"] .ft-map iframe{filter:none}
@media (prefers-reduced-motion:reduce){.ft-map-ring{animation:none;opacity:0.3}}
.wa-float{position:fixed;bottom:26px;right:26px;z-index:9999;width:58px;height:58px;border-radius:50%;background:#25D366;color:#FFFFFF;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px -6px rgba(0,0,0,0.55)}
.wa-float:hover{transform:scale(1.07);color:#FFFFFF}
/* ---------- responsive ---------- */
@media (min-width: 901px){.mobile-only{display:none !important}}
@media (max-width: 1024px){
  html,body{overflow-x:hidden}
  .sec-hero{grid-template-columns:1fr}
  .sec-hero h1{font-size:54px !important}
  .g-metrics{grid-template-columns:repeat(2,1fr)}
  .g-metrics>div:nth-child(even){border-right:none}
  .g-svc-top{grid-template-columns:1fr}
  .g-proc{grid-template-columns:1fr;gap:14px}
  .proc-arrow{display:none}
  .g-clients{grid-template-columns:repeat(2,1fr)}
  .g-trust{grid-template-columns:1fr}
  .g-faq{grid-template-columns:1fr}
  .ft-cols{grid-template-columns:repeat(2,1fr);gap:40px}
}
@media (max-width: 900px){
  .nav-desktop{display:none}
  .hamburger{display:flex}
  .mq{animation-name:atq-marquee-m}
  .mq-card{width:50%}
}
@media (max-width: 760px){
  .site-hd{padding:12px 20px}
  .sec-hero{padding:40px 20px 36px;gap:28px}
  .sec-hero h1{font-size:38px !important}
  .hero-rows{flex-wrap:wrap}
  .g-metrics>div{padding:22px 18px}
  .g-metrics .m-num{font-size:28px !important}
  .sec-services{padding:44px 20px}
  .g-services{grid-template-columns:1fr}
  .g-svc-top{gap:22px;padding:26px 22px}
  .sec-process{padding:0 20px 40px}
  .panel{padding:28px 20px}
  .proc-num{font-size:64px !important}
  .sec-clients{padding:40px 20px}
  .sec-trust{padding:44px 20px}
  .g-trust{gap:32px}
  .g-trust-cards{grid-template-columns:1fr}
  .g-proof{grid-template-columns:1fr}
  .case-link{padding:34px 22px}
  .quote-col{padding:34px 22px}
  .viewall{padding:14px 20px}
  .sec-reviews{padding:40px 20px}
  .g-reviews{grid-template-columns:1fr}
  .sec-blog{padding:40px 20px 40px}
  .g-blog{grid-template-columns:1fr}
  .sec-faq{padding:44px 20px}
  .g-faq{gap:32px}
  .sec-head{flex-wrap:wrap;align-items:flex-start;gap:12px}
  .ft-cta{flex-direction:column;align-items:flex-start;margin:0 20px;padding:36px 24px;gap:24px}
  .ft-cta .ft-title{font-size:26px !important}
  .ft-cols{grid-template-columns:1fr;gap:28px;padding:40px 20px 28px}
  .ft-bar{flex-wrap:wrap;gap:10px;padding:16px 20px}
  .vbox{height:auto;width:min(92vw, 48.4vh)}
}
@media (max-width: 560px){
  .hd-cta{display:none}
  .mq{animation-name:atq-marquee-s}
  .mq-card{width:80%}
  body:not(.atq-no-video) .mq{min-height:318px}
  .mq-rev{min-height:232px}
  .g-clients{grid-template-columns:1fr}
}

/* ---------- type roles applied globally ---------- */
h1,h2,h3,h4,h5,h6{font-family:var(--f-head)}
button,.btn-cta,.btn-ghost,.btn-fcta,input[type=submit],.wp-element-button{font-family:var(--f-head)}
p,li,td,th,label,input,textarea,select{font-family:var(--f-body)}

/* ---------- WordPress + accessibility helpers ---------- */
.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:12px;left:12px;z-index:999;width:auto;height:auto;clip:auto;padding:12px 20px;background:var(--gold);color:#0C0C0C;border-radius:100px;font-weight:800}
:focus-visible{outline:2px solid var(--goldt);outline-offset:3px}

/* ---------- placeholders ----------
   Logo stands in for content (posts, services, case studies).
   Faceless vector stands in for people (team, clients, testimonials).
   Both disappear the moment a real featured image is set in the admin. */
.atq-thumb{display:block;width:100%;height:220px;object-fit:cover;background:var(--card2)}
.atq-ph{background:var(--card2)}
.atq-ph-logo{width:100%;height:220px;object-fit:contain;padding:56px;opacity:.4}
.atq-ph-person{display:block;width:100%;height:220px;object-fit:cover;object-position:center 20%;opacity:.9}

/* Logo placeholder follows the day/night pair (white on dark, black on light). */
.atq-ph-logo.lgo-n{display:block}
.atq-ph-logo.lgo-d{display:none}
html[data-theme="light"] .atq-ph-logo.lgo-n{display:none}
html[data-theme="light"] .atq-ph-logo.lgo-d{display:block}

/* Round face, for team members and testimonial rows. */
.atq-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center 20%;background:var(--card2);border:1px solid var(--line18);flex:none}
.atq-avatar-sm{width:38px;height:38px}
.atq-avatar-lg{width:96px;height:96px}

/* Long-form content (blog posts, privacy, terms) */
.atq-prose{font-size:16px;line-height:1.8;color:var(--t75)}
.atq-prose h2{font-size:27px;font-weight:800;color:var(--ink);margin:44px 0 14px;letter-spacing:-0.01em}
.atq-prose h3{font-size:21px;font-weight:800;color:var(--ink);margin:34px 0 10px}
.atq-prose h4{font-size:17px;font-weight:800;color:var(--ink);margin:26px 0 8px}
.atq-prose p{margin:0 0 18px}
.atq-prose ul,.atq-prose ol{margin:0 0 18px;padding-left:22px}
.atq-prose li{margin:0 0 9px}
.atq-prose img{max-width:100%;height:auto;border-radius:14px;margin:26px 0}
.atq-prose blockquote{margin:26px 0;padding:18px 24px;border-left:3px solid var(--goldt);background:var(--card);border-radius:0 12px 12px 0;color:var(--t85)}
.atq-prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14.5px}
.atq-prose th,.atq-prose td{padding:12px 14px;border:1px solid var(--line);text-align:left}
.atq-prose th{background:var(--card);font-weight:800;color:var(--ink)}
.atq-prose code{padding:2px 7px;background:var(--card2);border-radius:6px;font-size:.9em}

/* Pagination */
.atq-pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.atq-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border:1px solid var(--line-strong);border-radius:100px;font-size:13.5px;font-weight:700;color:var(--t70)}
.atq-pagination .page-numbers:hover{color:var(--goldt);border-color:var(--goldt)}
.atq-pagination .page-numbers.current{background:var(--pill-bg);color:var(--pill-ink);border-color:transparent}

/* Footer legal bar links rendered through wp_nav_menu */
.ft-legal{font-size:12.5px}

@media (max-width:760px){
  .sec-page{padding:44px 20px !important}
  .atq-prose h2{font-size:23px}
}

/* tokens added by the inner pages */
:root{ --t35:rgba(245,241,232,0.35); --row-hl:rgba(201,155,63,0.05); }
html[data-theme="light"]{ --t35:rgba(29,23,12,0.55); --row-hl:rgba(201,155,63,0.10); }
/* ---------- inner pages: services archive + service detail ---------- */
.svc-row{display:grid;grid-template-columns:70px 1.1fr 1.4fr auto;gap:28px;align-items:center;padding:34px 48px;border-bottom:1px solid var(--line)}
.svc-row:hover{background:var(--row-hl);border-color:var(--goldt)}
.pg-hero{padding:76px 48px 56px;border-bottom:1px solid var(--line)}
.sec-guide{padding:64px 48px 0}
.g-guide{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:start}
.sec-extras{padding:64px 48px}
.g-extras{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pkg-band{margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;justify-content:space-between;align-items:center;gap:32px}
.pkg-btn{flex:none;padding:14px 28px;border:1px solid var(--goldt);background:transparent;color:var(--goldt);font-family:var(--f-head);font-size:13.5px;font-weight:800;border-radius:100px;transition:background 0.18s ease, color 0.18s ease;display:inline-block}
.pkg-btn:hover{background:#C99B3F;color:#0C0C0C}
.pill{padding:8px 18px;border:1px solid var(--line18);border-radius:100px;font-size:13px;font-weight:700;color:var(--t75);display:inline-flex;align-items:center;gap:8px}
.pill img{width:16px;height:16px}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.stat3>div{padding:30px 48px;border-right:1px solid var(--line)}
.stat3>div:last-child{border-right:none}
.sec{padding:64px 48px}
.sec-t{padding:0 48px 64px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.hero2{display:grid;grid-template-columns:1.12fr 1fr;gap:52px;align-items:center}
.depth{display:grid;grid-template-columns:56px 1fr;gap:16px}
.depth-n{font-family:var(--f-head);font-size:26px;font-weight:900;color:rgba(201,155,63,0.4)}
.ph{display:flex;align-items:center;justify-content:center;min-height:340px;border-radius:18px;border:1px dashed var(--line-strong);background:var(--card);color:var(--t35);font-size:11.5px;font-weight:800;letter-spacing:0.14em;text-align:center;padding:20px}
.mq-rev{display:flex;animation:atq-marquee 38s linear infinite reverse;min-height:248px}
.rv-card{flex:none;width:33.3333%;padding:0 8px}
.step{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;transition:border-color .18s ease, transform .18s ease}
.step:hover{border-color:var(--goldt);transform:translateY(-3px)}
.step-n{position:absolute;top:-14px;right:6px;font-family:var(--f-head);font-size:92px;font-weight:900;color:rgba(201,155,63,0.12);line-height:1;pointer-events:none}
.step-bar{width:40px;height:3px;background:#C99B3F;border-radius:2px}
.step-k{font-family:var(--f-head);font-size:11.5px;font-weight:800;letter-spacing:0.18em;color:var(--goldt);margin-top:16px}
.step-h{font-family:var(--f-head);font-size:18px;font-weight:800;color:var(--ink);margin-top:6px}
.step-p{font-size:13.5px;line-height:1.65;color:var(--t55);margin-top:8px}
@media (max-width: 1024px){
  .pg-hero h1{font-size:48px !important}
  .g-guide{grid-template-columns:1fr}
  .hero2{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .stat3{grid-template-columns:1fr}
  .stat3>div{border-right:none;border-bottom:1px solid var(--line)}
}
@media (max-width: 760px){
  .pg-hero{padding:44px 20px 34px}
  .pg-hero h1{font-size:36px !important}
  .svc-row{grid-template-columns:1fr;gap:10px;padding:24px 20px}
  .svc-arrow{display:none}
  .sec-guide{padding:40px 20px 0}
  .g-guide{gap:32px}
  .sec-extras{padding:40px 20px}
  .g-extras{grid-template-columns:1fr}
  .pkg-band{flex-wrap:wrap;padding:22px 20px}
  .sec{padding:40px 20px}
  .sec-t{padding:0 20px 40px}
  .hero2{gap:28px}
  .g4,.g3{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr;gap:28px}
  .stat3>div{padding:22px 20px}
}
@media (max-width: 900px){
  .mq-rev{animation-name:atq-marquee-m}
  .rv-card{width:50%}
}
@media (max-width: 560px){
  .mq-rev{animation-name:atq-marquee-s}
  .rv-card{width:88%}
}

/* ---------- placeholder boxes on inner pages ----------
   .ph is a dashed empty slot in the design. When a real image is dropped in it
   must fill the slot, not push it open to the image's natural size. */
.ph{overflow:hidden;padding:0;border-style:solid}
.ph img{width:100%;height:100%;min-height:340px;object-fit:cover;object-position:center 22%;display:block;border-radius:18px}
.ph:has(img){border-color:var(--line)}

/* ---------- partners strip (service pages) ---------- */
.hb{border:1px solid var(--line)}
.g-partners{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pchip{border:1px solid var(--line)}
.pchip:hover{border-color:rgba(201,155,63,0.5)}
@media (max-width: 1024px){
  .g-partners{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 760px){
  .g-partners{grid-template-columns:1fr}
}

/* ---------- case studies ---------- */
.hb-lift{transition:transform .25s ease,border-color .25s ease,background .25s ease}
.hb-lift:hover{transform:translateY(-2px);border-color:rgba(201,155,63,0.45)}
/* Cover images fill their slot instead of pushing it open. */
.atq-case-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Case study covers always fill their slot, whatever image is set.
   Overrides the generic placeholder padding/opacity. */
.atq-case-cover,
.atq-case-cover.atq-ph,
.atq-case-cover.atq-ph-logo,
.atq-case-cover.atq-ph-person{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 22%;
  padding:0;opacity:1;display:block;border-radius:0;min-height:0
}

/* ---------- display weights ----------
   Elements the design sets at 900 need a face that actually has 900. */
.ft-title,.btn-cta,.btn-ghost,.btn-fcta,.pkg-btn,.brand-word,.ft-head,
.m-num,.depth-n,.step-n,.proc-num,.faq-ic,.faq-qt,.svc-arrow{
  font-family:var(--f-head)
}
.ft-title{font-weight:900;letter-spacing:-0.01em}
.btn-cta,.btn-ghost,.btn-fcta,.pkg-btn{font-weight:800}

/* ---------- standalone pages ---------- */
.mdl{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.78);z-index:1000;align-items:center;justify-content:center;padding:24px}
.mdl.open{display:flex}
.mdl-box{position:relative;width:min(760px,94vw);max-height:88vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:36px}
.mdl-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:var(--bg);border:1px solid var(--line-strong);color:var(--ink);font-size:14px;cursor:pointer}
.ph[style*="inset"]{min-height:0}

/* ---------- contact page ---------- */
input::placeholder,textarea::placeholder{color:var(--t35)}
.fld{width:100%;box-sizing:border-box;padding:13px 16px;background:transparent;border:1px solid var(--line);border-radius:10px;color:var(--ink);font-family:'Manrope',sans-serif;font-size:14px;outline:none}
.fld:focus{border-color:var(--goldt)}
.lbl{font-size:12px;font-weight:700;color:var(--t55);margin-bottom:7px}
.chip{padding:10px 18px;border-radius:100px;font-size:13px;font-weight:700;font-family:'Manrope',sans-serif;cursor:pointer;background:var(--bg);border:1px solid var(--line18);color:var(--t70)}
.chip:hover{border-color:var(--goldt);color:var(--goldt)}
.chip.on{background:#C99B3F;border-color:#C99B3F;color:#0C0C0C}
.cfaq{border-bottom:1px solid var(--line)}
.cfaq:hover{border-color:var(--goldt)}
.cfaq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 8px;background:none;border:none;cursor:pointer;text-align:left}
.cfaq-t{font-family:var(--f-head);font-size:17px;font-weight:700;color:var(--ink)}
.cfaq.open .cfaq-t{color:var(--goldt)}
.cfaq-ic{font-family:var(--f-head);font-size:20px;font-weight:700;color:var(--goldt);flex:none}
.cfaq-a{display:none;padding:0 8px 24px;font-size:14.5px;line-height:1.7;color:var(--t60)}
.cfaq.open .cfaq-a{display:block}
.g-contact{display:grid;grid-template-columns:1fr 1.1fr;gap:64px}
@media (max-width: 1024px){
  .g-contact{grid-template-columns:1fr;gap:36px}
}
@media (max-width: 760px){
  .g-form{grid-template-columns:1fr !important}
}

/* ---------- seo packages + html sitemap ---------- */
.btn-ongold{border:1.5px solid rgba(12,12,12,0.4);color:#0C0C0C;background:transparent}
.btn-ongold:hover{background:#0C0C0C;color:#C99B3F;border-color:#0C0C0C}
.g-sm{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:52px 48px 72px}
.g-sm a:hover{color:var(--goldt) !important}
@media (max-width: 1024px){
  .g-sm{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 760px){
  .g-sm{grid-template-columns:1fr;padding:32px 20px 44px}
}

/* ---------- blog index ---------- */
.featured{display:grid;grid-template-columns:1.2fr 1fr;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.featured:hover{border-color:var(--goldt)}
.cat-btn{padding:10px 20px;border-radius:100px;font-size:13px;font-weight:700;font-family:'Manrope',sans-serif;cursor:pointer;background:none;border:1px solid var(--line18);color:var(--t60)}
.cat-btn:hover{border-color:var(--goldt);color:var(--goldt)}
.cat-btn.on{background:var(--pill-bg);border-color:var(--pill-bg);color:var(--pill-ink)}
.cover-lg{display:block;position:relative;background:var(--card2);border-left:1px solid var(--line);min-height:320px}
.cover-sm{display:flex;align-items:center;justify-content:center;height:170px;background:var(--card2);border-bottom:1px solid var(--line);color:var(--t40);font-size:11px;font-weight:700;letter-spacing:0.14em}
@media (max-width: 1024px){
  .featured{grid-template-columns:1fr}
}

/* ---------- single post ---------- */
.art-wrap{display:flow-root;padding:56px 48px 40px}
.art-side{float:right;width:380px;margin:0 0 44px 56px;display:flex;flex-direction:column;gap:20px}
.art-body{margin-top:40px;max-width:760px}
.art-body a{color:var(--goldt);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.art-body a:hover{color:var(--goldt-hov)}
.scard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px}
.skick{font-family:var(--f-head);font-size:11.5px;font-weight:800;letter-spacing:0.16em;color:var(--goldt)}
.mrow{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:none}
.topic{padding:8px 16px;border:1px solid var(--line18);border-radius:100px;font-size:12px;font-weight:700;color:var(--t70)}
.topic:hover{border-color:var(--goldt);color:var(--goldt)}
.tag{padding:8px 16px;border:1px solid var(--line18);border-radius:100px;font-size:12px;font-weight:600;color:var(--t60)}
.shr{width:36px;height:36px;border-radius:50%;border:1px solid var(--line18);display:flex;align-items:center;justify-content:center;color:var(--t70)}
.shr:hover{border-color:var(--goldt);color:var(--goldt)}
.cfld{padding:13px 18px;background:var(--bg);border:1px solid var(--line18);border-radius:10px;color:var(--ink);font-family:'Manrope',sans-serif;font-size:14px;outline:none}
.cfld:focus{border-color:var(--goldt)}
.g-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width: 1100px){
  .art-wrap{display:flex;flex-direction:column-reverse}
  .art-side{float:none;width:auto;margin:40px 0 0}
}
@media (max-width: 1024px){
  .g-rel{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 760px){
  .art-wrap{padding:36px 20px 28px}
  .art-h1{font-size:30px !important}
  .g-rel{grid-template-columns:1fr}
  .cgrid{grid-template-columns:1fr !important}
}

/* Comment form fields inherit the card look. */
#commentform p{margin:0 0 14px}
#commentform{display:flex;flex-direction:column;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;margin-top:26px}
.art-body .atq-cta a{border:none}

/* Article text runs the full column width, matching the featured image.
   The 760px cap in the source design cut lines short of the image edge. */
.art-body{max-width:none}
.art-body p{max-width:none}

/* ---------- article polish ---------- */

/* Breathing room before a new section. A heading straight after a paragraph
   was sitting too close to read as a break. */
.art-body h2{margin-top:48px;margin-bottom:14px}
.art-body h3{margin-top:38px;margin-bottom:12px}
.art-body h4{margin-top:30px;margin-bottom:10px}
.art-body p{margin:0 0 20px}
.art-body ul,.art-body ol{margin:0 0 22px}
.art-body h2:first-child,.art-body h3:first-child{margin-top:0}

/* Any wholly-italic paragraph or heading becomes the gold-rule pull quote. */
.art-body p:has(> em:only-child),
.art-body p:has(> i:only-child),
.art-body h2:has(> em:only-child),
.art-body h3:has(> em:only-child),
.art-body blockquote{
  border-left:3px solid var(--goldt);
  padding:4px 0 4px 22px;
  margin:30px 0;
  color:var(--t85);
  font-style:italic;
  background:none
}

/* Hover states so link-carrying cards read as links. */
.g-proof .case-link span,.wlink{transition:color .2s ease}
a[style*="border-bottom:2px solid rgba(12,12,12"]:hover{color:#F5F1E8 !important;border-bottom-color:#F5F1E8 !important}
.atq-cta a:hover{background:#F5F1E8 !important;color:#0C0C0C !important}

/* Everywhere else - featured block, case study covers, article hero - the slot
   keeps its shape and the picture fills it. */
.featured .cover-lg{position:relative;overflow:hidden}
.featured .cover-lg .atq-case-cover{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important}
/* ---------- card images (original behaviour restored) ---------- */
.atq-thumb{display:block;width:100%;height:220px;object-fit:cover;background:var(--card2)}
.atq-case-cover,
.atq-case-cover.atq-ph,
.atq-case-cover.atq-ph-logo,
.atq-case-cover.atq-ph-person{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 22%;
  padding:0;opacity:1;display:block;border-radius:0;min-height:0
}
.atq-ph-logo{width:100%;height:220px;object-fit:contain;padding:56px;opacity:.4}
.atq-ph-person{display:block;width:100%;height:220px;object-fit:cover;object-position:center 20%;opacity:.9}


/* ---------- xml sitemap page ---------- */
.xg{display:flex;align-items:center;gap:12px;padding:10px 14px;margin:14px 0 0 22px;background:rgba(201,155,63,0.08);border:1px solid rgba(201,155,63,0.3);border-radius:10px;cursor:pointer;user-select:none}
.xg:hover{border-color:var(--goldt)}
.xg-ic{width:22px;height:22px;border-radius:50%;border:1px solid rgba(201,155,63,0.5);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--goldt);flex:none}
.xurls{display:none}
.xurls.open{display:block}
.xdim{color:var(--t35)}
.xval{color:var(--t70)}
.xcode{padding:22px 26px;overflow-x:auto;font-family:'SF Mono','Consolas',monospace;font-size:13px;line-height:1.9}
@media (max-width: 760px){
  .xcode{padding:16px 14px;font-size:11.5px}
  .xg{margin-left:6px}
}

/* ---------- 404 + thank you ---------- */
.e-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;padding:72px 48px 80px;align-items:center}
.e-404{font-family:var(--f-head);font-size:150px;line-height:0.86;font-weight:900;letter-spacing:-0.05em;color:transparent;-webkit-text-stroke:2px rgba(201,155,63,0.55);margin:0}
.e-link{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.e-link:hover{border-color:var(--goldt)}
.e-sfld{flex:1;min-width:0;padding:14px 20px;background:transparent;border:none;outline:none;color:var(--ink);font-family:'Manrope',sans-serif;font-size:14px}
.e-res{display:block;padding:13px 20px;border-top:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--t70)}
.e-res:hover{background:var(--card);color:var(--goldt)}
.e-res b{color:var(--goldt);font-weight:800}
.ty-wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding:64px 48px 72px;align-items:start}
.ty-step{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.ty-step:last-child{border-bottom:none}
.ty-n{width:34px;height:34px;border-radius:50%;border:1px solid rgba(201,155,63,0.5);display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-size:13px;font-weight:800;color:var(--goldt)}
.ty-link{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.ty-link:hover{border-color:var(--goldt)}
@media (max-width: 1024px){
  .e-wrap{grid-template-columns:1fr;gap:40px}
  .ty-wrap{grid-template-columns:1fr;gap:36px}
}
@media (max-width: 760px){
  .e-wrap{padding:44px 20px 52px}
  .e-404{font-size:96px}
  .e-h1{font-size:32px !important}
  .ty-wrap{padding:36px 20px 44px}
  .ty-h1{font-size:34px !important}
}

/* A real client logo or platform icon fills its badge; the badge itself stops
   painting a background so nothing shows through the edges. */
.client-card span:has(> img[style*="border-radius:50%"]){background:none !important;border:none !important}

/* ---------- card image slots ----------
   Blog and case study grid cards were 170px while the homepage used 220px,
   which made the same picture look squashed. One height everywhere. */
.cover-sm,
.g3 .card > div:first-child,
.g-blog > a > span:first-child{height:220px !important}

/* Sticky header housekeeping */
html{scroll-padding-top:88px}                 /* anchor links clear the header */
#mMenu{position:sticky;top:72px;z-index:119}  /* the mobile panel hangs off it */
.vmodal,.atq-lightbox{z-index:9999}           /* modals still cover the header */

@media (max-width:760px){
  html{scroll-padding-top:72px}
}

/* ---------- written review cards ----------
   Cards sized to the tallest one in the row, so a couple of long reviews left
   short ones sitting in oversized boxes. Each card now takes only the height
   its own text needs. */
.mq-rev,.mq{align-items:flex-start}
.rv-card > .card{height:auto !important}

/* ---------- on-camera review strips, switched off ----------
   Hidden in CSS first so nothing flashes on screen, then removed in site.js for
   browsers without :has(). Each rule names the row's direct parent, or the
   element sitting immediately before it, so nothing wider is ever caught. */
body.atq-no-video div:has(> #mqTrack),
body.atq-no-video *:has(+ div > #mqTrack),
body.atq-no-video [data-autoscroll]:has(> #list-clientVideos),
body.atq-no-video *:has(+ [data-autoscroll] > #list-clientVideos),
body.atq-no-video [data-autoscroll]:has(> #list-empVideos),
body.atq-no-video *:has(+ [data-autoscroll] > #list-empVideos),
body.atq-no-video #vModal{display:none !important}

/* The whole block goes, not just the row - otherwise its padding is left
   behind as a tall empty gap. A section that also holds the written reviews is
   left alone, since only its video half should disappear. */
body.atq-no-video section:has(#mqTrack):not(:has(#rvTrack)),
body.atq-no-video section:has(#list-clientVideos):not(:has(#list-clientReviews)),
body.atq-no-video section:has(#list-empVideos):not(:has(#list-empReviews)){display:none !important}