/* ============================================================
   DynamIQ Enterprise Solution — theme stylesheet
   Sections: 1 tokens+home · 2 products listing · 3 product detail · 4 composition system · 5 WordPress + modern-UI layer
   ============================================================ */

/* ═══ 1 · TOKENS, SHARED COMPONENTS, HOME SECTIONS ═══ */
/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS · Kemana-style motion + DynamIQ design-system palette
   (orange #F88F10, dark #252324 / #4F5257, mist #D9D9D9)
   ═══════════════════════════════════════════════════════════════ */
:root{
  color-scheme: light;
  /* unified color palette */
  --color-brand:#F88F10; --color-brand-light:#FFA83A; --color-brand-dark:#D97400;
  --color-ink:#252324; --color-gray:#4F5257; --color-mist:#D9D9D9;
  --color-surface:#FFFFFF; --color-surface-muted:#F5F4F2; --color-surface-warm:#FBFAF8;
  --color-white:#FFFFFF; --color-black:#000000; --color-on-accent:var(--color-white);
  --rgb-brand:248,143,16; --rgb-ink:37,35,36; --rgb-gray:79,82,87;
  --rgb-white:255,255,255; --rgb-scrim:20,18,19; --rgb-night:9,13,20; --rgb-cool:214,221,227;

  /* semantic color roles */
  --orange:var(--color-brand); --orange-2:var(--color-brand-light); --orange-deep:var(--color-brand-dark);
  --orange-glow:rgba(var(--rgb-brand),.5); --gray:var(--color-gray); --mist:var(--color-mist);
  --grad-dark:linear-gradient(90deg,var(--color-ink) 0%,var(--color-gray) 140.31%);
  --font-sans:"Roboto",sans-serif;
  /* unified type scale */
  --fs-2xs:.6875rem; /* 11px · tags / micro labels */
  --fs-xs:.75rem; /* 12px · metadata / eyebrows */
  --fs-sm:.875rem; /* 14px · compact copy / controls */
  --fs-body:1rem; /* 16px · default reading size */
  --fs-lede:clamp(1rem,.96rem + .2vw,1.125rem); /* 16–18px */
  --fs-card:clamp(1.125rem,1.03rem + .4vw,1.375rem); /* 18–22px */
  --fs-subheading:clamp(1.5rem,1.25rem + 1.2vw,2.25rem); /* 24–36px */
  --fs-h3:clamp(1.25rem,1.1rem + .65vw,1.5rem); /* 20–24px */
  --fs-h2:clamp(2rem,1.5rem + 2vw,3.25rem); /* 32–52px */
  --fs-h1:clamp(2.5rem,1.7rem + 3.5vw,4.75rem); /* 40–76px */
  /* hero headline · height-aware as well as width-aware, so a one-screen hero
     still fits on short laptops instead of pushing its CTAs below the fold */
  --fs-hero:clamp(1.875rem,1rem + 1.9vw + 1.1vh,4.25rem); /* 30–68px */
  --fs-display:clamp(2.5rem,2rem + 2.2vw,3.625rem); /* 40–58px */
  --lh-tight:1.08; --lh-heading:1.22; --lh-body:1.6; --lh-relaxed:1.7;
  --wrap:1440px; --pad:clamp(20px,4vw,64px); --sec:clamp(64px,6vw,96px); --r:14px; --r-pill:10px;
  --section-blend:clamp(48px,5vw,88px);
  --hf-h:44px; --nav-h:64px; /* measured at runtime for the full-height hero */

  /* LIGHT theme — the only theme */
  --bg:var(--color-surface); --bg-2:var(--color-surface-muted);
  --panel:var(--color-surface); --panel-2:var(--color-surface-muted);
  --text:var(--color-ink); --soft:rgba(var(--rgb-ink),.72); --faint:rgba(var(--rgb-ink),.5);
  --line:rgba(var(--rgb-ink),.12); --line-2:rgba(var(--rgb-ink),.07);
  --field-bg:var(--color-surface); --ghost-bg:rgba(var(--rgb-ink),.02);
  --card-grad:linear-gradient(180deg,var(--color-surface),var(--color-surface-warm));
  --nav-bg:rgba(var(--rgb-white),.78); --nav-bg-2:rgba(var(--rgb-white),.93); --panel-glass:rgba(var(--rgb-white),.98);
  --glow1:rgba(var(--rgb-brand),.1); --glow2:rgba(var(--rgb-cool),.55); --glow3:rgba(var(--rgb-brand),.06);
  --sap-filter:none;
  --shadow:0 20px 50px rgba(var(--rgb-ink),.1); --shadow-lg:0 40px 90px rgba(var(--rgb-ink),.14);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
#news-events,#services,#testimonials,#contact{ scroll-margin-top:calc(var(--nav-h,64px) + 16px); }
body{
  font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 600px at 85% -5%, var(--glow1), transparent 60%),
    radial-gradient(760px 620px at 6% 14%, var(--glow2), transparent 55%),
    radial-gradient(1000px 800px at 50% 108%, var(--glow3), transparent 60%);
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; background:none; border:0; color:inherit; }
::selection{ background:var(--orange); color:var(--color-on-accent); }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:1; }

/* ═══ TYPE ═══ */
h1,h2,h3,h4{ font-family:var(--font-sans); letter-spacing:-.025em; font-weight:700; line-height:var(--lh-tight); }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); line-height:var(--lh-heading); letter-spacing:-.015em; }
.lede{ font-size:var(--fs-lede); color:var(--soft); line-height:var(--lh-relaxed); }

.sec-head{ max-width:760px; margin-bottom:clamp(30px,3.5vw,50px); display:grid; gap:16px; }
.sec-head.center{ margin-inline:auto; text-align:center; justify-items:center; }
.sec-head p{ color:var(--soft); font-size:var(--fs-lede); }

.eyebrow{
  font-family:var(--font-sans); font-size:clamp(.875rem,.82rem + .2vw,1rem); font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--orange);
  display:inline-flex; align-items:center;
}

/* ═══ BUTTONS ═══ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:700;
  padding:16px 32px; border-radius:var(--r-pill); white-space:nowrap;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, box-shadow .35s, border-color .25s;
  will-change:transform;
}
.btn .arr{ transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.btn:hover .arr{ transform:translateX(5px); }
.btn-orange{ background:var(--orange); color:var(--color-on-accent); box-shadow:0 10px 30px -8px var(--orange-glow); }
.btn-orange:hover{ background:var(--orange-2); box-shadow:0 18px 46px -8px var(--orange-glow); transform:translateY(-2px); }
.btn-ghost{ border:1.5px solid var(--line); color:var(--text); background:var(--ghost-bg); }
.btn-ghost:hover{ border-color:var(--orange); background:rgba(var(--rgb-brand),.08); transform:translateY(-2px); }

.tlink{
  font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--orange);
  display:inline-flex; align-items:center; gap:9px;
}
.tlink .arr{ transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.tlink:hover .arr{ transform:translateX(5px); }

/* ═══ REVEAL SYSTEM (Kemana-style scroll appear) ═══ */
[data-reveal]{
  opacity:0; transform:translateY(32px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0ms); will-change:opacity,transform;
}
[data-reveal="fade"]{ transform:none; }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="scale"]{ transform:scale(.95); }
/* "reveal" = Adobe-style unmask: element wipes open from the top (timing set per-component) */
[data-reveal="reveal"]{ clip-path:inset(0 0 100% 0 round 14px); }
[data-reveal="reveal"].in{ clip-path:inset(0 0 0 0 round 14px); }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; } }

/* ═══════════════════════════════════════════════════════════════
   HEADER FORM BAR
   ═══════════════════════════════════════════════════════════════ */
/* solid ink, not the gradient — designer review: better contrast for the CTA */
.header-form{ background:var(--color-ink); border-bottom:1px solid var(--line-2); position:relative; z-index:2; }
.header-form .wrap{ display:flex; align-items:center; justify-content:space-between; gap:14px 24px; padding-block:10px; flex-wrap:wrap; }
.header-form p{ font-size:var(--fs-sm); color:var(--color-white); font-weight:500; letter-spacing:.01em; }
.header-form .mobile---view{ display:none; }
.header-form a{
  font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em;
  color:var(--orange); display:inline-flex; align-items:center; gap:8px; transition:color .2s, gap .2s;
}
.header-form a:hover{ color:var(--orange-2); gap:12px; }
@media (max-width:600px){
  .header-form .desktop---view{ display:none; }
  .header-form .mobile---view{ display:block; }
}

/* ═══════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════════ */
/* Solid white bar at all times — dark logo + dark links, condenses slightly on scroll */
.nav{
  position:sticky; top:0; z-index:60;
  background:var(--bg); border-bottom:1px solid var(--line);
  box-shadow:0 6px 24px rgba(var(--rgb-ink),.06);
  transition:background .3s, border-color .3s, box-shadow .3s;
}
.nav.scrolled{ box-shadow:0 8px 28px rgba(var(--rgb-ink),.08); }
/* Designer review: taller bar (~88px, within the 80–100px ask) + larger logo so
   the nav reads clearly. Height is fixed — on scroll only the shadow deepens. */
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:14px; min-height:88px; }
.nav .logo-link{ display:inline-flex; align-items:center; }
.nav .logo-link::before{
  content:""; display:block; width:158px; height:35px;
  background:url("../logos/DynamIQ_Logo_blk.svg") left center / contain no-repeat;
}
.logo-nav{ display:none; }

.nav-menu{ display:flex; align-items:center; gap:2px; list-style:none; }
.nav-menu > li{ position:relative; }
.nav-menu > li > a{
  display:flex; align-items:center; gap:7px;
  /* 18px per designer review — the 14px links were easy to miss */
  font-family:var(--font-sans); font-size:1.125rem; font-weight:500;
  color:var(--soft); padding:10px 14px; border-radius:8px; white-space:nowrap;
  transition:color .2s, background .2s;
}
.nav-menu > li > a:hover, .nav-menu > li:focus-within > a{ color:var(--text); background:rgba(var(--rgb-ink),.06); }
.nav-menu > li.has-children > a::after{
  content:""; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; opacity:.55; margin-left:2px;
}
/* light dropdowns with dark text, regardless of the bar state */
.dropdown{
  position:absolute; top:100%; left:0; min-width:270px; z-index:70;
  --text:var(--color-ink); --soft:rgba(var(--rgb-ink),.72);
  background:var(--bg); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-lg);
  padding:9px; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .22s ease, transform .22s cubic-bezier(.16,1,.3,1), visibility .22s;
}
.nav-menu > li:hover > .dropdown, .nav-menu > li:focus-within > .dropdown{ opacity:1; visibility:visible; transform:translateY(6px); }
.dropdown a{
  display:block; padding:10px 13px; border-radius:9px;
  font-size:var(--fs-sm); font-weight:400; color:var(--soft);
  transition:background .16s, color .16s, padding-left .16s;
}
.dropdown a:hover{ background:rgba(var(--rgb-brand),.1); color:var(--orange-deep); padding-left:17px; }

.nav-check{ display:none; }
.nav-burger{ display:none; flex-direction:column; gap:5px; padding:8px; }
.nav-burger span{ width:24px; height:2px; background:var(--text); border-radius:2px; transition:.3s; }
/* 1280px, up from 1160 — the 18px links need more room before folding to the burger */
@media (max-width:1280px){
  .nav-burger{ display:flex; }
  .nav-menu{
    display:none; position:absolute; top:100%; left:0; right:0;
    --text:var(--color-ink); --soft:rgba(var(--rgb-ink),.72);
    background:var(--bg); border-bottom:1px solid var(--line); box-shadow:0 20px 40px rgba(var(--rgb-ink),.1);
    flex-direction:column; align-items:stretch; gap:2px;
    padding:16px var(--pad) 30px; max-height:calc(100vh - 120px); overflow-y:auto;
  }
  .nav-check:checked ~ .nav-menu{ display:flex; }
  .nav-check:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-check:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  .nav-check:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav-menu > li > a{ padding:13px 8px; }
  .nav-menu > li > a:hover{ background:rgba(var(--rgb-ink),.06); }
  .nav-menu > li.has-children > a::after{ margin-left:auto; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; background:transparent; border-radius:0; padding:0 0 8px 14px; min-width:0; }
  .dropdown a:hover{ padding-left:13px; }
}

/* ═══════════════════════════════════════════════════════════════
   HOME BANNER (HERO)
   ═══════════════════════════════════════════════════════════════ */
/* Full-bleed hero — the banner video IS the background, copy sits on a scrim.
   Still lives below the always-solid white nav; it just fills whatever
   viewport is left underneath the top chrome (--hf-h + --nav-h, measured in JS). */
.home-banner{
  position:relative; isolation:isolate; overflow:hidden; z-index:1;
  background:var(--color-ink);
  /* ONE SCREEN: the hero takes 100dvh minus the top chrome it sits under, so the
     header bar + nav + hero together are exactly one viewport. (A literal 100dvh
     here would push the hero's last 108px below the fold instead.)
     Padding and type are vh-aware below so the content can't outgrow this. */
  min-height:calc(100vh - var(--nav-h,64px) - var(--hf-h,44px));
  min-height:calc(100dvh - var(--nav-h,64px) - var(--hf-h,44px));
  display:flex; align-items:flex-end;
  /* The strip is no longer a pinned full-bleed band, so no height has to be
     reserved for it — it sits in the bottom row next to the buttons. */
  padding-block:clamp(24px,4.5vh,72px) clamp(22px,4vh,54px);
  /* dark surface tokens — shared components (secondary button, lede) re-tune themselves */
  --text:var(--color-white);
  --soft:rgba(var(--rgb-white),.8);
  --line:rgba(var(--rgb-white),.34);
  /* Frosted glass for the ghost button and the carousel pill. A BLACK tint, not
     a white one — white frost over a bright video frame washes out and the white
     logos/label disappear into it. Both consume this token so the bottom row
     stays one consistent material. */
  --ghost-bg:rgba(var(--rgb-night),.34);
  --frost:blur(18px) saturate(125%);
}
/* The hero copy hugs the LEFT EDGE at every width — it deliberately opts out of
   the shared centred 1440px column, which would otherwise push it toward the
   middle of the screen on large displays. Only --pad insets it. */
.home-banner .wrap{ position:relative; z-index:1; max-width:none; margin-inline:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:clamp(14px,2.4vh,26px); }
.banner-content{ display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(12px,2.2vh,22px); max-width:min(100%,880px); }
/* Bottom row · buttons bottom-LEFT, product carousel filling the space to their
   RIGHT. align-items:stretch is the whole trick: the strip inherits the row's
   height from the tallest item (the buttons), so the two stay the same height
   with no magic number to keep in sync when button padding or type changes. */
.banner-base{ display:flex; align-items:stretch; flex-wrap:wrap;
  gap:clamp(14px,2vw,28px); width:100%; }
.banner-actions{ flex:0 0 auto; }
/* 22ch keeps the headline to ~3 lines; --fs-hero shrinks with viewport height */
.banner-content h1{ max-width:22ch; text-wrap:balance; font-size:var(--fs-hero); line-height:var(--lh-tight);
  color:var(--color-white); text-shadow:0 2px 34px rgba(var(--rgb-night),.45); }
.banner-content p{ max-width:54ch; font-size:var(--fs-lede); color:rgba(var(--rgb-white),.82); }
/* No margin-top — .banner-base is a stretch row, so a margin here would be added
   to the row height and make the strip taller than the buttons it must match.
   The gap under the lede comes from .wrap's own gap instead. */
.banner-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; }
.dynamiq-cta a{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:700;
  background:var(--orange); color:var(--color-on-accent); padding:16px 34px; border-radius:var(--r-pill);
  box-shadow:0 10px 30px -8px var(--orange-glow); transition:background .25s, transform .3s, box-shadow .35s;
}
.dynamiq-cta a:hover{ background:var(--orange-2); transform:translateY(-2px); box-shadow:0 18px 46px -8px var(--orange-glow); }
.dynamiq-cta a .arr{ transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.dynamiq-cta a:hover .arr{ transform:translateX(5px); }
.banner-secondary{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:700; letter-spacing:.02em;
  color:var(--text); padding:16px 24px; border-radius:var(--r-pill);
  border:1.5px solid var(--line); background:var(--ghost-bg); transition:border-color .25s, background .25s, transform .3s;
  backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost); /* glass over the hero video */
}
.banner-secondary:hover{ border-color:var(--orange); background:rgba(var(--rgb-brand),.08); transform:translateY(-2px); }
.banner-secondary .arr{ transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.banner-secondary:hover .arr{ transform:translateX(4px); }

/* full-bleed video layer */
.banner-media{ position:absolute; inset:0; z-index:-2; pointer-events:none; }
.banner-media video{
  /* position+z-index are REQUIRED, not decorative. .banner-media is a stacking
     context; a static video paints ABOVE any negative-z-index sibling, so the
     ::after scrim below was rendering behind the video and doing nothing.
     Both layers are explicitly ordered now — don't drop these. */
  position:relative; z-index:0;
  width:100%; height:100%; object-fit:cover; display:block; opacity:0;
  /* Hard ceiling on how bright the footage can get. The clip is remote and its
     frames can't be inspected here, so the copy's contrast cannot depend on
     what happens to be playing; this guarantees a floor the ramps build on. */
  filter:brightness(.65) saturate(1.06);
  transition:opacity 1.4s cubic-bezier(.16,1,.3,1);
  animation:bannerDrift 30s ease-in-out infinite alternate;
}
.banner-media video.is-ready{ opacity:1; }
@keyframes bannerDrift{ from{ transform:scale(1.06); } to{ transform:scale(1.15); } }
/* Scrim · a tint of black so the white copy stays readable over bright frames of
   the video. Three stacked ramps rather than one flat fill, so the video is only
   darkened where text actually sits and stays clean on the right:
     1. left→right  — carries the headline and lede
     2. bottom→top  — carries the bottom row (buttons + carousel)
     3. a light overall tint to hold the mid-tones down
   Sits above the video but below the copy: .banner-media is z-index:-2, this is
   -1, and .home-banner .wrap is z-index:1. */
.banner-media::after{
  /* z-index:1 sits this ABOVE the video (z-index:0). It was -1, which put it
     behind the static video and made the whole scrim invisible. .banner-media's
     own z-index:-2 is what keeps the pair behind the copy. */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg,rgba(var(--rgb-night),.66),rgba(var(--rgb-night),.40) 38%,rgba(var(--rgb-night),.10) 72%,rgba(var(--rgb-night),0)),
    linear-gradient(0deg,rgba(var(--rgb-night),.60),rgba(var(--rgb-night),.24) 34%,rgba(var(--rgb-night),0) 68%),
    rgba(var(--rgb-night),.16);
}
/* Narrow screens: the copy spans the full width, so a left-to-right ramp would
   leave the right end of the headline unprotected. Go bottom-up only. */
@media (max-width:900px){
  .banner-media::after{
    background:
      linear-gradient(0deg,rgba(var(--rgb-night),.66),rgba(var(--rgb-night),.34) 46%,rgba(var(--rgb-night),.06) 82%),
      rgba(var(--rgb-night),.22);
  }
}

/* product strip · auto-scrolling product logos occupying the bottom row to the
   RIGHT of the buttons. Same marquee mechanic as .trust — a set plus one
   duplicate, looped on -50%.
   No explicit height: `align-items:stretch` on .banner-base makes it exactly as
   tall as the buttons beside it. Border/background/blur/radius deliberately
   mirror .banner-secondary so the row reads as one consistent set of controls. */
.banner-strip{
  position:relative; z-index:2; flex:1 1 320px; min-width:0;
  display:flex; align-items:center; overflow:hidden;
  border:1.5px solid var(--line); border-radius:var(--r-pill);
  background:var(--ghost-bg);
  backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
}
.banner-strip-marq{ width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--color-black) 9%,var(--color-black) 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,var(--color-black) 9%,var(--color-black) 91%,transparent); }
.banner-strip-track{ display:flex; align-items:center; gap:clamp(36px,5vw,76px); width:max-content;
  animation:bannerLogos 46s linear infinite; }
/* pause on hover so the logos are actually clickable */
.banner-strip:hover .banner-strip-track{ animation-play-state:paused; }
@keyframes bannerLogos{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.banner-strip-track a{ flex:0 0 auto; display:flex; align-items:center;
  opacity:.82; transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.banner-strip-track a:hover{ opacity:1; transform:translateY(-2px); }
/* max-height keeps the logos inside the pill whatever height the buttons resolve
   to — the clamp alone could exceed the row on short viewports. */
.banner-strip-track img{ height:clamp(20px,3vh,30px); max-height:calc(100% - 16px);
  width:auto; object-fit:contain; }

/* hover card · one shared element, positioned over the strip by JS */
.banner-tip{
  position:absolute; z-index:4; left:0; bottom:0;
  width:min(290px,calc(100% - 28px)); padding:13px 16px 15px;
  border-radius:12px; border:1px solid rgba(var(--rgb-white),.18);
  background:rgba(var(--rgb-night),.9);
  box-shadow:0 26px 58px -20px rgba(var(--rgb-night),.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .26s ease, transform .26s cubic-bezier(.16,1,.3,1);
}
.banner-tip.show{ opacity:1; transform:translateY(0); }
.banner-tip-name{ font-size:var(--fs-sm); font-weight:700; color:var(--color-white); margin-bottom:5px; }
.banner-tip-desc{ font-size:var(--fs-xs); line-height:var(--lh-body); color:rgba(var(--rgb-white),.78); }
/* pointer, aimed at the hovered logo via --tip-x */
.banner-tip::after{
  content:""; position:absolute; bottom:-6px; left:var(--tip-x,50%);
  width:11px; height:11px; transform:translateX(-50%) rotate(45deg);
  background:rgba(var(--rgb-night),.9);
  border-right:1px solid rgba(var(--rgb-white),.18); border-bottom:1px solid rgba(var(--rgb-white),.18);
}
/* touch devices have no hover — the logo is just a link there */
@media (hover:none){ .banner-tip{ display:none; } }

@media (max-width:900px){
  /* Centre the block instead of bottom-aligning it. The desktop hero pins copy
     to the bottom edge, but on a tall phone that left up to 290px of empty
     video above the headline while everything crushed into the bottom third.
     Symmetric padding so the breathing room is shared top and bottom. */
  .home-banner{ align-items:center; padding-block:clamp(28px,5vh,56px); }
  .banner-content h1{ max-width:20ch; }
  .banner-content p{ max-width:46ch; }
  /* Below 900 there isn't room for buttons and a readable carousel side by side,
     so the strip takes its own line. Done explicitly rather than left to flex
     wrap: once wrapped it has no sibling to inherit a height from, and relying
     on the wrap point left it 29px tall at 600px wide. */
  .banner-strip{ flex:1 1 100%; height:clamp(50px,7.4vh,60px); }
}
@media (max-width:560px){
  /* Side by side when both labels fit, otherwise the second drops to its own row.
     The buttons grow to share the row but never shrink below their own label +
     padding (flex-basis auto keeps the min-content floor), so text can't run to
     the edges of the pill the way a forced flex:1 1 0 / min-width:0 split did. */
  .banner-actions{ width:100%; flex-wrap:wrap; gap:10px; }
  .banner-actions .dynamiq-cta, .banner-secondary{ flex:1 1 auto; }
  .banner-actions .dynamiq-cta a{ width:100%; } /* fill the growing wrapper; no width on .banner-secondary — a 100% width would force it onto its own row */
  .banner-actions .dynamiq-cta a, .banner-secondary{ justify-content:center; padding-inline:18px; white-space:nowrap; }
}
/* Short viewports (small laptops, landscape phones) — reclaim vertical space so the
   hero still resolves to one screen. Declared last so it wins over the width queries
   above when a screen is both narrow AND short. */
@media (max-height:720px){
  .home-banner{ padding-block:clamp(16px,3vh,36px) clamp(16px,3vh,34px); }
  .banner-strip-track img{ height:clamp(18px,2.6vh,26px); }
  .banner-content{ gap:clamp(10px,1.6vh,16px); }
  .banner-content p{ font-size:var(--fs-body); }
  .banner-actions{ gap:10px 14px; }
}
/* Very tight viewports (landscape phones, small portrait phones): the lede is the
   first thing to go, so the headline, CTAs and product strip all stay on one
   screen without colliding. Every other size keeps the full copy. */
/* Landscape phones are WIDE but SHORT, so the ≤900px rule that drops the strip
   onto its own line is exactly wrong there — it spends ~64px of vertical space
   on a screen that has none, while leaving the row half empty. Put it back
   beside the buttons whenever there is width to spare but not height. */
@media (max-height:520px) and (min-width:601px){
  .banner-strip{ flex:1 1 240px; height:auto; }
  .home-banner{ padding-block:clamp(10px,2.4vh,26px); }
  .home-banner .wrap{ gap:clamp(8px,1.8vh,16px); }
}
/* The height threshold was 700px, which hid the lede on 360x640 — a very common
   Android size. Side-by-side buttons freed ~69px, so 640 now has room for it;
   dropped to 620 so only genuinely tiny screens lose the copy. */
@media (max-height:600px), (max-width:560px) and (max-height:620px){
  .banner-content p{ display:none; }
  .banner-content h1{ max-width:26ch; }
}
@media (prefers-reduced-motion:reduce){
  .banner-media video{ animation:none; transform:none; opacity:1; }
  /* no auto-scroll — let the strip be swiped/scrolled instead */
  .banner-strip-track{ animation:none; }
  .banner-strip-marq{ overflow-x:auto; }
}

/* ═══════════════════════════════════════════════════════════════
   TRUST LOGOS · two-way marquee (client logos)
   ═══════════════════════════════════════════════════════════════ */
.trust{ padding-block:clamp(34px,4vw,54px); background:var(--bg); overflow:hidden; }
.trust-marq{ position:relative; overflow:hidden; }
.trust-marq::before,
.trust-marq::after{ content:""; position:absolute; top:0; bottom:0; z-index:2;
  width:clamp(24px,7%,90px); pointer-events:none; }
.trust-marq::before{ left:0; background:linear-gradient(90deg,var(--bg),rgba(var(--rgb-white),0)); }
.trust-marq::after{ right:0; background:linear-gradient(270deg,var(--bg),rgba(var(--rgb-white),0)); }
.trust-marq + .trust-marq{ margin-top:clamp(20px,2.8vw,36px); }
/* one combined row carries 9 logos, so the loop runs a little longer per cycle */
.trust-track{ display:flex; align-items:center; gap:clamp(44px,6vw,92px);
  width:-webkit-max-content; width:max-content; will-change:transform; animation:trustMarq 64s linear infinite; }
.trust-marq:hover .trust-track{ animation-play-state:paused; }
/* sits ABOVE the marquee per designer review */
.trust-note{ text-align:center; color:var(--soft); font-size:var(--fs-body); line-height:var(--lh-body);
  max-width:72ch; margin:0 auto clamp(24px,3vw,40px); }
@keyframes trustMarq{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.trust-track img{ height:clamp(26px,3vw,40px); width:auto; object-fit:contain; flex:0 0 auto;
  opacity:1; filter:none; transition:opacity .3s ease, transform .3s ease; }
.trust-track img:hover{ opacity:1; transform:scale(1.03); }
@media (prefers-reduced-motion:reduce){
  .trust-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; gap:36px 48px; }
  .trust-marq::before, .trust-marq::after{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════
   OUR PRODUCTS · photo + tagline cards that flip to the mockup
   Default: product stock photo fills the card (no tint), white logo and a
   one-line white tagline. Hover: light card, black logo, official monitor
   artwork slides in, and the tagline gives way to title + description.
   ═══════════════════════════════════════════════════════════════ */
.iq{
  padding-block:var(--sec); position:relative;
  background:linear-gradient(180deg,transparent 0,var(--bg-2) var(--section-blend),var(--bg-2) calc(100% - var(--section-blend)),transparent 100%);
}
/* Fixed-height rows: the description is revealed on hover inside an absolutely
   positioned footer, so a card never grows (and never shifts the grid) while hovered. */
.iq-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(clamp(200px,18.5vw,248px),auto); gap:14px; }
.iq-card{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:0; border-radius:14px;
  border:1px solid var(--line); background:var(--card-grad);
  --iq-pad-x:26px; --iq-pad-b:24px;
  --iq-text-shadow:0 1px 2px rgba(var(--rgb-night),.7), 0 2px 14px rgba(var(--rgb-night),.5);
  --iq-pad-t:21px; --iq-logo-h:clamp(25px,2.5vw,31px);
  padding:var(--iq-pad-t) var(--iq-pad-x) var(--iq-pad-b); display:flex; flex-direction:column; justify-content:flex-start;
  transition:transform .55s cubic-bezier(.16,1,.3,1), border-color .45s, box-shadow .55s;
}
.iq-card:hover{ transform:translateY(-6px); border-color:rgba(var(--rgb-brand),.55); box-shadow:0 34px 66px -26px rgba(var(--rgb-ink),.32); }
/* flagship tile — spans 2×2, full product photo behind white logo + copy */
.iq-card.feature{ grid-column:span 2; grid-row:span 2; --iq-pad-x:32px; --iq-pad-b:28px; --iq-pad-t:28px; --iq-logo-h:clamp(30px,3vw,42px); }
.iq-card.feature .iq-art{ inset:0; z-index:0; opacity:1; transform:none;
  background-size:cover; background-position:center; background-repeat:no-repeat; filter:none; }
.iq-card.feature::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--rgb-night),.5) 0%,rgba(var(--rgb-night),.32) 32%,rgba(var(--rgb-night),.6) 66%,rgba(var(--rgb-night),.9) 100%); }
.iq-card.feature .iq-logo .lg-d{ opacity:0; }
.iq-card.feature .iq-logo .lg-l{ opacity:1; }
.iq-card.feature .iq-title{ color:var(--color-white); font-size:var(--fs-card); }
.iq-card.feature .iq-desc{ color:var(--color-white); font-size:var(--fs-body); line-height:var(--lh-body); }
.iq-card.feature .iq-desc{ -webkit-line-clamp:6; }
.iq-card.feature .iq-go{ opacity:1; transform:none; color:var(--color-white); border-color:rgba(var(--rgb-white),.55); }
.iq-card.feature:hover .iq-go{ background:var(--orange); border-color:var(--orange); color:var(--color-on-accent); }
/* Full-card photo at rest; official monitor artwork replaces it on hover */
.iq-art{ position:absolute; inset:0; z-index:-1; opacity:0; transform:scale(1.06);
  background-size:cover; background-position:center;
  transition:opacity .55s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.iq-card:not(.all) .iq-art{
  inset:clamp(38px,3.2vw,42px) 8px 0 48%; z-index:1; opacity:0; transform:translateY(6px) scale(.96);
  background-size:contain; background-position:right bottom; background-repeat:no-repeat;
  filter:drop-shadow(0 12px 18px rgba(var(--rgb-ink),.12));
}
.iq-hover-art{
  position:absolute; inset:0; z-index:0; opacity:1; transform:scale(1);
  background-size:cover; background-position:center;
  transition:opacity .45s ease,transform .85s cubic-bezier(.16,1,.3,1);
}
/* no tint on the photo; the white tagline and logo rely on soft shadows for legibility */
.iq-card:not(.all) .lg-l{ filter:drop-shadow(0 1px 2px rgba(var(--rgb-night),.6)) drop-shadow(0 4px 14px rgba(var(--rgb-night),.35)); }
.iq-card:not(.all):hover .iq-art{ opacity:1; transform:none; }
.iq-card:not(.all):hover .iq-hover-art{ opacity:0; transform:scale(1.06); }
/* logo lockup pinned top-left: white over the photo at rest, black on the light hover card */
.iq-logo{ position:relative; z-index:3; height:var(--iq-logo-h); }
.iq-logo img{ height:100%; width:auto; max-width:82%; object-fit:contain; object-position:left center;
  transition:opacity .45s ease; }
.iq-logo .lg-l{ position:absolute; left:0; top:0; opacity:0; }
.sap-card-logo .lg-l{ filter:none; }
.iq-card:not(.all) .lg-d{ opacity:0; }
.iq-card:not(.all) .lg-l{ opacity:1; }
.iq-card:not(.all):hover .lg-d{ opacity:1; }
.iq-card:not(.all):hover .lg-l{ opacity:0; }
/* footer pinned to the bottom edge, absolutely positioned so the card's (grid-fixed) height
   never depends on the copy */
.iq-foot{ position:absolute; left:var(--iq-pad-x); right:var(--iq-pad-x); bottom:var(--iq-pad-b); z-index:3; display:flex; }
/* tagline (rest) and detail (hover) share one grid cell, bottom-aligned, and cross-fade */
.iq-copy{ display:grid; grid-template-columns:100%; min-width:0; width:100%; }
.iq-copy > *{ grid-area:1 / 1; align-self:end; min-width:0;
  transition:opacity .35s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.iq-tagline{ font-family:var(--font-sans); font-weight:700; font-size:clamp(1.05rem,.95rem + .45vw,1.3rem); line-height:var(--lh-heading);
  letter-spacing:-.015em; color:var(--color-white); text-shadow:var(--iq-text-shadow); max-width:18ch; }
.iq-detail{ display:grid; grid-template-rows:auto 1fr; row-gap:8px; opacity:0; transform:translateY(8px); pointer-events:none; }
.iq-card:hover .iq-tagline{ opacity:0; transform:translateY(-8px); }
.iq-card:hover .iq-detail{ opacity:1; transform:none; pointer-events:auto; }
/* at rest the tagline may run across most of the photo; on the light hover card the detail
   copy is capped at under half the card so it stays left of the monitor artwork (which starts
   at 48%). */
.iq-card:not(.all) .iq-tagline{ max-width:72%; }
.iq-card:not(.all) .iq-detail{ max-width:46%; }
.iq-card.feature .iq-detail{ max-width:52ch; }
.iq-title-row{ display:block; }
.iq-title{ display:inline; margin:0; font-family:var(--font-sans); font-weight:700; font-size:var(--fs-body); line-height:var(--lh-heading);
  letter-spacing:-.01em; color:var(--text); } /* an H3 since 3.1: the class keeps the card's own size */
.iq-desc{ min-height:0; overflow:hidden; font-size:var(--fs-sm); line-height:1.45; color:var(--soft);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; }
/* the flagship tile is always the photo state, so its detail copy stays white */
.iq-card.feature .iq-title, .iq-card.feature .iq-desc{ color:var(--color-white); text-shadow:var(--iq-text-shadow); }
.iq-card.feature .iq-tagline{ font-size:var(--fs-card); }
/* arrow chip pinned to the top-right corner, centred on the logo row, so it sits in the same
   spot on every card regardless of how the title wraps or how long the description runs */
.iq-go{ position:absolute; z-index:4; top:calc(var(--iq-pad-t) + var(--iq-logo-h) / 2 - 17px); right:var(--iq-pad-x);
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center;
  color:var(--soft); opacity:0; transform:translateX(6px);
  transition:opacity .4s, transform .4s cubic-bezier(.16,1,.3,1), background .3s, color .3s, border-color .3s; }
.iq-card:hover .iq-go{ opacity:1; transform:none; background:var(--orange); border-color:var(--orange); color:var(--color-on-accent); }
.iq-go svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* below 1200px a 3-up card is too narrow for title + description beside the monitor artwork,
   so drop to two columns (cards stay wide enough for the hover copy) */
@media (max-width:1200px){ .iq-grid{ grid-template-columns:repeat(2,1fr); } .iq-card.feature{ grid-column:span 2; grid-row:span 1; min-height:320px; } }
@media (max-width:560px){ .iq-grid{ grid-template-columns:1fr; grid-auto-rows:auto; } .iq-card{ min-height:200px; } .iq-card.feature{ grid-column:auto; grid-row:auto; min-height:260px; } }
/* touch devices have no hover — keep the card action visible, and let the footer sit in
   flow so a card can size to its copy on narrow screens */
@media (hover:none){
  .iq-go{ opacity:1; transform:none; background:var(--orange); border-color:var(--orange); color:var(--color-on-accent); }
  .iq-card{ justify-content:space-between; gap:24px; }
  .iq-card .iq-foot{ position:relative; left:auto; right:auto; bottom:auto; }
  .iq-card .iq-copy{ grid-template-rows:auto auto; row-gap:8px; }
  .iq-card .iq-copy > *{ grid-area:auto; }
  .iq-card .iq-detail{ max-width:36ch; }
  .iq-card .iq-detail{ opacity:1; transform:none; pointer-events:auto; }
  .iq-card .iq-title-row{ display:none; }
  .iq-card:not(.all) .iq-desc{ color:var(--color-white); text-shadow:var(--iq-text-shadow); }
}

/* ═══════════════════════════════════════════════════════════════
   SAP BUSINESS ONE · light bento · Adobe-style unmask reveal
   ═══════════════════════════════════════════════════════════════ */
/* ── lifestyle gallery · self-scrolling photo carousel (same -50% loop as .trust) ── */
.gallery{ padding-block:clamp(28px,4vw,56px); overflow:hidden; }
/* hook above the strip: centred eyebrow + one-line title */
.gallery-head{ margin-bottom:clamp(22px,3vw,40px); gap:12px; }
.gallery-head h2{ font-size:var(--fs-h2); line-height:var(--lh-heading); letter-spacing:-.02em; }
.gallery-marq{ position:relative; overflow:hidden; }
.gallery-marq::before,
.gallery-marq::after{ content:""; position:absolute; top:0; bottom:0; z-index:2; width:clamp(24px,7%,110px); pointer-events:none; }
.gallery-marq::before{ left:0; background:linear-gradient(90deg,var(--bg),rgba(var(--rgb-white),0)); }
.gallery-marq::after{ right:0; background:linear-gradient(270deg,var(--bg),rgba(var(--rgb-white),0)); }
.gallery-track{ display:flex; gap:clamp(12px,1.4vw,20px); width:-webkit-max-content; width:max-content;
  will-change:transform; animation:galleryMarq 46s linear infinite; }
.gallery-marq:hover .gallery-track{ animation-play-state:paused; }
@keyframes galleryMarq{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(calc(-50% - clamp(6px,.7vw,10px)),0,0); } }
/* portrait campaign posters: a shared height, each tile takes its own natural width so
   the baked-in headlines are never cropped */
.gallery-item{ --gh:clamp(300px,34vw,480px); margin:0; flex:0 0 auto; height:var(--gh); width:auto; overflow:hidden;
  border-radius:16px; border:1px solid var(--line); background:var(--color-night); box-shadow:0 22px 44px -28px rgba(var(--rgb-ink),.35); }
.gallery-item img{ display:block; width:auto; height:100%; object-fit:contain; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.gallery-item:hover img{ transform:scale(1.04); }
/* controls (main.js 9b): once the script owns the motion the CSS loop is switched off and the
   strip can be dragged with the mouse or swiped on touch — pan-y keeps vertical page scrolling
   native, the images stop being draggable/selectable so a grab never lifts a ghost image */
.gallery-marq.is-js{ cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.gallery-marq.is-js.is-dragging{ cursor:grabbing; }
.gallery-marq.is-js .gallery-track{ animation:none; }
.gallery-marq.is-js .gallery-item img{ -webkit-user-drag:none; pointer-events:none; }
.gallery-marq.is-dragging .gallery-item img{ transform:none; }
/* prev / next arrows under the strip · round ghost buttons on the shared tokens */
.gallery-nav,.marq-nav{ display:flex; justify-content:center; gap:12px; margin-top:clamp(18px,2.4vw,28px); }
.gallery-nav[hidden],.marq-nav[hidden]{ display:none; }
.gallery-btn,.marq-btn{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line); background:var(--ghost-bg); color:var(--text);
  display:grid; place-items:center; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:border-color .25s, color .25s, transform .25s, box-shadow .25s; }
.gallery-btn svg,.marq-btn svg{ width:18px; height:18px; }
.gallery-btn:hover,.marq-btn:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(var(--rgb-brand),.6); }
.gallery-btn:active,.marq-btn:active{ transform:translateY(0); }
.gallery-btn:focus-visible,.marq-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .gallery-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; }
  .gallery-item[aria-hidden]{ display:none; }
  .gallery-marq::before, .gallery-marq::after{ display:none; }
}

