/*
Theme Name: SAMTECH
Theme URI: https://samatvatechindia.com
Author: Samatva Tech India Pvt. Ltd.
Description: Black-and-white "systems drawing" theme for SAMTECH (Samatva Tech India Pvt. Ltd.): black and white sections, one violet ink, line drawings and 3D scenes, and a process line that runs through every page. Custom templates for Home, Services (+9 service pages), AI Services, Industries (+5), Our Products, Case Studies (+detail), About, Security, Contact, FAQ, Blog, Careers and legal pages.
Version: 2.6.4
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: samtech
*/

/* =====================================================================
   BLACK & WHITE SYSTEMS DRAWING
   Black #0E0D12 is the canvas; white sheets (#F7F6F2) are laid on it; one ink: SAMTECH violet.
   Sections alternate: default = black, "light"/"alt" = white, "brand" = deep violet.
   Flat colour, no pills or card boxes: content sits on ruled lines. The only glows belong to the motion layer
   (assets/css/motion.css: cursor glow, hero glow, the orbit's core).
   The signature: a violet process line runs down the left of every page
   and fills in as you read; each section is a node on it.
   Every colour below is a token, so a section only has to switch tokens to change tone.
   ===================================================================== */
:root{
  /* constants */
  --night:#0E0D12; --night-2:#17161D; --day:#F7F6F2; --white:#FFFFFF; --graphite:#1C1B22;
  --ink:#5B2BD1; --ink-deep:#4520A8; --ink-tint:#EEE9FC; --ink-bright:#8F6BFF; --ink-soft:#BBA8FF; --plum:#2E1580;
  /* the default canvas is black; light and brand sections swap these */
  --bg:var(--night); --bg-alt:#131218; --paper:var(--night); --sheet:var(--night-2); --surface:var(--night-2); --surface-2:var(--night-2); --surface-3:rgba(255,255,255,.05);
  --border:rgba(255,255,255,.14); --border-2:rgba(255,255,255,.14); --border-input:rgba(255,255,255,.45); --border-strong:rgba(255,255,255,.72);
  --text:#F3F2F7; --text-2:#CAC8D3; --muted:#A4A1AF; --muted-2:#BEBBC8;
  --primary:var(--ink); --primary-hover:#6A3CE8; --primary-text:var(--ink-soft); --primary-line:var(--ink-bright); --primary-glow:var(--ink-bright);
  --accent:var(--ink-bright); --accent-2:var(--ink-bright);
  --accent-text:var(--ink-soft); --accent-line:var(--ink-bright); --accent-hover:#DCD2FF; --focus:var(--ink-soft);
  --violet-bg:rgba(143,107,255,.13); --violet-text:#E4DCFF; --violet-strong:#FFFFFF; --violet-tag:var(--ink-soft);
  --rail-line:rgba(255,255,255,.16); --rail-fill:var(--ink-bright); --rail-node-bg:var(--night);
  --add-bg:#FFF4CC; --add-text:#6B4E00; --add-border:#C9A227;
  --error:#FF9080; --wa:#25D366;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --r-sm:2px; --r-md:0px;
  --container:1280px; --gutter:clamp(16px,3vw,40px); --rail:clamp(30px,4vw,56px);
  --section:clamp(56px,8vw,120px);
  --font-head:'Schibsted Grotesk',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif; --font-mono:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
/* White sheets: light and alt sections, and every form card (forms are always white) */
.section--light,.st-sec--light,.section--alt,.st-sec--alt,.tone-light,.form-card,.hero-form__card{
  --bg:var(--day); --bg-alt:#EFEDE7; --paper:var(--day); --sheet:var(--white); --surface:var(--white); --surface-2:var(--white); --surface-3:var(--day);
  --border:#DAD7CF; --border-2:#DAD7CF; --border-input:#85838F; --border-strong:var(--graphite);
  --text:var(--graphite); --text-2:#44424D; --muted:#5F5C6B; --muted-2:#4B4957;
  --primary:var(--ink); --primary-hover:var(--ink-deep); --primary-text:var(--ink); --primary-line:var(--ink); --primary-glow:var(--ink);
  --accent:var(--ink); --accent-2:var(--ink); --accent-text:var(--ink); --accent-line:var(--ink); --accent-hover:var(--ink-deep); --focus:var(--ink);
  --violet-bg:var(--ink-tint); --violet-text:#2E1670; --violet-strong:var(--graphite); --violet-tag:var(--ink);
  --rail-line:#CFC9E6; --rail-fill:var(--ink); --rail-node-bg:var(--day); --error:#B42318;
  color-scheme:light;
}
.section--alt,.st-sec--alt{--bg:var(--white); --paper:var(--white); --rail-node-bg:var(--white)}
.form-card,.hero-form__card{--bg:var(--white); --paper:var(--white)}
@font-face{font-family:'Schibsted Grotesk';src:url(assets/fonts/SchibstedGrotesk-Variable.woff2) format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Inter';src:url(assets/fonts/Inter-Variable.woff2) format('woff2');font-weight:400 600;font-display:swap}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--night)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:clamp(16px,15px + .2vw,17.5px);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary-text);text-underline-offset:3px}
a:hover{color:var(--accent-hover)}
p{margin:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
::selection{background:var(--ink);color:#fff}
button{font:inherit}
.skip-link{position:fixed;left:16px;top:-80px;z-index:100;background:var(--graphite);color:#fff;padding:12px 16px;font-weight:600;text-decoration:none}
.skip-link:focus{top:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Type: Schibsted Grotesk for structure, Inter for reading ---------- */
h1,.h1,h2,.h2,h3,.h3,h4{font-family:var(--font-head);color:var(--text);margin:0;text-wrap:balance}
h1,.h1{font-weight:700;font-size:clamp(38px,3.6vw + 1rem,72px);line-height:1.02;letter-spacing:-.035em}
h2,.h2{font-weight:700;font-size:clamp(28px,1.8vw + 1rem,46px);line-height:1.08;letter-spacing:-.028em}
h3,.h3{font-weight:600;font-size:clamp(20px,.6vw + 1rem,26px);line-height:1.2;letter-spacing:-.015em}
h4{font-weight:600;font-size:clamp(18px,.3vw + 1rem,20px);line-height:1.3;letter-spacing:-.01em}
/* the highlighted phrase in a headline is the one place colour enters the type (as in the first version) */
.hl{color:var(--accent-text)}
.lead{font-size:clamp(17px,.35vw + 15px,20px);line-height:1.55;color:var(--text-2);max-width:62ch;text-wrap:pretty}
.text{color:var(--text-2);max-width:68ch}
.muted{color:var(--muted)}
.small{font-size:14px}
.eyebrow{font:600 15px/1.4 var(--font-head);letter-spacing:-.005em;text-transform:none;color:var(--muted);display:block;margin:0 0 var(--s4)}
/* Numbers on blocks that aren't a sequence are hidden; real steps keep theirs */
.st-num-line,.svc-card p:has(>.num){display:none}
.card .eyebrow--lime,.e-con.card .elementor-widget-text-editor:has(.eyebrow--lime){display:none}
.eyebrow--lime,.eyebrow--muted{color:var(--muted)}
.dot{display:none}
.num{font-family:var(--font-head);font-weight:600;font-size:clamp(40px,4vw,60px);line-height:1;letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums}
.add{display:inline-block;background:var(--add-bg);color:var(--add-text);border:1px dashed var(--add-border);padding:0 8px;font:500 13px/1.6 var(--font-body);vertical-align:middle}

/* ---------- Layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.container--narrow{max-width:960px}
.section{padding-block:var(--section)}
.section--alt{background:var(--bg)}
.section--flush-top{padding-top:0}

/* Tones. Black is the default; "light" and "alt" are white sheets (tokens above); "brand" is a flat field of deep violet. */
.section--light,.st-sec--light,.section--alt,.st-sec--alt{background:var(--bg);color:var(--text)}
.section--brand,.st-sec--brand{--bg:var(--plum);--bg-alt:var(--plum);--paper:var(--plum);--sheet:rgba(255,255,255,.08);--surface:transparent;--surface-2:transparent;--surface-3:rgba(255,255,255,.08);--border:rgba(255,255,255,.26);--border-2:rgba(255,255,255,.26);--border-strong:rgba(255,255,255,.85);--border-input:rgba(255,255,255,.7);--text:#FFFFFF;--text-2:#E9E3FF;--muted:#D3C8FF;--muted-2:#E0D8FF;--primary:#FFFFFF;--primary-hover:#EEE9FC;--primary-text:#FFFFFF;--primary-line:#FFFFFF;--primary-glow:#FFFFFF;--accent:#FFFFFF;--accent-2:#FFFFFF;--accent-text:#FFFFFF;--accent-line:#CBBDFF;--accent-hover:#EEE9FC;--focus:#FFFFFF;--violet-bg:rgba(255,255,255,.1);--violet-text:#FFFFFF;--violet-strong:#FFFFFF;--violet-tag:#FFFFFF;--rail-line:rgba(255,255,255,.26);--rail-fill:#FFFFFF;--rail-node-bg:var(--plum);background:var(--plum);color:var(--text);color-scheme:dark}
.section--brand .btn--primary,.st-sec--brand .st-btn--primary .elementor-button{background:#fff;color:var(--ink);border-color:#fff!important}
.section--brand .btn--primary:hover,.st-sec--brand .st-btn--primary .elementor-button:hover{background:var(--ink-tint);color:var(--ink-deep)}
.section--brand a:not(.btn){color:#fff}
.section__head{display:flex;justify-content:space-between;align-items:end;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s7)}
.section__head .lead{margin-top:var(--s4)}
.grid{display:grid;gap:var(--s6) var(--s6);grid-template-columns:minmax(0,1fr)}
.split{display:grid;gap:clamp(32px,5vw,96px);grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:768px){.grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}.split{grid-template-columns:repeat(2,minmax(0,1fr))}}
.row{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.stack-v{display:flex;flex-direction:column;gap:var(--s4)}
.label-row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);padding-block:var(--s5);border-top:1px solid var(--border)}
@media(min-width:768px){.label-row{grid-template-columns:220px minmax(0,1fr);gap:var(--s6)}}

/* ---------- The process line ---------- */
/* Every top-level section carries a vertical rail; content shifts right to make room for it. theme.js fills it as you read
   (--p, 0–1) and drops a node beside each section's first heading. Without JS the rail is simply drawn in full. */
main>section.section,main>section.hero,main>.elementor>.e-con.st-sec,main>.elementor>.e-con.st-raw,main>section.st-railed{position:relative;--rail-x:calc(max(0px,(100% - var(--container)) / 2) + var(--gutter) + 6px)}
main>section.section::before,main>section.hero::before,main>.elementor>.e-con.st-sec::before,main>.elementor>.e-con.st-raw::before,
main>section.section::after,main>section.hero::after,main>.elementor>.e-con.st-sec::after,main>.elementor>.e-con.st-raw::after{content:"";position:absolute;left:var(--rail-x);top:var(--rail-top,0px);bottom:0;width:2px;height:auto;pointer-events:none;z-index:1}
main>section.section::before,main>section.hero::before,main>.elementor>.e-con.st-sec::before,main>.elementor>.e-con.st-raw::before{background:var(--rail-line)}
main>section.section::after,main>section.hero::after,main>.elementor>.e-con.st-sec::after,main>.elementor>.e-con.st-raw::after{background:var(--rail-fill);transform:scaleY(var(--p,1));transform-origin:50% 0}
main>section.section>.container,main>section.hero>.container,main>.elementor>.e-con.st-sec>.e-con-inner{padding-left:calc(var(--gutter) + var(--rail))}
main>.elementor>.e-con.st-sec>.e-con-inner{padding-left:var(--rail)}
main>.elementor>.e-con.st-raw{--padding-left:calc(max(0px,(100% - var(--container)) / 2) + var(--gutter) + var(--rail));--padding-right:var(--gutter)}
/* the first section's line starts at its headline; until theme.js has measured that, it stays unseen (no jump) */
.js main>:is(section.section,section.hero,section.st-railed):first-child:not(.is-placed)::before,.js main>:is(section.section,section.hero,section.st-railed):first-child:not(.is-placed)::after,
.js main>.elementor>:is(.e-con.st-sec,.e-con.st-raw):first-child:not(.is-placed)::before,.js main>.elementor>:is(.e-con.st-sec,.e-con.st-raw):first-child:not(.is-placed)::after{visibility:hidden}
.elementor-editor-active main>.elementor>.e-con:first-child::before,.elementor-editor-active main>.elementor>.e-con:first-child::after{visibility:visible}
.rail-node{position:absolute;left:calc(var(--rail-x) - 6px);width:14px;height:14px;margin-top:-7px;border:2px solid var(--rail-line);border-radius:50%;background:var(--rail-node-bg);z-index:2;pointer-events:none;transition:border-color .4s,background-color .4s}
.rail-node::after{content:"";position:absolute;left:12px;top:4px;height:2px;width:calc(var(--rail) - 22px);background:var(--rail-line);transition:background-color .4s}
.rail-node.is-on{border-color:var(--rail-fill);background:var(--rail-fill)}
.rail-node.is-on::after{background:var(--rail-fill)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:13px var(--s5);border-radius:var(--r-sm);font:600 16px/1.2 var(--font-body);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background-color .2s,color .2s,border-color .2s}
.btn--primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn--primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
.btn--secondary{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn--secondary:hover{background:var(--text);color:var(--bg)}
.btn--light{background:var(--text);color:var(--bg)}
.btn--light:hover{background:var(--ink);color:#fff}
.btn--sm{min-height:44px;padding:11px var(--s4);font-size:15px}
.btn--wa{background:var(--wa);color:var(--graphite)}
.btn:disabled{opacity:.7;cursor:progress}
.link{color:var(--primary-text);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;font-weight:600;padding-block:12px;margin-block:-12px} /* 44px to tap, same layout */
.link:hover{color:var(--accent-hover);text-decoration-thickness:2px}
.icon-btn{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-strong);background:transparent;color:var(--text);cursor:pointer}
.icon-btn--wa{background:var(--wa);border-color:var(--wa)}

/* ---------- Ruled blocks (formerly cards) ---------- */
/* A block is defined by the graphite rule above it, not by a box around it. */
.card{background:transparent;border:0;border-top:1px solid var(--border-strong);border-radius:0;padding:var(--s5) 0 0;display:flex;flex-direction:column;gap:var(--s3);height:100%;color:inherit;text-decoration:none;transition:box-shadow .2s}
a.card:hover,.card--link:hover{box-shadow:inset 0 3px 0 var(--accent-line);color:inherit}
a.card:hover .card__title,a.card:hover h3{color:var(--accent-text)}
.card--dark{background:transparent}
.card--violet{background:var(--violet-bg);border-top:3px solid var(--accent-line);padding:clamp(24px,3vw,40px);color:var(--text)}
.card__title{font:600 clamp(19px,.5vw + 1rem,23px)/1.25 var(--font-head);letter-spacing:-.012em}
.card__text{color:var(--text-2);font-size:16px;flex:1}
.card__cta{margin-top:auto;padding-top:var(--s4);font-size:15px;color:var(--primary-text);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.card--media{padding:0;overflow:visible;border-top:0}
.card--media .card__body{padding:var(--s5) 0 0;display:flex;flex-direction:column;gap:var(--s3);flex:1}
.tag{align-self:flex-start;background:none;color:var(--accent-text);border-radius:0;padding:0;font:600 14px/1.4 var(--font-head)}
.metric{border-top:1px solid var(--border);padding-top:var(--s4)}
.metric b{font:600 30px/1 var(--font-head);color:var(--text);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-right:var(--s2)}
.check{display:flex;gap:var(--s3);align-items:baseline}
.check::before{content:"";flex:none;width:10px;height:10px;border:2px solid var(--accent-line);border-radius:50%;transform:translateY(-1px)}
.bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.bullets li{display:flex;gap:var(--s3);align-items:baseline}
.bullets li::before{content:"";width:12px;height:2px;background:var(--accent-line);flex:none;transform:translateY(-4px)}

/* Numbers: plain figures on a rule, separated by hairlines */
.stat-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--border-strong);border-bottom:1px solid var(--border)}
.stat-strip>div{position:relative;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5) var(--s5) var(--s5) 0}
.stat-strip>div:nth-child(even){padding-left:var(--s5);border-left:1px solid var(--border)}
@media(min-width:1024px){.stat-strip{grid-template-columns:repeat(4,minmax(0,1fr))}.stat-strip>div{padding:var(--s6) var(--s5)}.stat-strip>div:first-child{padding-left:0}.stat-strip>div+div{border-left:1px solid var(--border)}}
.stat-strip .num{font-size:clamp(44px,4.4vw,68px)}
.stat-label{color:var(--muted);font-size:15px;font-weight:500;line-height:1.35}
.band{background:var(--ink);color:#fff;--bg:var(--ink);--text:#fff;--text-2:#EEE9FF;--muted:#DCD2FF;--border:rgba(255,255,255,.3);--border-strong:#fff;--accent-text:#fff;--accent-line:#fff;--accent-hover:#EEE9FC;--focus:#fff;padding:clamp(32px,5vw,64px);display:flex;justify-content:space-between;align-items:center;gap:var(--s6);flex-wrap:wrap}
.band p{font:600 clamp(24px,2.4vw,34px)/1.15 var(--font-head);letter-spacing:-.025em;max-width:760px}
.band .btn--primary,.band .btn--light{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- Images: framed like a plate in a drawing set ---------- */
.img-holder{position:relative;margin:0;border:1px solid var(--border);overflow:hidden;background:var(--paper);aspect-ratio:var(--ratio,4/3);width:100%}
.img-holder img{width:100%;height:100%;object-fit:cover}
.img-holder.is-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);border:1px dashed var(--border-input);color:var(--muted);text-align:center;padding:var(--s5);font-size:14px;background:var(--sheet)}
.img-holder.is-empty svg{opacity:.8}
.img-holder.is-empty small{font-size:12px;color:var(--muted)}
.img-holder--rect{border-radius:0}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:30;background:var(--night);border-bottom:1px solid var(--border)}
.site-header__bar{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
@media(min-width:768px){.site-header__bar{min-height:72px}}
.brand{display:flex;align-items:center;gap:var(--s3);min-height:44px;text-decoration:none;color:var(--text);flex:none}
.brand img{width:32px;height:34px;object-fit:contain}
.brand span{font:800 20px/1 var(--font-head);letter-spacing:-.01em}
.nav{display:none;gap:var(--s5);align-items:center}
.nav>a,.nav .has-mega>a{color:var(--text-2);text-decoration:none;font:500 15px/1 var(--font-body);white-space:nowrap;padding-block:var(--s3);display:inline-flex;gap:6px;align-items:center;border-bottom:2px solid transparent}
.nav>a:hover,.nav .has-mega>a:hover{color:var(--text)}
.nav>a[aria-current],.nav .has-mega>a[aria-current]{color:var(--text);border-bottom-color:var(--accent-line)}
.nav .has-mega{position:static}
.header-cta{display:none;gap:var(--s3);align-items:center}
.menu-toggle{display:inline-flex}
@media(min-width:1080px){.nav,.header-cta{display:flex}.menu-toggle,.header-mob{display:none!important}}
.header-mob{display:flex;gap:var(--s2)}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--night-2);border-block:1px solid var(--border);display:none}
.has-mega:hover .mega,.has-mega:focus-within .mega{display:block}
.mega__grid{display:grid;gap:0 var(--s6);grid-template-columns:repeat(3,minmax(0,1fr));padding-block:var(--s5)}
.mega a{display:block;padding:var(--s3) 0;border-top:1px solid var(--border);text-decoration:none;color:var(--text)}
.mega a:hover b{color:var(--accent-text)}
.mega a b{display:block;font:600 16px/1.3 var(--font-head);margin-bottom:2px}
.mega a span{font-size:14px;color:var(--muted)}
.mega a.mega__ai{background:none}
.mega a.mega__cta{border-top:2px solid var(--accent-line)}
.mega a.mega__cta b{color:var(--accent-text)}
.drawer{position:fixed;inset:64px 0 0;z-index:29;background:var(--night);overflow-y:auto;padding:var(--s3) var(--gutter) var(--s7);display:none}
.drawer.is-open{display:block}
.drawer a.drawer__link{display:flex;justify-content:space-between;align-items:center;min-height:56px;border-bottom:1px solid var(--border);font:700 24px/1.2 var(--font-head);letter-spacing:-.02em;color:var(--text);text-decoration:none}
.drawer .chips{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s3)}
/* Chips are text toggles with an underline, not pills */
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:8px 2px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--text-2);font:500 15px/1.2 var(--font-body);text-decoration:none;cursor:pointer}
.chip:hover{color:var(--text)}
.chip[aria-pressed="true"],.chip.is-active{color:var(--text);border-bottom-color:var(--accent-line);font-weight:600}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(48px,7vw,104px) var(--section)}
.hero h1{margin-bottom:var(--s5)}
.hero .lead{margin-bottom:var(--s6)}
.trust{display:flex;gap:var(--s2) var(--s5);flex-wrap:wrap;margin-top:var(--s6);font-size:14px;color:var(--muted)}
.trust span{display:flex;gap:var(--s2);align-items:center}
.tiltwrap{position:relative}
.float-chip{position:absolute;z-index:2;background:var(--sheet);border:1px solid var(--border-strong);padding:var(--s3) var(--s4);pointer-events:none;max-width:260px;font-size:15px;line-height:1.35}
.float-chip--dark{background:var(--sheet)}
.float-chip .eyebrow{margin-bottom:var(--s1);font-size:13px}

