/* =============================================================
   Violet Tek | Responsive
   Breakpoint behaviour, including steps Elementor has no slot for.
   Ported verbatim from vt2.css - source is the visual authority.
   ============================================================= */

/* 320px floor / ultrawide measure (396-412) */
/* ---- 320px floor ---- */
@media (max-width:400px){
  .shell,.shell-n{width:calc(100% - 32px)}
  .d1{font-size:clamp(38px,11vw,50px);letter-spacing:-.03em}
  .d2{font-size:clamp(28px,8.4vw,38px);letter-spacing:-.025em}
  .d3{font-size:clamp(21px,6vw,27px)}
  .g4{grid-template-columns:1fr}
  .reel-card{width:84vw}
  .mono{font-size:11px;letter-spacing:.1em}
  .btn,.nav-cta{white-space:normal;text-align:center}
}
/* ultrawide: stop the measure running away past 1560 */
@media (min-width:2200px){
  .shell{width:min(1720px,100% - 160px)}
  .hero .d1{font-size:190px}
}


/* responsive pass (579-690) */
/* ================= RESPONSIVE PASS =================
   Measured: hero ran 1.04–1.06x viewport height at 320–768, so the lead and
   CTA sat below the fold on every phone. The cause was 100svh min-height PLUS
   a 14vh top pad. Below 900px the hero is content-height with tighter padding
   and capped at the viewport, so the first screen resolves without scrolling. */
@media (max-width:900px){
  .hero{min-height:auto;max-height:none;padding:clamp(78px,11vh,104px) 0 clamp(30px,5vh,48px);justify-content:flex-start}
  .hero .split{margin-top:clamp(22px,4vh,40px)!important;gap:26px}
  .hero .row{gap:12px}
  .hero .btn,.hero .live-btn{flex:1 1 auto;justify-content:center;min-width:0}
  .act{padding:clamp(60px,9vh,88px) 0}
  .act-t{padding-top:clamp(48px,7vh,76px)}
  .page-hero{padding-bottom:clamp(28px,5vh,48px)!important}
}
/* Tablet band: 10.8vw put the hero headline at 83px on a 768 iPad, which
   crowded the measure. Give 641–1024 its own ramp rather than inheriting either
   the phone floor or the desktop curve. */
@media (min-width:641px) and (max-width:1024px){
  .d1{font-size:clamp(46px,7.6vw,74px);letter-spacing:-.04em}
  .d2{font-size:clamp(32px,5.4vw,54px)}
  .d3{font-size:clamp(23px,3.1vw,34px)}
  .shell,.shell-n{width:calc(100% - 72px)}
  .split,.split-a{gap:clamp(28px,4vw,48px)}
  .g4{grid-template-columns:repeat(2,1fr)}
}
/* Landscape phones: a 100svh hero on a 380px-tall viewport is unusable. */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding:76px 0 32px}
  .hero .d1{font-size:clamp(34px,7vw,52px)}
  .reel-vp{height:auto;position:static;padding:40px 0}
  .reel{height:auto!important}
  .reel-track{transform:none!important;flex-wrap:wrap;justify-content:center}
  .reel-card{width:min(320px,44vw)}
}
/* Large desktop: hold the measure rather than letting 1560px of shell stretch
   body copy past a comfortable line. */
@media (min-width:1600px){
  .shell{width:min(1560px,100% - 160px)}
  .p,.p-lg,.p-s{max-width:min(68ch,100%)}
}
@media (min-width:1920px){
  .shell{width:min(1660px,100% - 200px)}
  .d1{font-size:clamp(120px,9vw,182px)}
}
/* Ultrawide: centre the whole composition instead of spanning the panel. */
@media (min-width:2400px){
  .shell{width:1720px}
  .shell-n{width:1180px}
  .act{padding:clamp(120px,10vh,200px) 0}
}



/* Mobile spacing is set for the device rather than scaled down from desktop:
   a shorter section rhythm, but card and field gaps stay generous so stacked
   content never reads as one undifferentiated block. */
@media (max-width:900px){
  :root{--sec-y:clamp(var(--s-8),8vh,var(--s-9));--sec-y-sm:clamp(var(--s-7),6vh,var(--s-8));
        --gap-split:var(--s-6);--gap-grid:var(--s-6);--head-gap:var(--s-6)}
  .g2,.g3,.g4,.pgrid,.cgrid,.trust-row{gap:var(--s-6)}
  .row-lg,.art-row,.prow,.cartrow{padding:var(--s-5) 0}
}
@media (max-width:400px){
  :root{--sec-y:var(--s-8);--sec-y-sm:var(--s-7);--gap-grid:var(--s-5);--gap-split:var(--s-5)}
}

/* Sticky side columns are only meaningful in a two-column layout. Once
   .split-a collapses, a pinned column overlays the content beneath it.
   This MUST match the breakpoint where .split/.split-a collapse (1240px) —
   at 900px the two drifted apart and left 901-1240 broken. */
@media (max-width:1240px){
  .sticky-col{position:static!important;top:auto!important}
  .pr-index{margin-bottom:var(--s-6)}
  .pr-index a{padding:var(--s-3) 0}
  .pr-index a.on{transform:none}
  .pr-panel:first-of-type{border-top:0;padding-top:0}
}