.sap-business-one{ position:relative; padding-block:var(--sec); }
.sap-inner{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(34px,5vw,72px); align-items:start; }

/* LEFT copy column — sticks under the nav so it stays visible while the 5 key points scroll past */
.sap-copy{ position:sticky; top:calc(var(--nav-h,64px) + 28px); align-self:start;
  display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.sap-logo-rev{ height:44px; width:auto; opacity:.95; }
.sap-lead{ font-family:var(--font-sans); font-weight:500; font-size:var(--fs-card); line-height:var(--lh-heading); letter-spacing:-.01em; color:var(--text); max-width:34ch; }
.sap-sub{ color:var(--soft); font-size:var(--fs-body); line-height:var(--lh-relaxed); max-width:46ch; }
.sap-more{ font-family:var(--font-sans); font-weight:700; font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange); display:inline-flex; align-items:center; gap:10px; transition:gap .25s; }
.sap-more:hover{ gap:15px; }
.sap-more .arr{ transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.sap-more:hover .arr{ transform:translateX(4px); }

/* RIGHT bento (five feature tiles) */
.sap-bento{ position:relative; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; align-content:start; }
.sap-bento .feat:last-of-type{ grid-column:1 / -1; }
.feat{
  position:relative; overflow:hidden; border-radius:14px; padding:24px 24px 22px;
  background:var(--card-grad); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:9px;
  transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .4s, box-shadow .4s;
}
.feat::after{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .45s; pointer-events:none;
  background:radial-gradient(340px 180px at var(--mx,50%) var(--my,0%),rgba(var(--rgb-brand),.12),transparent 60%); }
.feat:hover{ transform:translateY(-4px); border-color:rgba(var(--rgb-brand),.4); box-shadow:0 20px 44px -22px rgba(var(--rgb-ink),.22); }
.feat:hover::after{ opacity:1; }
.feat h3{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; font-family:var(--font-sans); font-weight:700; font-size:var(--fs-body); line-height:var(--lh-heading); color:var(--text); }
.feat h3 i{ font-style:normal; font-family:var(--font-sans); font-weight:700; font-size:var(--fs-display); line-height:1; letter-spacing:-.03em;
  background:linear-gradient(135deg, var(--orange) 15%, var(--orange-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.feat p{ font-size:var(--fs-sm); color:var(--soft); line-height:var(--lh-body); }
/* unmask reveal — more specific than .feat so it owns the transition; only clip-path/opacity
   carry the per-tile stagger (var(--d)), hover transform/border stay instant */
.feat[data-reveal="reveal"]{
  opacity:0; transform:none; clip-path:inset(0 0 100% 0 round 14px);
  transition:opacity .6s ease var(--d,0ms), clip-path .9s cubic-bezier(.16,1,.3,1) var(--d,0ms),
             transform .45s cubic-bezier(.16,1,.3,1), border-color .4s, box-shadow .4s;
}
.feat[data-reveal="reveal"].in{ opacity:1; clip-path:inset(0 0 0 0 round 14px); }

/* base play-badge kept here — reused by the News feature card (.wn-media) */
.play-badge{ width:56px; height:56px; border-radius:50%; background:var(--orange); display:grid; place-items:center; flex:0 0 auto; box-shadow:0 10px 30px -6px var(--orange-glow); transition:transform .3s; }
.play-badge svg{ width:22px; height:22px; fill:var(--color-on-accent); margin-left:3px; }

/* photo slots — one in the copy column under the lead, one filling the empty bento cell.
   Placeholder look until a real image is set (Customizer: dq_sap_photo_copy / dq_sap_photo_grid). */
.sap-photo{ margin:0; overflow:hidden; border-radius:14px; border:1px solid var(--line); }
.sap-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
/* portrait photo in the bento: bias the crop upward so the subject's face survives the wide 21:9 / 16:9 crops on tablet and phone */
.sap-bento .feat-photo img{ object-position:center 30%; }
.sap-photo.is-placeholder{ display:grid; place-items:center;
  background:linear-gradient(135deg,rgba(var(--rgb-brand),.10),rgba(var(--rgb-brand),.03)), var(--card-grad);
  border-style:dashed; border-color:rgba(var(--rgb-brand),.45); }
.sap-photo.is-placeholder span{ font-family:var(--font-sans); font-weight:700; font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--soft); }
.sap-photo-copy{ width:100%; aspect-ratio:16/9; }
.feat-photo, .home-page .feat.feat-photo{ padding:0; min-height:200px; } /* outranks the later .home-page .feat padding so the photo tile stays edge to edge */
.feat-photo:hover{ transform:none; }
.feat-photo::after{ display:none; }

@media (max-width:980px){ .sap-inner{ grid-template-columns:1fr; } .sap-copy{ position:static; } .sap-photo-copy{ max-width:520px; } .sap-bento .feat-photo{ grid-column:1 / -1; aspect-ratio:21/9; min-height:0; } }
@media (max-width:560px){ .sap-bento{ grid-template-columns:1fr; } .sap-bento .feat:last-of-type{ grid-column:auto; } .sap-bento .feat-photo{ aspect-ratio:16/9; } }

/* ═══════════════════════════════════════════════════════════════
   NEWS & ANNOUNCEMENTS · "Explore what's new" (Adobe-style feature)
   ═══════════════════════════════════════════════════════════════ */
.whatsnew{ height:auto; min-height:0; padding-block:var(--sec); }
.whatsnew > .wrap{ height:auto; display:block; }
.whatsnew .sec-head{ max-width:640px; margin-bottom:clamp(12px,1.8vw,22px); }
.whatsnew .sec-head h2{ font-size:var(--fs-h2); }
.whatsnew .sec-head p{ font-size:var(--fs-body); }
/* featured story (left half) + 2×2 grid (right half) — every card carries the
   same treatment: full-bleed photo, dark scrim, tag + date, white title bottom-left */
.news-layout{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,22px); align-items:stretch; }
.news-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:clamp(14px,1.6vw,22px); min-height:0; }
/* odd trailing card (e.g. only 3 stories) spans the row so the 2×2 never shows a hole */
.news-grid .news-card:last-child:nth-child(odd){ grid-column:1 / -1; }
.news-card{ position:relative; display:block; border-radius:14px; overflow:hidden; border:1px solid var(--line);
  min-height:0; background:var(--bg-2); box-shadow:0 30px 60px -34px rgba(var(--rgb-ink),.3); }
/* the featured card has no in-flow children (image, scrim and body are all absolute),
   so its height comes from aspect-ratio; the grid stretches to match it */
.news-feature{ aspect-ratio:1/1; min-height:clamp(320px,36vw,560px); }
.news-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.news-card:hover img{ transform:scale(1.045); }
.news-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 38%,rgba(var(--rgb-night),.86)); }
.news-card-body{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:clamp(14px,1.4vw,20px); display:flex; flex-direction:column; gap:8px; }
.news-card-body h3{ color:var(--color-white); font-size:var(--fs-body); line-height:var(--lh-heading); letter-spacing:-.01em; order:2;
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.news-feature .news-card-body{ padding:clamp(22px,2.4vw,32px); gap:14px; }
.news-feature .news-card-body h3{ font-size:var(--fs-h3); max-width:24ch; -webkit-line-clamp:4; line-clamp:4; }
.news-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; order:1; }
.news-tag{ font-family:var(--font-sans); font-weight:700; font-size:var(--fs-2xs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange); background:rgba(var(--rgb-brand),.14); border:1px solid rgba(var(--rgb-brand),.32); padding:5px 10px; border-radius:4px; }
a.news-tag{ text-decoration:none; }
a.news-tag:hover{ color:#fff; background:var(--orange); border-color:var(--orange); }
.news-date{ font-size:var(--fs-xs); color:var(--faint); }
.news-card-body .news-date{ color:rgba(var(--rgb-white),.72); }
.news-card.no-img{ background:linear-gradient(135deg,var(--color-ink),var(--color-gray)); }
.news-cta{ display:flex; justify-content:flex-end; margin-top:clamp(18px,2vw,28px); }
@media (max-width:900px){
  .whatsnew{ height:auto; padding-block:var(--sec); }
  .whatsnew > .wrap{ height:auto; display:block; }
  .news-layout{ grid-template-columns:1fr; }
  /* WebKit collapses a stretched, child-less aspect-ratio box to 0 — pin it */
  .news-feature{ aspect-ratio:16/10; align-self:start; min-height:clamp(200px,52vw,320px); }
  .news-grid .news-card{ aspect-ratio:4/3; }
}
@media (max-width:480px){ .news-grid{ grid-template-columns:1fr; gap:14px; } .news-grid .news-card{ aspect-ratio:16/10; } .news-cta{ justify-content:stretch; } .news-cta .btn{ width:100%; justify-content:center; } }

/* ═══════════════════════════════════════════════════════════════
   WHY CHOOSE (WE ARE ACCREDITED)
   ═══════════════════════════════════════════════════════════════ */
.we-are-accredited{
  height:auto; min-height:0; padding-block:var(--sec);
  display:block; overflow:clip;
  background:
    radial-gradient(700px 420px at 8% 72%,rgba(var(--rgb-brand),.09),transparent 68%),
    linear-gradient(180deg,transparent,rgba(var(--rgb-gray),.12),transparent);
}
/* Designer review round 2: TWO columns — the left column owns the eyebrow,
   heading and SAP badge (heading must fit inside it); the copy on the right
   is vertically centred against the section. */
.accredited-grid{
  width:100%; display:grid;
  grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);
  column-gap:clamp(36px,5vw,72px); align-items:center;
}
.accredited-left{ display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(26px,4vh,48px); height:100%; }
.accredited-header{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
/* sized so the heading wraps INSIDE the left column instead of running past it */
.accredited-header h2{ max-width:100%; font-size:clamp(1.75rem,1.25rem + 1.9vw,2.75rem); }
.accredited-copy{
  display:grid; align-content:center; align-self:center;
  gap:clamp(12px,1.9vh,20px);
}
.accredited-copy p{
  position:relative; padding:clamp(12px,1.6vh,18px) 0 0;
  border-top:1px solid var(--line); color:var(--soft);
  font-size:var(--fs-lede); line-height:1.65;
}
.accredited-copy p:first-child{ padding-top:0; border-top:0; }
/* photo frame under the heading (Customizer: dq_partner_photo). Shows the dashed placeholder until a photo is set;
   the SAP partner badge sits as a small chip in the frame's top-left corner. */
.accredited-visual{
  position:relative; margin:0; width:100%; aspect-ratio:4/3; max-height:clamp(220px,34dvh,360px);
  display:grid; place-items:center; overflow:hidden; border-radius:14px; border:1px solid var(--line);
  background:var(--card-grad);
}
.accredited-visual.is-placeholder{
  background:linear-gradient(135deg,rgba(var(--rgb-brand),.10),rgba(var(--rgb-brand),.03)), var(--card-grad);
  border-style:dashed; border-color:rgba(var(--rgb-brand),.45);
}
.accredited-photo{ width:100%; height:100%; object-fit:cover; object-position:right center; display:block; } /* photo is mirrored (subjects on the right); right-anchored crop keeps them in frame and clear of the badge */
.accredited-placeholder{ font-family:var(--font-sans); font-weight:700; font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--soft); }
.accredited-badge{ position:absolute; top:18px; left:18px; z-index:1; width:auto; height:clamp(56px,9dvh,84px); object-fit:contain; }

@media (min-width:901px) and (max-height:720px){
  .we-are-accredited{ padding-block:24px; }
  .accredited-grid{ gap:10px; }
  .accredited-header h2{ font-size:var(--fs-subheading); }
  .accredited-copy{ gap:10px; }
  .accredited-copy p{ padding-top:10px; font-size:var(--fs-body); line-height:var(--lh-body); }
}
@media (max-width:900px){
  .we-are-accredited{ height:auto; min-height:0; padding-block:var(--sec); overflow:visible; }
  .accredited-grid{ grid-template-columns:1fr; gap:36px; }
  .accredited-left{ gap:28px; }
  .accredited-visual{ aspect-ratio:16/10; max-height:none; }
  .accredited-copy{ gap:20px; }
  .accredited-copy p{ font-size:var(--fs-body); }
}

/* ═══════════════════════════════════════════════════════════════
   OUR SERVICES
   ═══════════════════════════════════════════════════════════════ */
.our-services{ padding-block:var(--sec); }
/* numbered process timeline — 01→05 as a connected journey */
.serv-timeline{ position:relative; margin-top:clamp(32px,4vw,54px);
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(18px,2vw,30px); }
.serv-step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
/* connector runs through the badge row; drawn per node so it follows the badges under the photos */
.serv-node{ position:relative; display:flex; justify-content:center; width:100%; }
/* each segment runs from this badge's centre to the next badge's centre (columns are equal 1fr), so the joins
   sit under the badges — no overlapping or seams between segments; one flat colour so the rail reads as a single line */
.serv-node::before{ content:""; position:absolute; top:50%; left:50%; right:calc(-50% - clamp(18px,2vw,30px)); height:2px; z-index:-1; transform:translateY(-50%);
  background:rgba(var(--rgb-brand),.3); }
.serv-step:last-child .serv-node::before{ display:none; }
.serv-num-badge{ position:relative; z-index:1; }
.serv-num-badge{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-sans); font-weight:700; font-size:1.375rem; letter-spacing:-.02em;
  color:var(--orange); background:var(--bg); border:2px solid rgba(var(--rgb-brand),.42);
  box-shadow:0 10px 26px -14px var(--orange-glow);
  transition:background .3s, color .3s, border-color .3s, transform .35s cubic-bezier(.16,1,.3,1); }
.serv-step:hover .serv-num-badge{ background:linear-gradient(135deg,var(--orange) 12%,var(--orange-2)); color:var(--color-on-accent); border-color:var(--orange); transform:translateY(-4px); }
.serv-step h3{ font-size:var(--fs-h3); }
.serv-step p{ font-size:var(--fs-sm); color:var(--soft); line-height:var(--lh-body); max-width:32ch; }
.serv-cta{ text-align:center; margin-top:clamp(40px,5vw,60px); }
@media (max-width:900px){
  .serv-timeline{ grid-template-columns:1fr; gap:0; margin-top:clamp(26px,5vw,38px); }
  .serv-step{ display:grid; grid-template-columns:56px 1fr; column-gap:20px; row-gap:6px; align-items:start; text-align:left; padding-bottom:30px; }
  .serv-node{ grid-column:1; grid-row:2 / span 2; width:auto; }
  .serv-node::before{ display:none; } /* stacked cards: photo sits between steps, so no connector */
  .serv-step:last-child{ padding-bottom:0; }
  .serv-step h3{ grid-column:2; grid-row:2; min-height:56px; display:flex; align-items:center; }
  .serv-step p{ grid-column:2; grid-row:3; max-width:60ch; }
}

/* ═══════════════════════════════════════════════════════════════
   HEAR FROM OUR CUSTOMERS
   ═══════════════════════════════════════════════════════════════ */
/* Kemana-style horizontal testimonial marquee · LIGHT */
.hear-from-our-customer{
  padding-block:var(--sec); overflow:hidden;
  background:linear-gradient(180deg,transparent 0,var(--bg-2) var(--section-blend),var(--bg-2) calc(100% - var(--section-blend)),transparent 100%);
}
.hear-from-our-customer .sec-head{ margin-bottom:clamp(34px,4vw,52px); }
/* ⚠ Edge fade via OVERLAYS, not mask-image. iOS Safari fails to composite a
   masked container whose child runs an infinite transform animation — the whole
   marquee rendered blank on iPhone while the heading above it showed fine.
   Overlays are universally supported and look identical over a solid colour. */
/* overflow:hidden is needed to clip the scrolling track, but it also clipped the
   card's 6px hover lift and its 50px shadow. Breathing room via padding that a
   negative margin cancels: layout is unchanged, the clip edge moves outside. */
.stories-marq{ position:relative; overflow:hidden; padding-block:14px 48px; margin-block:-14px -48px; }
.stories-marq::before,
.stories-marq::after{ content:""; position:absolute; top:0; bottom:0; z-index:2;
  width:clamp(18px,4%,56px); pointer-events:none; }
.stories-marq::before{ left:0; background:linear-gradient(90deg,var(--bg-2),transparent); }
.stories-marq::after{ right:0; background:linear-gradient(270deg,var(--bg-2),transparent); }
.stories-track{ display:flex; gap:18px; width:-webkit-max-content; width:max-content;
  will-change:transform; animation:storiesMarq 80s linear infinite; }
.stories-marq:hover .stories-track{ animation-play-state:paused; }
/* controls (main.js 9b): the gallery's drag engine on the testimonial strip — grab with the
   mouse, swipe on touch (pan-y keeps page scrolling native), arrows below; the hover lift is
   parked while dragging so cards don't jump under the pointer */
.stories-marq.is-js{ cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.stories-marq.is-js.is-dragging{ cursor:grabbing; }
.stories-marq.is-js .stories-track{ animation:none; }
.stories-marq.is-js .story img{ -webkit-user-drag:none; pointer-events:none; }
.stories-marq.is-dragging .story{ transform:none; }
.stories-nav{ position:relative; z-index:3; }
@keyframes storiesMarq{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
/* Longhands, not `flex:0 0 clamp(...)` — Safari has historically failed to
   parse a clamp() basis inside the flex shorthand, dropping the whole rule. */
.story{
  flex-grow:0; flex-shrink:0; flex-basis:clamp(290px,26vw,350px);
  display:flex; flex-direction:column; gap:16px;
  background:var(--card-grad); border:1px solid var(--line); border-radius:14px; padding:28px 26px;
  min-height:300px; transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .4s, box-shadow .4s;
}
.story:hover{ transform:translateY(-6px); border-color:rgba(var(--rgb-brand),.4); box-shadow:0 24px 50px -26px rgba(var(--rgb-ink),.22); }
.story-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:64px; }
.story-logo{ height:56px; display:flex; align-items:center; }
.story-logo img{ height:100%; width:auto; max-width:220px; object-fit:contain; object-position:left center; }
.story-q{ font-family:var(--font-sans); font-size:var(--fs-display); font-weight:900; line-height:1; height:34px; color:var(--orange); opacity:.32; flex:0 0 auto; }
.story blockquote{ font-size:var(--fs-sm); line-height:var(--lh-relaxed); color:var(--soft); font-style:italic; flex:1;
  display:-webkit-box; -webkit-line-clamp:6; line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.story-foot{ display:flex; flex-direction:column; gap:12px; margin-top:auto; }
.story-who{ display:grid; gap:3px; }
.story-name{ font-family:var(--font-sans); font-weight:700; font-size:var(--fs-sm); color:var(--text); letter-spacing:-.01em; }
.story-role{ font-size:var(--fs-xs); color:var(--faint); }
.story-more{ font-family:var(--font-sans); font-weight:700; font-size:var(--fs-xs); color:var(--orange); display:inline-flex; align-items:center; gap:7px; transition:gap .2s; }
.story-more:hover{ gap:11px; }
@media (prefers-reduced-motion:reduce){
  .stories-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; }
  .stories-marq::before, .stories-marq::after{ display:none; }
  .story{ flex-basis:320px; }
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT US
   ═══════════════════════════════════════════════════════════════ */
.contact-us{
  position:relative; isolation:isolate; overflow:visible; min-height:0;
  display:grid; place-items:center; padding-block:var(--sec); background:transparent;
  /* The video bleeds past the section so its soft mask edges land OUTSIDE the
     form instead of across it. Needed because the desktop composition layer in
     site-system.css squeezes .contact-us padding to ~28-56px, which is less
     than --section-blend (48-88px) — so without the bleed the panel's top and
     bottom sit inside the fade and appear to touch the white page. */
  --contact-bleed:clamp(70px,8vh,130px);
  /* Top edge is tunable separately: /contact-us/ below bleeds the video much
     further up behind its dissolving photo hero. Defaults = the symmetric bleed. */
  --contact-bleed-top:var(--contact-bleed);
  --contact-blend-top:var(--section-blend);
}
/* place-items:center above makes this a content-sized grid item rather than a
   stretched one, so at 320px it sized to ~322px and pushed the whole document
   into horizontal scroll. width:100% + min-width:0 pins it to the grid area. */
.contact-us > .wrap{ width:100%; min-width:0; }
.contact-media{
  position:absolute; inset:calc(-1 * var(--contact-bleed-top)) 0 calc(-1 * var(--contact-bleed)); z-index:-2; pointer-events:none; background:transparent;
  /* Bottom feather ends AT the section edge (not in the bleed): the opaque
     .video-wall that follows paints over the bleed, so a fade placed there was
     hidden and read as a hard line. The fade now runs up into the section, behind
     the panel's lower edge and across the margins beside it. */
  --contact-feather:clamp(110px,14vh,190px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,var(--color-black) var(--contact-blend-top),
    var(--color-black) calc(100% - var(--contact-bleed) - var(--contact-feather)),transparent calc(100% - var(--contact-bleed)));
  mask-image:linear-gradient(180deg,transparent 0,var(--color-black) var(--contact-blend-top),
    var(--color-black) calc(100% - var(--contact-bleed) - var(--contact-feather)),transparent calc(100% - var(--contact-bleed)));
}
.contact-media video{
  width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity 1.2s cubic-bezier(.16,1,.3,1);
}
.contact-media video.is-ready{ opacity:1; }
.contact-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(var(--rgb-scrim),.1),rgba(var(--rgb-scrim),.1));
}
.contact-us > .wrap{ position:relative; z-index:1; width:100%; }
/* Kemana-style panel · LIGHT */
.contact-panel{
  position:relative; overflow:hidden; border-radius:16px;
  border:1px solid var(--line); background:var(--panel);
  box-shadow:0 44px 96px -54px rgba(var(--rgb-ink),.4);
  padding:clamp(24px,3.4vw,46px);
}
/* faint dot texture (peg's particle map) masked into the top-right */
.contact-panel::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background:radial-gradient(rgba(var(--rgb-ink),.055) 1px,transparent 1.5px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(130% 95% at 100% 0%,var(--color-black),transparent 58%);
  mask-image:radial-gradient(130% 95% at 100% 0%,var(--color-black),transparent 58%); }
/* ember corner glow */
.contact-panel::after{ content:""; position:absolute; top:-130px; right:-90px; width:440px; height:440px; z-index:0; pointer-events:none;
  background:radial-gradient(circle,rgba(var(--rgb-brand),.15),transparent 62%); }
.contact-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,4vw,58px); align-items:start; }
.contact-form-side h2{ font-size:var(--fs-subheading); margin-bottom:16px; }
.contact--us .row{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.contact--us .full{ grid-column:1 / -1; }
.field input, .field select, .field textarea{
  width:100%; background:var(--bg-2); color:var(--text);
  border:1px solid var(--line); border-radius:10px; padding:11px 15px;
  font:inherit; font-size:var(--fs-sm); transition:border-color .2s, background .2s, box-shadow .2s;
}
.field textarea{ min-height:92px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:var(--faint); }
.field select{ appearance:none; cursor:pointer; color:var(--soft); padding-right:44px; }
.field select:valid{ color:var(--text); }
.field select option{ background:var(--panel); color:var(--text); }
/* background-COLOR, not the shorthand: the shorthand reset background-image and that is
   why the old chevron (a background gradient on the select) vanished on focus */
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--orange); background-color:var(--panel); box-shadow:0 0 0 3px rgba(var(--rgb-brand),.13); }
/* select chevron · drawn on the wrapper so it survives focus, and can animate:
   rests as a soft "v", dips on hover, turns orange on focus, flips to "^" while the
   list is open (.is-open is toggled in main.js since native selects expose no open state) */
.field--select{ position:relative; }
.field--select::after{ content:""; position:absolute; right:19px; top:50%; width:8px; height:8px; pointer-events:none;
  border-right:2px solid var(--soft); border-bottom:2px solid var(--soft); border-radius:0 0 2px 0;
  transform:translateY(-6px) rotate(45deg); transform-origin:center;
  transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .2s; }
.field--select:hover::after{ transform:translateY(-4px) rotate(45deg); }
.field--select:focus-within::after{ border-color:var(--orange); }
.field--select.is-open::after{ transform:translateY(-1px) rotate(225deg); }
@media (prefers-reduced-motion:reduce){ .field--select::after{ transition:none; } }
#otherField{ display:none; }
#otherField.show{ display:block; }
.submit-row{ margin-top:4px; }
.submit-row .btn{ width:auto; }
/* contact submit: static button — no lift, no arrow slide (colour change on hover only) */
.submit-row .btn, .submit-row .btn:hover{ transform:none; }
.submit-row .btn .arr, .submit-row .btn:hover .arr{ transform:none; transition:none; }

.get-in-touch{ align-self:start; }
.get-in-touch h3{ font-size:var(--fs-subheading); margin-bottom:10px; }
/* designer review: description runs to the column margin (no ch cap) */
.get-in-touch > p{ color:var(--soft); margin-bottom:20px; font-size:var(--fs-sm); line-height:var(--lh-body); }
/* office location card (Singapore removed until real details are available) */
.contact-info{ display:grid; grid-template-columns:1fr; gap:14px; }
.loc-card{ border:1px solid var(--line); border-radius:14px; background:var(--bg-2); padding:20px 20px 22px;
  display:grid; gap:11px; align-content:start; transition:border-color .3s, box-shadow .3s, transform .3s; }
.loc-card:hover{ border-color:rgba(var(--rgb-brand),.4); box-shadow:0 18px 34px -24px rgba(var(--rgb-ink),.24); transform:translateY(-2px); }
.loc-card h4{ font-family:var(--font-sans); font-weight:700; font-size:var(--fs-card); letter-spacing:-.01em; color:var(--text); }
.loc-line{ display:flex; align-items:flex-start; gap:11px; }
.loc-line .ic{ width:34px; height:34px; border-radius:9px; background:rgba(var(--rgb-brand),.12); border:1px solid rgba(var(--rgb-brand),.26); display:grid; place-items:center; flex:0 0 auto; }
.loc-line .ic svg{ width:16px; height:16px; fill:var(--orange); }
.loc-line p, .loc-line a{ font-size:var(--fs-sm); color:var(--text); line-height:var(--lh-body); }
.loc-line a{ display:block; }
.loc-line a:hover{ color:var(--orange); }
.loc-tba{ color:var(--faint); font-style:italic; }
@media (max-width:1080px){ .contact-info{ grid-template-columns:1fr; } }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } .contact-us{ min-height:0; } }
@media (max-width:540px){ .contact--us .row{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .contact-media{ display:none; } }

/* /contact-us/: photo hero → gradient video. Before, the section's video bled
   ~72px up over the hero and had finished fading in while still on top of it,
   so the hero's bottom read as a hard line with the gradient already showing
   beneath. Now the hero paints ABOVE the section (article z-index over the
   isolated .contact-us) and dissolves out across its last --hero-dissolve px,
   while the video bleeds up behind the whole dissolve and is already opaque
   there — a cross-fade from photo to gradient instead of an edge. The hero's
   bottom padding grows to the dissolve height so the intro copy sits above
   the fade at every width (the old 56-96px would put it inside the fade). */
.contact-page, .contact-page + .contact-us{ --hero-dissolve:clamp(112px,14vh,200px); }
.contact-page{ position:relative; z-index:1; }
.contact-page .page-hero--photo{
  padding-bottom:calc(var(--hero-dissolve) + 12px);
  -webkit-mask-image:linear-gradient(180deg,var(--color-black) calc(100% - var(--hero-dissolve)),rgba(0,0,0,.55) calc(100% - var(--hero-dissolve) * .5),transparent 100%);
  mask-image:linear-gradient(180deg,var(--color-black) calc(100% - var(--hero-dissolve)),rgba(0,0,0,.55) calc(100% - var(--hero-dissolve) * .5),transparent 100%);
}
.contact-page + .contact-us{
  --contact-bleed-top:calc(var(--hero-dissolve) + 40px); /* video starts 40px above the fade… */
  --contact-blend-top:24px;                              /* …and is opaque before the fade begins */
}
@media (prefers-reduced-motion:reduce){ /* no video → nothing to dissolve into; keep the hero solid */
  .contact-page .page-hero--photo{ padding-bottom:clamp(56px,7vw,96px); -webkit-mask-image:none; mask-image:none; }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   VIDEO WALL · clip marquee above the footer (home page). Mirrors the
   Life-at-DynamIQ photo marquee (.gallery-marq) — edge-to-edge track,
   rounded tiles, faded edges, auto-scroll that pauses on hover — with
   16:9 video tiles instead of 4:3 photos.
   ═══════════════════════════════════════════════════════════════ */
.site-end{ position:relative; }
/* top band is transparent so the contact panel's drop shadow (which overhangs the
   section above) fades out instead of being sliced by an opaque edge */
.video-wall{ position:relative; z-index:1; padding-block:clamp(28px,4vw,56px) 0; overflow:hidden;
  background:linear-gradient(180deg,transparent 0,var(--bg) var(--section-blend)); }
.video-marq{ position:relative; overflow:hidden; }
.video-marq::before,
.video-marq::after{ content:""; position:absolute; top:0; bottom:0; z-index:2; width:clamp(24px,7%,110px); pointer-events:none; }
.video-marq::before{ left:0; background:linear-gradient(90deg,var(--bg),rgba(var(--rgb-white),0)); }
.video-marq::after{ right:0; background:linear-gradient(270deg,var(--bg),rgba(var(--rgb-white),0)); }
.video-track{ display:flex; gap:clamp(12px,1.4vw,20px); width:-webkit-max-content; width:max-content;
  will-change:transform; animation:galleryMarq 46s linear infinite; }
.video-marq:hover .video-track{ animation-play-state:paused; }
.video-tile{ --vh:clamp(200px,26vw,340px); margin:0; flex:0 0 auto; height:var(--vh); width:calc(var(--vh) * 16 / 9); overflow:hidden;
  border-radius:16px; border:1px solid var(--line); background:var(--color-night); box-shadow:0 22px 44px -28px rgba(var(--rgb-ink),.35); }
.video-tile video{ display:block; width:100%; height:100%; object-fit:cover; }
/* tiles open the lightbox: pointer + a play badge that shows on hover/focus */
.video-tile[role="button"]{ cursor:pointer; }
.video-tile[role="button"]:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }
.video-tile{ position:relative; }
.video-tile-hint{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; opacity:0; transition:opacity .25s;
  background:rgba(var(--rgb-night),.22); color:var(--color-white); }
.video-tile-hint svg{ width:58px; height:58px; padding:16px; border-radius:50%; fill:currentColor; background:rgba(var(--rgb-night),.55);
  border:1px solid rgba(var(--rgb-white),.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transform:scale(.9); transition:transform .3s cubic-bezier(.16,1,.3,1); }
.video-tile:hover .video-tile-hint, .video-tile:focus-visible .video-tile-hint{ opacity:1; }
.video-tile:hover .video-tile-hint svg{ transform:none; }
.video-marq.is-held .video-track{ animation-play-state:paused; }
/* product caption, bottom-left of the tile, on the chip idiom (uppercase 2xs, blurred night pill) */
.video-tile-label{ position:absolute; left:14px; bottom:14px; z-index:1; max-width:calc(100% - 28px); margin:0; padding:7px 12px; border-radius:999px;
  font-family:var(--font-sans); font-weight:700; font-size:var(--fs-2xs); letter-spacing:.12em; text-transform:uppercase; line-height:1.2;
  color:var(--color-white); background:rgba(var(--rgb-night),.55); border:1px solid rgba(var(--rgb-white),.28);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* controls (main.js 9b): the same drag engine as the gallery — grab / swipe the strip; a drag
   never opens the lightbox, a tap or click still does */
.video-marq.is-js{ cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.video-marq.is-js.is-dragging{ cursor:grabbing; }
.video-marq.is-js .video-track{ animation:none; }
.video-marq.is-js .video-tile video{ pointer-events:none; }
.video-marq.is-js .video-tile[role="button"]{ cursor:inherit; }
/* ── lightbox ── sits above the chat widget (1200); the backdrop blurs the page */
.video-lightbox{ position:fixed; inset:0; z-index:1300; display:grid; place-items:center; padding:clamp(16px,3vw,40px); }
/* the author display:grid above beats the UA [hidden]{display:none}; without this the invisible
   lightbox sits over the whole page and swallows every hover and click */
.video-lightbox[hidden]{ display:none; }
.video-lightbox-backdrop{ position:absolute; inset:0; background:rgba(var(--rgb-night),.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transition:opacity .3s; }
.video-lightbox-panel{ position:relative; width:min(1200px,92vw); max-height:calc(100dvh - 2 * clamp(16px,3vw,40px)); display:flex; flex-direction:column;
  border-radius:16px; overflow:hidden; background:var(--color-night); box-shadow:0 60px 120px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--rgb-white),.12);
  opacity:0; transform:translateY(18px) scale(.96); transition:opacity .3s, transform .5s cubic-bezier(.16,1,.3,1); }
.video-lightbox.is-open .video-lightbox-backdrop, .video-lightbox.is-open .video-lightbox-panel{ opacity:1; }
.video-lightbox.is-open .video-lightbox-panel{ transform:none; }
.video-lightbox-stage{ display:block; width:100%; aspect-ratio:16/9; max-height:calc(100dvh - 2 * clamp(16px,3vw,40px) - 52px); background:var(--color-black); }
.video-lightbox-stage video{ display:block; width:100%; height:100%; object-fit:contain; }
.video-lightbox-cap{ flex:0 0 auto; padding:14px 18px; font-family:var(--font-sans); font-weight:700; font-size:var(--fs-2xs); letter-spacing:.12em; text-transform:uppercase; color:rgba(var(--rgb-white),.78); }
.video-lightbox-cap:empty{ display:none; }
.video-lightbox-close{ position:absolute; top:12px; right:12px; z-index:2; width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(var(--rgb-white),.35); border-radius:50%;
  background:rgba(var(--rgb-night),.6); color:var(--color-white); cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .2s, transform .2s; }
.video-lightbox-close svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.video-lightbox-close:hover{ background:var(--orange); border-color:var(--orange); transform:rotate(90deg); }
.video-lightbox-close:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; }
.has-lightbox, .has-lightbox body{ overflow:hidden; }
/* the footer's top fade exists to blend out of a coloured section; with the
   same-coloured video wall directly above it, it only smudges the tiles */
.video-wall + .footer::before{ display:none; }
@media (prefers-reduced-motion:reduce){
  .video-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; }
  .video-tile[aria-hidden]{ display:none; }
  .video-marq::before, .video-marq::after{ display:none; }
}

.footer{ position:relative; z-index:1; padding-block:clamp(56px,7vw,84px) 32px; background:var(--bg); }
.footer::before{
  content:""; position:absolute; left:0; right:0; top:calc(-1 * var(--section-blend)); height:var(--section-blend);
  pointer-events:none; background:linear-gradient(180deg,transparent,var(--bg));
}
.footer-top{ display:grid; grid-template-columns:1.5fr .9fr .9fr 1.1fr; gap:44px; padding-bottom:48px; }
.footer ul li{ font-size:var(--fs-sm); color:var(--soft); }
.footer .logo-link::before{
  content:""; display:block; width:186px; height:70px;
  background:url("../logos/DynamIQ_Enterprise_Solution_Inc__with_Tagline_Logo_blk.svg") left center / contain no-repeat;
}
.logo-footer{ display:none; }
.footer-brand p.name{ font-family:var(--font-sans); font-weight:700; font-size:var(--fs-sm); letter-spacing:.02em; margin-top:20px; }
.footer-brand p.addr{ font-size:var(--fs-sm); color:var(--soft); margin-top:6px; }
.footer-phones{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.footer-phone{
  display:inline-flex; align-items:center; gap:10px; padding:11px 14px;
  border:1px solid rgba(var(--rgb-brand),.62); border-radius:6px;
  font-size:1.125rem; font-weight:700; line-height:1.2; color:var(--text);
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.footer-phone svg{ width:19px; height:19px; flex:0 0 auto; fill:var(--orange); transition:fill .2s ease; }
.footer-phone:hover{ background:var(--orange-deep); border-color:var(--orange-deep); color:var(--color-on-accent); transform:translateY(-2px); }
.footer-phone:hover svg{ fill:var(--color-on-accent); }
.socials{ display:flex; gap:9px; margin-top:22px; flex-wrap:wrap; }
.socials a{ width:38px; height:38px; border:1px solid var(--line); border-radius:10px; display:grid; place-items:center; color:var(--soft); transition:color .2s, border-color .2s, background .2s, transform .2s; }
.socials a:hover{ color:var(--orange); border-color:var(--orange); background:rgba(var(--rgb-brand),.08); transform:translateY(-2px); }
.socials svg{ width:17px; height:17px; fill:currentColor; }
.footer h4{ font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--orange); margin-bottom:18px; }
.footer ul{ list-style:none; display:grid; gap:11px; }
.footer ul a{ font-size:var(--fs-sm); color:var(--soft); transition:color .18s, padding-left .18s; }
.footer ul a:hover{ color:var(--text); padding-left:4px; }
.footer-base{ border-top:1px solid var(--line-2); padding-top:24px; }
.footer-base p{ font-size:var(--fs-xs); color:var(--faint); text-align:center; }
.footer-base a{ color:var(--soft); }
.footer-base a:hover{ color:var(--orange); }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1 / -1; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }

/* ═══ "Let Us Be Your Partner in Growth" CTA — two-column with a product visual ═══ */
.book-free-demo .cta-panel{ text-align:left; padding:clamp(34px,5vw,68px); overflow:hidden; }
.book-free-demo .book-inner{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px); align-items:center; }
.book-free-demo .book-copy{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.book-free-demo .book-copy .eyebrow{ color:var(--orange-2); }
.book-free-demo .book-inner h2{ margin:0; max-width:18ch; text-align:left; }
.book-free-demo .book-inner p{ margin:0; max-width:46ch; text-align:left; color:rgba(var(--rgb-white),.82); }
.book-free-demo .book-inner .dynamiq-cta{ margin-top:8px; }
/* Photo treatment · bleeds off the panel's RIGHT edge, dissolving into the dark
   panel toward the copy via a mask rather than sitting in a card. Absolute
   positioning is relative to the panel's PADDING BOX, so it reaches the panel
   edges and is clipped by the panel's own radius + overflow:hidden.
   ⚠ The width cap is load-bearing, not cosmetic. The source is PORTRAIT
   (980×1071, ratio .92). Spanning the full panel made the box ~3:1, and
   object-fit:cover then threw away ~70% of the image height — the handshake was
   cropped down to a zoomed band of knuckles. Keeping the box near-square holds
   the whole gesture in frame. Do not restore `inset:0`. */
.book-free-demo .book-visual{
  position:absolute; inset:0 0 0 auto; width:min(58%,720px);
  z-index:0; overflow:hidden; pointer-events:none;
  border:0; border-radius:0; box-shadow:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(var(--rgb-ink),.5) 24%,var(--color-black) 54%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(var(--rgb-ink),.5) 24%,var(--color-black) 54%);
}
/* scale(1.12) leaves headroom so the parallax shift never exposes an edge.
   object-position 44% == the clasped hands' centre in the source. */