/* ---------- Name lists: a still line of names (motion.css sets them moving when motion is allowed) ---------- */
.marquee{border-block:1px solid var(--border);padding-block:var(--s5)}
.marquee--plain{border:0;padding:0}
.marquee__track{display:flex;flex-wrap:wrap;gap:var(--s2) 0;width:auto;animation:none}
.marquee__item{display:inline-flex;align-items:center;white-space:nowrap;font:600 clamp(18px,1.4vw,24px)/1.3 var(--font-head);letter-spacing:-.02em;color:var(--text)}
.marquee__item:not(:last-child)::after{content:"";width:8px;height:8px;margin:0 clamp(12px,1.4vw,20px);border:2px solid var(--accent-line);border-radius:50%}
.marquee--plain .marquee__item{font:500 16px/1.5 var(--font-body);letter-spacing:0;color:var(--text-2)}
.marquee--plain .marquee__item:not(:last-child)::after{width:4px;height:4px;margin:0 12px;border:0;background:var(--border-input)}
main>section.st-railed>.marquee{padding-left:calc(max(0px,(100% - var(--container)) / 2) + var(--gutter) + var(--rail));padding-right:var(--gutter)}

/* ---------- Drag carousel → simple horizontal list ---------- */
.carousel{display:flex;gap:var(--s6);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding:4px 0 var(--s3)}
.carousel>*{flex:0 0 clamp(240px,28vw,320px);scroll-snap-align:start;min-height:0}