/* ---- social ---- */
.ft-connect{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--gap-split);margin-top:var(--sec-y-sm);padding-top:var(--s-7);border-top:1px solid var(--dark-hairline)}
.ft-direct{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-5)}
.ft-direct a{font-size:14px}
.ft-follow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.ft-fw{display:flex;flex-direction:column;gap:var(--s-2);padding-top:var(--s-4);border-top:1px solid var(--dark-hairline);color:inherit;transition:border-color .18s ease}
.ft-fw:hover{border-color:var(--text-inverse);color:inherit}
.ft-fw-t{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--on-dark);transition:color .18s ease}
.ft-fw:hover .ft-fw-t{color:var(--text-inverse)}
/* contact page */
.cinfo{display:grid;gap:0}
.cinfo-row{display:grid;grid-template-columns:104px 1fr;gap:var(--s-4);padding:var(--s-4) 0;border-top:1px solid var(--dark-hairline);align-items:baseline}
.cinfo-row a{color:var(--text-inverse);border-bottom:1px solid rgba(255,255,255,.28);transition:border-color .18s ease}
.cinfo-row a:hover{border-color:var(--text-inverse)}
@media (max-width:1240px){.ft-connect{grid-template-columns:1fr;gap:var(--s-7)}}
@media (max-width:900px){.ft-follow{grid-template-columns:1fr;gap:var(--s-5)}}
@media (max-width:400px){.cinfo-row{grid-template-columns:1fr;gap:var(--s-1)}}

/* ---- social icon row ----
   One component, two sizes. Targets are 44px on coarse pointers regardless of
   glyph size, so the row stays thumb-friendly without looking oversized. */
.soc-row{--soc-size:18px;display:flex;align-items:center;gap:var(--s-2);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.soc-ico{--brand:var(--text-inverse);display:grid;place-items:center;width:calc(var(--soc-size) + 22px);height:calc(var(--soc-size) + 22px);
  border:1px solid var(--dark-hairline);border-radius:50%;color:var(--on-dark);font-size:var(--soc-size);
  transition:color .18s ease,border-color .18s ease,background .18s ease}
.soc-ico svg{display:block;width:var(--soc-size);height:var(--soc-size)}
a.soc-ico:hover{color:var(--brand);border-color:var(--brand)}
a.soc-ico:focus-visible{outline:2px solid var(--focus-blue);outline-offset:3px}
.soc-ico.is-pending{color:rgba(255,255,255,.24);border-color:rgba(255,255,255,.1);cursor:default}
.light .soc-ico,.s-paper .soc-ico,.s-stone .soc-ico{border-color:var(--hairline);color:var(--slate)}
.light a.soc-ico:hover{color:var(--brand);border-color:var(--brand)}
.light .soc-ico{--brand:var(--ink)}
@media (pointer:coarse){.soc-ico{width:44px;height:44px}}
@media (max-width:400px){.soc-row{gap:6px}}

/* =============================================================
   BUILT-LAYOUT RESPONSIVE
   The ported source rules above target the source DOM. These
   apply the same breakpoint behaviour to the Elementor/XPro
   structures that replaced it. Same values, different selectors.
   ============================================================= */

@media (max-width:1240px){
  .nav-links{display:none}
  .menu-btn{display:flex}
}
@media (min-width:1241px){
  .menu-btn{display:none}
}

@media (max-width:1100px){
  .split,.split-a{grid-template-columns:1fr;display:flex;flex-direction:column}
  .vt-grid-work .xpro-post-grid-item{grid-template-columns:1fr;gap:24px}
  .vt-grid-work .xpro-post-grid-item:nth-child(even) .xpro-post-grid-image{order:0}
  .vt-grid-work .xpro-post-grid-item:nth-child(even) .xpro-post-grid-content{order:0}
  .mark-grid{flex-direction:column;align-items:flex-start}
  .mark-say{align-items:flex-start}
  .vt-cinfo-row{grid-template-columns:100px 1fr}
}

@media (max-width:900px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vt-pr-panels,.pr-index{width:100%}
  .pr-index{position:static}
  .sticky-col{position:static}
  .mark-act{height:auto!important}
  .mark-vp{position:static;height:auto}
  .vt-reel-card{width:min(78vw,420px)}
  .vt-media-offset{padding-top:0}
  .vt-grid-resources .xpro-post-grid-item{grid-template-columns:1fr;gap:10px}
  .vt-cartrow{grid-template-columns:1fr;gap:10px}
  .vt-wpforms .wpforms-field-text,.vt-wpforms .wpforms-field-email{width:100%;margin-right:0}
}

@media (max-width:640px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .vt-pr-items>*{flex:1 1 100%}
  .shead{flex-wrap:wrap}
  .vt-legal-row,.vt-story-row,.vt-step{flex-direction:column;gap:8px}
  .vt-cinfo-row{grid-template-columns:1fr;gap:4px}
  .ft-legal{flex-direction:column;align-items:flex-start;gap:20px}
  .vt-404-links{flex-direction:column;align-items:center;gap:16px}
  .vt-closing-action{justify-content:flex-start}
  .vt-form-card{padding:22px}
  .vt-reel-card{width:min(86vw,360px)}
  .ai-panel{right:12px;left:12px;bottom:12px;width:auto}
  .ai-fab{right:12px;bottom:12px}
}

@media (max-width:400px){
  .vt-summary-card,.vt-panel-card{padding:18px}
  .vt-crumbs ol{gap:6px}
}

/* ultra-wide: the source caps measure rather than the shell */
@media (min-width:1920px){
  .measure{max-width:64ch}
  .measure-s{max-width:52ch}
}

@media (prefers-reduced-motion:reduce){
  .mask>.xpro-heading-title,.mask .xpro-heading-wrapper>.xpro-heading-title{transform:none;transition:none}
  .reel-track{transform:none!important}
  .boot{display:none}
}