.book-free-demo .book-visual img{
  width:100%; height:100%; object-fit:cover; object-position:center 44%;
  display:block; filter:none; will-change:transform;
  transform:translate3d(0,var(--book-parallax-y,0px),0) scale(1.12);
  opacity:0; transition:opacity 1.1s cubic-bezier(.16,1,.3,1);
}
.book-free-demo .book-visual img.is-ready{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .book-free-demo .book-visual img{ transform:none; opacity:1; transition:none; }
}
@media (max-width:860px){
  .book-free-demo .book-inner{ grid-template-columns:1fr; }
  .book-free-demo .book-copy{ align-items:center; text-align:center; }
  .book-free-demo .book-inner h2, .book-free-demo .book-inner p{ text-align:center; margin-inline:auto; }
  /* stacked: the photo becomes a bottom band fading UP into the panel. Band
     height and the panel's reserved space derive from ONE variable, so the copy
     is guaranteed to clear the image however the clamp resolves. */
  .book-free-demo .cta-panel{
    --book-band-h:clamp(210px,46vw,310px);
    padding-bottom:calc(var(--book-band-h) + clamp(24px,4vw,40px));
  }
  .book-free-demo .book-visual{
    /* width:auto is required — the desktop rule's width cap would otherwise
       win over left:0/right:0 and leave the band only 58% wide. */
    inset:auto 0 0 0; width:auto; height:var(--book-band-h);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(var(--rgb-ink),.5) 26%,var(--color-black) 58%);
    mask-image:linear-gradient(180deg,transparent 0,rgba(var(--rgb-ink),.5) 26%,var(--color-black) 58%);
  }
}

/* ═══ MOBILE LEGIBILITY & TOUCH TARGETS (≤600px) ═══
   Measured at 360/390/430: no horizontal overflow anywhere, but 13 selectors
   rendered under 14px and 8 groups of controls were under the 44px touch
   minimum — the worst being 24 "See More" links at 19px tall.
   Type is fixed by raising the two SCALE FLOORS rather than patching each
   selector, so anything added later inherits the fix. Desktop is untouched. */
@media (max-width:600px){
  /* 11px → 12px, 12px → 13px. These two tokens feed the news tags/dates, story
     roles, footer headings, footer legal line and both "more" links. */
  :root{ --fs-2xs:.75rem; --fs-xs:.8125rem; }

  /* Controls carry full body-size type, not metadata size — they are the things
     a thumb is aiming at. 44px is the accessible minimum touch height. */
  .story-more,
  .sap-more{ font-size:var(--fs-sm); min-height:44px; }
  .news-tab{ font-size:var(--fs-sm); min-height:44px; padding-block:12px; }

  /* Link lists were 17px tall — the text height, with no padding to hit.
     inline-flex + min-height grows the target without moving the text. */
  .footer ul a{ min-height:40px; display:inline-flex; align-items:center; }
  .footer ul{ gap:4px; }
  .loc-line a{ min-height:40px; display:flex; align-items:center; }
  .socials a{ width:42px; height:42px; }
}

/* ═══ 2 · PRODUCTS LISTING ═══ */
.products-page #sap-business-one,.products-page .product-row{scroll-margin-top:96px}
.products-page .hero{position:relative;min-height:clamp(560px,76dvh,760px);display:grid;align-items:end;overflow:hidden;background:#202022;color:#fff}
.products-page .hero::before{content:"";position:absolute;inset:0;background:url("../products/site-media/bg-products.jpg") center/cover no-repeat;filter:saturate(.82)}
.products-page .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,14,15,.products-page .94) 0%,rgba(15,14,15,.products-page .76) 48%,rgba(15,14,15,.products-page .26) 78%,rgba(15,14,15,.products-page .42) 100%)}
.products-page .hero .wrap{position:relative;z-index:1;padding-block:clamp(92px,10vw,150px)}
.products-page .hero h1{font-size:var(--h1);line-height:.94;letter-spacing:-.055em;max-width:8ch}
.products-page .hero p{max-width:760px;margin-top:28px;font-size:var(--body);line-height:1.7;color:rgba(255,255,255,.products-page .78)}
.products-page .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.products-page .intro{padding-block:var(--section);background:linear-gradient(180deg,var(--warm),.products-page #fff)}
.products-page .intro-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(40px,6vw,100px);align-items:start}
.products-page .intro h2{font-size:var(--h2);line-height:1.05;letter-spacing:-.045em;max-width:12ch}
.products-page .intro-copy{font-size:var(--body);line-height:1.75;color:var(--soft)}
.products-page .sap-feature{padding-bottom:var(--section)}
.products-page .sap-panel{display:grid;grid-template-columns:1fr 1fr;min-height:520px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--warm)}
.products-page .sap-media{position:relative;min-height:430px;background:linear-gradient(145deg,.products-page #eef2f5,.products-page #fff)}
.products-page .sap-media::after{content:"";position:absolute;inset:auto 0 0;height:44%;background:linear-gradient(transparent,rgba(37,35,36,.products-page .08))}
.products-page .sap-media>img{width:100%;height:100%;object-fit:cover;object-position:center}
.products-page .sap-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,5vw,72px)}
.products-page .sap-logo{width:min(100%,360px);max-height:72px;object-fit:contain;object-position:left;margin-bottom:28px}
.products-page .sap-copy h2{font-size:var(--h2);line-height:1.05;letter-spacing:-.04em;margin-bottom:22px}
.products-page .sap-copy p{font-size:var(--body);color:var(--soft);margin-top:14px}
.products-page .text-link{display:inline-flex;align-items:center;gap:16px;width:max-content;margin-top:28px;color:var(--brand-dark);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.products-page .text-link span{font-size:20px;transition:transform .2s}.text-link:hover span{transform:translateX(4px)}
.products-page .products-listing{padding-block:var(--section);background:#f5f4f2}
.products-page .products-listing-head{margin-bottom:clamp(48px,6vw,84px)}
.products-page .products-listing-head h2{font-size:var(--h2);line-height:1.05;letter-spacing:-.045em;max-width:18ch}
.products-page .products-listing-head p{font-size:var(--body);color:var(--soft);max-width:64ch}
.products-page .product-list{display:grid;gap:22px}
.products-page .product-row{display:grid;grid-template-columns:1.03fr .97fr;min-height:430px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.products-page .product-row:nth-child(even) .product-media{order:2}.product-row:nth-child(even) .product-copy{order:1}
.products-page .product-media{position:relative;display:grid;place-items:center;min-height:360px;padding:clamp(24px,4vw,52px);overflow:hidden;background:linear-gradient(145deg,.products-page #f0f1f2,.products-page #fff 64%)}
.products-page .product-media::before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:rgba(var(--orange-rgb),.products-page .09);filter:blur(4px)}
.products-page .product-media img{position:relative;z-index:1;width:100%;height:100%;max-height:330px;object-fit:contain}
.products-page .product-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,5vw,72px)}
.products-page .product-logo{height:42px;width:auto;max-width:230px;object-fit:contain;object-position:left;margin-bottom:28px}
.products-page .product-copy h2{font-size:var(--h3);line-height:1.1;letter-spacing:-.035em;margin-bottom:16px}
.products-page .product-copy p{font-size:var(--body);color:var(--soft);margin-top:12px}
.products-page .intro-grid{grid-template-columns:1fr}.intro h2,.products-page .products-listing-head h2{max-width:18ch}
.products-page .sap-panel,.products-page .product-row{grid-template-columns:1fr}.sap-media{min-height:380px}.product-row:nth-child(even) .product-media{order:0}.product-row:nth-child(even) .product-copy{order:0}
.products-page .hero{min-height:620px}.hero::after{background:linear-gradient(180deg,rgba(15,14,15,.products-page .54),rgba(15,14,15,.products-page .94) 58%)}.hero h1{max-width:9ch}
.products-page .sap-media,.products-page .product-media{min-height:290px}.sap-panel{min-height:0}.sap-copy,.products-page .product-copy{padding:30px 24px 36px}
@media (max-width:980px){
  .products-page .intro-grid{grid-template-columns:1fr}.products-page .intro h2,.products-page .products-listing-head h2{max-width:18ch}
  .products-page .sap-panel,.products-page .product-row{grid-template-columns:1fr}.products-page .sap-media{min-height:380px}
  .products-page .product-row:nth-child(even) .product-media{order:0}.products-page .product-row:nth-child(even) .product-copy{order:0}
}
@media (max-width:600px){
  .products-page .hero{min-height:620px}.products-page .hero::after{background:linear-gradient(180deg,rgba(15,14,15,.54),rgba(15,14,15,.94) 58%)}.products-page .hero h1{max-width:9ch}
  .products-page .sap-media,.products-page .product-media{min-height:290px}.products-page .sap-panel{min-height:0}.products-page .sap-copy,.products-page .product-copy{padding:30px 24px 36px}
}

/* ═══ 3 · PRODUCT DETAIL ═══ */
.detail-hero{position:relative;overflow:hidden;background:linear-gradient(125deg,#fff 0%,#fff 48%,#f4f2ef 100%)}.detail-hero::before{content:"";position:absolute;width:720px;height:720px;border-radius:50%;right:-180px;top:-280px;background:rgba(var(--orange-rgb),.12);filter:blur(2px)}.breadcrumbs{padding-top:30px;color:var(--faint);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.breadcrumbs a{color:var(--brand-dark)}.hero-grid{position:relative;display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(36px,6vw,96px);align-items:center;min-height:clamp(620px,76dvh,780px);padding-block:clamp(60px,7vw,96px)}.hero-copy{position:relative;z-index:2}.hero-logo{width:min(100%,310px);max-height:70px;object-fit:contain;object-position:left;margin-bottom:34px}.hero-copy h1{font-size:var(--h1);line-height:.98;letter-spacing:-.052em;max-width:10ch}.hero-copy p{font-size:var(--body);line-height:1.75;color:var(--soft);margin-top:26px;max-width:62ch}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.hero-media{position:relative;min-height:460px;display:grid;place-items:center}.hero-media::before{content:"";position:absolute;inset:8% 2% 4%;border-radius:28px;background:linear-gradient(145deg,#e7e9eb,#fff);box-shadow:0 35px 80px rgba(37,35,36,.12)}.hero-media img{position:relative;z-index:1;width:100%;max-height:540px;object-fit:contain}
.overview{padding-block:var(--section)}.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,7vw,110px);align-items:center}.overview-media{min-height:430px;display:grid;place-items:center;padding:clamp(20px,3vw,44px);border-radius:18px;background:linear-gradient(145deg,#f0f1f2,#fff);overflow:hidden}.overview-media img{width:100%;max-height:470px;object-fit:contain}.overview-copy h2,.features-head h2,.faq-head h2{font-size:var(--h2);line-height:1.05;letter-spacing:-.045em}.overview-copy p{font-size:var(--body);line-height:1.75;color:var(--soft);margin-top:18px}.overview-copy .closing{color:var(--ink);font-weight:700}
.features{padding-block:var(--section);background:#f5f4f2}.features-head{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(40px,6vw,90px);align-items:end;margin-bottom:clamp(44px,5vw,72px)}.features-head p{font-size:var(--body);color:var(--soft);max-width:58ch}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-group{position:relative;min-height:310px;padding:clamp(28px,3vw,42px);border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}.feature-group::before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-70px;top:-70px;background:rgba(var(--orange-rgb),.1)}.feature-group h3{position:relative;font-size:var(--h3);line-height:1.1;letter-spacing:-.03em;margin-bottom:24px}.feature-group ul{position:relative;display:grid;gap:13px;list-style:none;color:var(--soft);font-size:var(--body)}.feature-group li{display:flex;gap:10px}.feature-group li::before{content:"✓";color:var(--brand);font-weight:900}
.showcase{padding-block:var(--section);background:#fff}.showcase-frame{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(145deg,#f1f2f3,#fff);padding:clamp(20px,3vw,44px)}.showcase-frame img{width:100%;max-height:680px;object-fit:contain}
.faq{padding-block:var(--section);background:linear-gradient(180deg,#fff,var(--warm))}.faq-grid{display:grid;grid-template-columns:.68fr 1.32fr;gap:clamp(40px,7vw,110px);align-items:start}.faq-head{position:sticky;top:120px}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line);padding:0}.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;font-size:clamp(1.05rem,1rem + .25vw,1.2rem);font-weight:700;cursor:pointer;list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:"+";display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;color:var(--brand);font-size:20px;flex:0 0 auto}.faq-list details[open] summary::after{content:"−"}.faq-list p{padding:0 52px 24px 0;color:var(--soft);font-size:var(--body);line-height:1.75}
@media(max-width:980px){.hero-grid,.overview-grid,.features-head,.faq-grid{grid-template-columns:1fr}.hero-grid{padding-top:42px}.hero-media{min-height:380px}.overview-media{min-height:360px}.feature-grid{grid-template-columns:1fr 1fr}.faq-head{position:static}}
@media(max-width:620px){.detail-hero::before{width:460px;height:460px}.breadcrumbs{padding-top:14px}.hero-grid{min-height:calc(100dvh - 176px);align-content:center;padding-block:8px 14px;gap:12px}.hero-logo{max-height:42px;margin-bottom:10px}.hero-copy h1{max-width:14ch}.hero-copy p{margin-top:10px;line-height:1.5;font-size:1rem}.hero-actions{margin-top:14px}.hero-media{min-height:0}.hero-media::before{inset:0;border-radius:18px}.hero-media img{max-height:clamp(115px,21dvh,230px)}.overview-media{min-height:280px}.feature-grid{grid-template-columns:1fr}.feature-group{min-height:0}}

/* ═══ 4 · COMPOSITION SYSTEM (viewport-aware layouts) ═══ */
:root{
  color-scheme:light;
  --color-brand:#F88F10;
  --color-brand-light:#FFA83A;
  --color-brand-dark:#D97400;
  --color-ink:#252324;
  --color-gray:#4F5257;
  --color-mist:#D9D9D9;
  --color-surface:#FFFFFF;
  --color-surface-muted:#F5F4F2;
  --color-surface-warm:#FBFAF8;
  --color-on-accent:#FFFFFF;
  --rgb-brand:248,143,16;
  --rgb-ink:37,35,36;
  --rgb-white:255,255,255;
  --brand:var(--color-brand);
  --brand-dark:var(--color-brand-dark);
  --orange:var(--color-brand);
  --orange-deep:var(--color-brand-dark);
  --ink:var(--color-ink);
  --gray:var(--color-gray);
  --surface:var(--color-surface);
  --muted:var(--color-surface-muted);
  --warm:var(--color-surface-warm);
  --line:rgba(var(--rgb-ink),.12);
  --line-2:rgba(var(--rgb-ink),.07);
  --soft:rgba(var(--rgb-ink),.72);
  --faint:rgba(var(--rgb-ink),.5);
  --orange-rgb:var(--rgb-brand);
  --ink-rgb:var(--rgb-ink);
  --font:"Roboto",sans-serif;
  --font-sans:var(--font);
  --fs-xs:.75rem;
  --fs-sm:.875rem;
  --fs-body:1rem;
  --fs-lede:clamp(1rem,.96rem + .2vw,1.125rem);
  --fs-card:clamp(1.125rem,1.03rem + .4vw,1.375rem);
  --fs-h3:clamp(1.25rem,1.1rem + .65vw,1.5rem);
  --fs-h2:clamp(2rem,1.5rem + 2vw,3.25rem);
  --fs-h1:clamp(2.5rem,1.7rem + 3.5vw,4.75rem);
  --h1:var(--fs-h1);
  --h2:var(--fs-h2);
  --h3:var(--fs-h3);
  --body:var(--fs-lede);
  --lh-tight:1.08;
  --lh-heading:1.22;
  --lh-body:1.6;
  --lh-relaxed:1.7;
  --wrap:1440px;
  --pad:clamp(20px,4vw,64px);
  --sec:clamp(64px,6vw,96px);
  --section:var(--sec);
  --r:14px;
  --r-pill:10px;
}

html{scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
h1,h2,h3,h4{font-family:var(--font);font-weight:700;color:inherit}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.045em}
h2{font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:-.035em}
h3{font-size:var(--fs-h3);line-height:var(--lh-heading);letter-spacing:-.015em}
.eyebrow{display:inline-flex;align-items:center;margin:0;color:var(--brand);font-size:clamp(.875rem,.82rem + .2vw,1rem);font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.sub-page .eyebrow{margin-bottom:18px}

.header-form,.topbar{height:auto;min-height:44px;background:var(--color-ink);color:var(--color-on-accent);font-size:var(--fs-sm);font-weight:500}
.header-form .wrap,.topbar .wrap{min-height:44px;display:flex;align-items:center;justify-content:flex-start;gap:8px 24px;padding-block:6px}
.header-form__cta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 28px;min-width:0}
.header-form__cta p{margin:0}
/* Top-bar search · presentational only for now (no form, nothing submits). */
.topbar-search{margin-left:auto;flex:0 1 260px;min-width:170px;height:32px;display:flex;align-items:center;gap:6px;padding:0 4px 0 14px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.06);transition:border-color .2s,background .2s}
.topbar-search:focus-within{border-color:var(--brand);background:rgba(255,255,255,.09)}
.topbar-search__input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--color-on-accent);font:inherit;font-size:var(--fs-sm);font-weight:400;letter-spacing:0;outline:0}
.topbar-search__input::placeholder{color:rgba(255,255,255,.55)}
.topbar-search__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.topbar-search__btn{flex:none;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--brand);color:var(--color-ink);cursor:pointer;transition:background .2s}
.topbar-search__btn:hover{background:var(--color-brand-light)}
.header-form a,.topbar a{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:color .2s,gap .2s}
.header-form a:hover,.topbar a:hover{color:var(--color-brand-light);gap:12px}



.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:15px 32px;border:1px solid transparent;border-radius:var(--r-pill);font-family:var(--font);font-size:var(--fs-sm);font-weight:700;line-height:1.2;white-space:nowrap;transition:transform .25s,background .2s,color .2s,border-color .2s,box-shadow .25s}
.btn:hover{transform:translateY(-2px)}
.btn-primary,.btn-orange{background:var(--brand);color:var(--color-on-accent);box-shadow:0 10px 30px -10px rgba(var(--rgb-brand),.6)}
.btn-primary:hover,.btn-orange:hover{background:var(--brand-dark);color:var(--color-on-accent)}
.btn-outline{border-color:var(--line);background:transparent;color:var(--ink)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand-dark);background:rgba(var(--rgb-brand),.06)}

.sub-page .sap-panel,.sub-page .product-row,.sub-page .feature-group,.sub-page .overview-media,.sub-page .showcase-frame{border-radius:var(--r);border-color:var(--line)}
.sub-page .product-copy p,.sub-page .sap-copy p,.sub-page .overview-copy p,.sub-page .features-head p,.sub-page .faq-list p{font-size:var(--fs-lede);line-height:var(--lh-relaxed);color:var(--soft)}
.sub-page .text-link{color:var(--brand-dark);font-size:var(--fs-sm);font-weight:700;letter-spacing:.08em}

.cta-section{padding-block:var(--sec);background:linear-gradient(180deg,var(--muted) 0%,var(--surface) 24%,var(--surface) 100%)}
.cta-panel{position:relative;overflow:hidden;padding:clamp(48px,7vw,92px) var(--pad);border:1px solid rgba(var(--rgb-brand),.25);border-radius:16px;background:linear-gradient(90deg,var(--color-ink) 0%,var(--color-gray) 140.31%);color:var(--color-on-accent);text-align:center}
.cta-panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 320px at 50% -12%,rgba(var(--rgb-brand),.28),transparent 60%)}
.cta-panel h2{position:relative;max-width:20ch;margin-inline:auto;color:var(--color-on-accent);font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:-.035em;text-wrap:balance}
.cta-panel p{position:relative;max-width:54ch;margin:20px auto 0;color:rgba(var(--rgb-white),.78);font-size:var(--fs-lede);line-height:var(--lh-relaxed)}
.cta-panel .btn,.cta-panel .dynamiq-cta{position:relative;margin-top:28px}
.cta-panel .btn{min-width:220px}
/* phone line under the CTA button: the icon had no size rule and rendered at the SVG's
   intrinsic size (~400px). Same 34px orange tile the home contact card uses for its icons. */
.cta-panel .cta-phone{position:relative;display:flex;justify-content:center;margin:22px auto 0;max-width:none;font-size:var(--fs-sm)}
.cta-panel .cta-phone a{display:inline-flex;align-items:center;gap:10px;color:rgba(var(--rgb-white),.86);font-weight:700;transition:color .2s}
.cta-panel .cta-phone a:hover{color:var(--color-on-accent)}
.cta-panel .cta-phone svg{width:34px;height:34px;padding:9px;flex:0 0 auto;border-radius:9px;fill:var(--orange);background:rgba(var(--rgb-brand),.14);border:1px solid rgba(var(--rgb-brand),.32)}

.footer{position:relative;z-index:1;padding-block:clamp(56px,7vw,84px) 32px;background:var(--surface)}
.footer-logo{width:190px;height:72px;object-fit:contain;object-position:left center}
.footer-brand .name,.footer-brand p.name{margin-top:20px;font-size:var(--fs-sm);font-weight:700;letter-spacing:.02em}
.footer-brand .addr,.footer-brand p.addr{margin-top:6px;color:var(--soft);font-size:var(--fs-sm)}
.footer-phones{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.footer-phone{display:inline-flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid rgba(var(--rgb-brand),.62);border-radius:6px;color:var(--ink);font-size:1.125rem;font-weight:700;line-height:1.2;transition:background .2s,border-color .2s,color .2s,transform .2s}
.footer-phone svg{width:19px;height:19px;flex:0 0 auto;fill:var(--brand);transition:fill .2s}
.footer-phone:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:var(--color-on-accent);transform:translateY(-2px)}
.footer-phone:hover svg{fill:var(--color-on-accent)}
.footer h4{margin-bottom:18px;color:var(--brand);font-size:var(--fs-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.footer ul{display:grid;gap:11px;list-style:none}
.footer ul a{color:var(--soft);font-size:var(--fs-sm);transition:color .18s,padding-left .18s}
.footer ul a:hover{color:var(--ink);padding-left:4px}
.footer-base{border-top:1px solid var(--line-2);padding-top:24px;color:var(--faint);font-size:var(--fs-xs);text-align:center}
.footer-base p{color:inherit;font-size:inherit;text-align:center}

.sub-page [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s cubic-bezier(.16,1,.3,1)}
.sub-page [data-reveal].in,.home-page [data-reveal].in{opacity:1;transform:none}

/*
  Viewport composition
  --------------------
  On desktop, every focused thought fits inside one 100dvh view. Long
  collections may continue down the page, but each product/service/card is a
  self-contained viewport-sized chunk. Narrow layouts keep natural height so
  copy is never clipped or reduced below the shared type scale.
*/
.home-page section,
.products-page main>section,
.product-detail-page main>section,
.home-page .serv,
.products-page .sap-panel,
.products-page .product-row,
.product-detail-page .feature-group{scroll-margin-top:84px}

.product-detail-page .portal-features-layout{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
.product-detail-page .portal-features-copy h2{font-size:var(--h2);line-height:1.05;letter-spacing:-.045em;margin-top:8px}
.product-detail-page .portal-features-copy>p{max-width:54ch;margin-top:12px;color:var(--soft);font-size:var(--body);line-height:1.65}
.product-detail-page .portal-features .feature-grid{grid-template-columns:1fr;gap:0;margin-top:clamp(20px,3dvh,28px);border-top:1px solid var(--line)}
.product-detail-page .portal-features .feature-group{display:grid;grid-template-columns:1fr;gap:10px;align-items:start;min-height:0;padding:12px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;overflow:visible}
.product-detail-page .portal-features .feature-group::before{display:none}
.product-detail-page .portal-features .feature-group h3{margin:0;font-size:clamp(1.15rem,1.05rem + .35vw,1.45rem)}
.product-detail-page .portal-features .feature-group ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;font-size:clamp(.95rem,.9rem + .15vw,1.05rem)}
.product-detail-page .portal-features .showcase-frame{display:grid;place-items:center;min-height:0;padding:0;border:0;border-radius:0;background:transparent;overflow:visible}
.product-detail-page .portal-features .showcase-frame img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(var(--rgb-ink),.13))}
.product-template-page .detail-hero::before,
.product-template-page .hero-media::before{display:none}
/* Hero photo layer. The parallax used to be a JS scroll listener rewriting a CSS variable every frame,
   which forced a style recalc + layer update on each scroll tick and made the hero stutter. It is now a
   scroll-driven CSS animation: the compositor moves the layer with no main-thread work. Browsers without
   animation-timeline (older Safari / Firefox) simply get the static, slightly enlarged photo. */
.product-template-page .product-hero-bg{position:absolute;z-index:0;inset:-9% 0;background-image:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.94) 44%,rgba(255,255,255,.7) 72%,rgba(255,255,255,.78) 100%),var(--product-hero-bg);background-position:center;background-size:cover;pointer-events:none;transform:scale(1.08);contain:paint}
@supports (animation-timeline:scroll()){
  .product-template-page .product-hero-bg{animation:productHeroParallax linear both;animation-timeline:scroll(root);animation-range:0 350px}
  @keyframes productHeroParallax{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(0,42px,0) scale(1.08)}}
}
@media (prefers-reduced-motion:reduce){.product-template-page .product-hero-bg{animation:none}}
.product-template-page .detail-hero>.wrap{position:relative;z-index:1;min-height:inherit;display:grid;grid-template-rows:auto 1fr}
.product-detail-page.product-template-page .hero-grid{height:100%;padding-bottom:0;align-items:stretch}
.product-detail-page.product-template-page .hero-copy{align-self:center;padding-bottom:clamp(52px,7dvh,72px)}
.product-detail-page.product-template-page .hero-copy h1{font-size:clamp(2.55rem,7.4dvh,3.75rem)}
.product-detail-page.product-template-page .hero-copy p{line-height:1.5}
.product-detail-page.product-template-page .hero-actions{opacity:1;transform:none;transition:none}
/* Hero shots are flat 16:9 screenshots, not transparent monitor renders that
   should sit on the bottom edge. The old rules stretched the media cell,
   pinned the image to its bottom (align-items/align-self:end) and bled it to
   112% of the column — so on desktop it sat low, oversized and letterboxed by
   ~86px inside a 742px-tall cell. Centred, ratio-sized, borderless now. */
.product-detail-page.product-template-page .hero-media{min-height:0;align-self:center;align-items:center;justify-items:center}
.product-detail-page.product-template-page .hero-media::before{display:none}
.product-detail-page.product-template-page .hero-media img{display:block;align-self:center;width:auto;max-width:100%;height:auto;max-height:min(520px,56dvh);object-fit:contain;border:0;border-radius:14px;box-shadow:none;
  /* Some product shots are transparent cut-outs (the SAP monitor), others opaque screenshots.
     A box-shadow paints a rectangular panel behind a cut-out — the frame the client spotted —
     so this is a drop-shadow filter instead: it follows the silhouette on a cut-out and looks
     identical to a box-shadow on an opaque one. The radius stays for the opaque shots. */
  filter:drop-shadow(0 22px 30px rgba(var(--rgb-ink),.16))}