/* ---------- Services: a ruled list you scan ---------- */
.svc-stack{display:flex;flex-direction:column;gap:0;border-bottom:1px solid var(--border-strong)}
.svc-card{background:transparent;border:0;border-top:1px solid var(--border-strong);border-radius:0;padding:var(--s6) 0;display:grid;gap:var(--s5) var(--s7);grid-template-columns:minmax(0,1fr)}
@media(min-width:768px){.svc-card{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}

/* ---------- Tabs, FAQ, slider ---------- */
.tabs{display:flex;gap:var(--s5);border-bottom:1px solid var(--border);flex-wrap:wrap}
.tabs button{min-height:44px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:8px 0;background:transparent;color:var(--muted-2);font-weight:600;font-size:15px;cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent-line)}
.tabpanel[hidden]{display:none}
.faq{border-bottom:1px solid var(--border)}
.faq details{border-top:1px solid var(--border)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:var(--s5);padding-block:var(--s5);cursor:pointer;font:600 clamp(18px,.3vw + 1rem,20px)/1.35 var(--font-head);min-height:44px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-text);font:400 26px/1 var(--font-body);flex:none}
.faq details[open] summary::after{content:"−"}
.faq .faq__a{padding:0 0 var(--s5);color:var(--text-2);max-width:68ch}
.slider__slide[hidden]{display:none}
.step{border-top:1px solid var(--border-strong);padding-top:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.step .eyebrow{color:var(--accent-text);margin:0}
.step__t{font:600 21px/1.25 var(--font-head);letter-spacing:-.012em}
.step__b{color:var(--muted-2);font-size:16px}
.proc-list{list-style:none;margin:0;padding:0}
.proc-list li{display:grid;grid-template-columns:64px 1fr;gap:var(--s4);padding-block:var(--s5);border-top:1px solid var(--border)}

/* ---------- Forms ---------- */
.form-card{background:var(--white);border:1px solid var(--graphite);border-top:4px solid var(--ink);padding:clamp(24px,3.4vw,44px);color:var(--graphite)}
.form-grid{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.field label{font-size:14px;font-weight:600;color:var(--text)}
.field label .req{color:var(--error)}
.field label .opt{color:var(--muted);font-weight:400}
.input{height:50px;width:100%;border:1px solid var(--border-input);border-radius:var(--r-sm);background:var(--surface);padding:0 var(--s4);font:400 16px/1.4 var(--font-body);color:var(--text);transition:border-color .2s,box-shadow .2s}
.input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
textarea.input{height:auto;min-height:128px;padding:var(--s3) var(--s4);line-height:1.6;resize:vertical}
select.input{padding:0 var(--s3);cursor:pointer}
.input[aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 1px var(--error)}
.field__err{font-size:14px;color:var(--error)}
.phone{display:flex;gap:var(--s2)}
.phone select{width:auto;flex:none}
.checkbox{display:flex;gap:var(--s3);align-items:center;min-height:44px;cursor:pointer}
.checkbox input{width:20px;height:20px;accent-color:var(--ink)}
.form-note{font-size:14px;color:var(--muted)}
.request{display:flex;gap:var(--s3);align-items:center;border-left:3px solid var(--ink);background:var(--ink-tint);color:var(--violet-text);padding:var(--s3) var(--s4);font-size:14px}
.notice{padding:var(--s4);font-size:15px;border-left:3px solid currentColor}
.notice--error{background:#FDECEA;color:var(--error)}
.hp{position:absolute;left:-9999px}

/* ---------- Footer: the end of the drawing, in graphite ---------- */
.site-footer{background:#0A090D;color:var(--muted-2);border-top:1px solid var(--border);padding:var(--s8) 0 var(--s6)}
.site-footer a{color:var(--muted-2);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .btn--secondary{color:#fff;border-color:#fff}
.site-footer .btn--secondary:hover{background:#fff;color:var(--night)}
.site-footer__top{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);flex-wrap:wrap;padding-bottom:var(--s7);border-bottom:1px solid var(--border-2)}
.site-footer__cols{padding-block:var(--s7);border-bottom:1px solid var(--border-2)}
.site-footer__cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.site-footer__cols a{display:inline-flex;min-height:44px;min-width:44px;align-items:center}
.site-footer .eyebrow{color:#fff}
.site-footer__contact{padding-block:var(--s6);border-bottom:1px solid var(--border-2);font-size:15px}
.site-footer__contact a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
.site-footer__legal{padding-top:var(--s5);font-size:14px;color:var(--muted)}

/* ---------- Floating ---------- */
.to-top{position:fixed;right:16px;bottom:16px;z-index:40;width:48px;height:48px;border-radius:50%;border:1px solid var(--border-strong);background:var(--sheet);color:var(--text);font-size:18px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}
.to-top.is-on{opacity:1;pointer-events:auto}
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--night);border-top:1px solid var(--border);padding:var(--s3) var(--s4);display:flex;gap:var(--s2)}
.mobile-bar .btn{flex:1}
@media(max-width:359px){.mobile-bar{padding-inline:var(--s3)}.mobile-bar .btn{padding-inline:var(--s3);font-size:15px}}
@media(min-width:768px){.mobile-bar{display:none}}
body.has-bar .to-top{bottom:88px}
@media(min-width:768px){body.has-bar .to-top{bottom:16px}}

/* ---------- Motion: assets/css/motion.css. Reduced motion stops every animation and transition. ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- WordPress content ---------- */
.entry{max-width:68ch;font-size:17.5px;line-height:1.7}
.entry>*+*{margin-top:var(--s4)}
.entry h2,.entry h3{margin-top:var(--s7)}
.entry a{color:var(--primary-text)}
/* Long reads (blog posts): headings sized for reading, real lists and tables */
.entry h2{font-size:clamp(24px,1.1vw + 1rem,32px);line-height:1.15;letter-spacing:-.02em}
.entry h3{font-size:clamp(19px,.4vw + 1rem,22px);line-height:1.3;letter-spacing:-.01em;margin-top:var(--s6)}
.entry h2+*,.entry h3+*{margin-top:var(--s3)}
.entry :is(ul,ol){margin-bottom:0;padding-left:1.3em}
.entry li+li{margin-top:var(--s2)}
.entry li::marker{color:var(--accent-text)}
.entry strong{color:var(--text);font-weight:600}
.entry figure{margin-inline:0}
.entry .wp-block-table{overflow-x:auto;margin-block:var(--s5) 0;
  /* scroll shadows: an edge fades in where the table continues sideways (phones) */
  background:linear-gradient(to right,var(--bg) 30%,transparent) left/40px 100% no-repeat local,linear-gradient(to left,var(--bg) 30%,transparent) right/40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(255,255,255,.22),transparent) left/14px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(255,255,255,.22),transparent) right/14px 100% no-repeat scroll}
.entry .wp-block-table:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.entry table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.entry th,.entry td,.entry .wp-block-table :is(th,td){text-align:left;vertical-align:top;padding:10px 14px 10px 0;border:0;border-bottom:1px solid var(--border)}
.entry .wp-block-table thead{border-bottom:0}
.entry thead th,.entry .wp-block-table thead th{font-weight:600;color:var(--text);border-bottom:1px solid var(--border-strong)}
.entry td:first-child{color:var(--text);font-weight:500}
.entry blockquote{margin:0;padding-left:var(--s5);border-left:2px solid var(--accent-line)}
@media(max-width:600px){.entry{font-size:17px}.entry table{font-size:14px;min-width:520px}}
.single-post h1.post-title{font-size:clamp(34px,2.6vw + 1rem,58px);line-height:1.05}
.alignwide{max-width:1000px}
.wp-caption-text,.screen-reader-text{font-size:14px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pagination{display:flex;gap:var(--s2);margin-top:var(--s7)}
.pagination .page-numbers{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);color:var(--text);text-decoration:none}
.pagination .current{background:var(--text);color:var(--bg)}

/* ---------- Form success mark ---------- */
.fx-tick circle{fill:none;stroke:var(--ink);stroke-width:3;stroke-dasharray:158;stroke-dashoffset:158;animation:fxDraw .7s var(--ease) forwards}
.fx-tick path{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:fxDraw .45s .55s var(--ease) forwards}
@keyframes fxDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.fx-tick circle,.fx-tick path{stroke-dashoffset:0}}
.fx-tick + img{display:none}

/* ---------- Product screenshots sit in a line-drawn laptop ---------- */
.fx-device{position:relative;padding:12px 12px 14px;margin:0 5% 18px;background:var(--sheet);border:1.5px solid var(--border-strong);border-radius:12px 12px 2px 2px}
.fx-device::after{content:"";position:absolute;left:-6%;right:-6%;bottom:-14px;height:14px;border:1.5px solid var(--border-strong);border-radius:0 0 12px 12px;background:var(--paper)}
.fx-device>.img-holder,.fx-device>.st-img,.fx-device>.st-img img{border-radius:0}

/* ---------- Home hero form ---------- */
.hero-form{position:relative;width:100%;max-width:480px;margin-left:auto}
.hero-form__card{color:var(--graphite);background:var(--white);border:1px solid var(--graphite);border-top:4px solid var(--ink);border-radius:0;padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:12px}
.hero-form__card .input{height:46px}
.hero-form__card select.input{appearance:auto}
.hero-form__card label{color:var(--graphite)}
.hero-form__title{font:700 clamp(19px,.6vw + 1rem,22px)/1.25 var(--font-head);letter-spacing:-.015em;color:var(--graphite);margin:0}
.hero-form__card .eyebrow{color:var(--muted);margin-bottom:0}
.hero-form__btn{width:100%;margin-top:var(--s2)}
.hero-form__card .field{gap:6px}
.hero-form__card .field__err:empty{display:none}
.privacy-note{display:flex;gap:var(--s2);align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--muted);margin:0}
.privacy-note::before{content:"";flex:none;width:14px;height:14px;margin-top:2px;background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.3 8 11 4.6-1.7 8-6 8-11V5l-8-3Zm-1.2 14.2-3.5-3.5 1.4-1.4 2.1 2.1 4.9-4.9 1.4 1.4-6.3 6.3Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.3 8 11 4.6-1.7 8-6 8-11V5l-8-3Zm-1.2 14.2-3.5-3.5 1.4-1.4 2.1 2.1 4.9-4.9 1.4 1.4-6.3 6.3Z'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:1023px){.hero-form{max-width:none;margin:0}}
.e-con.st-hero-form{--width:100%;justify-content:center}

/* ---------- Line drawings on black ----------
   The theme's drawings are graphite on paper. On a black section they are shown in negative (white lines,
   lighter violet) so they belong to the section; on white and violet sections they stay as drawn.
   Only the theme's own drawings change: photos you upload are never touched. */
img[src*="/assets/img/ill/"],img[src*="/assets/img/ph/"]{filter:invert(1) hue-rotate(180deg)}
:is(.section--light,.st-sec--light,.section--alt,.st-sec--alt,.section--brand,.st-sec--brand,.form-card,.tone-light) img[src*="/assets/img/ill/"],
:is(.section--light,.st-sec--light,.section--alt,.st-sec--alt,.section--brand,.st-sec--brand,.form-card,.tone-light) img[src*="/assets/img/ph/"]{filter:none}