@media(min-width:981px){
  /* Landing page: compact complete-section compositions. */
  .home-page .iq,
  .home-page .sap-business-one,
  .home-page .whatsnew,
  .home-page .we-are-accredited,
  .home-page .our-services,
  .home-page .hear-from-our-customer,
  .home-page .book-free-demo,
  .home-page .contact-us{padding-block:clamp(28px,4.5dvh,56px)}

  /* ONE SCREEN: video wall + footer together fill the last viewport. The wrapper
     is a min-height:100dvh flex column; the footer keeps its natural height and
     the marquee takes the rest, so tile height follows the row and width follows
     from the 16:9 ratio. min-height (not height) lets the pair grow on very short
     windows rather than crush the footer's link columns. */
  .home-page .site-end{min-height:100dvh;display:flex;flex-direction:column}
  .home-page .video-wall{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding-block:clamp(28px,4.5dvh,56px) 0}
  .home-page .video-marq{flex:1 1 auto;min-height:0;display:flex;align-items:center}
  /* tile height = the viewport minus the footer's natural height (~470px) and the
     wall's own padding; width follows from 16:9. Leaving height:auto here would let
     the clip's 1920px intrinsic frame set the width and blow the tile up to a full
     screen — the strip must be sized from the row, not from the media. */
  .home-page .video-tile{--vh:clamp(200px,calc(100dvh - 540px),440px)}
  .home-page .footer{flex:0 0 auto;padding-block:clamp(28px,4.5dvh,56px) 24px}
  .home-page .footer-top{padding-bottom:clamp(24px,3.5dvh,48px)}

  .home-page .iq .sec-head{margin-bottom:clamp(22px,3dvh,36px)}

  .home-page .sap-business-one{padding-block:clamp(24px,3.5dvh,44px)}
  .home-page .sap-inner{grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,56px);align-items:start}
  .home-page .sap-copy{top:calc(var(--nav-h,64px) + 18px);gap:14px}
  /* photo height follows the viewport so logo → lead → photo → sub → CTA always fits one screen */
  .home-page .sap-photo-copy{aspect-ratio:auto;height:clamp(120px,20dvh,260px)}
  .home-page .sap-bento{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .home-page .sap-bento .feat:last-of-type{grid-column:auto}
  .home-page .feat{padding:18px 18px 17px;gap:6px}
  .home-page .feat h3{gap:4px}
  .home-page .feat h3 i{font-size:clamp(2rem,5dvh,3rem)}
  /* 1.55, up from 1.42 — designer review: the tighter leading read as cramped */
  .home-page .feat p{line-height:1.55}

  /* ONE SCREEN, same recipe as the other landing sections: shared padding-block,
     type scale untouched, and the card area sized by the viewport instead of the
     photos. The section is a flex column exactly one view tall (100dvh minus the
     84px scroll-margin the anchor lands under); heading and CTA keep their natural
     height and the featured/2×2 layout takes what remains, so the featured card
     drops its aspect-ratio and both halves size from the row. The 560px floor only
     matters on very short windows. */
  .home-page .whatsnew{height:max(560px,calc(100dvh - 84px));min-height:0}
  .home-page .whatsnew>.wrap{height:100%;display:flex;flex-direction:column;min-height:0}
  .home-page .whatsnew .sec-head{flex:0 0 auto;margin-bottom:clamp(14px,2dvh,22px)}
  .home-page .news-layout{flex:1 1 auto;min-height:0;gap:14px}
  .home-page .news-grid{gap:14px;min-height:0}
  .home-page .news-feature{aspect-ratio:auto;height:100%;min-height:0}
  .home-page .news-grid .news-card{min-height:0}
  .home-page .news-card-body h3{-webkit-line-clamp:2;line-clamp:2}
  .home-page .news-feature .news-card-body h3{-webkit-line-clamp:4;line-clamp:4}
  .home-page .news-cta{flex:0 0 auto;margin-top:clamp(14px,2dvh,24px)}

  .home-page .serv-stack{margin-top:clamp(22px,3dvh,38px);gap:22px}
  .home-page .serv{min-height:min(400px,calc(100dvh - 130px));max-height:calc(100dvh - 96px)}
  .home-page .serv-body{padding:clamp(26px,4dvh,44px)}
  .home-page .serv-cta{margin-top:clamp(28px,4dvh,48px)}

  .home-page .hear-from-our-customer .sec-head{margin-bottom:clamp(24px,3dvh,38px)}
  .home-page .story{min-height:min(300px,calc(100dvh - 180px));padding:24px 23px}
  .home-page .cta-panel{padding-block:clamp(46px,8dvh,76px)}
  .home-page .contact-panel{padding:clamp(22px,3.5dvh,36px)}
  .home-page .contact-form-side h2{margin-bottom:12px}
  .home-page .get-in-touch>p{margin-bottom:14px}
  .home-page .loc-card{padding:16px 17px 18px;gap:9px}

  /* Product listing: one complete product row per viewport. */
  .products-page{--products-nav-h:var(--nav-h,88px);--listing-head-h:clamp(166px,24dvh,180px)}
  /* The top bar measures 44px here, not the 36px this assumed — that alone put
     the page 8px past the fold. The nav is subtracted too now that the hero no
     longer slides underneath it. */
  .products-page .hero{min-height:calc(100dvh - var(--hf-h,44px) - var(--products-nav-h));align-items:center}
  .products-page .hero::after{background:linear-gradient(180deg,transparent 0%,transparent 88%,rgba(255,255,255,.98) 100%),linear-gradient(90deg,rgba(15,14,15,.94) 0%,rgba(15,14,15,.76) 48%,rgba(15,14,15,.26) 78%,rgba(15,14,15,.42) 100%)}
  .products-page .hero .wrap{padding-block:clamp(76px,12dvh,112px) clamp(84px,13dvh,120px)}
  .products-page .hero-actions{opacity:1;transform:none;transition:none}

  .products-page .sap-feature{min-height:calc(100dvh - var(--products-nav-h));display:grid;align-items:center;padding-block:clamp(28px,4.5dvh,52px);background:linear-gradient(180deg,var(--surface) 0%,var(--warm) 50%,var(--surface) 100%)}
  .products-page .sap-panel{grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);gap:clamp(36px,5vw,76px);align-items:center;min-height:0;max-height:none;border:0;border-radius:0;overflow:visible;background:transparent}
  .products-page .sap-media{display:grid;align-self:stretch;align-items:end;min-height:0;background:transparent}
  .products-page .sap-media::after{display:none}
  .products-page .sap-media>img{height:auto;max-height:min(520px,70dvh);object-fit:contain;object-position:center bottom;filter:drop-shadow(0 22px 30px rgba(var(--rgb-ink),.14))}
  .products-page .sap-copy{padding:clamp(18px,3dvh,32px) 0}
  .products-page .sap-logo{margin-bottom:18px}
  .products-page .sap-copy h2{margin-bottom:12px}
  .products-page .sap-copy p{margin-top:8px;line-height:1.52}

  .products-page .products-listing{padding-block:0;background:linear-gradient(180deg,var(--surface) 0%,var(--muted) 5%,var(--muted) 95%,var(--surface) 100%)}
  .products-page .products-listing-head{min-height:var(--listing-head-h);display:grid;align-items:center;margin:0;padding-block:24px 28px}
  .products-page .products-listing-head h2{max-width:26ch;font-size:clamp(2.25rem,6.4dvh,3.15rem)}
  .products-page .product-list{gap:0}
  .products-page .product-row{position:relative;grid-template-columns:minmax(0,.98fr) minmax(420px,1.02fr);gap:clamp(36px,5vw,76px);align-items:stretch;min-height:calc(100dvh - var(--products-nav-h));max-height:none;border:0;border-radius:0;overflow:visible;background:transparent}
  .products-page .product-row:first-child{min-height:calc(100dvh - var(--products-nav-h) - var(--listing-head-h))}
  .products-page .product-row:nth-child(odd){background:linear-gradient(100deg,rgba(var(--rgb-white),.72),rgba(var(--rgb-brand),.045) 54%,rgba(var(--rgb-white),.22))}
  .products-page .product-row:nth-child(even){background:linear-gradient(260deg,rgba(var(--rgb-white),.72),rgba(var(--rgb-brand),.045) 54%,rgba(var(--rgb-white),.22))}
  .products-page .product-media{display:grid;align-self:stretch;align-items:end;min-height:0;padding:clamp(18px,3dvh,32px) clamp(8px,2vw,28px) 0;overflow:visible;background:transparent}
  .products-page .product-media::before{display:none}
  /* Flat 16:9 screenshots: centred, not bled off the column at 112% like the
     transparent monitor renders this rule was written for. Borderless — soft
     shadow only, no outline and no panel behind it. */
  .products-page .product-media img{align-self:center;justify-self:center;
    width:auto;max-width:100%;height:auto;max-height:min(520px,62dvh);object-fit:contain;object-position:center;
    border-radius:12px;border:0;background:none;
    box-shadow:0 26px 56px -24px rgba(var(--rgb-ink),.30);filter:none}
  .products-page .product-media{align-items:center}
  .products-page .product-row:first-child .product-media{padding-top:0}
  .products-page .product-row:first-child .product-media img{max-height:calc(100dvh - var(--products-nav-h) - var(--listing-head-h))}
  .products-page .product-row:first-child .product-copy{padding-block:16px}
  .products-page .product-copy{align-self:center;padding:clamp(24px,4dvh,42px) clamp(12px,2vw,30px)}
  .products-page .product-logo{margin-bottom:16px}
  .products-page .product-copy h2{margin-bottom:8px}
  .products-page .product-copy p{margin-top:8px;line-height:1.52}
  .products-page .text-link{margin-top:18px}
  .products-page .cta-section{min-height:calc(100dvh - var(--products-nav-h));display:grid;align-items:center;padding-block:clamp(28px,4.5dvh,52px)}

  /* Product detail: wide copy columns and height-aware media prevent wrapping
     from turning one thought into multiple screens. */
  .product-detail-page .detail-hero{min-height:calc(100dvh - var(--hf-h,44px) - var(--nav-h,88px))}
  .product-detail-page main>section:not(.detail-hero){min-height:calc(100dvh - var(--nav-h,88px));display:grid;align-items:center}
  .product-detail-page .breadcrumbs{padding-top:12px}
  .product-detail-page .hero-grid{grid-template-columns:1.08fr .92fr;gap:clamp(28px,4vw,58px);min-height:0;padding-block:18px 24px}
  .product-detail-page .hero-logo{margin-bottom:16px}
  .product-detail-page .hero-copy h1{max-width:16ch;font-size:clamp(2.75rem,1.9rem + 2.25vw,4.25rem)}
  .product-detail-page .hero-copy p{margin-top:14px;line-height:1.6}
  .product-detail-page .hero-actions{margin-top:16px}
  .product-detail-page .hero-media{min-height:min(400px,56dvh)}
  .product-detail-page .hero-media img{max-height:min(460px,64dvh)}
  .product-detail-page .overview,
  .product-detail-page .features,
  .product-detail-page .showcase,
  .product-detail-page .faq,
  .product-detail-page .cta-section{padding-block:clamp(28px,4.5dvh,52px)}
  .product-detail-page .overview-grid{gap:clamp(34px,5vw,72px)}
  .product-detail-page .overview-media{min-height:min(400px,58dvh);padding:clamp(18px,3dvh,32px)}
  .product-detail-page .overview-media img{max-height:min(440px,58dvh)}
  .product-detail-page .overview-copy p{margin-top:12px;line-height:1.6}
  .product-detail-page .portal-features{padding-block:28px}
  .product-detail-page .portal-features-layout{grid-template-columns:minmax(430px,.88fr) minmax(0,1.12fr);gap:clamp(38px,4.5vw,68px)}
  .product-detail-page .portal-features .showcase-frame img{max-height:calc(100dvh - 130px)}
  .product-detail-page .faq-grid{gap:clamp(34px,5vw,72px)}
  .product-detail-page .faq-list summary{padding:16px 0}
  .product-detail-page .faq-list p{padding-bottom:18px;line-height:1.6}
}

@media(min-width:981px) and (max-height:680px){
  .product-detail-page .detail-hero{min-height:calc(100dvh - var(--hf-h,44px) - var(--nav-h,88px))}
  .product-detail-page .breadcrumbs{padding-top:8px;font-size:.75rem}
  .product-detail-page .hero-grid{padding-block:12px 18px;gap:28px}
  .product-detail-page .hero-logo{max-height:48px;margin-bottom:12px}
  .product-detail-page .hero-copy h1{font-size:clamp(2.35rem,7.2dvh,3rem)}
  .product-detail-page .hero-copy p{margin-top:12px;font-size:1rem;line-height:1.45}
  .product-detail-page .hero-actions{margin-top:14px}
  .product-detail-page .hero-actions .btn{min-height:46px;padding:12px 20px}
  .product-detail-page .hero-media{min-height:min(320px,48dvh)}
  .product-detail-page .hero-media img{max-height:52dvh}
  .product-detail-page .portal-features{padding-block:24px}
  .product-detail-page .portal-features-copy h2{font-size:clamp(2.2rem,6.2dvh,2.8rem);margin-top:8px}
  .product-detail-page .portal-features-copy>p{margin-top:10px;line-height:1.45}
  .product-detail-page .portal-features .feature-grid{margin-top:18px}
  .product-detail-page .portal-features .feature-group{padding:10px 0}
  .product-detail-page .portal-features .showcase-frame{padding:0}
  .product-detail-page .portal-features .showcase-frame img{max-height:calc(100dvh - 92px)}
}


@media(max-width:980px){
  .products-page .sap-feature{padding-block:48px;background:linear-gradient(180deg,var(--surface),var(--warm),var(--surface))}
  /* ONE SCREEN PER PRODUCT — image, name and description together, the same
     rule the ≥981px composition already follows. Stacked rows were running
     654–1121px against an 844px viewport, so on half the products the
     description sat below the fold with only the monitor visible.
     align-content:center keeps short products (Barcode) optically centred
     rather than stranded at the top of a tall row. */
  /* Cards are sized to their CONTENT, not stretched to 100dvh. Forcing each
     product to fill a screen left 274px of dead space around a 510px block —
     129px above the image and 145px below the button — because a 16:9 shot at
     column width simply isn't as tall as a phone. Products still fit within one
     screen comfortably; they just no longer pad themselves out to fill it. */
  .products-page .sap-panel,
  .products-page .product-row{gap:0;border:0;border-radius:0;overflow:visible;background:transparent;
    min-height:0;align-content:start;padding-block:clamp(30px,5dvh,56px)}
  .products-page .sap-media,
  .products-page .product-media{min-height:0;padding:0;background:transparent;overflow:visible}
  .products-page .sap-media::after,
  .products-page .product-media::before{display:none}
  /* The image is the flexible part: it gives up height first so the words keep
     theirs. A fixed 500px cap is what pushed the copy off screen. */
  .products-page .sap-media>img,
  .products-page .product-media img{width:100%;height:auto;max-height:clamp(140px,27dvh,320px);object-fit:contain;object-position:center bottom;filter:drop-shadow(0 20px 26px rgba(var(--rgb-ink),.13))}
  /* Product shots are now flat 16:9 UI screenshots, not transparent monitor
     mockups, so the bottom-anchored cut-out above doesn't suit them — they are
     centred with the drop-shadow filter off (on a rectangular opaque image it
     just smears the edge). NO border and NO background panel: borderless
     imagery is the standing rule on this page. A soft shadow only, to lift the
     screenshot off the row's tinted background. .sap-media keeps the cut-out;
     its artwork is still a transparent monitor render. */
  /* ⚠ width:auto + max-width:100% is the fix for LETTERBOXING. With width:100%
     and a max-height cap, the BOX keeps full width while the picture shrinks to
     fit the height — object-fit:contain then centres it inside, leaving up to
     100px of dead space either side and making the shot look small and adrift.
     Sizing by max-width AND max-height instead keeps the box on the image's own
     16:9 ratio, so there is never empty space inside it. */
  /* FULL COLUMN WIDTH. Height follows the 16:9 source, so the box can never
     contain empty space. Where vertical room is tight, the image is scaled down
     by MAX-WIDTH (below), never by max-height — a height cap on a full-width
     element is what caused the letterboxing. */
  .products-page .product-media img{
    width:100%;max-width:100%;height:auto;max-height:none;margin-inline:auto;display:block;
    object-position:center;border-radius:10px;filter:none;border:0;background:none;
    box-shadow:0 16px 34px -18px rgba(var(--rgb-ink),.28)}
  .products-page .sap-copy,
  .products-page .product-copy{padding:clamp(16px,2.6dvh,26px) 0 0}
  /* The product logo is redundant in the stacked layout — it renders the product
     name as artwork immediately above the <h3> that says the same words. Hidden
     rather than removed from the markup: it still carries the alt text, and the
     ≥981px composition (where it sits in its own column) is untouched. */
  .products-page .product-logo{display:none}
  .products-page .products-listing{padding-block:0;background:linear-gradient(180deg,var(--surface),var(--muted) 4%,var(--muted) 96%,var(--surface))}
  .products-page .products-listing-head{height:auto;margin:0;padding-block:48px 24px}
  .products-page .product-list{gap:0}
  .products-page .product-row{padding-block:20px;background:linear-gradient(180deg,rgba(var(--rgb-white),.7),rgba(var(--rgb-brand),.04),rgba(var(--rgb-white),.2))}
  .products-page .cta-section{padding-block:48px}
  .product-detail-page .portal-features-layout{grid-template-columns:1fr}
  .product-detail-page .portal-features .showcase-frame{order:-1}
  .product-detail-page .portal-features .showcase-frame img{max-height:520px}
}

@media(max-width:620px){
  /* 42px was the old single-line top bar. It stacks on mobile now and measures
     ~70px, so the hero was running 28px past the fold on every phone. */
  .products-page .hero{min-height:calc(100dvh - 70px - 64px)}
  /* 96/86 was 182px of padding inside a hero that only has ~500px to work with
     on a 640px-tall phone — it was the content, not the min-height, pushing the
     hero past the fold at 360x640. Scales with viewport height now. */
  .products-page .hero .wrap{padding-block:clamp(40px,7dvh,96px) clamp(34px,6dvh,86px)}
  .products-page .sap-feature{padding-block:38px}
  /* These four were the real blockers for one-screen products: a 250px media
     floor, a 380px image cap, 70px of copy padding and 32px of row padding —
     all fixed pixels, on the screens with the least room. Every one is now
     viewport-relative so the row can actually reach 100dvh. */
  .products-page .sap-media,
  .products-page .product-media{min-height:0;padding-top:0}
  .products-page .sap-media>img{max-height:clamp(130px,25dvh,300px)}
  /* Product shots stay full width here; only .sap-media (a transparent monitor
     render, not a 16:9 screenshot) keeps a height cap. */
  .products-page .product-media img{max-height:none}
  .products-page .sap-copy,
  .products-page .product-copy{padding:clamp(14px,2.4dvh,22px) 0 0}
  /* Lede sizing is for reading a paragraph on a wide column; here it has to
     share a phone screen with the product shot. 16px/1.5 keeps it above the
     legibility floor while fitting the longest description (IQ Tax). */
  .products-page .product-copy p,
  .products-page .sap-copy p{font-size:1rem;line-height:1.5}
  .products-page .products-listing-head{padding-block:42px 20px}
  .products-page .product-row{padding-block:clamp(26px,4.5dvh,44px)}
  /* ONE SCREEN PER PRODUCT · detail-page heroes. These must live HERE, not in
     detail.css: the global `.product-detail-page.product-template-page
     .hero-media img{max-height:min(520px,70dvh)}` is (0,3,0) and beats any
     single-class rule in detail.css, which also loads FIRST. Matching that
     specificity here is the only way a mobile cap takes effect. */
  .product-detail-page.product-template-page .hero-media{min-height:0}
  /* Product shot LEADS on mobile: order:-1 moves it above the copy so the
     product is seen immediately and in full, with the CTAs still above the
     fold. Sized by max-width AND max-height together so the box always keeps
     the image's own ratio — a height cap alone would letterbox it. */
  /* ONE SCREEN PER PRODUCT HERO. topbar (~70) + nav (64) = 134px of chrome, so
     the hero fills exactly the rest of the viewport and the whole thing —
     shot, name, description and CTAs — is one screen. */
  .product-detail-page.product-template-page .detail-hero{min-height:calc(100dvh - 134px);display:flex;flex-direction:column;justify-content:center}
  .product-detail-page.product-template-page .detail-hero>.wrap{width:100%}
  .product-detail-page.product-template-page .hero-media{order:-1}
  /* The hero shots are flat 16:9 screenshots now, so the decorative panel
     behind them would read as a frame — hidden, borderless like the listing.
     Soft shadow only, so a light screenshot still lifts off the background. */
  .product-detail-page.product-template-page .hero-media::before{display:none}
  .product-detail-page.product-template-page .hero-media img{width:100%;max-width:100%;height:auto;max-height:none;margin-inline:auto;display:block;border-radius:10px;border:0;box-shadow:none;filter:drop-shadow(0 14px 22px rgba(var(--rgb-ink),.16))}
  /* Hero sized to its content with an even rhythm, instead of a forced
     min-height that stranded the shot 84-95px below the buttons. */
  .product-detail-page.product-template-page .hero-grid{min-height:0;align-content:start;gap:clamp(16px,2.6dvh,28px);padding-block:clamp(8px,1.6dvh,16px) clamp(22px,3.6dvh,40px)}
  .product-detail-page.product-template-page .hero-media{min-height:0;place-items:stretch}
  /* .hero-copy carries a 7dvh (59px) bottom padding for the two-column desktop
     composition. Stacked, it lands between the buttons and the product shot and
     reads as a hole — the grid's own row gap is the correct spacing there. */
  .product-detail-page.product-template-page .hero-copy{padding-bottom:0}
  .product-detail-page.product-template-page .hero-copy p{font-size:1rem;line-height:1.5;margin-top:10px}
  .product-detail-page.product-template-page .hero-logo{max-height:42px;margin-bottom:10px}
  /* The headline was the real cost: 60px type inside a 14ch column wrapped to
     SEVEN lines — 412px, over half the hero on its own. Sized for the phone and
     allowed the full column width, it lands in three. */
  .product-detail-page.product-template-page .hero-copy h1{font-size:clamp(1.55rem,5.9vw,2.15rem);line-height:1.1;max-width:none}
  /* Two stacked full-width buttons cost 116px; sharing a row costs ~56px. */
  .product-detail-page.product-template-page .hero-actions{margin-top:12px;gap:10px;flex-wrap:wrap}
  .product-detail-page.product-template-page .hero-actions .btn{flex:1 1 auto;justify-content:center;white-space:nowrap;padding-inline:18px}
  .product-detail-page .portal-features-layout{gap:28px}
  .product-detail-page .portal-features .showcase-frame{padding:0;border-radius:0}
  .product-detail-page .portal-features .feature-group{grid-template-columns:1fr;gap:10px;padding:18px 0}
  .product-detail-page .portal-features .feature-group ul{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .product-template-page .product-hero-bg{transform:scale(1.08)}
}

@media(max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}

@media(max-width:600px){
  /* Top bar · was 11px copy beside a 10px link squeezed into a 190px column —
     the smallest type on the site, on the smallest screens. Now it stacks and
     centres, which buys the width to read at 13px/12px with a 40px tap row. */
  .header-form,.topbar{min-height:42px}
  .header-form .wrap,.topbar .wrap{min-height:42px;padding-block:6px;
    flex-wrap:wrap;justify-content:center;gap:0 16px;text-align:center}
  .header-form p,.topbar p{max-width:none;font-size:.8125rem;line-height:1.35}
  .header-form a,.topbar a{font-size:.75rem;min-height:40px}
  /* question + link on ONE line: no wrapping, type scales with the viewport so both fit
     from ~400px up; below that the question truncates with an ellipsis rather than
     dropping the link to a second row */
  .header-form .wrap{padding-inline:14px}
  .header-form__cta{flex:1 0 100%;flex-wrap:nowrap;justify-content:space-between;gap:0 8px}
  .header-form__cta p{flex:1 1 auto;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(.625rem,2.9vw,.8125rem)}
  .header-form__cta a{flex:none;white-space:nowrap;font-size:clamp(.625rem,2.6vw,.75rem);letter-spacing:.02em}
  .topbar-search{margin:2px auto 4px;flex:1 1 100%;max-width:320px;height:36px}
  /* Type floor + touch targets for every NON-home page. The homepage got these
     in its own stylesheet; products and the product-detail template were still
     rendering 12px footer labels and 17px-tall link rows. */
  :root{--fs-xs:.8125rem}
  .footer ul{gap:4px}
  .footer ul a{min-height:40px;display:inline-flex;align-items:center}
  .sub-page .text-link{min-height:44px;display:inline-flex;align-items:center}
  .footer-top{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
  .footer-phone{width:100%;justify-content:flex-start;font-size:1rem}
  .cta-panel{padding:44px 22px}
  .cta-panel .btn{width:100%;min-width:0}
}

/* Landscape phones · wide but very short, so nothing above targets them: the
   width queries assume portrait and the ≥981px composition assumes a tall
   screen. Declared last so it wins wherever it applies. */
/* Second paragraph · four products (Portal, Tax, REM, Ai) carry one. It is now
   hidden only on genuinely SHORT screens. The old flat 500px-capped monitor
   renders left no room for it at any phone size; the new 16:9 shots render
   ~190px at 390px wide, so a tall phone has room for the full copy again.
   VIEW PRODUCT still opens the detail page with everything. */
@media(max-width:980px) and (max-height:880px){
  .products-page .product-copy p:nth-of-type(2),
  .products-page .sap-copy p:nth-of-type(2){display:none}
}
/* Width matters as much as height: a narrower column makes the same paragraph
   taller. 390×844 overflowed by 26px on height alone, so anything under 400px
   wide hides it regardless of how tall the screen is. */
@media(max-width:400px){
  .products-page .product-copy p:nth-of-type(2),
  .products-page .sap-copy p:nth-of-type(2){display:none}
}

/* Short phones · product DETAIL heroes. 390px up already fits; 360×640 needs
   another ~120px, taken from the shot, the headline and the spacing. */
@media(max-width:620px) and (max-height:700px){
  .product-detail-page.product-template-page .hero-media img{max-height:none}
  .product-detail-page.product-template-page .hero-copy h1{font-size:clamp(1.3rem,4.8vw,1.7rem);line-height:1.1}
  .product-detail-page.product-template-page .hero-logo{max-height:32px;margin-bottom:6px}
  .product-detail-page.product-template-page .hero-copy p{margin-top:8px;line-height:1.45}
  .product-detail-page.product-template-page .hero-actions{margin-top:10px}
  .product-detail-page .breadcrumbs{padding-top:8px;font-size:.75rem}
  /* 134px chrome + ~24px breadcrumbs = 158; 164 leaves a little slack. */
  .product-detail-page .hero-grid{min-height:0;padding-block:4px clamp(16px,2.6dvh,28px);gap:clamp(12px,2dvh,20px)}
}

/* Short phones (360×640 and similar). Everything from 390px up already fits;
   here the longest descriptions still need ~90px, so the product SHOT and the
   spacing give it up rather than the words. Declared after the ≤620 block so it
   wins. */
@media(max-width:620px) and (max-height:700px){
  /* Full width here too. The rows are min-height driven and their content sits
     well short of that height, so the extra ~65px the full-width shot costs is
     absorbed by slack that was showing as empty space above and below. */
  .products-page .product-media img{max-height:none;max-width:100%}
  .products-page .product-media{padding-top:0}
  .products-page .product-copy{padding:clamp(12px,2dvh,18px) 0 0}
  .products-page .product-logo{height:26px;margin-bottom:8px}
  .products-page .product-copy h2{margin-bottom:4px}
  .products-page .product-copy p{line-height:1.45}
  .products-page .product-row{padding-block:clamp(14px,2.4dvh,26px)}
  .products-page .text-link{min-height:38px}
}

@media(max-height:560px) and (min-width:621px){
  .products-page .hero{min-height:calc(100dvh - 44px - 64px)}
  .products-page .hero .wrap{padding-block:clamp(16px,4dvh,40px)}
  .products-page .sap-feature{min-height:0;padding-block:clamp(20px,5dvh,40px)}
  /* A 375px-tall screen leaves ~266px for the hero after the chrome, and this
     paragraph alone is taller than that — it pushed INQUIRE NOW below the fold.
     Hidden only here, same call the landing hero makes on short viewports; the
     words stay in the DOM and show at every normal size. */
  .products-page .hero .wrap>p{display:none}
}
/* Touch targets keyed on POINTER, not width. The ≤600px block misses landscape
   phones entirely — an 812x375 phone is a touch device with 17px link rows. */
@media(hover:none){
  .footer ul{gap:4px}
  .footer ul a{min-height:40px;display:inline-flex;align-items:center}
  .sub-page .text-link{min-height:44px;display:inline-flex;align-items:center}
}

@media(prefers-reduced-motion:reduce){
  .sub-page [data-reveal],.home-page [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}

/* ═══ 5 · WORDPRESS LAYER + MODERN-UI REFINEMENTS ═══ */
/* Logos are real <img> elements now (SEO-friendly alt text, swappable from WP) */
.nav .logo-link::before,.footer .logo-link::before{display:none}
.logo-nav{display:block;width:158px;height:35px;object-fit:contain;object-position:left center}
.logo-footer{display:block;width:186px;height:70px;object-fit:contain;object-position:left center}
/* one header on every page */
.sub-page .nav .wrap{min-height:88px}
/* accessibility */
.skip-link{position:absolute;left:-999px;top:8px;z-index:999;padding:10px 16px;border-radius:8px;background:var(--orange);color:#fff;font-weight:700}
.skip-link:focus{left:8px}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.admin-bar .nav{top:32px}
@media(max-width:782px){.admin-bar .nav{top:46px}}
/* eyebrow for headings that need a sub-page margin */
.sub-page .eyebrow{display:inline-flex}
/* services · optional photo per step (from assets/services) */
.serv-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;border:1px solid var(--line);margin-bottom:6px;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.serv-step:hover .serv-img{transform:translateY(-3px);box-shadow:0 22px 40px -24px rgba(var(--rgb-ink),.35)}
@media(max-width:900px){.serv-img{grid-column:1 / -1;grid-row:1;max-width:420px;margin-bottom:10px}}
/* contact form feedback */
.form-msg{margin-top:12px;padding:12px 14px;border-radius:10px;font-size:var(--fs-sm);display:none}
.form-msg.show{display:block}
.form-msg.ok{background:rgba(46,160,67,.1);border:1px solid rgba(46,160,67,.35);color:#1f6f31}
.form-msg.err{background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.3);color:#9f1d1d}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#dc2626}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.btn[disabled]{opacity:.7;pointer-events:none}
/* ── Blog / generic pages ── */
.page-hero{position:relative;padding-block:clamp(56px,7vw,96px) clamp(40px,5vw,64px);background:linear-gradient(180deg,var(--warm),var(--surface))}
.page-hero .eyebrow{margin-bottom:14px}
.page-hero h1{font-size:var(--fs-h1);letter-spacing:-.04em;line-height:var(--lh-tight);max-width:18ch}
.page-hero p{margin-top:16px;max-width:60ch;color:var(--soft);font-size:var(--fs-lede);line-height:var(--lh-relaxed)}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-block:clamp(32px,4vw,56px) var(--sec)}
.post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card-grad);transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .45s}
.post-card:hover{transform:translateY(-5px);border-color:rgba(var(--rgb-brand),.45);box-shadow:0 30px 60px -30px rgba(var(--rgb-ink),.3)}
.post-card-media{aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.post-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.post-card:hover .post-card-media img{transform:scale(1.05)}
.post-card-body{display:flex;flex-direction:column;gap:12px;padding:22px 22px 24px}
/* .news-meta carries order:1 for the home news cards (meta above the title in a bottom-aligned
   column); inside a post card that pushed tag + date below the "Read more" link. Restore DOM order. */
.post-card-body .news-meta{order:0}
.post-card-body h2,.post-card-body h3{font-size:var(--fs-card);line-height:var(--lh-heading);letter-spacing:-.01em}
.post-card-body p{font-size:var(--fs-sm);color:var(--soft);line-height:var(--lh-body)}
.post-card .tlink{margin-top:auto;font-size:var(--fs-xs)}
@media(max-width:980px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr}}
.pagination{display:flex;justify-content:center;gap:6px;padding-bottom:var(--sec)}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:10px;font-weight:700;font-size:var(--fs-sm);color:var(--soft)}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.entry{padding-block:clamp(32px,4vw,56px) var(--sec)}
.entry-hero{padding-block:clamp(48px,6vw,80px) 0}
.entry-hero .news-meta{margin-bottom:16px}
.entry-hero h1{font-size:var(--fs-h1);letter-spacing:-.04em;line-height:var(--lh-tight);max-width:22ch}
.entry-media{margin-top:clamp(28px,4vw,44px);border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/8;background:var(--bg-2)}
.entry-media img{width:100%;height:100%;object-fit:cover}
.entry-content{max-width:76ch;font-size:var(--fs-lede);line-height:var(--lh-relaxed);color:var(--soft)}
.entry-content>*+*{margin-top:1.2em}
.entry-content h2,.entry-content h3,.entry-content h4{color:var(--text);margin-top:1.8em}
.entry-content h2{font-size:var(--fs-subheading)}.entry-content h3{font-size:var(--fs-card)}
.entry-content a{color:var(--orange-deep);text-decoration:underline;text-underline-offset:3px}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content img{border-radius:12px}
.entry-content blockquote{border-left:3px solid var(--orange);padding-left:18px;font-style:italic}
.entry-content .wp-block-image figcaption{font-size:var(--fs-xs);color:var(--faint);text-align:center}
.entry-content .alignwide{max-width:none}
.entry-foot{margin-top:clamp(32px,4vw,48px);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:24px}
.not-found{text-align:center;padding-block:clamp(64px,10vw,140px)}
.not-found h1{font-size:clamp(3rem,8vw,7rem);letter-spacing:-.05em;line-height:1;background:linear-gradient(135deg,var(--orange) 15%,var(--orange-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.not-found p{color:var(--soft);margin:16px auto 28px;max-width:46ch}
.search-form{display:flex;gap:10px;max-width:520px;margin-inline:auto}
.search-form input{flex:1;border:1px solid var(--line);border-radius:10px;padding:12px 16px;font:inherit;background:var(--bg-2)}
.search-form input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(var(--rgb-brand),.13)}
/* news feature fallback when there is no image */
/* ensure wide media never scrolls the page */
.wrap>table,.entry-content table{display:block;overflow-x:auto}

/* ── Lazy-load plugin compatibility (Smush, a3, etc.) ──
   Those plugins add .lazyload{opacity:0} / .lazyloaded{opacity:1} to every image and
   background element they process, which would override the theme's own state layers on the
   product cards (monitor artwork + black logo are hover-only). These rules win by specificity. */
.iq-card .iq-hover-art.lazyload,.iq-card .iq-hover-art.lazyloading{opacity:0}
.iq-card .iq-hover-art.lazyloaded{opacity:1;transform:scale(1)}
.iq-card:not(.all):hover .iq-hover-art.lazyloaded{opacity:0;transform:scale(1.06)}
.iq-card .iq-logo .lg-l.lazyload,.iq-card .iq-logo .lg-l.lazyloading{opacity:0}
.iq-card:not(.all) .iq-logo .lg-l.lazyloaded,.iq-card.feature .iq-logo .lg-l.lazyloaded{opacity:1}
.iq-card:not(.all):hover .iq-logo .lg-l.lazyloaded{opacity:0}
.iq-card.feature .iq-logo .lg-d.lazyloaded,.iq-card:not(.all) .iq-logo .lg-d.lazyloaded{opacity:0}
.iq-card:not(.all):hover .iq-logo .lg-d.lazyloaded{opacity:1}
/* a plugin that never flips the dark logo to .lazyloaded (it is transparent at rest, so some
   loaders skip it) must not keep it hidden once the card is hovered */
.iq-card:not(.all):hover .iq-logo .lg-d.lazyload,.iq-card:not(.all):hover .iq-logo .lg-d.lazyloading{opacity:1}
.iq-card:not(.all) .iq-art.lazyload,.iq-card:not(.all) .iq-art.lazyloading,.iq-card:not(.all) .iq-art.lazyloaded{opacity:0}
.iq-card:not(.all):hover .iq-art.lazyloaded{opacity:1;transform:none}
.iq-card.feature .iq-art.lazyloaded{opacity:1}
.banner-strip-track img.lazyload,.trust-track img.lazyload{opacity:1}

/* ── SEO landing pages (page-landing.php) · dark hero like dynamiqes.com ── */
.landing-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#1f1e1f 0%,var(--color-ink) 55%,#3a3639 100%);color:#fff;--text:#fff;--soft:rgba(255,255,255,.8);--line:rgba(255,255,255,.3)}
.landing-hero::before{content:"";position:absolute;width:640px;height:640px;right:-200px;top:-260px;border-radius:50%;background:rgba(var(--rgb-brand),.16);filter:blur(10px);pointer-events:none}
.landing-hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(56px,7vw,110px)}
.landing-hero h1{font-size:clamp(2.1rem,1.4rem+2.6vw,3.9rem);line-height:1.08;letter-spacing:-.035em;color:var(--orange);max-width:16ch}
.landing-intro{margin-top:22px;max-width:56ch;display:grid;gap:12px}
.landing-intro p{font-size:var(--fs-lede);line-height:1.65;color:rgba(255,255,255,.86)}
.landing-hero .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.landing-hero .btn-ghost{border:1.5px solid rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.06)}
.landing-hero .btn-ghost:hover{border-color:var(--orange);background:rgba(var(--rgb-brand),.14)}
.landing-hero-media{border-radius:18px;overflow:hidden;border:4px solid #fff;box-shadow:0 40px 90px -40px rgba(0,0,0,.7);aspect-ratio:4/3;background:#fff}
.landing-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.landing-body{padding-block:clamp(48px,6vw,88px)}
.landing-content{max-width:80ch;margin-inline:auto}
.landing-content h2{font-size:var(--fs-h2);letter-spacing:-.03em;line-height:var(--lh-tight);margin-top:2em}
.landing-content h2:first-child{margin-top:0}
.landing-content h3{font-size:var(--fs-card);margin-top:1.6em}
.landing-content h4{font-size:var(--fs-body);margin-top:1.4em}
.landing-content figure{margin:2em 0}
.landing-content img{border-radius:14px;border:1px solid var(--line);width:100%;max-height:520px;object-fit:cover}
.landing-content ul li{position:relative;padding-left:1.4em;list-style:none;margin:.5em 0}
.landing-content ul li::before{content:"✓";position:absolute;left:0;color:var(--orange);font-weight:900}
.landing-content .faq-list{margin-top:1.2em;border-top:1px solid var(--line)}
.landing-content .faq-list details{border-bottom:1px solid var(--line)}
.landing-content .faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;font-weight:700;color:var(--text);cursor:pointer;list-style:none;font-size:var(--fs-lede)}
.landing-content .faq-list summary::-webkit-details-marker{display:none}
.landing-content .faq-list summary::after{content:"+";display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;color:var(--orange);font-size:20px;flex:0 0 auto}
.landing-content .faq-list details[open] summary::after{content:"−"}
.landing-content .faq-list p{padding:0 52px 20px 0;margin:0}
@media(max-width:900px){.landing-hero-grid{grid-template-columns:1fr;padding-block:48px 40px}.landing-hero-media{order:-1;aspect-ratio:16/10}.landing-hero h1{max-width:none}}

/* ============================================================
   Chatbot widget · MOCKUP (template-parts/chatbot.php)
   Pure CSS: the launcher/close labels flip #dqChatToggle.
   Styled on the site system: Roboto, ink→gray gradient + orange
   radial glow (cta-panel), 14px card radius / 10px control radius,
   hairline --line borders, warm --bg-2 surfaces, --frost glass.
   ============================================================ */
.dq-chat{position:fixed;right:28px;bottom:28px;z-index:1200;font-family:var(--font-sans);font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text);--dq-ease:cubic-bezier(.16,1,.3,1)}
.dq-chat__toggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0}

/* launcher · brand tile, same language as the IQ logo tiles + .btn-orange glow */
.dq-chat__launcher{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:var(--orange);color:var(--color-on-accent);cursor:pointer;box-shadow:0 10px 30px -8px var(--orange-glow),0 2px 6px rgba(var(--rgb-ink),.12);transition:background .25s,transform .3s var(--dq-ease),box-shadow .35s}
.dq-chat__launcher:hover{background:var(--orange-2);transform:translateY(-2px);box-shadow:0 18px 46px -8px var(--orange-glow),0 2px 6px rgba(var(--rgb-ink),.12)}
.dq-chat__launcher svg{grid-area:1/1;transition:opacity .2s,transform .35s var(--dq-ease)}
.dq-chat__ico-close{opacity:0;transform:rotate(-90deg) scale(.6)}
.dq-chat__badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--color-ink);color:#fff;font-size:var(--fs-2xs);font-weight:700;line-height:20px;text-align:center;border:2px solid var(--color-surface)}
/* "Chat with us" hint · glass pill that slides in beside the tile (desktop, closed state) */
.dq-chat__hint{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;padding:9px 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--panel-glass);color:var(--text);font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;box-shadow:var(--shadow);backdrop-filter:var(--frost);-webkit-backdrop-filter:var(--frost);opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--dq-ease)}
.dq-chat__launcher:hover .dq-chat__hint{opacity:1;transform:translateY(-50%)}
.dq-chat__toggle:checked~.dq-chat__launcher{background:var(--color-ink);box-shadow:0 10px 30px -10px rgba(var(--rgb-ink),.5)}
.dq-chat__toggle:checked~.dq-chat__launcher:hover{background:var(--color-gray)}
.dq-chat__toggle:checked~.dq-chat__launcher .dq-chat__ico-open{opacity:0;transform:rotate(90deg) scale(.6)}
.dq-chat__toggle:checked~.dq-chat__launcher .dq-chat__ico-close{opacity:1;transform:none}
.dq-chat__toggle:checked~.dq-chat__launcher .dq-chat__badge,.dq-chat__toggle:checked~.dq-chat__launcher .dq-chat__hint{display:none}

/* panel · card surface: hairline border, 16px radius (cta-panel), --shadow-lg */
.dq-chat__panel{position:absolute;right:0;bottom:72px;width:384px;max-width:calc(100vw - 32px);max-height:min(640px,calc(100vh - 128px));display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg),0 6px 18px rgba(var(--rgb-ink),.08);opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);transform-origin:bottom right;transition:opacity .22s,transform .45s var(--dq-ease),visibility 0s .3s}
.dq-chat__toggle:checked~.dq-chat__panel{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .45s var(--dq-ease),visibility 0s}

/* header · the cta-panel treatment: ink→gray gradient with the orange radial glow */
.dq-chat__head{position:relative;display:flex;align-items:center;gap:14px;padding:18px 16px 18px 18px;background:var(--grad-dark);color:var(--color-on-accent);border-bottom:1px solid rgba(var(--rgb-brand),.25)}
.dq-chat__head::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(320px 160px at 18% -30%,rgba(var(--rgb-brand),.38),transparent 65%)}
.dq-chat__head>*{position:relative}
.dq-chat__avatar{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--orange);box-shadow:0 10px 24px -10px var(--orange-glow)}
.dq-chat__avatar img{display:block;width:24px;height:24px}
.dq-chat__title{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dq-chat__eyebrow{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange-2)}
.dq-chat__title strong{font-size:var(--fs-body);font-weight:700;letter-spacing:-.01em;line-height:var(--lh-heading)}
.dq-chat__status{display:flex;align-items:center;gap:7px;margin-top:2px;font-size:var(--fs-xs);color:rgba(var(--rgb-white),.72)}
.dq-chat__status i{width:8px;height:8px;border-radius:50%;background:#3DD68C;box-shadow:0 0 0 3px rgba(61,214,140,.22)}
.dq-chat__close{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid rgba(var(--rgb-white),.14);background:rgba(var(--rgb-white),.06);color:rgba(var(--rgb-white),.85);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.dq-chat__close:hover{background:rgba(var(--rgb-white),.14);border-color:rgba(var(--rgb-white),.28);color:#fff}

/* conversation · warm --bg-2 surface, card-like bubbles */
.dq-chat__body{flex:1;overflow-y:auto;padding:18px 16px 8px;background:var(--bg-2);display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;scrollbar-color:rgba(var(--rgb-ink),.18) transparent}
.dq-chat__day{align-self:center;margin:0 0 4px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.dq-chat__msg{display:flex;align-items:flex-end;gap:10px;max-width:88%}
.dq-chat__msg.is-user{align-self:flex-end;flex-direction:row-reverse}
.dq-chat__msg:has(.dq-chat__chips){max-width:100%} /* quick-reply rows span the full width */
.dq-chat__msg:has(.dq-chat__chips) .dq-chat__bubble{flex:1}
.dq-chat__mini{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--orange)}
.dq-chat__mini img{display:block;width:15px;height:15px}
.dq-chat__bubble{position:relative;padding:12px 14px 9px;border-radius:14px;color:var(--text);background:var(--card-grad);border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(var(--rgb-ink),.04);font-size:var(--fs-sm);line-height:var(--lh-body)}
.dq-chat__msg.is-bot .dq-chat__bubble{border-bottom-left-radius:6px}
.dq-chat__msg.is-user .dq-chat__bubble{background:var(--orange);color:var(--color-on-accent);border-color:transparent;border-bottom-right-radius:6px;box-shadow:0 10px 30px -10px var(--orange-glow)}
.dq-chat__bubble time{display:block;margin-top:5px;font-size:var(--fs-2xs);letter-spacing:.02em;color:var(--faint);text-align:right}
.dq-chat__msg.is-user .dq-chat__bubble time{color:rgba(var(--rgb-white),.78)}
/* quick replies · option rows in the .btn-ghost language, trailing arrow like every site CTA */
.dq-chat__chips{display:grid;gap:8px;margin-top:12px}
.dq-chat__chips button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;font:inherit;font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;color:var(--text);background:var(--ghost-bg);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:10px 12px 10px 14px;cursor:pointer;transition:border-color .25s,background .25s,color .25s,transform .3s var(--dq-ease)}
.dq-chat__chips button::after{content:"→";font-weight:700;color:var(--orange);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.dq-chat__chips button:hover{border-color:var(--orange);background:rgba(var(--rgb-brand),.08);color:var(--orange-deep);transform:translateY(-2px)}
.dq-chat__chips button:hover::after{transform:translateX(4px)}
.dq-chat__msg.is-typing .dq-chat__bubble{display:flex;gap:5px;padding:13px 15px}
.dq-chat__msg.is-typing .dq-chat__bubble span{width:7px;height:7px;border-radius:50%;background:rgba(var(--rgb-brand),.7);animation:dqChatDot 1.2s infinite ease-in-out}
.dq-chat__msg.is-typing .dq-chat__bubble span:nth-child(2){animation-delay:.15s}
.dq-chat__msg.is-typing .dq-chat__bubble span:nth-child(3){animation-delay:.3s}
@keyframes dqChatDot{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-4px);opacity:1}}

/* composer · the contact-form .field + .btn-orange */
.dq-chat__composer{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:12px 14px 10px;background:var(--panel);border-top:1px solid var(--line)}
.dq-chat__composer input{min-width:0;height:44px;padding:11px 15px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);font:inherit;font-size:var(--fs-sm);color:var(--text);transition:border-color .2s,background .2s,box-shadow .2s}
.dq-chat__composer input::placeholder{color:var(--faint)}
.dq-chat__composer input:focus{outline:none;border-color:var(--orange);background:var(--panel);box-shadow:0 0 0 3px rgba(var(--rgb-brand),.13)}
.dq-chat__send{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:10px;background:var(--orange);color:var(--color-on-accent);box-shadow:0 10px 30px -10px rgba(var(--rgb-brand),.6);cursor:not-allowed;opacity:.6}
.dq-chat__note{grid-column:1/-1;margin:2px 0 0;text-align:center;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

@media(max-width:600px){
  .dq-chat{right:16px;bottom:16px}
  .dq-chat__launcher{width:54px;height:54px}
  .dq-chat__hint{display:none}
  .dq-chat__panel{position:fixed;right:0;bottom:0;left:0;width:auto;max-width:none;max-height:min(86vh,calc(100vh - 16px));border-radius:16px 16px 0 0;border-bottom:0;transform-origin:bottom center}
  /* the sheet covers the launcher's spot; the header X closes it */
  .dq-chat__toggle:checked~.dq-chat__launcher{opacity:0;visibility:hidden;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){
  .dq-chat__panel,.dq-chat__launcher,.dq-chat__launcher svg,.dq-chat__hint,.dq-chat__chips button{transition:none}
  .dq-chat__msg.is-typing .dq-chat__bubble span{animation:none}
}

/* ═══ 6 · SMALL-VIEWPORT AUDIT FIXES (2026-09-04) ═══
   From a sweep of 1366×768, 1280×720, 1024×768, 834×1112, 768×1024, 430×932,
   375×667, 360×640 and landscape phones (812×375, 667×375). Additive overrides,
   declared last so they win cascade ties; markup and headings untouched. */

/* 6a · Hero chrome math. These heroes subtracted fixed numbers (70+64, 134, 44+64)
   for the bars above them, but the nav is 88px and the top bar became three rows
   (~113px) on phones when the search field landed — so every hero ran 70–160px past
   the fold and pushed its CTA under it. main.js measures both bars into --hf-h and
   --nav-h on every page; use those. */
@media(max-width:620px){
  .products-page .hero{min-height:calc(100dvh - var(--hf-h,113px) - var(--nav-h,88px))}
  .product-detail-page.product-template-page .detail-hero{min-height:calc(100dvh - var(--hf-h,113px) - var(--nav-h,88px))}
}
@media(max-height:560px) and (min-width:621px){
  .products-page .hero{min-height:calc(100dvh - var(--hf-h,44px) - var(--nav-h,88px))}
}
/* short phones (375×667, 360×640): the listing hero's padding was the last ~30px */
@media(max-width:620px) and (max-height:700px){
  .products-page .hero .wrap{padding-block:clamp(24px,4dvh,40px) clamp(20px,3.5dvh,34px)}
  /* detail hero: the full-width 16:9 shot (~190px) is what keeps INQUIRE NOW under the
     fold; size it by max-width AND max-height together so the box keeps the image's ratio */
  .product-detail-page.product-template-page .hero-media img{width:auto;max-width:100%;height:auto;max-height:clamp(110px,17dvh,200px)}
  .product-detail-page.product-template-page .breadcrumbs{padding-top:8px}
  .product-detail-page.product-template-page .hero-grid{gap:12px}
  .product-detail-page.product-template-page .hero-copy p{font-size:.95rem;line-height:1.45}
}

/* 6b · Product detail, 621–980px (tablet portrait). The stacked hero kept the desktop
   10ch headline cap, so "Elevate Your SAP Business One Experience…" wrapped to seven
   lines (~410px) at 768px wide. */
@media(min-width:621px) and (max-width:980px){
  .product-detail-page.product-template-page .hero-copy h1{max-width:none;font-size:clamp(2.1rem,1.2rem + 3vw,3rem)}
  .product-detail-page.product-template-page .hero-copy p{max-width:62ch}
}
/* landscape phones (≤980 wide, ≤500 tall): stacked layout ran ~760px past a 375px-tall
   screen. Two columns again — copy left, shot right — everything sized to the height. */
@media(min-width:621px) and (max-width:980px) and (max-height:500px){
  .product-detail-page.product-template-page .detail-hero{min-height:calc(100dvh - var(--hf-h,44px) - var(--nav-h,88px))}
  .product-detail-page.product-template-page .breadcrumbs{padding-top:8px;font-size:.75rem}
  .product-detail-page.product-template-page .hero-grid{grid-template-columns:1.1fr .9fr;gap:24px;min-height:0;height:auto;padding:6px 0 14px;align-items:center}
  .product-detail-page.product-template-page .hero-logo{max-height:30px;margin-bottom:6px}
  .product-detail-page.product-template-page .hero-copy{padding-bottom:0}
  .product-detail-page.product-template-page .hero-copy h1{font-size:clamp(1.25rem,5.4vh,1.7rem);line-height:1.1;max-width:none}
  .product-detail-page.product-template-page .hero-copy p{margin-top:8px;font-size:.9rem;line-height:1.4}
  .product-detail-page.product-template-page .hero-actions{margin-top:10px;gap:8px}
  .product-detail-page.product-template-page .hero-actions .btn{min-height:40px;padding:10px 16px}
  .product-detail-page.product-template-page .hero-media{min-height:0}
  .product-detail-page.product-template-page .hero-media img{width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 150px)}
}

/* 6d · SEO landing hero (page-landing.php). The orange H1 at 3.9rem/16ch wrapped to five
   lines on laptops and, with two intro paragraphs and two stacked buttons under a
   234px photo, the CTA sat 200–540px below the fold at every size tested. Content and
   order are unchanged; only the sizing tightens. */
@media(min-width:901px){
  .landing-hero h1{font-size:clamp(2.1rem,1.2rem + 2.2vw,3.4rem);max-width:18ch}
  .landing-hero-grid{padding-block:clamp(40px,6dvh,110px)}
  .landing-intro{margin-top:18px}
}
@media(max-width:900px){
  .landing-hero-grid{padding-block:28px 32px;gap:22px}
  .landing-hero-media{aspect-ratio:16/9;max-height:min(240px,30dvh);width:100%}
  .landing-hero h1{font-size:clamp(1.75rem,1.2rem + 2.6vw,2.6rem)}
  .landing-intro{margin-top:14px;gap:8px}
  .landing-intro p{font-size:1rem;line-height:1.5}
  .landing-hero .hero-actions{margin-top:20px;gap:10px;flex-wrap:wrap}
  .landing-hero .hero-actions .btn{flex:1 1 auto;justify-content:center;padding-inline:18px;white-space:nowrap}
}

/* 6e · Touch layer keyed on POINTER, not width. The ≤600px floors (12/13px type, 40px+
   targets) missed touch tablets and landscape phones: 11px news tags, a 19px-tall top-bar
   link, a 24px search button, 19–22px "Read more" and card-title links, 38px social tiles. */
@media(hover:none){
  :root{--fs-2xs:.75rem;--fs-xs:.8125rem}
  .header-form a,.topbar a,.tlink,.story-more{min-height:40px;display:inline-flex;align-items:center}
  .topbar-search{height:42px}
  .topbar-search__btn{width:36px;height:36px}
  .socials a{width:42px;height:42px}
  .post-card-body h2 a,.post-card-body h3 a{display:block;padding-block:6px;margin-block:-6px}
  .entry-foot .tlink{min-height:44px}
}

/* ═══ 7 · BLOG TEMPLATE (single.php · index.php · post-feature) ═══
   One layout every post follows. Same bones as the live dynamiqes.com post (photo banner
   with H1 + date, article, CTA, "You May Also Like") on the homepage design system. */

/* ── banner: featured photo behind an ink scrim, copy bottom-left like the home hero ── */
.post-hero{position:relative;overflow:hidden;background:var(--color-ink);color:var(--color-white);--text:var(--color-white);--soft:rgba(var(--rgb-white),.82);--faint:rgba(var(--rgb-white),.7);
  min-height:clamp(380px,56dvh,600px);display:flex;flex-direction:column}
.post-hero>.wrap{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,5dvh,56px);padding-block:22px clamp(32px,5dvh,52px)}
.post-hero-media{position:absolute;inset:0;z-index:0}
.post-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.post-hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--rgb-scrim),.88) 0%,rgba(var(--rgb-scrim),.72) 42%,rgba(var(--rgb-scrim),.28) 100%),
             linear-gradient(180deg,rgba(var(--rgb-scrim),.35) 0%,transparent 35%,rgba(var(--rgb-scrim),.55) 100%)}
.post-hero.no-img{background:linear-gradient(135deg,#1f1e1f 0%,var(--color-ink) 55%,#3a3639 100%)}
.post-hero.no-img::before{content:"";position:absolute;width:640px;height:640px;right:-200px;top:-260px;border-radius:50%;background:rgba(var(--rgb-brand),.16);filter:blur(10px);pointer-events:none}
.post-hero .breadcrumbs{position:relative;z-index:1;padding-top:0;color:rgba(var(--rgb-white),.7)}
.post-hero .breadcrumbs a{color:var(--orange-2)}
.post-hero-body{position:relative;z-index:1;max-width:60rem}
.post-hero .news-meta{margin-bottom:16px;gap:12px}
.post-hero .news-tag{background:rgba(var(--rgb-brand),.22);border-color:rgba(var(--rgb-brand),.5);color:var(--orange-2)}
.post-hero .news-date{color:rgba(var(--rgb-white),.78)}
.post-hero .post-read::before,.post-hero .post-author::before{content:"·";margin-right:12px;color:rgba(var(--rgb-white),.45)}
/* "By Author" byline: on the Blogs / News & Events cards it follows the date with the same dot;
   it is a link to the author page only when that author has a profile */
.post-card-body .post-author::before,.post-feature-body .post-author::before{content:"·";margin-right:10px;color:var(--faint)}
a.post-author{transition:color .2s}
a.post-author:hover{color:var(--orange-deep);text-decoration:underline}
.post-hero a.post-author:hover{color:var(--orange-2)}
.post-hero h1{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.6rem);line-height:1.08;letter-spacing:-.035em;max-width:24ch;color:var(--color-white);text-wrap:balance}
.post-hero .lede{margin-top:16px;max-width:62ch;color:rgba(var(--rgb-white),.86)}

/* ── body: reading column + sticky rail ── */
.post-body{padding-block:clamp(36px,5vw,72px) clamp(40px,5vw,72px)}
.post-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.post-main{min-width:0}
.post-main .entry-content{max-width:76ch}
/* minmax(0,1fr) so a wide child cannot push the 280px rail track wider than its column —
   the share row's label-plus-five-tiles min-content did exactly that. */
.post-rail{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@media(min-width:1024px){
  .post-layout{grid-template-columns:minmax(0,1fr) 280px}
  .post-rail{order:2;position:sticky;top:calc(var(--nav-h,88px) + 24px)}
  .post-main{order:1}
}
/* "On this page" */
.post-toc{border:1px solid var(--line);border-radius:14px;background:var(--card-grad);padding:6px 18px 14px}
.post-toc[hidden]{display:none}
.post-toc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;
  font-weight:700;font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.post-toc summary::-webkit-details-marker{display:none}
.post-toc summary::after{content:"+";font-size:18px;line-height:1;color:var(--orange);transition:transform .25s}
.post-toc[open] summary::after{content:"−"}
.post-toc ol{list-style:none;margin:0;padding:4px 0 0;display:grid;gap:2px;border-top:1px solid var(--line-2)}
.post-toc a{display:block;padding:8px 10px 8px 14px;border-left:2px solid transparent;border-radius:0 8px 8px 0;font-size:var(--fs-sm);line-height:1.4;color:var(--soft);transition:color .2s,border-color .2s,background .2s}
.post-toc a:hover{color:var(--text);background:rgba(var(--rgb-ink),.04)}
.post-toc a.is-active{color:var(--text);border-left-color:var(--orange);background:rgba(var(--rgb-brand),.07);font-weight:700}
/* share row · hairline tiles like the footer socials */
.post-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.post-share-label{flex:0 0 100%;font-weight:700;font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.post-share a,.post-copy{position:relative;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;color:var(--soft);background:var(--ghost-bg);cursor:pointer;
  transition:color .2s,border-color .2s,background .2s,transform .2s}
.post-share a:hover,.post-copy:hover{color:var(--orange-deep);border-color:var(--orange);background:rgba(var(--rgb-brand),.08);transform:translateY(-2px)}
.post-share svg{width:18px;height:18px;fill:currentColor}
.post-copy.is-done{color:var(--color-on-accent);background:var(--orange);border-color:var(--orange)}
.post-copy-done{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text);background:var(--panel-glass);border:1px solid var(--line);border-radius:6px;padding:4px 8px;box-shadow:var(--shadow)}
.post-copy-done:empty{display:none}
@media(min-width:1024px){.post-share-label{flex-basis:auto;margin:0 6px 0 0}}

/* ── article typography (adds to the shared .entry-content rules) ── */
.blog-post .entry-content{font-size:var(--fs-lede);line-height:var(--lh-relaxed)}
.blog-post .entry-content>p:first-child{font-size:clamp(1.1rem,1rem + .4vw,1.25rem);color:var(--text)}
.blog-post .entry-content h2{font-size:var(--fs-subheading);letter-spacing:-.03em;line-height:var(--lh-heading);scroll-margin-top:calc(var(--nav-h,88px) + 20px)}
.blog-post .entry-content h3{font-size:var(--fs-card);scroll-margin-top:calc(var(--nav-h,88px) + 20px)}
.blog-post .entry-content h4{font-size:var(--fs-body);text-transform:uppercase;letter-spacing:.08em}
.blog-post .entry-content ul li,.blog-post .entry-content ol li{margin:.45em 0}
.blog-post .entry-content ul{list-style:none;padding-left:0}
.blog-post .entry-content ul li{position:relative;padding-left:1.5em}
.blog-post .entry-content ul li::before{content:"";position:absolute;left:.15em;top:.62em;width:.55em;height:.55em;border-radius:50%;background:var(--orange);opacity:.85}
.blog-post .entry-content ul ul li::before{background:transparent;border:2px solid var(--orange)}
.blog-post .entry-content img,.blog-post .entry-content figure img{border-radius:14px;border:1px solid var(--line);width:100%;height:auto}
.blog-post .entry-content figure{margin:1.6em 0}
.blog-post .entry-content strong{color:var(--text)}
.blog-post .entry-content a{color:var(--orange-deep);text-decoration-thickness:1.5px;text-underline-offset:3px}
.blog-post .entry-content a:hover{color:var(--orange)}
.blog-post .entry-content table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.blog-post .entry-content th,.blog-post .entry-content td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.blog-post .entry-content th{background:var(--bg-2);color:var(--text);font-weight:700}
.blog-post .entry-content hr{border:0;border-top:1px solid var(--line);margin:2em 0}
/* the live posts open with <blockquote><h2>Overview</h2><ul>…</ul></blockquote>: keep that
   markup (SEO) but render it as the theme's key-points callout */
.blog-post .entry-content blockquote{margin:0 0 1.6em;padding:22px 26px 22px 28px;border-left:3px solid var(--orange);border-radius:0 14px 14px 0;
  background:linear-gradient(135deg,rgba(var(--rgb-brand),.10),rgba(var(--rgb-brand),.03)),var(--card-grad);font-style:normal}
.blog-post .entry-content blockquote>*+*{margin-top:.8em}
.blog-post .entry-content blockquote h2{margin-top:0;font-size:var(--fs-h3);color:var(--orange-deep)}
.blog-post .entry-content blockquote p{color:var(--soft)}
.blog-post .entry-content blockquote li{font-size:var(--fs-body);color:var(--soft)}
.blog-post .entry-content blockquote:not(:has(h2,h3,ul,ol)){font-style:italic;font-size:var(--fs-card);color:var(--text);line-height:var(--lh-heading)}
/* foot */
.blog-post .entry-foot{max-width:76ch;margin-top:clamp(28px,4vw,44px)}
.post-tags{display:flex;flex-wrap:wrap;gap:8px}
.post-tags a{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);border:1px solid var(--line);border-radius:6px;padding:6px 10px;transition:color .2s,border-color .2s}
.post-tags a:hover{color:var(--orange-deep);border-color:var(--orange)}

/* ── related ── */
.post-related{padding-block:clamp(48px,6vw,80px);background:linear-gradient(180deg,transparent 0,var(--bg-2) var(--section-blend),var(--bg-2) calc(100% - var(--section-blend)),transparent 100%)}
.post-related .sec-head{margin-bottom:clamp(20px,3vw,34px)}
.post-related .post-grid{padding-block:0}

/* ── blog index: featured newest story ── */
.post-feature{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center;
  margin-top:clamp(28px,4vw,48px);padding:clamp(22px,3vw,36px);border:1px solid var(--line);border-radius:16px;background:var(--card-grad);box-shadow:0 30px 60px -40px rgba(var(--rgb-ink),.25)}
.post-feature-body{display:grid;gap:16px;justify-items:start}
.post-feature-body .news-meta{order:-1}
.post-feature-body h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.5rem);line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.post-feature-body h2 a{color:var(--text);transition:color .2s}
.post-feature-body h2 a:hover{color:var(--orange-deep)}
.post-feature-body p{color:var(--soft);font-size:var(--fs-body);line-height:var(--lh-body);max-width:56ch}
.post-feature-media{display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(135deg,var(--color-ink),var(--color-gray))}
.post-feature-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.post-feature:hover .post-feature-media img{transform:scale(1.04)}
.post-feature+.post-grid{padding-top:clamp(24px,3vw,40px)}
@media(max-width:900px){.post-feature{grid-template-columns:1fr}.post-feature-media{order:-1}}
@media(max-width:600px){.post-feature{padding:16px}.post-feature-body .btn{width:100%;justify-content:center}}

/* ── small screens ── */
@media(max-width:620px){
  .post-hero{min-height:clamp(320px,52dvh,460px)}
  .post-hero>.wrap{padding-block:14px 24px;gap:22px}
  .post-hero h1{font-size:clamp(1.55rem,5.6vw,2.1rem);max-width:none}
  .post-hero .news-meta{margin-bottom:12px}
  .post-body{padding-block:24px 40px}
  .post-toc{padding:2px 14px 10px}
  .blog-post .entry-content{font-size:1rem;line-height:1.65}
  .blog-post .entry-content blockquote{padding:16px 16px 16px 18px}
}

/* ═══════════════════════════════════════════════════════════════
   OUR SERVICES page (page-our-services.php) · home-page design language
   Video hero (home-banner idiom) → one band per service, alternating light /
   dark, copy beside the section's photo composite → CTA band → contact.
   Composition: on desktop every chunk is one viewport (hero = 100dvh minus the
   top chrome; every later section = 100dvh minus the sticky nav). Narrow
   layouts keep their natural height.
   ═══════════════════════════════════════════════════════════════ */
/* ── hero ── */
/* Live structure kept: centred H1 + the three intro paragraphs. Home-banner presentation: the
   live page's hero photo full-bleed behind the copy, one screen (100dvh minus the top chrome). */
.svc-hero{ position:relative; isolation:isolate; overflow:hidden; z-index:1; background:var(--color-ink); color:var(--color-white);
  --text:var(--color-white); --soft:rgba(var(--rgb-white),.8); --line:rgba(var(--rgb-white),.34);
  min-height:calc(100vh - var(--nav-h,88px) - var(--hf-h,44px)); min-height:calc(100dvh - var(--nav-h,88px) - var(--hf-h,44px));
  display:grid; align-items:center; padding-block:clamp(40px,7vh,96px); }
/* the JPEG already carries a dark tint, so it is NOT dimmed with the video's brightness filter; the
   copy is centred, so the scrim is a bottom→top ramp plus a light overall tint instead of a left ramp */
.svc-hero-media img{ position:relative; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  animation:bannerDrift 30s ease-in-out infinite alternate; }
.svc-hero-media::after{ background:
  linear-gradient(0deg,rgba(var(--rgb-night),.5),rgba(var(--rgb-night),.16) 40%,rgba(var(--rgb-night),0) 75%),
  rgba(var(--rgb-night),.22); }
.svc-hero .wrap{ position:relative; z-index:1; }
/* like the live .services-top-content: centred title, paragraphs in a reading column beneath it */
.svc-hero-copy{ max-width:min(100%,920px); margin-inline:auto; display:grid; gap:clamp(12px,2.2vh,22px); }
.svc-hero h1{ text-align:center; font-size:var(--fs-hero); line-height:var(--lh-tight); color:var(--color-white); text-wrap:balance;
  text-shadow:0 2px 34px rgba(var(--rgb-night),.45); margin-bottom:clamp(4px,1.2vh,12px); }
.svc-hero-copy p{ font-size:var(--fs-lede); line-height:var(--lh-relaxed); color:rgba(var(--rgb-white),.88); }

/* ── bands ── */
.svc-band{ position:relative; overflow:hidden; display:grid; align-items:center; padding-block:clamp(28px,4.5dvh,56px); scroll-margin-top:var(--nav-h,88px); }
.svc-light{ background:linear-gradient(180deg,transparent 0,var(--bg-2) var(--section-blend),var(--bg-2) calc(100% - var(--section-blend)),transparent 100%); }
.svc-dark{ --text:var(--color-white); --soft:rgba(var(--rgb-white),.8); --line:rgba(var(--rgb-white),.18);
  color:var(--color-white); background:linear-gradient(90deg,var(--color-ink) 0%,var(--color-gray) 140%); }
.svc-dark::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(720px 360px at 82% -10%,rgba(var(--rgb-brand),.26),transparent 62%); }
.svc-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(36px,5vw,84px); align-items:center; }
.svc-flip .svc-media{ order:-1; }
.svc-copy{ display:grid; gap:clamp(10px,1.6dvh,16px); align-content:center; }
.svc-copy .eyebrow{ margin-bottom:2px; }
/* height-aware H2 so the longest titles (three lines) still leave room for the copy + captions in one view */
.svc-copy h2{ font-size:clamp(1.75rem,1.1rem + 1.5vw + .5vh,3rem); line-height:var(--lh-tight); letter-spacing:-.03em; color:var(--text); max-width:20ch; text-wrap:balance; }
.svc-copy p{ color:var(--soft); font-size:var(--fs-body); line-height:var(--lh-body); max-width:56ch; }
.svc-cta{ margin-top:10px; }

/* photo composite: the old page's cut-out compositions carry their own frames — no card box around them */
.svc-media{ position:relative; margin:0; display:grid; place-items:center; }
.svc-media img{ position:relative; width:100%; height:auto; max-height:min(62dvh,560px); object-fit:contain; display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1); }
.svc-band:hover .svc-media img{ transform:translateY(-4px); }

/* icon + caption rows */
.svc-features{ list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }
.svc-features li{ display:flex; align-items:center; gap:12px; font-size:var(--fs-sm); font-weight:500; line-height:var(--lh-heading); color:var(--text); }
.svc-ic{ flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(var(--rgb-brand),.12); border:1px solid rgba(var(--rgb-brand),.32); }
.svc-ic img, .svc-ic svg{ width:22px; height:22px; object-fit:contain; }
.svc-ic svg{ fill:none; stroke:var(--orange); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.svc-dark .svc-ic{ background:rgba(var(--rgb-brand),.18); border-color:rgba(var(--rgb-brand),.45); }
/* the old caption icons are already brand orange; shown as-is */

/* SAP five-phase methodology: same numbered-node idiom as the home services timeline */
.svc-phases{ list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; counter-reset:phase; }
.svc-phases li{ position:relative; display:grid; justify-items:center; text-align:center; gap:10px; padding:16px 8px 14px; border-radius:var(--r);
  background:var(--card-grad); border:1px solid var(--line); transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .4s, box-shadow .4s; }
.svc-phases li:hover{ transform:translateY(-4px); border-color:rgba(var(--rgb-brand),.45); box-shadow:0 20px 44px -22px rgba(var(--rgb-ink),.22); }
.svc-phases li:not(:last-child)::after{ content:""; position:absolute; top:50%; right:-10px; width:10px; height:2px; background:rgba(var(--rgb-brand),.45); }
.svc-phase-num{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-sans); font-weight:700; font-size:var(--fs-sm);
  color:var(--orange); background:rgba(var(--rgb-brand),.12); border:1px solid rgba(var(--rgb-brand),.35); }
.svc-phases li:hover .svc-phase-num{ background:linear-gradient(135deg,var(--orange) 12%,var(--orange-2)); color:var(--color-on-accent); border-color:var(--orange); }
.svc-phase-label{ font-size:var(--fs-xs); font-weight:700; line-height:1.3; color:var(--text); }
/* on a dark band the cards go translucent (like .svc-ic) so the white labels stay readable */
.svc-dark .svc-phases li{ background:rgba(var(--rgb-white),.07); border-color:rgba(var(--rgb-white),.16); }
.svc-dark .svc-phases li:hover{ background:rgba(var(--rgb-white),.11); box-shadow:0 20px 44px -22px rgba(0,0,0,.5); }
.svc-dark .svc-phase-num{ background:rgba(var(--rgb-brand),.2); border-color:rgba(var(--rgb-brand),.5); }

/* Why Trust: photo left, tighter copy measure */
.svc-trust .svc-grid{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
.svc-trust .svc-media{ order:-1; }
.svc-trust .svc-media img{ max-height:min(66dvh,600px); }
.svc-trust .svc-copy p{ font-size:var(--fs-lede); }
.svc-cta-band{ padding-block:var(--sec); }

/* ONE SCREEN (desktop): every band, the CTA and the contact section each take the
   viewport left under the sticky nav; min-height (not height) so a long band grows
   instead of clipping copy. */
@media (min-width:901px){
  .svc-band{ min-height:calc(100dvh - var(--nav-h,88px)); }
  .services-page .svc-cta-band{ min-height:calc(100dvh - var(--nav-h,88px)); display:grid; align-items:center; padding-block:clamp(28px,4.5dvh,56px); }
  .services-page .contact-us{ min-height:calc(100dvh - var(--nav-h,88px)); padding-block:clamp(28px,4.5dvh,56px); }
}
/* short laptops: tighter hero rhythm so the three paragraphs stay inside the one screen */
@media (min-width:901px) and (max-height:760px){
  .svc-hero-copy{ gap:10px; }
  .svc-hero-copy p{ font-size:var(--fs-body); line-height:var(--lh-body); }
}
@media (max-width:1100px){
  .svc-phases{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .svc-phases li:not(:last-child)::after{ display:none; }
}
@media (max-width:900px){
  .svc-hero{ min-height:0; padding-block:clamp(48px,8vw,72px); }
  .svc-grid, .svc-trust .svc-grid{ grid-template-columns:1fr; }
  .svc-flip .svc-media, .svc-trust .svc-media{ order:0; }
  .svc-media img, .svc-trust .svc-media img{ max-height:none; }
  .svc-features{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .svc-phases{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .svc-features li{ font-size:var(--fs-sm); }
}
@media (prefers-reduced-motion:reduce){
  .svc-media img, .svc-phases li{ transition:none; }
  .svc-hero-media img{ animation:none; }
}

/* ═══════════════════════════════════════════════════════════════
   CAREERS · /career/ listing (page-career.php) + /careers/<job>/ (single-dq_career.php)
   ═══════════════════════════════════════════════════════════════ */
.career-jobs,.career-join,.career-culture,.career-hr,.career-body,.career-others{padding-block:var(--sec)}
.career-page .page-hero .hero-actions,.career-single .page-hero .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.career-jobs .sec-head{max-width:680px;margin-bottom:clamp(20px,3vw,32px)}
.career-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(20px,3vw,32px)}
.career-filter button{font-family:var(--font-sans);font-weight:700;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--soft);cursor:pointer;transition:border-color .25s,color .25s,background .25s}
.career-filter button:hover,.career-filter button.is-active{border-color:var(--orange);color:var(--orange);background:rgba(var(--rgb-brand),.08)}
.career-filter button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.career-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(14px,1.6vw,22px)}
.career-card{display:flex;flex-direction:column;gap:10px;padding:26px 24px;border-radius:14px;border:1px solid var(--line);background:var(--card-grad);transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s}
.career-card:hover{transform:translateY(-4px);border-color:rgba(var(--rgb-brand),.4);box-shadow:0 20px 44px -22px rgba(var(--rgb-ink),.22)}
.career-card[hidden]{display:none}
.career-card h3{font-size:var(--fs-card);line-height:var(--lh-heading);letter-spacing:-.015em}
.career-loc{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-weight:700;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.career-loc svg{width:14px;height:14px;fill:currentColor;flex:0 0 auto}
.career-loc .career-type{color:var(--soft);letter-spacing:.08em}
.career-card h4{font-size:var(--fs-sm);font-weight:700;color:var(--text);margin-top:6px}
.career-card p{font-size:var(--fs-sm);color:var(--soft);line-height:var(--lh-body)}
.career-card .text-link{margin-top:auto;padding-top:8px}
.career-empty{margin-top:18px;color:var(--soft)}
.career-join{background:var(--warm)}
.career-join-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.career-join-grid h2{margin-top:12px;font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:-.03em}
.career-join-grid p{margin-top:16px;color:var(--soft);font-size:var(--fs-lede);line-height:var(--lh-relaxed)}
.career-join-grid .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.career-join-media{border-radius:16px;overflow:hidden} /* no border / fill / shadow — the artwork carries its own device frame */
.career-join-media img{display:block;width:100%;height:auto}
.career-culture .sec-head.center{margin-inline:auto;text-align:center;max-width:780px}
.career-culture .sec-head.center .eyebrow{justify-content:center}
.career-values-head{margin-top:clamp(40px,5vw,64px);max-width:640px}
.career-values-head h2{font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:-.03em}
.career-values-head p{margin-top:12px;color:var(--soft);font-size:var(--fs-lede);line-height:var(--lh-relaxed)}
.career-values{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(20px,3vw,32px)}
.career-values .feature-group p{font-size:var(--fs-sm);color:var(--soft);line-height:var(--lh-body);margin-top:10px}
.career-hr{background:linear-gradient(135deg,#1f1e1f 0%,var(--color-ink) 55%,#3a3639 100%);color:#fff;--text:#fff;--soft:rgba(255,255,255,.78);--line:rgba(255,255,255,.25)}
.career-hr-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:start}
.career-hr h2{color:#fff;font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:-.03em;margin-top:12px}
.career-hr p{color:var(--soft);margin-top:12px;line-height:var(--lh-relaxed)}
.career-hr ul{list-style:none;margin-top:18px;display:grid;gap:10px;font-size:var(--fs-lede)}
.career-hr a{color:var(--orange);font-weight:700}
.career-hr .name{font-family:var(--font-sans);font-weight:700;letter-spacing:.08em;color:#fff;margin-top:0}
.career-meta{margin-top:14px;font-family:var(--font-sans);font-weight:700;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.career-body .wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,5vw,72px);align-items:start}
.career-content{max-width:none;margin:0}
.career-apply{position:sticky;top:calc(var(--nav-h,64px) + 24px);padding:26px 24px;border-radius:14px;border:1px solid var(--line);background:var(--card-grad)}
.career-apply h3{font-size:var(--fs-card);line-height:var(--lh-heading)}
.career-apply .career-loc{margin-top:10px}
.career-apply p{margin-top:10px;font-size:var(--fs-sm);color:var(--soft);line-height:var(--lh-body)}
.career-apply .btn{margin-top:16px;width:100%;justify-content:center}
.career-apply ul{list-style:none;margin-top:14px;display:grid;gap:6px;font-size:var(--fs-sm)}
.career-apply ul a{color:var(--text);font-weight:700}
.career-others{background:var(--warm)}
.career-others h2{margin-bottom:clamp(20px,3vw,32px);font-size:var(--fs-h2);letter-spacing:-.03em}
@media (max-width:980px){
  .career-join-grid,.career-hr-grid,.career-body .wrap{grid-template-columns:1fr}
  .career-values{grid-template-columns:1fr 1fr}
  .career-apply{position:static}
}
@media (max-width:560px){ .career-values{grid-template-columns:1fr} }

/* ═══ 8 · LIVE-STRUCTURE PARITY (2026-09-07) ═══
   Sub-pages keep dynamiqes.com's heading outline (SEO). Titles the design shows as headings but the
   old page does not mark up as headings are plain elements with these classes, styled exactly like
   the headings they replace; plus the styles of the new live-structure templates (About Us, Client
   Testimonials, testimonial single, Privacy Policy, News & Events, product page sections). */
.cta-panel .cta-title{position:relative;max-width:20ch;margin-inline:auto;color:var(--color-on-accent);font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:-.035em;text-wrap:balance;font-weight:700}
.cta-panel .cta-kicker{position:relative;margin:0 0 10px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange-2)}
.cta-panel .cta-kicker-text{margin:0 auto 18px}
.post-card-body .card-title{margin:0;font-size:var(--fs-card);line-height:var(--lh-heading);letter-spacing:-.01em;font-weight:700}
.post-card-body .card-title a{display:block;padding-block:6px;margin-block:-6px;color:var(--text)}
.post-feature-body .feature-title{margin:0;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.5rem);line-height:1.1;letter-spacing:-.03em;text-wrap:balance;font-weight:700}
.post-feature-body .feature-title a{color:var(--text);transition:color .2s}
.post-feature-body .feature-title a:hover{color:var(--orange-deep)}
.products-page .products-listing-head .sec-title{margin:0;font-size:var(--h2);line-height:1.05;letter-spacing:-.045em;max-width:18ch;font-weight:700}
.loc-card .loc-city{margin:0 0 10px;font-weight:700;font-size:var(--fs-card);line-height:var(--lh-heading)}
.career-hr .h2{color:#fff;font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:-.03em;margin:12px 0 0;font-weight:700}
.career-apply .h3{margin:0;font-size:var(--fs-card);line-height:var(--lh-heading);font-weight:700}
.career-content .h2{font-size:var(--fs-h2);letter-spacing:-.03em;line-height:var(--lh-tight);font-weight:700;margin:0 0 .6em}
h4.post-share-label{margin:0}
.faq-list summary h3{display:inline;margin:0;font:inherit;letter-spacing:inherit}
.faq-head .faq-title{margin:0;font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:-.035em;font-weight:700}
.faq-answer p+p,.faq-answer ul{margin-top:.8em}
.faq-answer ul{padding-left:1.2em;display:grid;gap:6px}
/* product page: live section types */
.portal-features-copy .feature-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:18px 0 26px}
.portal-features-copy .feature-list li{padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;font-weight:700;font-size:var(--fs-sm)}
.portal-features-copy .feature-group p{position:relative;color:var(--soft);font-size:var(--fs-body);line-height:var(--lh-body)}
.portal-features-copy .feature-group p+ul{margin-top:14px}
.portal-features-copy p.closing{margin-top:26px;font-weight:600}
.product-detail-page .overview-items{margin-top:clamp(32px,4vw,56px)}
.product-detail-page .product-cta{padding-block:clamp(40px,5vw,72px)}
.product-detail-page .product-diagram{padding-block:var(--section)}
.product-detail-page .features:not(.has-showcase) .portal-features-layout{grid-template-columns:1fr}
/* landing pages: the live in-content CTA block ("Ready To Get Started?" + heading) */
.landing-content .landing-cta{margin:2.4em 0;padding:clamp(28px,4vw,48px);border-radius:16px;background:linear-gradient(90deg,var(--color-ink) 0%,var(--color-gray) 140.31%);color:var(--color-on-accent);text-align:center}
.landing-content .landing-cta h3{margin:0 0 8px;font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--orange-2)}
.landing-content .landing-cta h2{margin:10px 0 0;color:#fff;font-size:var(--fs-h2);line-height:var(--lh-tight)}
.landing-content .landing-cta p{color:rgba(var(--rgb-white),.78);max-width:54ch;margin:14px auto 0}
.landing-content .landing-cta .landing-cta-btn{margin-top:24px}
.landing-content .faq-list summary h3{display:inline;margin:0;font:inherit}
.landing-content .faq-list .faq-answer{padding:0 52px 20px 0}
.landing-content .faq-list .faq-answer p{padding:0;margin:0}
.landing-content .faq-list .faq-answer p+p,.landing-content .faq-list .faq-answer ul{margin-top:.8em}
/* news & events */
.news-page .news-featured{padding-block:var(--section) 0}
.news-page .news-list{padding-block:var(--section)}
.news-page .sec-head{margin-bottom:clamp(20px,3vw,34px)}
/* about us */
.about-page .about-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
.about-page .about-hero-visual{position:relative;margin:0;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:var(--card-grad);box-shadow:var(--shadow-lg)}
.about-page .about-hero-photo{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media(max-width:900px){.about-page .about-hero-grid{grid-template-columns:1fr;gap:28px}}
.about-page .about-mv{padding-block:var(--section)}
.about-page .about-mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.about-page .about-card{padding:clamp(28px,3vw,44px);border:1px solid var(--line);border-radius:16px;background:var(--card-grad)}
/* breaker photo under Mission / Vision: centred, as wide as two Core Values cards, wide-landscape */
.about-page .about-card h2{margin:8px 0 14px}
.about-page .about-card p{color:var(--soft);font-size:var(--fs-lede);line-height:var(--lh-body)}
.about-page .about-values{padding-block:var(--section);background:var(--bg-2)}
/* core values on the team photo: ink scrim over the cover photo (the page-hero--photo idiom), white heading, frosted white cards */
.about-page .about-values--photo{position:relative;isolation:isolate;color:var(--color-white);background:linear-gradient(180deg,rgba(var(--rgb-ink),.88) 0%,rgba(var(--rgb-ink),.74) 100%),var(--values-photo) center/cover no-repeat}
.about-page .about-values--photo .sec-head h2{color:var(--color-white)}
.about-page .about-values--photo .feature-group{background:rgba(var(--rgb-white),.94);border-color:rgba(var(--rgb-white),.5);box-shadow:0 24px 50px -30px rgba(var(--rgb-night),.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.about-page .about-values--photo .feature-group h3{color:var(--ink)}
.about-page .about-values--photo .feature-group p{color:var(--soft)}
.about-page .about-values .feature-group h3{position:relative;font-size:var(--h3);line-height:1.1;letter-spacing:-.03em;margin:0 0 16px}
.about-page .about-values .feature-group p{position:relative;color:var(--soft);line-height:var(--lh-body)}
.about-page .about-products{padding-block:var(--section)}
.about-page .about-services{padding-block:var(--section);background:var(--bg-2)}
.about-page .about-services-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,80px);align-items:center}
.about-page .about-services-grid p{color:var(--soft);font-size:var(--fs-lede);line-height:var(--lh-body);margin:14px 0 22px}
.about-page .about-services-media{margin:0}
.about-page .about-services-media img{width:100%;border-radius:16px;border:1px solid var(--line)}
.about-page .about-customers{padding-block:var(--section)}
/* about us — the live page's photos: icon chips on Mission / Vision and the core values, one screenshot per product (alternating rows, like the live layout), the "Services We Offer" monitor on a soft panel */
.about-page .about-icon{display:inline-grid;place-items:center;width:64px;height:64px;margin-bottom:18px;border-radius:var(--r);background:rgba(var(--rgb-brand),.1)}
.about-page .about-icon img{width:auto;height:36px;object-fit:contain}
.about-page .about-icon--sm{width:56px;height:56px;margin-bottom:16px}
.about-page .about-icon--sm img{height:30px}
.about-page .about-card .about-icon{display:grid}
.about-page .about-values .feature-group .about-icon{position:relative}
.about-page .about-values .feature-group::before{display:none}
.about-page .product-list{display:grid;gap:clamp(20px,2.6vw,32px)}
.about-page .product-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(20px,2.6vw,32px);border:1px solid var(--line);border-radius:16px;background:var(--card-grad)}
.about-page .product-row:nth-child(even) .product-media{order:2}
.about-page .product-media{position:relative;display:grid;place-items:center;min-height:300px;padding:clamp(8px,1.5vw,20px)}
.about-page .product-media::before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:rgba(var(--rgb-brand),.09);filter:blur(24px)}
.about-page .product-media img{position:relative;z-index:1;display:block;width:100%;height:auto;max-height:340px;object-fit:contain}
.about-page .product-copy{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(6px,1vw,14px) 0}
.about-page .product-logo{display:block;height:36px;width:auto;max-width:220px;object-fit:contain;object-position:left;margin-bottom:16px}
.about-page .product-copy h3{margin:0 0 12px;font-size:var(--fs-h3);line-height:var(--lh-tight);letter-spacing:-.02em}
.about-page .product-copy p{color:var(--soft);font-size:var(--fs-body);line-height:var(--lh-body)}
.about-page .product-copy p+p{margin-top:.8em}
.about-page .product-copy .text-link{display:inline-flex;align-items:center;gap:10px;margin-top:20px}
.about-page .product-copy .text-link span{transition:transform .2s}
.about-page .product-copy .text-link:hover span{transform:translateX(4px)}
.about-page .about-services-media{position:relative;display:grid;place-items:center;margin:0;padding:clamp(12px,2vw,24px)}
.about-page .about-services-media::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(var(--rgb-brand),.1);filter:blur(24px)}
.about-page .about-services-media img{position:relative;z-index:1;width:100%;max-width:480px;height:auto;border:0;border-radius:0}
@media(max-width:900px){.about-page .product-row{grid-template-columns:1fr;gap:22px}.about-page .product-row:nth-child(even) .product-media{order:0}.about-page .product-media{min-height:220px}.about-page .product-media img{max-height:280px}}
@media(max-width:600px){.about-page .about-icon{width:56px;height:56px}.about-page .about-icon img{height:30px}.about-page .product-row{padding:16px}}

/* products listing — the About page's card system
   ------------------------------------------------
   /products/ used to compose itself one product per 100dvh: borderless rows on a
   tinted gradient, stretched to fill the screen. A 16:9 screenshot is nowhere near
   a screen tall, so each product floated in ~300px of dead space and the section
   read as a series of gaps rather than a list. /about-us/ lists the same products
   as self-contained cards sized to their content, and that is the refined one — so
   the listing adopts it here, verbatim: same border, radius, card gradient, gap and
   alternating media column. Only the presentation changes; the copy, images, order
   and links are untouched.

   Scoped `.products-page .products-listing` (0,3,0) so it outranks every `.products-page
   .product-row` rule above — including the ones inside media queries, which add no
   specificity of their own — without having to unpick them one by one. .sap-feature
   gets the same card so the SAP panel above the list doesn't read as a different
   page. */
.products-page .products-listing{padding-block:var(--section);background:var(--bg)}
.products-page .products-listing .product-list{display:grid;gap:clamp(20px,2.6vw,32px)}
.products-page .products-listing .product-row,
.products-page .sap-feature .sap-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;min-height:0;max-height:none;padding:clamp(20px,2.6vw,32px);border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card-grad)}
.products-page .products-listing .product-row:nth-child(even) .product-media{order:2}
.products-page .products-listing .product-row:nth-child(even) .product-copy{order:0}
.products-page .products-listing .product-media,
.products-page .sap-feature .sap-media{position:relative;display:grid;place-items:center;align-self:center;min-height:300px;padding:clamp(8px,1.5vw,20px);overflow:visible;background:transparent}
.products-page .products-listing .product-media::before,
.products-page .sap-feature .sap-media::before{content:"";display:block;position:absolute;width:280px;height:280px;border-radius:50%;background:rgba(var(--rgb-brand),.09);filter:blur(24px)}
.products-page .sap-feature .sap-media::after{display:none}
.products-page .products-listing .product-media img,
.products-page .sap-feature .sap-media>img{position:relative;z-index:1;display:block;align-self:center;justify-self:center;width:100%;max-width:100%;height:auto;max-height:340px;margin-inline:auto;object-fit:contain;object-position:center;border:0;border-radius:0;background:none;box-shadow:none;filter:none}
.products-page .products-listing .product-copy,
.products-page .sap-feature .sap-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;align-self:center;padding:clamp(6px,1vw,14px) 0}
/* The logo is the product name as artwork; it earns its place beside the H3 in a
   card, at every width. The stacked composition used to hide it below 980px. */
.products-page .products-listing .product-logo{display:block;height:36px;width:auto;max-width:220px;object-fit:contain;object-position:left;margin-bottom:16px}
.products-page .products-listing .product-copy h2{margin:0 0 12px;font-size:var(--fs-h3);line-height:var(--lh-tight);letter-spacing:-.02em}
.products-page .products-listing .product-copy p,
.products-page .sap-feature .sap-copy p{margin-top:0;color:var(--soft);font-size:var(--fs-body);line-height:var(--lh-body)}
.products-page .products-listing .product-copy p+p,
.products-page .sap-feature .sap-copy p+p{margin-top:.8em}
/* Cards are sized to their content, so the second paragraph the one-screen layout
   had to hide on short viewports fits again — every product reads in full. */
.products-page .products-listing .product-copy p:nth-of-type(2),
.products-page .sap-feature .sap-copy p:nth-of-type(2){display:block}
.products-page .products-listing .text-link,
.products-page .sap-feature .text-link{display:inline-flex;align-items:center;gap:10px;margin-top:20px}
.products-page .sap-feature{min-height:0;display:block;padding-block:var(--section) 0;background:var(--bg)}
.products-page .sap-feature .sap-logo{margin-bottom:16px}
/* The SAP artwork is a portrait-ish monitor render, not the 16:9 screenshot the
   rule above is sized for: at width:100% with a height cap the BOX keeps the full
   column while the picture shrinks inside it, stranding ~100px of empty space
   either side. Sizing by max-width and max-height together keeps the box on the
   render's own ratio. */
.products-page .sap-feature .sap-media>img{width:auto;max-width:100%;max-height:min(420px,52vh)}
.products-page .sap-feature .sap-copy h2{margin:0 0 12px;font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:-.025em}
.products-page .sap-feature .sap-caption{margin-top:14px;color:var(--faint);font-size:var(--fs-sm);text-align:center}
@media(max-width:900px){
  .products-page .products-listing .product-row,
  .products-page .sap-feature .sap-panel{grid-template-columns:1fr;gap:22px;padding-block:clamp(20px,2.6vw,32px)}
  .products-page .products-listing .product-row:nth-child(even) .product-media{order:0}
  .products-page .products-listing .product-media,
  .products-page .sap-feature .sap-media{min-height:220px;padding-top:clamp(8px,1.5vw,20px)}
  .products-page .products-listing .product-media img,
  .products-page .sap-feature .sap-media>img{max-height:280px}
}
@media(max-width:600px){
  .products-page .products-listing .product-row,
  .products-page .sap-feature .sap-panel{padding:16px}
  .products-page .products-listing .product-media,
  .products-page .sap-feature .sap-media{min-height:180px}
  .products-page .products-listing .product-media img,
  .products-page .sap-feature .sap-media>img{max-height:230px}
}
/* testimonials — Client Testimonials page + testimonial single (inc/testimonial-media.php).
   One wide card per client, the live page's composition: copy on the left (logo, quote, name),
   the client's video poster on the right; a quote-mark panel stands in when there is no video.
   Logos are plain images — no box, border or background around them. */
.testi-role{margin:0;color:var(--faint);font-size:var(--fs-xs)}
.testimonials-page .testimonials-list{padding-block:var(--section)}
.testimonials-page .page-hero .eyebrow{display:inline-flex;margin-bottom:14px}
.testi-stories{display:grid;gap:clamp(20px,2.6vw,32px)}
.testi-story{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4.5vw,72px);align-items:center;padding:clamp(28px,3.6vw,56px);border:1px solid var(--line);border-radius:16px;background:var(--card-grad);overflow:hidden;transition:border-color .4s,box-shadow .4s}
.testi-story::before{content:"";position:absolute;right:-140px;top:-160px;width:420px;height:420px;border-radius:50%;background:rgba(var(--rgb-brand),.08);filter:blur(30px);pointer-events:none;transition:opacity .4s;opacity:0}
.testi-story:hover{border-color:rgba(var(--rgb-brand),.35);box-shadow:0 30px 60px -34px rgba(var(--rgb-ink),.28)}
.testi-story:hover::before{opacity:1}
.testi-story-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.testi-story-logo{display:block;height:clamp(44px,3.6vw,60px);width:auto;max-width:min(280px,70%);object-fit:contain;object-position:left center;margin-bottom:clamp(22px,2.6vw,36px);border:0;background:none;padding:0;box-shadow:none;border-radius:0}
.testi-story-quote{position:relative;margin:0;padding-top:clamp(26px,2.4vw,34px);color:var(--text);font-size:var(--fs-lede);line-height:var(--lh-relaxed);letter-spacing:-.005em}
.testi-story-quote::before{content:"\201C";position:absolute;left:-.06em;top:-.12em;font-family:var(--font-sans);font-size:clamp(3.5rem,3rem + 2vw,5rem);line-height:1;font-weight:900;color:var(--orange);opacity:.32}
.testi-story-quote p{position:relative}
.testi-story-quote p+p{margin-top:.9em}
.testi-story-who{display:grid;gap:4px;margin-top:clamp(22px,2.4vw,32px);padding-top:18px;border-top:1px solid var(--line-2);width:100%}
.testi-story-name{margin:0;font-family:var(--font-sans);font-size:var(--fs-card);line-height:var(--lh-heading);font-weight:700;letter-spacing:-.01em;color:var(--text)}
.testi-story-who .testi-role{font-size:var(--fs-sm)}
.testi-story-link{margin-top:20px;font-size:var(--fs-xs)}
.testi-story-media{position:relative;min-width:0}
.testi-play{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:var(--r);overflow:hidden;background:var(--color-ink);cursor:pointer;box-shadow:0 28px 60px -30px rgba(var(--rgb-ink),.45);isolation:isolate}
.testi-play img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.testi-play::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--rgb-ink),0) 45%,rgba(var(--rgb-ink),.55) 100%);opacity:.9;pointer-events:none}
.testi-play-badge{position:absolute;left:50%;top:50%;width:clamp(64px,6vw,84px);height:clamp(64px,6vw,84px);transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:var(--orange);color:var(--color-on-accent);box-shadow:0 18px 40px -12px rgba(var(--rgb-brand),.7);transition:transform .35s cubic-bezier(.16,1,.3,1),background .25s}
.testi-play-badge::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid rgba(var(--rgb-white),.55);opacity:.8;transition:inset .35s cubic-bezier(.16,1,.3,1),opacity .35s}
.testi-play-badge svg{width:42%;height:42%;fill:currentColor;transform:translateX(6%)}
.testi-play-cap{position:absolute;left:clamp(16px,2vw,24px);bottom:clamp(14px,1.8vw,22px);font-family:var(--font-sans);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--rgb-white),.9);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1)}
.testi-play:hover img,.testi-play:focus-visible img{transform:scale(1.04)}
.testi-play:hover .testi-play-badge,.testi-play:focus-visible .testi-play-badge{transform:translate(-50%,-50%) scale(1.08);background:var(--orange-2,var(--orange))}
.testi-play:hover .testi-play-badge::before{inset:-16px;opacity:0}
.testi-play:hover .testi-play-cap,.testi-play:focus-visible .testi-play-cap{opacity:1;transform:none}
.testi-play:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.testi-story-mark{position:relative;display:grid;place-items:center;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:linear-gradient(135deg,var(--color-ink) 0%,var(--color-gray) 140%);box-shadow:0 28px 60px -30px rgba(var(--rgb-ink),.4)}
.testi-story-mark::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;right:-20%;top:-30%;background:rgba(var(--rgb-brand),.4);filter:blur(60px)}
.testi-story-glyph{position:relative;font-family:var(--font-sans);font-size:clamp(9rem,7rem + 6vw,14rem);line-height:.7;font-weight:900;color:var(--orange);transform:translateY(.18em)}
.testi-story-tag{position:absolute;left:clamp(16px,2vw,24px);bottom:clamp(14px,1.8vw,22px);font-family:var(--font-sans);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--rgb-white),.7)}
/* single: everything (compact hero, arrows, card) fits the first screen so the quote and the
   video are readable the moment a visitor lands or steps Prev / Next; sizes are height-aware */
.testimonial-single .page-hero{padding-block:clamp(18px,3.2vh,40px) clamp(14px,2.4vh,28px)}
.testimonial-single .page-hero .breadcrumbs{padding-top:0;margin-bottom:clamp(8px,1.4vh,14px)}
.testimonial-single .page-hero h1{font-size:clamp(1.75rem,1.1rem + 2.4vh,2.875rem);max-width:none;letter-spacing:-.035em}
.testimonial-single .testimonial-body{padding-block:clamp(10px,1.8vh,20px) clamp(28px,4vh,48px)}
.testimonial-single .testi-nav{margin-bottom:clamp(10px,1.6vh,18px)}
.testimonial-single .testi-story{padding:clamp(20px,3vh,44px) clamp(24px,3.2vw,52px);gap:clamp(24px,3.5vw,56px);align-items:center}
.testimonial-single .testi-story-logo{height:clamp(40px,5vh,56px);margin-bottom:clamp(14px,2.2vh,26px)}
.testimonial-single .testi-story-quote{padding-top:clamp(20px,2.6vh,30px)}
.testimonial-single .testi-story-quote::before{font-size:clamp(3rem,2.4rem + 1.4vh,4.25rem)}
.testimonial-single .testi-story-who{margin-top:clamp(14px,2.2vh,26px);padding-top:14px}
/* long quotes scroll inside the card instead of pushing the video and the arrows off-screen */
.testimonial-single .testi-story-quote{max-height:max(200px,calc(100dvh - var(--hf-h,44px) - var(--nav-h,64px) - 350px));overflow-y:auto;padding-right:10px;scrollbar-width:thin;scrollbar-color:rgba(var(--rgb-ink),.2) transparent}
.testimonial-single .testi-story-quote.is-scrollable{-webkit-mask-image:linear-gradient(#000 calc(100% - 36px),transparent);mask-image:linear-gradient(#000 calc(100% - 36px),transparent)}
.testimonial-single .testi-story-quote::-webkit-scrollbar{width:6px}
.testimonial-single .testi-story-quote::-webkit-scrollbar-thumb{background:rgba(var(--rgb-ink),.2);border-radius:3px}
.testimonial-single .testi-story-media{max-width:min(100%,calc((100dvh - var(--hf-h,44px) - var(--nav-h,64px) - 300px) * 16 / 9));margin-inline:auto;width:100%}
.testi-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 clamp(20px,2.6vw,32px)}
.testi-nav .tlink{font-size:var(--fs-xs)}
.testi-nav .is-disabled{opacity:.4}
.testi-nav-all{color:var(--faint)}
.testi-nav .arr-back{display:inline-block}
.testi-nav .tlink:hover .arr-back{transform:translateX(-5px)}
.testimonial-single .testi-story-quote{font-size:clamp(1rem,.9rem + .5vh,1.1875rem);line-height:1.65}
@media(max-width:1100px){.testi-story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.5vw,40px)}}
@media(max-width:900px){.testi-story{grid-template-columns:1fr;gap:26px;padding:clamp(20px,4vw,32px)}.testi-story-media{order:-1}.testi-story-mark{aspect-ratio:16/9}.testi-story-mark .testi-story-glyph{font-size:8rem}.testi-story-logo{height:44px}.testi-nav{flex-wrap:wrap}.testi-nav-all{order:3;width:100%;justify-content:center}.testimonial-single .testi-story-quote{max-height:none;overflow:visible;padding-right:0}.testimonial-single .testi-story-media{max-width:none}}
@media(max-width:600px){.testi-story{padding:18px;border-radius:14px}.testi-play,.testi-story-mark{border-radius:10px}.testi-story-quote::before{font-size:3rem}}
/* privacy policy */
.privacy-page .privacy-content h5{margin-top:2em;font-size:var(--fs-card);letter-spacing:.02em}
.privacy-page .privacy-content p+p{margin-top:1em}
@media(max-width:900px){.about-page .about-mv-grid,.about-page .about-services-grid{grid-template-columns:1fr}}


/* page heroes with the live banner photo (News & Events, Careers, Contact Us): ink scrim over the photo, light type */
.page-hero--photo{color:#fff;background:linear-gradient(90deg,rgba(var(--rgb-ink),.9) 0%,rgba(var(--rgb-ink),.62) 55%,rgba(var(--rgb-ink),.35) 100%),var(--hero-photo) center/cover no-repeat;padding-block:clamp(72px,9vw,128px) clamp(56px,7vw,96px)}
.page-hero--photo h1{color:#fff}
.page-hero--photo p,.page-hero--photo .page-hero-intro p{color:rgba(var(--rgb-white),.82)}
.page-hero--photo .eyebrow{color:var(--orange-2)}
.page-hero--photo .breadcrumbs,.page-hero--photo .breadcrumbs a{color:rgba(var(--rgb-white),.75)}
.page-hero--photo .career-meta{color:rgba(var(--rgb-white),.85)}

/* News & Events + Careers: full-height photo hero. main.js measures the top bar and the nav into
   --hf-h / --nav-h (see "6a · Hero chrome math"), so the hero ends exactly at the fold; the copy
   is centred in the remaining height. Scoped to these two pages — the Contact hero keeps its mask. */
.news-page .page-hero--photo,.career-page .page-hero--photo{min-height:calc(100dvh - var(--hf-h,44px) - var(--nav-h,88px));display:flex;flex-direction:column;justify-content:center;padding-block:clamp(40px,6dvh,96px)}
.news-page .page-hero--photo>.wrap,.career-page .page-hero--photo>.wrap{width:100%}
@media(max-width:620px){
  .news-page .page-hero--photo,.career-page .page-hero--photo{min-height:calc(100dvh - var(--hf-h,113px) - var(--nav-h,88px))}
}

/* /products/ SAP feature: the live page's caption line under the media */
.products-page .sap-caption{margin-top:12px;text-align:center;font-size:var(--fs-sm);font-weight:600;color:var(--soft)}

/* ═══════════════════════════════════════════════════════════════
   SEO Hacker review revisions — "For Revision (IQ Team)", Sept 2026
   Each rule is tagged with the item id in REVISIONS.md.
   ═══════════════════════════════════════════════════════════════ */

/* A1 · listing cards (Blogs, News & Events, search results, related posts):
   the title, excerpt and "Read more" must line up across a row whatever the copy
   length. The media already shares an aspect-ratio and .tlink is bottom-pinned, so
   reserving a fixed line count for the title and excerpt is what locks the rows. */
.post-card-body{gap:10px}
/* the clamp lives on the anchor, not the title box: the title's link carries a
   padding/negative-margin tap target which would otherwise be counted inside the
   clamped box and spill a third, half-cut line. */
.post-card-body .card-title{min-height:calc(2em * var(--lh-heading));overflow:hidden}
.post-card-body .card-title a{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.post-card-body>p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  min-height:calc(3em * var(--lh-body));margin-bottom:4px;
}

/* A2 · job listing cards (/career/): job title, location, description and Read more
   align the same way. The location line and the description keep a reserved height so
   an opening with no location does not pull the rest of its card up. */
.career-card h3{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  min-height:calc(2em * var(--lh-heading));
}
.career-card .career-loc{min-height:calc(1em * var(--lh-body))}
.career-card h4+p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  min-height:calc(3em * var(--lh-body));
}

/* A3 · Share Article: the icons stay on one row. The label keeps its own line in the
   narrow article rail (it is an H4 on news items, part of the live heading outline),
   the tiles shrink rather than wrap. */
.post-share-links{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-width:0}
.post-share-links>a,.post-share-links>.post-copy{flex:0 1 42px;min-width:34px}
/* The icons stay on one row (that was the review's ask); the label keeps its own line inside
   the article rail, which is only 280px wide — inline it would not fit beside five tiles. */
@media(min-width:1024px){
  .post-share{flex-wrap:wrap}
  .post-rail .post-share-label{flex:0 0 100%;margin:0 0 2px}
}

/* A4 · in-page CTA panels (product pages, Our Services): the 20ch heading measure left
   a very wide empty margin either side of a long headline. Wider measure + tighter
   inline padding. The shared closing band keeps the homepage's narrow measure. */
.product-cta .cta-panel,.svc-cta-band .cta-panel{padding-inline:clamp(24px,3.2vw,48px)}
.product-cta .cta-panel h2,.svc-cta-band .cta-panel h2{max-width:44ch}
.product-cta .cta-panel p,.svc-cta-band .cta-panel p{max-width:78ch}

/* A5 · filled orange buttons carried white label text — 2.2:1 against #F88F10, which
   is what the review flagged as hard to read on the "Ready to get started?" panels.
   Ink on orange is 8.2:1 and keeps the brand fill. */
:root{--on-orange:#241A0D}
.dynamiq-cta a,.btn-orange,.btn-primary{color:var(--on-orange)}
.dynamiq-cta a:hover,.btn-orange:hover,.btn-primary:hover{color:var(--on-orange)}
.cta-panel .dynamiq-cta a,.cta-panel .btn-orange{color:var(--on-orange)}

/* G7/G8 · 404: the whole page reads centred (the hero was left-aligned against a centred
   body), and the two links sit in a spaced row instead of an inline run with no gap. */
.error404-page .page-hero{text-align:center}
.error404-page .page-hero h1,.error404-page .page-hero p{max-width:none;margin-inline:auto}
.error404-page .page-hero h1{max-width:20ch}
.error404-page .page-hero p{max-width:52ch}
.error404-page .not-found{padding-block:clamp(20px,3vw,44px) clamp(48px,7vw,96px)}
.not-found-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px;margin-top:28px}
@media(max-width:520px){
  .not-found-actions{flex-direction:column;gap:14px}
  .not-found-actions .btn{width:100%}
}

/* B1/B2 · /products/ SAP feature: the caption now lives in the media column, so the
   panel is back to two filled cells — screenshot left, copy right — instead of a
   caption alone in the right cell and the copy on an empty second row. */
.products-page .sap-media{display:grid;grid-template-rows:minmax(0,1fr) auto}
.products-page .sap-media>img{grid-row:1}
.products-page .sap-caption{position:relative;z-index:2;grid-row:2;padding-top:4px}

/* B3 · "Built in-house on SAP Business One": the head was a fixed
   180px box, so the title's third line bled into the product rows below. It gets a
   min-height and a wider measure, which also lands the title on two lines. */
.products-page .products-listing-head .sec-title{max-width:34ch}
@media(min-width:1180px){
  .products-page .products-listing-head .sec-title{max-width:38ch}
}

/* D1 · product page section heads: the eyebrow, H2 and intro copy share one measure, so
   the copy under a heading wraps to the heading's own width and left edge instead of
   being capped at a narrower 54ch column. */
.product-detail-page .portal-features-head{max-width:min(100%,54rem)}
.product-detail-page .portal-features-copy .portal-features-head>p{max-width:none;margin-top:14px}
.product-detail-page .features.has-showcase .portal-features-head{max-width:none}

/* D2 · the H3 subsections are cards again (the review asked for the previous design back);
   they had become a bordered list. Three up on a full-width section, two up beside a
   showcase image. */
.product-detail-page .portal-features .feature-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  margin-top:clamp(28px,4vw,44px);border-top:0;
}
.product-detail-page .portal-features .feature-group{
  display:flex;flex-direction:column;gap:12px;min-height:0;
  padding:clamp(24px,2.6vw,34px);border:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:16px;background:var(--color-surface);overflow:hidden;
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s;
}
.product-detail-page .portal-features .feature-group::before{
  display:block;content:"";position:absolute;width:160px;height:160px;border-radius:50%;
  right:-70px;top:-70px;background:rgba(var(--rgb-brand),.16);filter:blur(28px);pointer-events:none;
}
.product-detail-page .portal-features .feature-group{position:relative}
.product-detail-page .portal-features .feature-group:hover{
  transform:translateY(-4px);border-color:rgba(var(--rgb-brand),.4);
  box-shadow:0 24px 50px -26px rgba(var(--rgb-ink),.24);
}
.product-detail-page .portal-features .feature-group h3{position:relative;margin:0}
.product-detail-page .portal-features .feature-group p,
.product-detail-page .portal-features .feature-group ul{position:relative}
.product-detail-page .portal-features .feature-group ul{grid-template-columns:1fr}
/* No 2-up override for has-showcase sections any more: the cards row spans the whole
   section (.portal-features-items) rather than sitting inside the narrow copy column, so
   capping it at two columns wasted half the width and turned four cards into two rows.
   The .has-showcase part of the responsive rules below went with it for the same reason —
   the plain .portal-features selector already covers those widths. */
@media(max-width:980px){
  .product-detail-page .portal-features .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .product-detail-page .portal-features .feature-grid{grid-template-columns:1fr}
}

/* C1 · trust signals: the SAP partner credentials read as badges with icons rather than a
   bare bordered list. */
.trust-grid{
  /* 280px min caps the row at four, so six signals read as 4 + 2 rather than 5 + 1 orphan */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;
  list-style:none;padding:0;margin-top:clamp(28px,4vw,44px);
}
.trust-signal{
  display:flex;align-items:center;gap:16px;padding:20px 22px;
  border:1px solid var(--line);border-radius:14px;background:var(--card-grad);
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s;
}
.trust-signal:hover{
  transform:translateY(-3px);border-color:rgba(var(--rgb-brand),.42);
  box-shadow:0 20px 44px -24px rgba(var(--rgb-ink),.22);
}
.trust-badge{
  flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;border-radius:13px;
  background:rgba(var(--rgb-brand),.12);border:1px solid rgba(var(--rgb-brand),.3);
}
.trust-icon{width:26px;height:26px;fill:var(--orange-deep)}
.trust-signal h3{
  margin:0;font-size:var(--fs-body);font-weight:700;line-height:var(--lh-heading);
  letter-spacing:-.005em;color:var(--text);
}
@media(max-width:520px){
  .trust-signal{padding:16px 18px;gap:13px}
  .trust-badge{width:44px;height:44px;border-radius:11px}
  .trust-icon{width:22px;height:22px}
}

/* C2 · the "Ready To Get Started?" panel carries the enquiry form again. The panel is the
   dark ink gradient, so the fields invert onto it. */
.cta-form{position:relative;margin-top:clamp(26px,3.4vw,38px);text-align:left}
.cta-form .contact--us{max-width:820px;margin-inline:auto}
.cta-form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cta-form .field.full,.cta-form .submit-row{grid-column:1 / -1}
.cta-form input,.cta-form select,.cta-form textarea{
  width:100%;padding:13px 15px;border:1px solid rgba(var(--rgb-white),.24);border-radius:10px;
  background:rgba(var(--rgb-white),.08);color:var(--color-on-accent);font:inherit;
}
.cta-form textarea{min-height:104px;resize:vertical}
.cta-form input::placeholder,.cta-form textarea::placeholder{color:rgba(var(--rgb-white),.62)}
.cta-form select{color:rgba(var(--rgb-white),.62)}
.cta-form select:valid{color:var(--color-on-accent)}
.cta-form select option{color:var(--text);background:var(--color-surface)}
/* background-color is declared here on purpose: the generic .field focus rule (above) paints
   a focused field var(--panel) — white — and ties this rule on specificity, so without it the
   white text in a focused CTA field sat on a white box and typing was invisible. */
.cta-form input:focus,.cta-form select:focus,.cta-form textarea:focus{
  outline:none;border-color:var(--orange);background-color:rgba(var(--rgb-white),.14);box-shadow:0 0 0 3px rgba(var(--rgb-brand),.24);
}
.cta-form .field.invalid input,.cta-form .field.invalid select,.cta-form .field.invalid textarea{border-color:#ff8a80}
.cta-form .submit-row{display:flex;justify-content:center;margin-top:6px}
.cta-form .form-msg{margin-top:14px;text-align:center;color:rgba(var(--rgb-white),.86)}
@media(max-width:620px){.cta-form .row{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════
   F1 · Landing / promo page sections (inc/landing-sections.php)

   The SEO and SEM landing pages used to render as one 80ch article column, which the
   review rejected on all eleven of them. Each imported H2 group is now its own designed
   section, built from the components the rest of the site already uses — the product
   pages' card grid and FAQ, the trust signals, the home page's logo marquee — so the
   pages read as designed pages without a word of copy changing.
   ═══════════════════════════════════════════════════════════════ */

.lp-section{padding-block:clamp(48px,6vw,88px)}
.lp-section.is-alt{background:var(--bg-2)}
.lp-section+.lp-section{padding-top:clamp(48px,6vw,88px)}

/* section head · eyebrow, H2 and copy on one measure, as on the product pages (item D1) */
.lp-head{max-width:min(100%,54rem)}
.lp-head .eyebrow{display:block;margin-bottom:12px}
.lp-head h2{font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:-.035em;text-wrap:balance}
.lp-head p{margin-top:16px;color:var(--soft);font-size:var(--fs-lede);line-height:var(--lh-relaxed)}
.lp-head p+p{margin-top:.9em}
.lp-head.is-centred{max-width:min(100%,44rem);margin-inline:auto;text-align:center}
.lp-head a{color:var(--orange-deep);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.lp-head a:hover{color:var(--orange)}

/* split · copy beside one image, sides alternating down the page */
.lp-split-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,72px);align-items:center}
.lp-split.is-flipped .lp-split-media{order:-1}
/* the figures reserve their box: these images are lazy-loaded and remote, and without an
   aspect-ratio the figure collapsed to its own border until the image arrived. */
.lp-split-media{margin:0;width:100%;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2);aspect-ratio:4/3;max-height:440px}
.lp-split-media img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
  .lp-split-grid{grid-template-columns:1fr;gap:26px}
  .lp-split.is-flipped .lp-split-media{order:0}
  .lp-split-media{aspect-ratio:16/10;max-height:300px}
  .lp-inline-media img{max-height:300px}
}

/* an image inside a card / copy / list section sits under the head, full width */
/* An inline illustration is never upscaled: the imported stream mixes real section photos
   (~640px wide) with 54px icons the importer's size filter missed, and stretching those to
   the full column produced the huge blurred graphics the review saw. The image keeps its own
   size, capped to the column. */
.lp-inline-media{margin:clamp(24px,3vw,36px) 0 0;width:100%;display:flex;justify-content:center}
.lp-inline-media img{display:block;width:auto;max-width:100%;height:auto;max-height:420px;border-radius:16px}

/* cards · reuse the product pages' feature cards */
.lp-cards .feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(28px,4vw,44px)}
.lp-cards .feature-group{
  position:relative;display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden;
  padding:clamp(24px,2.6vw,34px);border:1px solid var(--line);border-radius:16px;
  background:var(--color-surface);
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s;
}
.lp-cards .is-alt .feature-group,.lp-section.is-alt .feature-group{background:var(--color-surface)}
.lp-cards .feature-group::before{
  content:"";position:absolute;width:160px;height:160px;right:-70px;top:-70px;border-radius:50%;
  background:rgba(var(--rgb-brand),.16);filter:blur(28px);pointer-events:none;
}
.lp-cards .feature-group:hover{
  transform:translateY(-4px);border-color:rgba(var(--rgb-brand),.4);
  box-shadow:0 24px 50px -26px rgba(var(--rgb-ink),.24);
}
.lp-cards .feature-group h3{position:relative;margin:0;font-size:var(--fs-card);line-height:var(--lh-heading);letter-spacing:-.015em}
.lp-cards .feature-group p{position:relative;color:var(--soft);font-size:var(--fs-sm);line-height:var(--lh-body)}
.lp-cards .feature-group ul{position:relative;display:grid;gap:8px;list-style:none;color:var(--soft);font-size:var(--fs-sm)}
.lp-cards .feature-group li{display:flex;gap:9px}
.lp-cards .feature-group li::before{content:"✓";flex:0 0 auto;color:var(--orange-deep);font-weight:900}
.lp-cards .feature-group a{color:var(--orange-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media(max-width:980px){.lp-cards .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.lp-cards .feature-grid{grid-template-columns:1fr}}

/* signals · the four credentials that were four bare stacked H3s (item F6) */
.lp-signals .trust-grid{margin-top:clamp(28px,4vw,44px)}

/* list · a bullet list as a checklist panel instead of a run of loose lines */
.lp-list-panel{
  margin-top:clamp(28px,4vw,40px);padding:clamp(26px,3vw,40px);
  border:1px solid var(--line);border-radius:18px;background:var(--card-grad);
}
/* auto-fit, not a fixed 2-up: these items are short phrases, and two 618px columns left
   most of the row empty and pushed six items onto three rows. */
.lp-checklist{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:14px 32px;list-style:none;padding:0;
}
.lp-checklist li{position:relative;padding-left:1.9em;color:var(--soft);font-size:var(--fs-body);line-height:var(--lh-body)}
.lp-checklist li::before{
  content:"✓";position:absolute;left:0;top:.05em;display:grid;place-items:center;
  width:1.35em;height:1.35em;border-radius:50%;font-size:.72em;font-weight:900;
  color:var(--orange-deep);background:rgba(var(--rgb-brand),.14);border:1px solid rgba(var(--rgb-brand),.3);
}
.lp-checklist a{color:var(--orange-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.lp-split-copy .lp-checklist,.lp-cards .lp-checklist{grid-template-columns:1fr;margin-top:clamp(20px,2.6vw,30px)}
.lp-list-panel .lp-checklist{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
@media(max-width:760px){.lp-checklist{grid-template-columns:1fr}}

/* faq · the product pages' accordion */
.lp-faq .faq-head{align-self:start}
.lp-faq .lp-head{max-width:none}
.lp-faq .faq-list{margin-top:0}

/* copy · prose sections keep the shared measure and the link styling */
.lp-copy .lp-head,.lp-list .lp-head{max-width:min(100%,58rem)}
.lp-extra{margin-top:clamp(20px,2.6vw,32px);color:var(--soft);font-size:var(--fs-body);line-height:var(--lh-body)}
.lp-extra img{width:100%;border-radius:16px;border:1px solid var(--line)}

/* logos · the promo pages' client-logo bands (item F8) */
.lp-logos{padding-bottom:clamp(36px,4.5vw,64px)}
.lp-logos .lp-head{margin-bottom:clamp(24px,3vw,40px)}

/* F7 · the hero's call to action */
.landing-hero .hero-actions .btn-ghost{display:inline-flex;align-items:center;gap:10px}
.landing-hero .hero-actions .btn-ghost svg{width:18px;height:18px;fill:currentColor}

/* F2/F3 · the page's own CTA panel, carrying the enquiry form */
.lp-cta .cta-panel{padding-inline:clamp(24px,3.2vw,48px)}
.lp-cta .cta-panel h2{max-width:44ch}
.lp-cta .cta-panel p{max-width:78ch}
.lp-cta-links{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 28px;margin-top:clamp(22px,3vw,32px);
}
.lp-cta-links .dynamiq-cta{margin-top:0}
.lp-cta-links .cta-phone{margin:0}

/* ═══ G1/G2 · Application Form (/application-form/) ═══
   The page had no form and closed with a CTA band that did not belong. Form beside the HR
   details and the live openings; no band. */
.application-body{padding-block:clamp(40px,5vw,72px) clamp(56px,7vw,96px)}
.application-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,4vw,64px);align-items:start}
.application-form-side h2{font-size:var(--fs-subheading);line-height:var(--lh-tight);letter-spacing:-.025em;margin-bottom:clamp(18px,2.4vw,28px)}
.application-aside{
  padding:clamp(26px,3vw,38px);border:1px solid var(--line);border-radius:18px;
  background:var(--card-grad);position:sticky;top:calc(var(--nav-h,64px) + 24px);
}
.application-aside h3{font-size:var(--fs-h3);line-height:var(--lh-heading);letter-spacing:-.02em}
.application-aside>p{margin-top:12px;color:var(--soft);font-size:var(--fs-sm);line-height:var(--lh-body)}
.application-contact{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:9px}
.application-contact li{color:var(--soft);font-size:var(--fs-sm);line-height:var(--lh-body)}
.application-contact a{color:var(--text);font-weight:700}
.application-contact a:hover{color:var(--orange-deep)}
.application-openings-label{
  margin:26px 0 12px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);
}
.application-openings{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:2px}
.application-openings li{border-top:1px solid var(--line)}
.application-openings li:last-child{border-bottom:1px solid var(--line)}
.application-openings a{display:block;padding:11px 0;font-weight:700;font-size:var(--fs-sm);color:var(--text)}
.application-openings a:hover{color:var(--orange-deep)}
.application-openings span{display:block;margin-top:2px;font-weight:400;font-size:var(--fs-xs);color:var(--faint)}
@media(max-width:900px){
  .application-grid{grid-template-columns:1fr}
  .application-aside{position:static}
}

/* ═══ G3-G6 · Thank-you pages ═══
   One centred confirmation panel and the next steps, in place of a bare H1 with a sales
   CTA band under it. */
.thankyou{padding-block:clamp(56px,8vw,110px) clamp(56px,7vw,100px)}
.thankyou-panel{
  position:relative;overflow:hidden;max-width:44rem;margin-inline:auto;text-align:center;
  padding:clamp(38px,5vw,68px) clamp(26px,3.4vw,52px);
  border:1px solid var(--line);border-radius:20px;background:var(--card-grad);
  box-shadow:var(--shadow);
}
.thankyou-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 260px at 50% -18%,rgba(var(--rgb-brand),.16),transparent 62%);
}
.thankyou-mark{
  position:relative;display:grid;place-items:center;width:66px;height:66px;margin:0 auto 22px;
  border-radius:50%;background:rgba(var(--rgb-brand),.14);border:1px solid rgba(var(--rgb-brand),.34);
}
.thankyou-mark svg{width:34px;height:34px;fill:var(--orange-deep)}
.thankyou-panel h1{position:relative;font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:-.04em}
.thankyou-copy{position:relative;margin-top:16px}
.thankyou-copy p{max-width:46ch;margin-inline:auto;color:var(--soft);font-size:var(--fs-lede);line-height:var(--lh-relaxed)}
.thankyou-copy p+p{margin-top:.8em}
.thankyou-phone{position:relative;margin-top:24px;font-size:var(--fs-sm);color:var(--soft)}
.thankyou-phone a{font-weight:700;color:var(--orange-deep)}
.thankyou-next{margin-top:clamp(40px,5vw,72px)}
.thankyou-next-label{
  text-align:center;margin-bottom:18px;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
}
.thankyou-next-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.thankyou-next-card{
  display:grid;gap:6px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;
  background:var(--color-surface);
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s;
}
.thankyou-next-card:hover{
  transform:translateY(-4px);border-color:rgba(var(--rgb-brand),.42);
  box-shadow:0 22px 46px -24px rgba(var(--rgb-ink),.22);
}
.thankyou-next-title{font-weight:700;font-size:var(--fs-card);letter-spacing:-.015em;color:var(--text)}
.thankyou-next-note{color:var(--soft);font-size:var(--fs-sm);line-height:var(--lh-body)}
.thankyou-next-card .arr{color:var(--orange-deep);font-weight:700;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.thankyou-next-card:hover .arr{transform:translateX(5px)}
@media(max-width:840px){.thankyou-next-grid{grid-template-columns:1fr}}

/* ═══ Card icons restored ═══
   The live product and landing pages carry a small branded PNG on every H3 card. They were
   dropped when the pages were rebuilt; these place them back on the card and inside the
   trust-signal badge, sized to the ~55px originals. */
/* The originals are pale orange line art, so they sit on a plain surface with a hairline
   rather than the brand tint the drawn SVG fallback uses — on the tint they wash out. */
.feature-icon{
  position:relative;display:grid;place-items:center;width:58px;height:58px;margin-bottom:6px;
  border-radius:14px;background:var(--color-surface);border:1px solid rgba(var(--rgb-brand),.28);
}
.feature-icon .item-icon{width:36px;height:36px;object-fit:contain}
.trust-badge:has(.item-icon){background:var(--color-surface);border-color:rgba(var(--rgb-brand),.28)}
.trust-badge .item-icon{width:34px;height:34px;object-fit:contain}
.lp-cards .feature-group .feature-icon{margin-bottom:2px}
@media(max-width:520px){
  .feature-icon{width:50px;height:50px;border-radius:12px}
  .feature-icon .item-icon{width:30px;height:30px}
}

/* Careers: the live page's culture photo between the intro and the core values. */
.career-culture-media{
  margin:clamp(28px,3.6vw,44px) auto clamp(32px,4vw,52px);max-width:1000px;width:100%;
  border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2);
  aspect-ratio:16/7;
}
.career-culture-media img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.career-culture-media{aspect-ratio:16/10}}

/* ═══════════════════════════════════════════════════════════════
   ONE-SCREEN COMPOSITIONS · landing / promo, application, thank-you
   The composition rule from the homepage: on desktop each focused thought takes the
   viewport left under the sticky nav. min-height (never height) so a section that
   genuinely holds more grows instead of clipping copy, and the type/media inside is
   height-aware so most sections land inside the one screen rather than just over it.
   Narrow layouts keep their natural height (below the 901px breakpoint).
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:901px){

  /* hero: the screen under the top bar and the nav, copy centred in it */
  .landing .landing-hero{
    min-height:calc(100dvh - var(--hf-h,44px) - var(--nav-h,88px));
    display:grid;align-items:center;
  }
  .landing .landing-hero-grid{padding-block:clamp(24px,4dvh,72px);width:100%}
  .landing .landing-hero h1{font-size:clamp(2rem,1.2rem + 1.6vw + 1vh,3.9rem)}
  .landing .landing-intro p{font-size:var(--fs-lede);line-height:1.55}
  .landing .landing-hero-media{aspect-ratio:4/3;max-height:min(56dvh,520px)}

  /* every built section takes one screen and centres its content in it */
  .lp-section{
    min-height:calc(100dvh - var(--nav-h,88px));
    display:grid;align-content:center;
    padding-block:clamp(28px,4.5dvh,56px);
  }
  .lp-section>.wrap{width:100%}

  /* height-aware section head: on a short laptop the H2 and intro give height back */
  .lp-head h2{font-size:clamp(1.75rem,1.1rem + 1.1vw + 1.1vh,3.25rem)}
  .lp-head p{font-size:clamp(.95rem,.9rem + .18vh,1.125rem);line-height:clamp(1.45,1.3 + .5vh,1.7)}
  .lp-head{margin-inline:0}

  /* an illustration inside a card/copy section is supporting art — it gives height first */
  .lp-inline-media img{max-height:min(32dvh,340px)}
  .lp-split-media{max-height:min(58dvh,440px)}

  /* cards: denser columns so a long set is 2 rows rather than 3, and dvh-aware padding */
  .lp-cards .feature-grid{
    grid-template-columns:repeat(auto-fit,minmax(clamp(215px,19vw,290px),1fr));
    gap:clamp(12px,1.5dvh,18px);margin-top:clamp(18px,3dvh,40px);
  }
  .lp-cards .feature-group{padding:clamp(17px,2.1dvh,30px);gap:clamp(7px,1dvh,12px)}
  .lp-cards .feature-group h3{font-size:clamp(1rem,.95rem + .35vh,1.375rem)}
  .lp-cards .feature-group p{font-size:clamp(.85rem,.82rem + .16vh,1rem);line-height:clamp(1.4,1.28 + .42vh,1.6)}
  .lp-cards .feature-icon{width:clamp(42px,5.2dvh,58px);height:clamp(42px,5.2dvh,58px);margin-bottom:0}
  .lp-cards .feature-icon .item-icon{width:clamp(24px,3.2dvh,36px);height:clamp(24px,3.2dvh,36px)}

  /* trust signals + checklist */
  .lp-signals .trust-grid{gap:clamp(12px,1.6dvh,18px);margin-top:clamp(20px,3.4dvh,44px)}
  .lp-signals .trust-signal{padding:clamp(14px,2dvh,22px)}
  .lp-list-panel{margin-top:clamp(20px,3.4dvh,40px);padding:clamp(20px,3dvh,40px)}
  .lp-checklist{gap:clamp(10px,1.5dvh,14px) 32px}

  /* the FAQ column scrolls inside its own screen rather than pushing the section taller */
  .lp-faq .faq-list summary{padding-block:clamp(12px,2dvh,20px)}

  /* The CTA panels carry a form, so they need the most trimming. Same budget for the
     landing CTA and the product page's "Ready To Get Started?" panel — one component. */
  .lp-cta{min-height:calc(100dvh - var(--nav-h,88px));display:grid;align-content:center;padding-block:clamp(24px,4dvh,56px)}
  .lp-cta .cta-panel,
  .product-cta .cta-panel{padding-block:clamp(26px,4.2dvh,56px)}
  .lp-cta .cta-panel h2,
  .product-cta .cta-panel h2{font-size:clamp(1.6rem,1.1rem + 1vw + 1vh,3rem)}
  .lp-cta .cta-panel p,
  .product-cta .cta-panel p{font-size:clamp(.9rem,.86rem + .18vh,1.125rem);line-height:clamp(1.4,1.3 + .4vh,1.7);margin-top:10px}
  .cta-form{margin-top:clamp(16px,2.6dvh,32px)}
  .cta-form input,.cta-form select,.cta-form textarea{padding:clamp(9px,1.5dvh,13px) 14px}
  .cta-form textarea{min-height:clamp(58px,7.5dvh,96px)}
  .cta-form .row{gap:clamp(8px,1.3dvh,12px)}
  .cta-form .submit-row{margin-top:2px}
  .lp-cta-links{margin-top:clamp(14px,2.4dvh,30px)}
  .product-cta .cta-panel .cta-kicker{margin-bottom:6px}
  .product-cta .cta-panel .cta-kicker-text{margin-bottom:10px}
  /* a 3-up field row on a wide panel: two fewer rows of fields */
  .cta-form .row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cta-form .field.full,.cta-form .submit-row{grid-column:1 / -1}

  /* Application Form: hero + the form beside the openings, one screen each */
  .application-page .page-hero{padding-block:clamp(36px,6dvh,96px) clamp(24px,3.4dvh,48px)}
  .application-body{
    min-height:calc(100dvh - var(--nav-h,88px));
    display:grid;align-content:center;padding-block:clamp(24px,4dvh,56px);
  }
  .application-body>.wrap{width:100%}
  .application-form-side h2{margin-bottom:clamp(12px,2dvh,26px)}
  .application-form .row{gap:clamp(8px,1.4dvh,12px)}
  .application-form input,.application-form select,.application-form textarea{padding:clamp(9px,1.5dvh,13px) 14px}
  .application-form textarea{min-height:clamp(70px,10dvh,120px)}
  .application-aside{padding:clamp(20px,3dvh,38px)}
  .application-openings a{padding-block:clamp(7px,1.2dvh,11px)}

  /* Thank-you: the panel and its next steps share one screen */
  .thankyou{
    min-height:calc(100dvh - var(--nav-h,88px));
    display:grid;align-content:center;padding-block:clamp(28px,4.5dvh,64px);
  }
  .thankyou>.wrap{width:100%}
  .thankyou-panel{padding:clamp(28px,4.4dvh,68px) clamp(24px,3.4vw,52px)}
  .thankyou-panel h1{font-size:clamp(1.9rem,1.3rem + 1.2vw + 1.2vh,3.625rem)}
  .thankyou-mark{width:clamp(48px,7dvh,66px);height:clamp(48px,7dvh,66px);margin-bottom:clamp(12px,2.2dvh,22px)}
  .thankyou-mark svg{width:clamp(26px,3.6dvh,34px);height:clamp(26px,3.6dvh,34px)}
  .thankyou-next{margin-top:clamp(24px,4dvh,72px)}
  .thankyou-next-card{padding:clamp(15px,2.4dvh,22px) clamp(18px,1.8vw,24px)}
}

@media (min-width:901px){
  /* A card section's illustration is supporting art, so it shares a row with the section
     head instead of stacking above the cards and pushing the section past one screen. */
  .lp-cards:has(>.wrap>.lp-inline-media)>.wrap,
  .lp-signals:has(>.wrap>.lp-inline-media)>.wrap,
  .lp-list:has(>.wrap>.lp-inline-media)>.wrap{
    display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    column-gap:clamp(28px,3.5vw,64px);align-items:center;
  }
  .lp-cards:has(>.wrap>.lp-inline-media)>.wrap>.lp-head,
  .lp-signals:has(>.wrap>.lp-inline-media)>.wrap>.lp-head,
  .lp-list:has(>.wrap>.lp-inline-media)>.wrap>.lp-head{grid-column:1;grid-row:1;max-width:none}
  .lp-cards>.wrap>.lp-inline-media,
  .lp-signals>.wrap>.lp-inline-media,
  .lp-list>.wrap>.lp-inline-media{grid-column:2;grid-row:1;margin-top:0}
  .lp-cards>.wrap>.lp-inline-media img,
  .lp-signals>.wrap>.lp-inline-media img,
  .lp-list>.wrap>.lp-inline-media img{max-height:min(46dvh,420px)}
  .lp-cards:has(>.wrap>.lp-inline-media)>.wrap>.feature-grid,
  .lp-cards:has(>.wrap>.lp-inline-media)>.wrap>.trust-grid,
  .lp-signals:has(>.wrap>.lp-inline-media)>.wrap>.trust-grid,
  .lp-list:has(>.wrap>.lp-inline-media)>.wrap>.lp-list-panel{grid-column:1 / -1}

  /* one more column on a wide screen keeps a six- or seven-card set to a single row */
  .lp-cards .feature-grid{grid-template-columns:repeat(auto-fit,minmax(clamp(198px,16.5vw,270px),1fr))}

  /* the CTA form: the last of the over-tall sections */
  .lp-cta .cta-panel p{margin-top:10px}
  .lp-cta .cta-form textarea{min-height:clamp(58px,7.5dvh,96px)}
  .lp-cta .cta-panel .cta-kicker{margin-bottom:6px}
  .lp-cta .cta-panel .cta-kicker-text{margin-bottom:10px}
}

@media (min-width:901px){
  /* In one-screen mode a card's icon sits on the title's line rather than above it: that is
     ~58px of height back per row, which is what decides whether a long card set fits. The
     copy itself is never shrunk past the shared scale, so a section holding genuinely more
     than a screen still grows (min-height, not height). */
  .lp-cards .feature-group{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;column-gap:14px}
  .lp-cards .feature-group .feature-icon{grid-row:1;grid-column:1;align-self:start}
  .lp-cards .feature-group h3{grid-row:1;grid-column:2;align-self:center}
  .lp-cards .feature-group>p,
  .lp-cards .feature-group>ul{grid-column:1 / -1}
  .lp-cards .feature-group:not(:has(.feature-icon)) h3{grid-column:1 / -1}
  .lp-cards .feature-grid{align-content:start}
}

@media (min-width:901px){
  /* Four wide columns beat five narrow ones: a wider card wraps its copy in fewer lines, so
     the row is shorter even though there are more rows. */
  .lp-cards .feature-grid{grid-template-columns:repeat(auto-fit,minmax(clamp(235px,19.5vw,318px),1fr))}
  /* the head-row art is an inset, not a feature: it gives the card rows their height back */
  .lp-cards>.wrap>.lp-inline-media img{max-height:min(30dvh,272px)}
  .lp-cards:has(>.wrap>.lp-inline-media)>.wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}

/* Product detail · the cards row spans the section, under the head + illustration. */
.portal-features-items{grid-column:1 / -1}
.portal-features-items .closing{margin-top:clamp(18px,2.4vw,28px);font-weight:600}
.portal-features-items .closing.is-plain{font-weight:400;color:var(--soft)} /* IQ Desk: closing copy reads as body text */

@media (min-width:901px){
  /* ONE SCREEN · product detail. The min-height already comes from
     `.product-detail-page main>section:not(.detail-hero)` further up (now fed by the
     measured --nav-h); these are the refinements that make the content actually fit it. */
  .product-detail-page main>section:not(.detail-hero){align-content:center}
  .product-detail-page .overview>.wrap,
  .product-detail-page .portal-features>.wrap,
  .product-detail-page .faq>.wrap,
  .product-detail-page .cta-section>.wrap{width:100%}

  /* head + illustration on one row, cards beneath */
  .product-detail-page .portal-features-layout{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    column-gap:clamp(28px,3.5vw,64px);row-gap:clamp(18px,3dvh,40px);
    align-items:center;
  }
  .product-detail-page .features:not(.has-showcase) .portal-features-layout{grid-template-columns:1fr}
  .product-detail-page .portal-features .showcase-frame img{max-height:min(34dvh,320px);width:auto;margin-inline:auto}
  .product-detail-page .portal-features-head{max-width:none}
  .product-detail-page .portal-features-copy h2{font-size:clamp(1.75rem,1.1rem + 1.1vw + 1.1vh,3.25rem)}
  .product-detail-page .portal-features-copy .portal-features-head>p{
    font-size:clamp(.95rem,.9rem + .18vh,1.125rem);line-height:clamp(1.45,1.3 + .5vh,1.65);
  }

  /* the cards themselves: four wide columns, icon inline with the title */
  .product-detail-page .portal-features .feature-grid{
    grid-template-columns:repeat(auto-fit,minmax(clamp(235px,19.5vw,318px),1fr));
    gap:clamp(12px,1.5dvh,18px);margin-top:0;align-content:start;
  }
  .product-detail-page .portal-features .feature-group{
    display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;
    column-gap:14px;gap:clamp(7px,1dvh,12px);padding:clamp(17px,2.1dvh,30px);
  }
  .product-detail-page .portal-features .feature-group .feature-icon{
    grid-row:1;grid-column:1;align-self:start;margin-bottom:0;
    width:clamp(42px,5.2dvh,58px);height:clamp(42px,5.2dvh,58px);
  }
  .product-detail-page .portal-features .feature-group .feature-icon .item-icon{
    width:clamp(24px,3.2dvh,36px);height:clamp(24px,3.2dvh,36px);
  }
  .product-detail-page .portal-features .feature-group h3{
    grid-row:1;grid-column:2;align-self:center;font-size:clamp(1rem,.95rem + .35vh,1.375rem);
  }
  .product-detail-page .portal-features .feature-group:not(:has(.feature-icon)) h3{grid-column:1 / -1}
  .product-detail-page .portal-features .feature-group>p,
  .product-detail-page .portal-features .feature-group>ul{grid-column:1 / -1}
  .product-detail-page .portal-features .feature-group p{
    font-size:clamp(.85rem,.82rem + .16vh,1rem);line-height:clamp(1.4,1.28 + .42vh,1.6);
  }
  .product-detail-page .trust-grid{gap:clamp(12px,1.6dvh,18px);margin-top:0}
  .product-detail-page .trust-signal{padding:clamp(14px,2dvh,22px)}

  /* the overview and FAQ give height back the same way */
  .product-detail-page .overview-grid{align-items:center}
  .product-detail-page .overview-media img{max-height:min(52dvh,480px)}
  .product-detail-page .overview-copy p{font-size:clamp(.95rem,.9rem + .18vh,1.125rem);line-height:clamp(1.45,1.3 + .5vh,1.7)}
  .product-detail-page .faq-list summary{padding-block:clamp(12px,2dvh,20px)}
}

@media (min-width:901px){
  /* ONE SCREEN · Careers. The culture band carried two heads, a photo and the four values,
     which ran to two screens; the photo and the type are height-aware and the values sit in
     one row. The openings and the HR block each take their own screen. */
  .career-page .career-jobs,
  .career-page .career-join,
  .career-page .career-culture,
  .career-page .career-hr{
    min-height:calc(100dvh - var(--nav-h,88px));
    display:grid;align-content:center;
    padding-block:clamp(28px,4.5dvh,56px);
  }
  .career-page .career-jobs>.wrap,
  .career-page .career-culture>.wrap{width:100%}
  .career-page .sec-head h2,
  .career-page .career-values-head h2{font-size:clamp(1.6rem,1.05rem + 1vw + 1vh,3rem)}
  .career-page .sec-head{margin-bottom:clamp(16px,2.6dvh,34px)}
  .career-page .career-culture-media{
    aspect-ratio:auto;height:clamp(140px,22dvh,240px);margin-block:clamp(14px,2.4dvh,32px);
  }
  .career-page .career-values-head{margin-bottom:clamp(12px,2dvh,24px)}
  .career-page .career-values{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6dvh,18px)}
  .career-page .career-values .feature-group{padding:clamp(16px,2.2dvh,28px);min-height:0}
  .career-page .career-values .feature-group h3{font-size:clamp(1rem,.95rem + .35vh,1.375rem);margin-bottom:0}
  .career-page .career-values .feature-group p{
    font-size:clamp(.85rem,.82rem + .16vh,1rem);line-height:clamp(1.4,1.28 + .42vh,1.6);margin-top:8px;
  }
  .career-page .career-values .feature-icon{
    width:clamp(42px,5.2dvh,58px);height:clamp(42px,5.2dvh,58px);margin-bottom:clamp(8px,1.4dvh,14px);
  }
  .career-page .career-values .feature-icon .item-icon{width:clamp(24px,3.2dvh,36px);height:clamp(24px,3.2dvh,36px)}
  /* the openings grid: four columns and height-aware cards, so eight roles are two rows */
  .career-page .career-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6dvh,18px)}
  .career-page .career-card{padding:clamp(16px,2.2dvh,26px)}
  .career-page .career-filter{margin-bottom:clamp(12px,2dvh,22px)}
}

@media (min-width:901px){
  /* The shared closing band and contact section are chunks too, so on sub-pages they take a
     screen like every other band (the home page and Our Services already do this). */
  .sub-page .cta-section:not(.product-cta):not(.lp-cta),
  .sub-page .contact-us{
    display:grid;align-content:center;
    padding-block:clamp(28px,4.5dvh,56px);
  }
  .sub-page .cta-section:not(.product-cta):not(.lp-cta)>.wrap,
  .sub-page .contact-us>.wrap{width:100%}
}

/* The CTA panel now has a form, so its submit is the primary action and the standing
   "free business analysis" link beside it becomes the secondary one — two solid orange
   buttons stacked on mobile read as competing calls to action. */
.lp-cta-links .dynamiq-cta a{
  background:transparent;color:var(--color-on-accent);
  border:1.5px solid rgba(var(--rgb-white),.42);box-shadow:none;
}
.lp-cta-links .dynamiq-cta a:hover{
  background:rgba(var(--rgb-brand),.16);border-color:var(--orange);
  color:var(--color-on-accent);box-shadow:none;transform:translateY(-2px);
}
@media(max-width:620px){
  .lp-cta-links{flex-direction:column;align-items:stretch;gap:12px}
  .lp-cta-links .dynamiq-cta a{justify-content:center;width:100%}
  .lp-cta-links .cta-phone{justify-content:center}
}

/* Tablet and phone: the section art is capped against the viewport too, so a portrait
   illustration cannot take most of the screen before the copy it belongs to. */
@media (max-width:900px){
  .product-detail-page .portal-features .showcase-frame img{max-height:min(420px,40dvh)}
  .product-detail-page .overview-media img{max-height:min(400px,38dvh)}
  .lp-inline-media img{max-height:min(320px,34dvh)}
  .lp-split-media{aspect-ratio:16/10;max-height:min(340px,36dvh)}
  .career-culture-media{aspect-ratio:16/9;max-height:min(300px,32dvh)}
}
@media (max-width:600px){
  .product-detail-page .portal-features .showcase-frame img,
  .product-detail-page .overview-media img{max-height:min(300px,32dvh)}
  .lp-inline-media img{max-height:min(240px,28dvh)}
  .lp-split-media{max-height:min(260px,30dvh)}
  /* the mobile floors from the design guide: 13px copy, 44px touch targets */
  .lp-cards .feature-group p,
  .career-page .career-values .feature-group p{font-size:.8125rem;line-height:1.55}
  .lp-head p{font-size:.9375rem;line-height:1.6}
  .lp-checklist li{font-size:.9375rem}
  .trust-signal h3{font-size:.9375rem}
  .application-openings a,
  .lp-faq .faq-list summary{min-height:44px}
  .thankyou-next-card{min-height:44px}
}

@media (max-width:600px){
  /* the fields are full width, so the submit should be too */
  .cta-form .submit-row .btn,
  .application-form .submit-row .btn{width:100%;justify-content:center}
}

/* Short laptops (1280x720, 1366x768): the height budget drops to ~630-680px, so the
   remaining give has to come from padding, gaps and the supporting art — the type is
   already at the 13px floor from the design guide and must not go below it. */
@media (min-width:901px) and (max-height:820px){
  .lp-section,
  .lp-cta,
  .career-page .career-jobs,
  .career-page .career-join,
  .career-page .career-culture,
  .career-page .career-hr,
  .sub-page .cta-section:not(.product-cta):not(.lp-cta),
  .sub-page .contact-us{padding-block:clamp(20px,3.2dvh,34px)}

  .lp-cards>.wrap>.lp-inline-media img{max-height:min(26dvh,210px)}
  .lp-split-media{max-height:min(50dvh,340px)}
  .product-detail-page .portal-features .showcase-frame img{max-height:min(28dvh,240px)}
  .product-detail-page .overview-media img{max-height:min(44dvh,360px)}

  .lp-head p,
  .product-detail-page .portal-features-copy .portal-features-head>p{margin-top:10px}
  .lp-cards .feature-grid,
  .product-detail-page .portal-features .feature-grid,
  .lp-signals .trust-grid,
  .product-detail-page .trust-grid{gap:10px}
  .lp-cards .feature-group,
  .product-detail-page .portal-features .feature-group{padding:15px 16px;gap:6px}
  .lp-cards .feature-icon,
  .product-detail-page .portal-features .feature-group .feature-icon{width:38px;height:38px}
  .lp-cards .feature-icon .item-icon,
  .product-detail-page .portal-features .feature-group .feature-icon .item-icon{width:22px;height:22px}

  .cta-form{margin-top:14px}
  .cta-form .row{gap:8px}
  .cta-form input,.cta-form select,.cta-form textarea{padding:8px 12px}
  .cta-form textarea{min-height:54px}
  .lp-cta-links{margin-top:12px}
  .career-page .career-culture-media{height:clamp(110px,16dvh,170px);margin-block:12px}
  .career-page .career-values .feature-group,
  .career-page .career-card{padding:14px 15px}
}

/* ═══ Card art that is a full-size photo, not an icon ═══
   The live pages give these their own row — heading and copy beside a large photograph —
   so a 638x471 image is never squeezed into an icon badge. Sides alternate down the stack. */
.lp-photo-rows{display:grid;gap:clamp(24px,3.5vw,56px);margin-top:clamp(24px,3.5vw,48px)}
.lp-photo-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.5vw,64px);align-items:center;
}
.lp-photo-row.is-flipped .lp-photo-media{order:-1}
.lp-photo-copy h3{
  font-size:clamp(1.375rem,1.1rem + 1vw,2rem);line-height:var(--lh-tight);
  letter-spacing:-.025em;margin-bottom:14px;
}
.lp-photo-copy p{color:var(--soft);font-size:var(--fs-body);line-height:var(--lh-body)}
.lp-photo-copy p+p{margin-top:.85em}
.lp-photo-copy a{color:var(--orange-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.lp-photo-media{
  margin:0;width:100%;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:var(--bg-2);aspect-ratio:4/3;max-height:420px;
}
.lp-photo-media img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
  .lp-photo-row{grid-template-columns:1fr;gap:20px}
  .lp-photo-row.is-flipped .lp-photo-media{order:0}
  .lp-photo-media{aspect-ratio:16/10;max-height:min(320px,34dvh)}
}
@media(min-width:901px){
  /* one row per screen reads better than three crammed together */
  .lp-photos{min-height:calc(100dvh - var(--nav-h,88px));display:grid;align-content:center}
  .lp-photo-media{max-height:min(46dvh,420px)}
  .lp-photo-rows{gap:clamp(20px,3dvh,44px)}
}

/* ═══ Card grids: no card left alone on its own row ═══
   The four-column grid leaves an orphan whenever the count is 4n+1 — five cards render 4 + 1,
   nine render 4 + 4 + 1. Those counts take five columns instead, so five sit in one row and
   nine in 5 + 4. Selected by exact child count, so every other count keeps the four-column
   measure the one-screen work is tuned around. Only where the columns stay wide enough. */
@media (min-width:1180px){
  .lp-cards .feature-grid:has(> :last-child:nth-child(5)),
  .lp-cards .feature-grid:has(> :last-child:nth-child(9)),
  .product-detail-page .portal-features .feature-grid:not(.is-media,.is-one-up,.is-two-up,.is-three-up):has(> :last-child:nth-child(5)),
  .product-detail-page .portal-features .feature-grid:not(.is-media,.is-one-up,.is-two-up,.is-three-up):has(> :last-child:nth-child(9)){
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}

/* ═══ Landing pages · four-card sets, head-row photo, copy sections sized to content ═══
   Three things the review saw on /accounting-system-philippines/: a four-card set rendered
   3 + 1 with the last card alone on its row; the photo beside the section head was a 272px
   thumbnail adrift in its column; and a copy-only section was stretched to a full screen, so
   its heading sat a third of the way down under nothing. */

/* The column count follows the card count, so no row is ever left half empty: two cards take
   two columns, three take three, four and eight take four (two where four won't fit), six take
   three (3 + 3, not 4 + 2). Five and nine already take five (below). */
@media (min-width:901px){
  .lp-cards .feature-grid:has(> :last-child:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-cards .feature-grid:has(> :last-child:nth-child(3)),
  .lp-cards .feature-grid:has(> :last-child:nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1180px){
  .lp-cards .feature-grid:has(> :last-child:nth-child(4)),
  .lp-cards .feature-grid:has(> :last-child:nth-child(8)){grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:901px) and (max-width:1179px){
  .lp-cards .feature-grid:has(> :last-child:nth-child(4)),
  .lp-cards .feature-grid:has(> :last-child:nth-child(8)){grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* The head-row photo runs the full height of the copy beside it: the figure stretches to the
   row and the image is absolutely positioned inside it, so the photo (a 638×829 portrait here)
   fills the panel without dictating the row's height. Every inline image on these pages is a
   real section photo (638px+ wide), so covering the panel never upscales an icon. */
@media (min-width:901px){
  .lp-cards:has(>.wrap>.lp-inline-media)>.wrap{align-items:stretch}
  .lp-cards>.wrap>.lp-inline-media{position:relative;display:block;align-self:stretch;min-height:260px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
  .lp-cards>.wrap>.lp-inline-media img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center;border-radius:0}
  /* Every built section is as tall as its content, with the site's section rhythm. The
     one-screen minimum centred a few paragraphs in a 900px box and left 250–630px of dead
     space above and below cards, FAQs and logo strips alike. */
  .lp-section{min-height:0;padding-block:clamp(56px,7vw,96px)}
}

/* Stacked: the photo is a full-width 16:10 panel between the copy and the cards, not a
   thumbnail floating in the middle of the column. */
@media (max-width:900px){
  .lp-cards>.wrap>.lp-inline-media{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
  .lp-cards>.wrap>.lp-inline-media img{width:100%;aspect-ratio:16/10;max-height:300px;object-fit:cover;object-position:center;border-radius:0}
}

/* ═══ Product pages · the same three fixes as the landing pages ═══
   Seen on /products/sap-business-one-philippines/ at a 1365px window: a four-card set rendered
   3 + 1 once the auto-fit grid dropped a column; and every section was stretched to a full
   screen, leaving 300–550px of dead space around an overview, a card set or the FAQ. */
@media (min-width:901px){
  .product-detail-page .portal-features .feature-grid:not(.is-media,.is-one-up,.is-two-up,.is-three-up):has(> :last-child:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-detail-page .portal-features .feature-grid:not(.is-media,.is-one-up,.is-two-up,.is-three-up):has(> :last-child:nth-child(3)),
  .product-detail-page .portal-features .feature-grid:not(.is-media,.is-one-up,.is-two-up,.is-three-up):has(> :last-child:nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Sections are as tall as their content, on the "Revamp Dynamiq" mockup's rhythm: the design
     frame is 1920 wide and its sections carry ~100px above and below (H2-to-H2 gaps of 190–230px
     including line-height), so the padding scales with the width — 100px at 1920, 75px at 1440,
     71px at 1366. The fixed 56–96px value it replaces was 96px at every laptop width, and the
     short-laptop override collapsed the same gap to ~25px, so the spacing jumped with screen
     height — the review caught the 200px band under a spec table. */
  .product-detail-page main>section:not(.detail-hero){min-height:0;padding-block:clamp(48px,5.2vw,100px)}
  /* Continuation blocks (an untitled section carrying on the H2 above it — IQ Link, IQ Ecom):
     the mockup runs table → next head row at ~72px and head row → table at ~100px, not two
     full section paddings stacked. */
  .product-detail-page main>section:has(+ .portal-features.is-untitled){padding-bottom:clamp(10px,1vw,20px)}
  .product-detail-page main>section.portal-features.is-untitled{padding-top:clamp(12px,1.2vw,24px)}
}
/* A lone photo card followed by a table is the mockup's "head row" (IQ Link): the picture panel and
   the copy sit straight on the page, no card around them. Multi-card photo sets (IQ REM, IQ Ecom)
   keep their cards, as drawn. */
.product-detail-page .portal-features .feature-grid.is-media>.is-media-card:only-child{padding:0;border:0;background:none;box-shadow:none}
/* an untitled continuation block has an empty copy column; left in the grid it still cost a row
   gap plus the card grid's top margin above the items (:has() cannot nest, hence the sibling form) */
.product-detail-page .portal-features .portal-features-layout>.portal-features-copy:not(:has(h2,p,ul,ol)){display:none}
.product-detail-page .portal-features .portal-features-layout>.portal-features-copy:not(:has(h2,p,ul,ol))~.portal-features-items .feature-grid{margin-top:0}
@media (min-width:1180px){
  .product-detail-page .portal-features .feature-grid:not(.is-media,.is-one-up,.is-two-up,.is-three-up):has(> :last-child:nth-child(4)),
  .product-detail-page .portal-features .feature-grid:not(.is-media,.is-one-up,.is-two-up,.is-three-up):has(> :last-child:nth-child(8)){grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:901px) and (max-width:1179px){
  .product-detail-page .portal-features .feature-grid:not(.is-media,.is-one-up,.is-two-up,.is-three-up):has(> :last-child:nth-child(4)),
  .product-detail-page .portal-features .feature-grid:not(.is-media,.is-one-up,.is-two-up,.is-three-up):has(> :last-child:nth-child(8)){grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* The showcase beside a product section's head runs the full height of the copy, as a panel.
   A photograph (.is-photo — JPEG, or a PNG with no alpha channel, decided in PHP) fills the
   panel edge to edge; a product mockup or UI screen sits whole inside it on the same soft
   gradient the product overview uses, so a laptop render is never cropped. */
@media (min-width:901px){
  .product-detail-page .features.has-showcase .portal-features-layout{align-items:stretch}
  .product-detail-page .portal-features .showcase-frame{position:relative;display:block;align-self:stretch;min-height:280px;padding:0;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#f0f1f2,#fff);overflow:hidden}
  .product-detail-page .portal-features .showcase-frame img{position:absolute;inset:0;width:100%;height:100%;max-height:none;margin:0;padding:clamp(18px,2.2vw,32px);object-fit:contain;object-position:center;filter:none}
  .product-detail-page .portal-features .showcase-frame.is-photo{background:var(--bg-2)}
  .product-detail-page .portal-features .showcase-frame.is-photo img{padding:0;object-fit:cover}
}
@media (max-width:900px){
  .product-detail-page .portal-features .showcase-frame{position:relative;width:100%;aspect-ratio:16/10;max-height:360px;padding:0;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#f0f1f2,#fff);overflow:hidden}
  .product-detail-page .portal-features .showcase-frame img{position:absolute;inset:0;width:100%;height:100%;max-height:none;margin:0;padding:16px;object-fit:contain;filter:none}
  .product-detail-page .portal-features .showcase-frame.is-photo{background:var(--bg-2)}
  .product-detail-page .portal-features .showcase-frame.is-photo img{padding:0;object-fit:cover}
}

/* six trust signals read 3 + 3, not 4 + 2 */
@media (min-width:901px){
  .trust-grid:has(> :last-child:nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ═══ Product hero · one composition for all nine products ═══
   Review of the product pages: the H1 ran to four lines at 63px and out-shouted the product;
   the screenshot (a flat PNG with its own orange offset frame) sat straight on a ghosted stock
   photo with nothing separating the two, so the page read as a collage — a dark UI sidebar
   simply dissolved into the photograph. The photo now stays as texture behind a heavier scrim,
   and the screenshot sits on a frosted panel: one clean surface, the same card language as
   every section below. The H1 is sized to hold in three lines beside it. */
.product-template-page .product-hero-bg{background-image:linear-gradient(90deg,rgba(255,255,255,.985) 0%,rgba(255,255,255,.96) 46%,rgba(255,255,255,.84) 74%,rgba(255,255,255,.88) 100%),var(--product-hero-bg)}
.product-detail-page.product-template-page .hero-copy h1{max-width:18ch;font-size:clamp(2.2rem,1.35rem + 1.7vw,3.3rem);line-height:1.04;letter-spacing:-.04em}
.product-detail-page.product-template-page .hero-copy p{max-width:56ch}
.product-detail-page.product-template-page .hero-media{position:relative;display:grid;place-items:center;min-height:0;padding:clamp(18px,2.4vw,34px)}
.product-detail-page.product-template-page .hero-media::before{content:"";display:block;position:absolute;inset:0;border-radius:24px;background:rgba(255,255,255,.62);border:1px solid rgba(var(--rgb-ink),.1);box-shadow:0 34px 80px -44px rgba(var(--rgb-ink),.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.product-detail-page.product-template-page .hero-media img{position:relative;z-index:1;display:block;width:100%;max-width:100%;height:auto;max-height:min(440px,56dvh);object-fit:contain;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 18px 28px rgba(var(--rgb-ink),.14))}
@media (min-width:981px){
  .product-detail-page.product-template-page .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.94fr);gap:clamp(36px,5vw,80px);align-items:center;padding-block:clamp(28px,5dvh,64px) clamp(48px,7dvh,88px)}
}
@media (max-width:980px){
  .product-detail-page.product-template-page .hero-media{order:-1;padding:clamp(14px,4vw,24px)}
  .product-detail-page.product-template-page .hero-media::before{display:block;border-radius:18px}
  .product-detail-page.product-template-page .hero-media img{width:100%;max-height:min(46dvh,360px)}
  .product-detail-page.product-template-page .hero-copy h1{max-width:none;font-size:clamp(1.7rem,1.2rem + 2.6vw,2.6rem)}
}
@media (max-width:620px){
  .product-detail-page.product-template-page .hero-media img{max-height:min(34dvh,260px)}
}

/* ONE SCREEN, held from the inside. The hero is min-height one viewport, but nothing stopped the
   copy column from outgrowing it: 5dvh + 7dvh of grid padding plus the copy's own 7dvh bottom
   padding (~167px at 900 tall) sat under a logo, a three-line H1, a 56ch description and the CTA,
   so IQ Ai ran 75px past the fold at 1440×900 and most products ran over at 1366×768 and on phones.
   Every part of the column is sized from the viewport height now, the way the home banner is, so
   the copy shrinks with the screen instead of pushing the fold down. */
@media (min-width:981px){
  .product-detail-page.product-template-page .hero-grid{padding-block:clamp(12px,2.4dvh,28px) clamp(16px,3dvh,36px)}
  .product-detail-page.product-template-page .hero-copy{padding-bottom:0}
  .product-detail-page.product-template-page .hero-logo{max-height:clamp(40px,7dvh,68px);margin-bottom:clamp(8px,1.6dvh,16px)}
  .product-detail-page.product-template-page .hero-copy h1{font-size:min(clamp(2.2rem,1.35rem + 1.7vw,3.3rem),6.2dvh)}
  .product-detail-page.product-template-page .hero-copy p{margin-top:clamp(8px,1.5dvh,14px);font-size:clamp(.95rem,.55rem + 1.1dvh,1.125rem);line-height:1.5}
  .product-detail-page.product-template-page .hero-actions{margin-top:clamp(12px,2dvh,16px)}
}
@media (min-width:981px) and (max-height:800px){
  .product-detail-page.product-template-page .hero-copy h1{max-width:20ch}
  .product-detail-page.product-template-page .hero-copy p{font-size:.95rem;line-height:1.45}
  /* a three-paragraph description (IQ Ai) on a 720px-tall laptop */
  .product-detail-page.product-template-page .detail-hero:has(.hero-copy p:nth-of-type(3)) .hero-copy h1{font-size:min(clamp(2.2rem,1.35rem + 1.7vw,3.3rem),5.6dvh)}
  .product-detail-page.product-template-page .detail-hero:has(.hero-copy p:nth-of-type(3)) .hero-copy p{font-size:.9rem;line-height:1.4}
}
@media (max-width:620px){
  .product-detail-page.product-template-page .breadcrumbs{padding-top:8px}
  .product-detail-page.product-template-page .hero-grid{gap:clamp(12px,1.8dvh,20px);padding-block:clamp(6px,1.2dvh,12px) clamp(14px,2.4dvh,28px)}
  .product-detail-page.product-template-page .hero-media{padding:clamp(10px,3vw,18px)}
  .product-detail-page.product-template-page .hero-media img{width:auto;max-width:100%;max-height:min(24dvh,220px)}
  .product-detail-page.product-template-page .hero-logo{max-height:36px;margin-bottom:8px}
  .product-detail-page.product-template-page .hero-copy h1{font-size:clamp(1.5rem,1.05rem + 2.4vw,2.4rem)}
  .product-detail-page.product-template-page .hero-copy p{margin-top:8px;font-size:.95rem;line-height:1.45}
  .product-detail-page.product-template-page .hero-actions{margin-top:10px}
  .product-detail-page.product-template-page .hero-actions .btn{min-height:48px;padding-block:12px}
  /* a three-paragraph description (IQ Ai) cannot share a phone screen with a full-size shot */
  .product-detail-page.product-template-page .detail-hero:has(.hero-copy p:nth-of-type(3)) .hero-media img{max-height:min(14dvh,120px)}
  .product-detail-page.product-template-page .detail-hero:has(.hero-copy p:nth-of-type(3)) .hero-copy h1{font-size:clamp(1.4rem,1rem + 2.2vw,2.2rem)}
  .product-detail-page.product-template-page .detail-hero:has(.hero-copy p:nth-of-type(3)) .hero-copy p{font-size:.9rem;line-height:1.4}
}
/* Short phones (375×667, 360×640): the top bar and nav leave ~480px. The shot becomes a thumbnail
   above the copy and the type steps down one notch so the CTA stays on the first screen. */
@media (max-width:620px) and (max-height:700px){
  .product-detail-page.product-template-page .hero-grid{gap:10px;padding-block:4px 14px}
  .product-detail-page.product-template-page .hero-media{padding:8px}
  .product-detail-page.product-template-page .hero-media img{max-height:clamp(72px,13dvh,110px)}
  /* a 60px thumbnail no longer earns its row under a three-paragraph description; the overview
     section right below carries the product shot */
  .product-detail-page.product-template-page .detail-hero:has(.hero-copy p:nth-of-type(3)) .hero-media{display:none}
  .product-detail-page.product-template-page .hero-logo{max-height:28px;margin-bottom:6px}
  .product-detail-page.product-template-page .hero-copy h1{font-size:clamp(1.3rem,.95rem + 1.9vw,1.6rem);line-height:1.08}
  .product-detail-page.product-template-page .hero-copy p{margin-top:6px;font-size:.9rem;line-height:1.38}
  .product-detail-page.product-template-page .detail-hero:has(.hero-copy p:nth-of-type(3)) .hero-copy p{font-size:.85rem;line-height:1.32}
  .product-detail-page.product-template-page .hero-actions{margin-top:8px}
  .product-detail-page.product-template-page .hero-actions .btn{min-height:44px;padding-block:10px}
}

/* Titles-only card sets (IQ Ai's "Key Capabilities"): a row of equal cards with a check mark
   where no icon exists, five across where they fit — not a run of unlabelled pills wrapping 4 + 1. */
.trust-badge:empty{display:grid;place-items:center;color:var(--brand-dark);font-size:1.15rem;font-weight:900;line-height:1}
.trust-badge:empty::before{content:"✓"}
@media (min-width:1180px){
  .product-detail-page .trust-grid:has(> :last-child:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}
  .product-detail-page .trust-grid:has(> :last-child:nth-child(5)) .trust-signal{flex-direction:column;align-items:flex-start;gap:14px;padding:22px 20px}
}
@media (min-width:901px){
  .product-detail-page .trust-grid:has(> :last-child:nth-child(3)),
  .product-detail-page .trust-grid:has(> :last-child:nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* A section's plain list (IQ Ai's five capabilities) is a two-column check list under the head,
   in the same voice as the check lists inside the feature cards — not a row of unlabelled pills
   wrapping 4 + 1. */
.product-detail-page .portal-features .feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;margin:clamp(18px,2.4vw,28px) 0 0;padding:0;list-style:none;max-width:44rem}
.product-detail-page .portal-features .feature-list li{position:relative;display:flex;align-items:flex-start;gap:12px;margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card-grad);color:var(--text);font-size:var(--fs-body);font-weight:600;line-height:var(--lh-heading)}
.product-detail-page .portal-features .feature-list li::before{content:"✓";flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;margin-top:-2px;border-radius:8px;background:rgba(var(--rgb-brand),.12);color:var(--brand-dark);font-weight:900;font-size:.9rem}
@media (max-width:560px){.product-detail-page .portal-features .feature-list{grid-template-columns:1fr}}

/* Product images without frames: the hero screenshot floats on the scrim with only its own
   shadow (no frosted panel, no hairline), and the overview / showcase panels keep their soft
   fill but lose the 1px outline. */
.product-detail-page.product-template-page .hero-media::before{display:none}
.product-detail-page.product-template-page .hero-media{padding:0}
.product-detail-page.product-template-page .hero-media img{filter:drop-shadow(0 26px 40px rgba(var(--rgb-ink),.18))}
.product-detail-page .overview-media,
.product-detail-page .portal-features .showcase-frame,
.product-detail-page .portal-features .showcase-frame.is-photo{border:0}
@media (max-width:980px){
  .product-detail-page.product-template-page .hero-media::before{display:none}
  .product-detail-page.product-template-page .hero-media{padding:0}
}

/* No panel behind product mockups at all: the showcase and overview frames are transparent,
   the render floats on the section with its own shadow. Photos keep filling their frame. */
.product-detail-page .portal-features .showcase-frame:not(.is-photo),
.product-detail-page .overview-media{background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible}
.product-detail-page .portal-features .showcase-frame:not(.is-photo) img{padding:0;object-fit:contain;filter:drop-shadow(0 24px 36px rgba(var(--rgb-ink),.16))}
.product-detail-page .overview-media img{filter:drop-shadow(0 24px 36px rgba(var(--rgb-ink),.16))}

/* Cards without the orange corner tint: the blurred disc in the top-right of feature cards is gone
   on product and landing pages alike; the card is border, radius and surface only. */
.product-detail-page .portal-features .feature-group::before,
.lp-cards .feature-group::before,
.feature-group::before{display:none}

/* ═══ SEO Hacker review, 09-14 round (theme 1.3.2) ═══ */

/* Form: a two-field row (the Industry / How-did-you-find-us selects) spans the panel like the
   three-field rows above it, instead of leaving a hole in the third column. */
@media (min-width:901px){
  /* The form is one grid with every field a direct child, so the two selects were cells 7-8 of
     a three-column grid with cell 9 empty. Six tracks: text fields span two, the selects span
     three, so the pair fills the row. */
  .cta-form .row{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cta-form .row>.field{grid-column:span 2}
  .cta-form .row>.field--select{grid-column:span 3}
  .cta-form .row>.field.full,.cta-form .row>.submit-row{grid-column:1 / -1}
}

/* Cards: four to a set read 2 x 2 (wider cards, fewer wrapped lines); eight and nine read three
   per row. Two, three, five and six keep their rules from 1.3.1. */
@media (min-width:901px){
  .lp-cards .feature-grid:has(> :last-child:nth-child(4)),
  .product-detail-page .portal-features .feature-grid:not(.is-media,.is-one-up,.is-two-up,.is-three-up):has(> :last-child:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-cards .feature-grid:has(> :last-child:nth-child(8)),
  .lp-cards .feature-grid:has(> :last-child:nth-child(9)),
  .product-detail-page .portal-features .feature-grid:not(.is-media,.is-one-up,.is-two-up,.is-three-up):has(> :last-child:nth-child(8)),
  .product-detail-page .portal-features .feature-grid:not(.is-media,.is-one-up,.is-two-up,.is-three-up):has(> :last-child:nth-child(9)){grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* The check panel ("What Does an IT Solutions Company Do?"): three columns of pill items rather
   than four columns of two-word lines adrift in a wide box. */
.lp-list-panel .lp-checklist{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}
.lp-list-panel .lp-checklist li{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--color-surface);color:var(--text);font-weight:600;line-height:var(--lh-heading)}
.lp-list-panel .lp-checklist li::before{position:static;flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;margin-top:-1px;border-radius:8px;background:rgba(var(--rgb-brand),.12);color:var(--brand-dark);font-weight:900;font-size:.9rem;line-height:1}
@media (max-width:900px){.lp-list-panel .lp-checklist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.lp-list-panel .lp-checklist{grid-template-columns:1fr}}

/* The old pages' bullet lines (check.png + text) in a hero or a split section are a check list */
.landing-intro .lp-checklist{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.landing-intro .lp-checklist li{color:inherit;font-size:var(--fs-body);line-height:var(--lh-body)}
.landing-intro .lp-checklist li::before{color:var(--orange)}

/* A landing hero with no photo of its own (the two SEM provider pages) is one column */
.landing-hero-grid:not(:has(.landing-hero-media)){grid-template-columns:minmax(0,1fr)}
.landing-hero-grid:not(:has(.landing-hero-media)) .landing-hero-copy{max-width:66ch}

/* CTA copy panels reuse the CTA band; the heading gets room to breathe */
.lp-cta-copy .cta-panel h2{max-width:28ch}
.lp-cta-copy .cta-panel p{max-width:60ch}

/* Contact card: the icon tile centred on its line of text */
.loc-line{align-items:center}

/* Career: the apply rail is as tall as its content */
@media (min-width:901px){.career-page .career-hr{min-height:0;padding-block:clamp(48px,6vw,80px)}}

/* Products: the SAP caption at body size */
.products-page .sap-feature .sap-caption,.products-page .sap-caption{font-size:var(--fs-body)}

/* Logo marquee: the two copies must be exactly half the track for the -50% loop to be seamless,
   so the spacing lives on the items (a flex gap leaves the join one gap short). Larger logos on
   the landing pages, as asked. */
.trust-track{gap:0}
.trust-track img{margin-right:clamp(44px,6vw,92px)}
.lp-logos .trust-track img{height:clamp(32px,3.4vw,52px)}

/* Photo items ("Additional CAS Features", "Advantages of the Barcode Inventory System",
   "Streamline Inventory Management") read two per row as photo cards - photo above the copy -
   instead of one full-width row each; an odd last item runs full width with its photo beside it.
   The section is as tall as its content. */
@media (min-width:901px){
  .lp-photos{min-height:0}
  .lp-photo-rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.2vw,28px)}
  .lp-photo-row,.lp-photo-row.is-flipped{grid-template-columns:minmax(0,1fr);gap:0;align-items:start;align-content:start;border:1px solid var(--line);border-radius:16px;background:var(--card-grad);overflow:hidden}
  .lp-photo-row .lp-photo-media,.lp-photo-row.is-flipped .lp-photo-media{order:-1;border:0;border-radius:0;aspect-ratio:16/9;max-height:none}
  .lp-photo-row .lp-photo-copy{padding:clamp(18px,2.2vw,28px)}
  .lp-photo-row .lp-photo-copy h3{font-size:clamp(1.15rem,1rem + .5vw,1.5rem)}
  .lp-photo-row:last-child:nth-child(odd){grid-column:1 / -1;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:stretch}
  .lp-photo-row:last-child:nth-child(odd) .lp-photo-media{order:2;aspect-ratio:16/9;max-height:340px;height:auto;align-self:stretch}
  .lp-photo-row:last-child:nth-child(odd) .lp-photo-media img{height:100%;object-fit:cover}
  .lp-photo-row:last-child:nth-child(odd) .lp-photo-copy{align-self:center}
}

/* No section is stretched to a screen any more. The one-screen minimum that 1.3.1 lifted from the
   landing sections still applied to the CTA panels (form and copy), the products-page CTA and the
   Our Services bands: at 1908 x 1000 each sat centred in a 911px box with 225-570px of air. Every
   one is now as tall as its content, on the section rhythm. */
@media (min-width:901px){
  .sub-page .cta-section,
  .lp-cta,
  .lp-cta-copy,
  .products-page .cta-section,
  .svc-band,
  .services-page .svc-cta-band,
  .services-page .contact-us,
  .home-page .cta-section{min-height:0;padding-block:clamp(56px,7vw,96px)}
  .svc-band{padding-block:clamp(48px,6vw,80px)}
}
/* seven cards read 4 + 3, not 3 + 3 + 1 */
@media (min-width:1180px){
  .lp-cards .feature-grid:has(> :last-child:nth-child(7)),
  .product-detail-page .portal-features .feature-grid:not(.is-media,.is-one-up,.is-two-up,.is-three-up):has(> :last-child:nth-child(7)){grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Career: the openings, "join" and culture sections are as tall as their content (the apply rail
   already was, since 1.3.2) */
@media (min-width:901px){
  .career-page .career-jobs,.career-page .career-join,.career-page .career-culture{min-height:0;padding-block:clamp(56px,7vw,96px)}
}

/* Accreditation seals (BIR, trusted brand) sit in a row under the copy, at their own size */
.lp-extra:has(.is-seal){display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,2.4vw,36px)}
.lp-extra .is-seal{margin:0}
.lp-extra .is-seal img{width:auto;height:clamp(72px,7vw,110px);border:0;border-radius:0;background:transparent}
.lp-extra figure:not(.is-seal) img{max-width:640px}

/* Post banner from a small featured image (under 1100px): softened instead of stretched sharp */
.post-hero-media.is-soft{overflow:hidden}
.post-hero-media.is-soft img{filter:blur(6px) saturate(1.05);transform:scale(1.06)}
/* Accreditation section: seals in a panel beside the copy, each named (SEM provider pages) */
.lp-seal-panel{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:start;gap:clamp(24px,3vw,40px);padding:clamp(32px,4vw,56px) clamp(24px,3vw,44px);border-radius:18px}
.lp-seal-panel:has(> :nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr))}

.lp-seal{margin:0;display:grid;justify-items:center;align-content:start;gap:14px;width:100%}
.lp-seal img{display:block;width:auto;max-width:100%;height:clamp(120px,12vw,168px);object-fit:contain;border:0;border-radius:0;background:transparent}
.lp-seal figcaption{font-size:var(--fs-sm);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);text-align:center}
@media (min-width:901px){
  .lp-accredited .lp-split-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
}
@media (max-width:900px){
  .lp-seal-panel{padding:28px 20px;gap:24px}
  .lp-seal img{height:128px}
}


/* ═══ 7 · AUTHOR PAGE (Revamp Dynamiq, Sept 2026) ═══
   author.php: photo hero with the portrait overlapping its bottom edge, name + LinkedIn,
   About beside the Recognitions / Education cards, Areas of Expertise icon cards, then the
   "Other Relevant Professional Information" cards on the same grey band. No CTA band. */
.author-hero{position:relative;height:clamp(240px,34vw,400px);--author-avatar:clamp(190px,24vw,360px)}
.author-hero-photo{position:absolute;inset:0;background:var(--author-bg) center/cover no-repeat;filter:brightness(.62) saturate(.9)}
.author-hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--rgb-ink),.15),rgba(var(--rgb-ink),.45))}
.author-avatar-wrap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;transform:translateY(50%);pointer-events:none}
.author-avatar{position:relative;width:var(--author-avatar);aspect-ratio:1;border-radius:50%;padding:4px;background:linear-gradient(135deg,rgba(var(--rgb-white),.35) 35%,var(--orange) 100%);box-shadow:0 26px 50px -24px rgba(var(--rgb-ink),.55);pointer-events:auto}
.author-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--color-surface-muted)}
/* the design keeps the author content on a narrower column than the site wrap (about 1080px on a 1440 canvas) */
.author-intro .wrap,.author-info .wrap{max-width:1080px}
.author-intro{padding-block:calc(var(--author-avatar,300px)/2 + clamp(28px,4vw,52px)) clamp(56px,7vw,96px);--author-avatar:clamp(190px,24vw,360px)}
.author-name{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;text-align:center;font-size:var(--fs-h2);letter-spacing:-.03em;line-height:var(--lh-tight)}
.author-linkedin{display:grid;place-items:center;width:44px;height:44px;border-radius:9px;background:var(--orange);color:#fff;transition:transform .25s,background .25s}
.author-linkedin svg{width:26px;height:26px;fill:currentColor}
.author-linkedin:hover{background:var(--orange-deep);transform:translateY(-2px)}
.author-role{margin-top:10px;text-align:center;color:var(--soft);font-size:var(--fs-lede)}
.author-about-grid{display:grid;grid-template-columns:1.15fr .95fr;gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(40px,5vw,72px)}
.author-about-grid.is-single{grid-template-columns:minmax(0,760px);justify-content:center}
.author-about h2{font-size:var(--fs-subheading);letter-spacing:-.03em;line-height:var(--lh-tight)}
.author-about p{margin-top:18px;color:var(--text);font-size:var(--fs-body);line-height:var(--lh-relaxed)}
.author-about h2+p{margin-top:26px}
.author-side{display:grid;gap:22px;align-content:start}
.author-card{position:relative;padding:clamp(22px,2.6vw,32px);border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--color-surface) 0%,var(--color-surface-warm) 100%);box-shadow:0 22px 44px -34px rgba(var(--rgb-ink),.35);overflow:hidden}
.author-card h3{font-size:var(--fs-card);letter-spacing:-.02em;line-height:var(--lh-heading);max-width:14ch}
.author-card h3+*{margin-top:16px}
.author-line{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--soft)}
.author-line strong{color:var(--text)}
.author-line+.author-line{margin-top:14px}
.author-bullets{margin-top:8px;padding-left:18px;display:grid;gap:6px;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--soft)}
.author-bullets+.author-line{margin-top:16px}
.author-expertise{padding-block:clamp(56px,7vw,96px) clamp(48px,6vw,80px);background:var(--color-surface-muted)}
.author-band-title{text-align:center;color:var(--orange);text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-subheading);line-height:var(--lh-tight)}
.author-expertise-grid{list-style:none;padding:0;margin:clamp(28px,3.5vw,44px) auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);max-width:1080px}
.author-expertise-card{display:grid;justify-items:center;gap:22px;padding:clamp(28px,3vw,40px) clamp(18px,2vw,28px);border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--color-surface) 0%,var(--color-surface-warm) 100%);text-align:center;transition:transform .35s,box-shadow .35s}
.author-expertise-card:hover{transform:translateY(-4px);box-shadow:0 26px 48px -30px rgba(var(--rgb-ink),.4)}
.author-expertise-icon{display:grid;place-items:center;width:76px;height:76px;border-radius:14px;background:rgba(var(--rgb-brand),.12)}
.author-expertise-icon img{width:46px;height:46px;object-fit:contain}
.author-expertise-card h3{font-size:var(--fs-card);line-height:var(--lh-heading);letter-spacing:-.015em;max-width:16ch}
.author-info{padding-block:clamp(40px,5vw,72px) clamp(64px,8vw,110px);background:var(--color-surface-muted)}
.author-expertise+.author-info{padding-top:clamp(16px,2vw,28px)}
.author-info-title{text-align:center;font-size:var(--fs-h2);letter-spacing:-.03em;line-height:var(--lh-tight)}
.author-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:clamp(32px,4vw,56px)}
.author-info-card h3{max-width:none}
.author-info-card .author-bullets{margin-top:16px;gap:9px;font-size:var(--fs-body)}
@media(max-width:980px){
  .author-about-grid,.author-info-grid{grid-template-columns:1fr}
  .author-expertise-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .author-hero{height:220px;--author-avatar:170px}
  .author-intro{--author-avatar:170px}
  .author-expertise-grid{grid-template-columns:1fr}
  .author-name{font-size:var(--fs-subheading)}
}

/* ═══ 8 · PRODUCT SPEC BLOCKS (Revamp Dynamiq, Sept 2026) ═══
   The redesigned product pages add two-column specification tables with a dark header row
   (Supported Barcode Formats, SAP B1 Transactions, License Structure) and photo bands with
   the picture on the left (Implementation Timeline). Both render inside the generic section. */
.spec-table-wrap{grid-column:1 / -1;margin-top:clamp(22px,3vw,34px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.spec-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--color-surface);font-size:var(--fs-sm);line-height:var(--lh-body)}
.spec-table th,.spec-table td{padding:15px 20px;text-align:left;vertical-align:top}
.spec-table thead th{background:var(--color-ink);color:#fff;font-weight:700;letter-spacing:.01em} /* flat ink — the orange→ink sweep was rejected in review */
.spec-table tbody td{border-top:1px solid var(--line);color:var(--soft)}
.spec-table tbody td:first-child{color:var(--text);font-weight:600}
.spec-table tbody tr:nth-child(even) td{background:var(--color-surface-warm)}
.spec-table td+td,.spec-table th+th{border-left:1px solid var(--line)}
.product-detail-page .portal-features-layout.is-media-left .showcase-frame{order:-1}
.product-detail-page .portal-features .feature-grid.is-two-up{grid-template-columns:repeat(2,minmax(0,1fr))}
.product-detail-page .portal-features .feature-grid.is-three-up{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){.product-detail-page .portal-features .feature-grid.is-three-up{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .product-detail-page .portal-features .feature-grid.is-two-up,.product-detail-page .portal-features .feature-grid.is-three-up{grid-template-columns:1fr}
  .spec-table th,.spec-table td{padding:12px 14px}
}

/* photo bands (Pricing, Implementation Timeline): the section list reads as plain bullets, not pills */
.product-detail-page .portal-features .feature-list.is-plain{display:grid;grid-template-columns:1fr;gap:6px;margin:10px 0 18px;padding-left:18px;list-style:disc;max-width:none}
.product-detail-page .portal-features .feature-list.is-plain li{display:list-item;padding:0;border:0;border-radius:0;background:none;font-weight:400;color:var(--soft);font-size:var(--fs-body)}
.product-detail-page .portal-features .feature-list.is-plain li::before{content:none}

/* checklist sections (IQ Tech Institute core modules): plain ✓ items in three columns beside the laptop */
.product-detail-page .portal-features .feature-list.is-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 22px;margin:18px 0 0;padding:0;list-style:none;max-width:none}
.product-detail-page .portal-features .feature-list.is-checks li{display:flex;align-items:flex-start;gap:8px;padding:0;border:0;border-radius:0;background:none;font-weight:400;color:var(--soft);font-size:var(--fs-body);line-height:1.45}
.product-detail-page .portal-features .feature-list.is-checks li::before{content:"✓";width:auto;height:auto;margin:0;background:none;color:var(--text);font-weight:700}
@media(max-width:980px){.product-detail-page .portal-features .feature-list.is-checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.product-detail-page .portal-features .feature-list.is-checks{grid-template-columns:1fr}}
/* the small orange product name above "Product Overview" (2026 design) */
.overview-eyebrow{display:block;margin-bottom:10px;color:var(--orange);font-weight:700;font-size:var(--fs-2xs);letter-spacing:.18em;text-transform:uppercase}
/* home IQ Suite cards for products that have no wordmark yet */
.iq-logo-text{display:inline-block;font-weight:900;font-size:var(--fs-card);letter-spacing:-.02em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}

/* full-width cards (IQ Desk licence / SLA cards) and rich card bodies */
.product-detail-page .portal-features .feature-grid.is-one-up{grid-template-columns:1fr}
.product-detail-page .portal-features .feature-group p+p{margin-top:12px}
.product-detail-page .portal-features .feature-group p+ul,.product-detail-page .portal-features .feature-group ul+p{margin-top:10px}

/* photo cards (IQ REM / IQ Ecom features): picture beside the copy, sides alternating */
.product-detail-page .portal-features .feature-grid.is-media{grid-template-columns:1fr;gap:22px}
.product-detail-page .portal-features .feature-group.is-media-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.5vw,56px);align-items:center;min-height:0;padding:clamp(22px,2.6vw,34px)}
.product-detail-page .portal-features .feature-group.is-media-card.media-right .feature-media{order:2}
.product-detail-page .portal-features .feature-group.is-media-card::before{content:none}
.feature-media{position:relative;margin:0;padding:clamp(14px,1.8vw,26px);border-radius:16px;background:var(--color-surface-muted)}
.feature-media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;box-shadow:6px 6px 0 var(--orange)}
.feature-body h3{margin-bottom:12px}
.product-detail-page .portal-features.is-untitled .portal-features-head:empty{display:none}
.spec-table-wrap+.closing{margin-top:clamp(18px,2.4vw,28px)}
@media(max-width:820px){
  .product-detail-page .portal-features .feature-group.is-media-card{grid-template-columns:1fr}
  .product-detail-page .portal-features .feature-group.is-media-card.media-right .feature-media{order:0}
}

/* closing copy with a bullet list (IQ Link pricing) */
.portal-features-items .closing-rich{margin-top:clamp(18px,2.4vw,28px);color:var(--soft);font-size:var(--fs-body);line-height:var(--lh-body)}
.portal-features-items .closing-rich p{font-weight:600;color:var(--text)}
.portal-features-items .closing-rich ul{margin-top:8px;padding-left:18px;display:grid;gap:6px}
.product-detail-page .portal-features .feature-group.is-media-card .feature-body h3:last-child{margin-bottom:0}

/* landing-page data tables (2026 redesign): ERP comparison, CAS checklist, registration steps */
.lp-table .spec-table-wrap{margin-top:clamp(24px,3vw,36px)}
.lp-table .lp-head p{max-width:none}
.lp-table .lp-head{max-width:none}
.lp-table-kicker{margin-top:clamp(22px,3vw,34px);font-size:var(--fs-h3);letter-spacing:-.02em}
.lp-table-kicker+.spec-table-wrap{margin-top:14px}
.lp-table-closing{margin-top:18px;color:var(--soft);font-size:var(--fs-body);line-height:var(--lh-body)}
.spec-table.is-wide{font-size:var(--fs-xs)}
.spec-table.is-wide th,.spec-table.is-wide td{padding:14px 14px;vertical-align:top}
.spec-table.is-wide tbody td:first-child{white-space:nowrap}
.spec-table tbody td:first-child:is([data-num]){text-align:center}
@media(max-width:900px){.spec-table.is-wide{min-width:900px}}

/* home strip entries for products without a wordmark */
.banner-strip-track .strip-text{font-weight:900;font-size:clamp(.9rem,1.6vh,1.1rem);letter-spacing:-.01em;color:#fff;white-space:nowrap}

/* The CTA kicker ("Ready To Get Started?") is a <p> since 3.0; the .lp-cta / .product-cta paragraph
   rules (max-width, left margin, lede size) were winning over .cta-kicker and pushed it off centre
   (pre-live check 2026-09-29). Same specificity tier as those rules, declared last. */
.cta-section .cta-panel p.cta-kicker{max-width:none;margin:0 auto 10px;font-size:var(--fs-xs);line-height:var(--lh-heading);text-align:center}
.cta-section .cta-panel p.cta-kicker-text{margin:0 auto 18px}
@media (min-width:901px){
  .product-cta .cta-panel p.cta-kicker,.lp-cta .cta-panel p.cta-kicker{margin-bottom:6px}
  .product-cta .cta-panel p.cta-kicker-text,.lp-cta .cta-panel p.cta-kicker-text{margin-bottom:10px}
}