/*
Theme Name: TwoDots Media
Theme URI: https://twodotsmedia.com
Author: TwoDots Media
Author URI: https://twodotsmedia.com
Description: Custom one-page theme for TwoDots Media, a demand generation agency. Converted from a static HTML prototype.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: twodots-media
*/

:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#080808;
  --panel:#111211;
  --panel-2:#171817;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.20);
  --text:#F4F4F0;
  --mute:#A5A9A3;
  --dim:#7B7F79;
  --lime:#FF6A1A;
  --lime-soft:rgba(255,106,26,.12);
  --wrap:1240px;
  --pad:clamp(20px,4vw,40px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px)}
body{
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--text);
  font-size:17px;line-height:1.65;font-weight:500;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{padding:clamp(76px,10vw,150px) 0}
.lime{color:var(--lime)}
.num{font-variant-numeric:tabular-nums}

/* type */
.h2{font-size:clamp(2.15rem,5.2vw,4.4rem);line-height:.98;letter-spacing:-.045em;font-weight:800;text-transform:uppercase}
.h2 .dim{color:var(--dim)}
.lead{color:var(--mute);font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.65;max-width:34em}

/* two-dot motif */
.tdots{display:inline-flex;color:var(--lime)}
.divider{display:flex;align-items:center;gap:22px;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.divider span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-2))}
.divider span:last-child{background:linear-gradient(270deg,transparent,var(--line-2))}

/* buttons + links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;height:54px;padding:0 28px;border-radius:999px;border:1px solid transparent;font-weight:700;font-size:.98rem;letter-spacing:-.01em;white-space:nowrap;transition:transform .3s cubic-bezier(.2,.8,.2,1),background .25s,border-color .25s,color .25s}
.btn .arr{display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .arr{transform:translateX(4px)}
.btn:hover .arr-d{transform:translateY(4px)}
.btn-primary{background:var(--lime);color:#0a0a0a}
.btn-primary:hover{background:#FF8547}
.btn-ghost{border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn-sm{height:46px;padding:0 22px;font-size:.92rem}
.ulink{position:relative;display:inline-block;padding-bottom:4px;font-weight:700}
.ulink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.ulink:hover::after,.ulink:focus-visible::after{transform:scaleX(1)}
.ulink .arr{display:inline-block;transition:transform .3s}
.ulink:hover .arr{transform:translateX(4px)}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;border-bottom:1px solid transparent;transition:background .35s,backdrop-filter .35s,border-color .35s}
.nav.scrolled{background:rgba(8,8,8,.68);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line)}
.nav-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:76px}
.logo{display:inline-flex;align-items:center;gap:12px;font-weight:800;font-size:1.12rem;letter-spacing:-.03em}
.logo em{font-style:normal;color:var(--mute);font-weight:600}
.nav-links{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.4vw,38px)}
.nl{position:relative;display:inline-block;padding:6px 0;font-size:.94rem;font-weight:600;color:var(--mute);transition:color .25s}
.nl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nl:hover{color:var(--text)}
.nl:hover::after{transform:scaleX(1)}
.nl.active{color:var(--lime)}
.nl.active::after{transform:scaleX(1)}
.nav-cta{justify-self:end;display:block!important}
.nav-cta-m{display:none}
.burger{display:none;justify-self:end;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);position:relative}
.burger span{position:absolute;left:14px;right:14px;height:2px;background:var(--text);transition:transform .3s,top .3s}
.burger span:first-child{top:18px}
.burger span:last-child{top:26px}
.nav.open .burger span:first-child{top:22px;transform:rotate(45deg)}
.nav.open .burger span:last-child{top:22px;transform:rotate(-45deg)}

/* hero */
.hero{padding:clamp(40px,6vw,88px) 0 clamp(64px,8vw,120px);position:relative;overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero-pill{display:inline-flex;align-items:center;gap:12px;padding:8px 16px 8px 14px;border:1px solid var(--line-2);border-radius:999px;font-size:.86rem;font-weight:600;color:var(--mute);margin-bottom:30px}
.hero-h{font-size:clamp(2.55rem,5.3vw,5.3rem);line-height:.95;letter-spacing:-.05em;font-weight:800;text-transform:uppercase}
.hero-h .neg{display:block;color:var(--dim);margin-bottom:.12em}
.hero-h .pos{display:block}
.hero-h em{font-style:normal;color:var(--lime)}
.hero-sub{margin-top:32px;color:var(--mute);font-size:clamp(1.05rem,1.5vw,1.22rem);max-width:33em}
.hero-sub b{color:var(--text);font-weight:600}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

/* hero visual */
.hv{position:relative;width:100%;max-width:520px;margin-left:auto;aspect-ratio:520/600;border:1px solid var(--line);border-radius:28px;background:
  radial-gradient(circle at 1px 1px,rgba(255,255,255,.09) 1px,transparent 1.5px) 0 0/26px 26px,var(--panel)}
.hv-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hv-base{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s .3s cubic-bezier(.4,.1,.2,1) forwards}
.hv-flow{fill:none;stroke:var(--lime);stroke-width:1.5;stroke-dasharray:2 11;stroke-linecap:round;opacity:0;animation:fadein .6s 2.6s forwards,flow 1.6s 2.6s linear infinite}
.hv-in{stroke:rgba(255,255,255,.12);stroke-width:1;stroke-dasharray:2 4}
.hv-scatter{fill:rgba(255,255,255,.28)}
.hv-scatter.g{fill:var(--lime);opacity:.7}
.hv-node{opacity:0;animation:fadein .5s forwards}
.hv-node .ring{fill:var(--bg);stroke:rgba(255,255,255,.35);stroke-width:1.5}
.hv-node .core{fill:var(--lime)}
.hv-node .pulse{fill:none;stroke:var(--lime);stroke-width:1.2;transform-box:fill-box;transform-origin:center;opacity:0;animation:pulse 2.8s ease-out infinite}
.hv-l{position:absolute;display:flex;flex-direction:column;line-height:1.2;opacity:0;animation:fadein .6s forwards}
.hv-l.r{transform:translate(16px,-50%)}
.hv-l.l{transform:translate(calc(-100% - 16px),-50%);text-align:right;align-items:flex-end}
.hv-l b{font-weight:800;font-size:clamp(.82rem,1.4vw,1rem);letter-spacing:-.02em}
.hv-l .v{color:var(--lime);font-weight:800;font-size:clamp(1rem,2vw,1.4rem);letter-spacing:-.035em}
.hv-l small{color:var(--dim);font-size:clamp(.66rem,1.1vw,.78rem);font-weight:600}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
@keyframes flow{to{stroke-dashoffset:-26}}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.3);opacity:0}}

/* trust */
.trust{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
.trust-h{font-size:clamp(1.35rem,2.8vw,2.3rem);line-height:1.05;letter-spacing:-.04em;font-weight:800;text-transform:uppercase;max-width:20em}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.trust-c{display:flex;align-items:center;gap:16px;padding:26px 26px;border-right:1px solid var(--line);font-weight:800;letter-spacing:.02em;font-size:.95rem;text-transform:uppercase;transition:background .3s,color .3s}
.trust-c:last-child{border-right:0}
.trust-c svg{width:28px;height:28px;color:var(--lime);flex:none}
.trust-c:hover{background:var(--panel-2)}

/* generic svg icon */
.ico{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* problem */
.prob-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:start}
.prob-l .lead{margin-top:28px}
.prob-list{margin-top:44px;border-top:1px solid var(--line)}
.prob-list li{display:grid;grid-template-columns:22px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid var(--line)}
.prob-list li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lime);margin-top:9px}
.prob-list b{display:block;font-weight:800;letter-spacing:-.02em;font-size:1.06rem}
.prob-list span{color:var(--mute);font-size:.97rem}
.prob-r{position:sticky;top:110px}
.seg{display:inline-flex;padding:4px;border:1px solid var(--line-2);border-radius:999px;margin-bottom:18px}
.seg button{padding:9px 20px;border-radius:999px;font-weight:700;font-size:.88rem;color:var(--mute);transition:background .25s,color .25s}
.seg button[aria-pressed="true"]{background:var(--lime);color:#0a0a0a}
.sys{position:relative;width:100%;aspect-ratio:1/1.02;border:1px solid var(--line);border-radius:28px;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 1px,transparent 1.5px) 0 0/26px 26px,var(--panel)}
.sys-svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s .6s}
.sys.on .sys-svg{opacity:1}
.sys-svg polyline{fill:none;vector-effect:non-scaling-stroke}
.sys-main{stroke:var(--lime);stroke-width:1.6;stroke-dasharray:5 7;animation:flow 1.6s linear infinite}
.sys-loop{stroke:rgba(255,106,26,.4);stroke-width:1;stroke-dasharray:2 6}
.pill{position:absolute;left:var(--x0);top:var(--y0);transform:translate(-50%,-50%) rotate(var(--r0));display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel-2);font-weight:700;font-size:.8rem;white-space:nowrap;color:var(--mute);transition:left 1.2s cubic-bezier(.2,.8,.2,1),top 1.2s cubic-bezier(.2,.8,.2,1),transform 1.2s cubic-bezier(.2,.8,.2,1),color .6s,border-color .6s}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dim);transition:background .6s}
.sys.on .pill{left:var(--x1);top:var(--y1);transform:translate(-50%,-50%) rotate(0deg);color:var(--text);border-color:rgba(255,106,26,.45)}
.sys.on .pill::before{background:var(--lime)}
.sys-cap{margin-top:16px;color:var(--mute);font-size:.95rem;min-height:3em}
.sys-cap b{color:var(--text)}

/* services */
.sec-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(40px,6vw,72px)}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svc{position:relative;display:flex;flex-direction:column;gap:18px;padding:30px 26px 32px;min-height:290px;border:1px solid var(--line);border-radius:22px;background:var(--panel);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s}
.svc:hover{transform:translateY(-6px);border-color:rgba(255,106,26,.55);background:var(--panel-2)}
.svc-i{width:52px;height:52px;border-radius:14px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--lime);transition:background .3s,color .3s,border-color .3s}
.svc-i svg{width:24px;height:24px}
.svc:hover .svc-i{background:var(--lime);color:#0a0a0a;border-color:var(--lime)}
.svc h3{font-size:1.3rem;font-weight:800;letter-spacing:-.03em;text-transform:uppercase;margin-top:auto}
.svc p{color:var(--mute);font-size:.97rem;line-height:1.55}
.svc-wide{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:36px;min-height:0;border-color:rgba(255,106,26,.35)}
.svc-wide .svc-t{display:flex;gap:22px;align-items:flex-start;max-width:560px}
.svc-wide h3{margin-top:0;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chips span{padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;font-size:.84rem;font-weight:700;color:var(--mute)}
.chips i{font-style:normal;color:var(--dim);font-weight:700}
.chips .out{background:var(--lime);border-color:var(--lime);color:#0a0a0a}

/* engine */
.engine{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow-x:clip}
.eng-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center}
.eng-quote{margin-top:32px;padding-left:22px;border-left:2px solid var(--lime);font-size:clamp(1.2rem,2.2vw,1.65rem);line-height:1.3;font-weight:700;letter-spacing:-.03em;max-width:17em}
.eng-quote span{color:var(--mute)}
.eng-wrap{padding:44px 96px 52px}
.eng-ring{position:relative;width:100%;max-width:480px;margin:0 auto;aspect-ratio:1}
.eng-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eng-track{fill:none;stroke:rgba(255,255,255,.16);stroke-width:.3;stroke-dasharray:.6 1.4}
.eng-in{fill:none;stroke:rgba(255,255,255,.07);stroke-width:.25}
.eng-core{position:absolute;left:50%;top:50%;width:46%;transform:translate(-50%,-50%);text-align:center;transition:opacity .3s}
.eng-core small{display:block;color:var(--lime);font-weight:800;font-size:.78rem;letter-spacing:.02em}
.eng-core h3{font-size:clamp(1.05rem,2vw,1.55rem);letter-spacing:-.04em;font-weight:800;text-transform:uppercase;line-height:1.05;margin:6px 0}
.eng-core p{color:var(--mute);font-size:.86rem;line-height:1.45}
.eng-core.swap{opacity:0}
.eng-node{position:absolute;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%}
.eng-node i{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:var(--panel);border:1px solid var(--line-2);font-style:normal;font-weight:800;font-size:.8rem;transition:background .3s,color .3s,transform .3s,border-color .3s,box-shadow .3s}
.eng-node.act i{background:var(--lime);color:#0a0a0a;border-color:var(--lime);transform:scale(1.22);box-shadow:0 0 0 7px var(--lime-soft)}
.eng-node .lab{position:absolute;white-space:nowrap;font-weight:700;font-size:.9rem;letter-spacing:-.01em;color:var(--mute);transition:color .3s}
.eng-node.act .lab{color:var(--text)}
.eng-node .lab{}
.eng-node.t .lab{bottom:calc(100% + 12px);left:50%;transform:translateX(-50%)}
.eng-node.b .lab{top:calc(100% + 12px);left:50%;transform:translateX(-50%)}
.eng-node.r .lab{left:calc(100% + 14px);top:50%;transform:translateY(-50%)}
.eng-node.l .lab{right:calc(100% + 14px);top:50%;transform:translateY(-50%)}
.eng-legend{display:none}

/* industries */
.ind-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.ind{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:480px;padding:34px;border:1px solid var(--line);border-radius:28px;background:var(--panel);overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s}
.ind:hover,.ind:focus-within{transform:translateY(-6px);border-color:rgba(255,106,26,.5)}
.ind-art{position:absolute;left:0;right:0;top:0;height:58%;width:100%;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.ind:hover .ind-art{transform:scale(1.04) translateY(-4px)}
.ind::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,var(--panel) 62%);z-index:1;pointer-events:none}
.ind-body{position:relative;z-index:2}
.ind h3{font-size:clamp(1.7rem,3vw,2.3rem);line-height:1;letter-spacing:-.045em;font-weight:800;text-transform:uppercase}
.ind p{margin-top:12px;color:var(--mute);max-width:24em}
.ind-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.ind-more>div{overflow:hidden}
.ind:hover .ind-more,.ind:focus-within .ind-more{grid-template-rows:1fr}
.ind dl{margin:20px 0 4px;border-top:1px solid var(--line);opacity:0;transition:opacity .4s .1s}
.ind:hover dl,.ind:focus-within dl{opacity:1}
.ind dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.ind dt{color:var(--dim);font-weight:600}
.ind dd{font-weight:700;text-align:right}
.ind dd.lime{color:var(--lime)}
.ind .ulink{margin-top:22px}
.ind-note{margin-top:22px;color:var(--dim);font-size:.85rem}
.a-line{fill:none;stroke:rgba(255,255,255,.25);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.a-soft{fill:rgba(255,255,255,.07);stroke:none}
.a-lime{fill:none;stroke:var(--lime);stroke-width:1.8;stroke-linecap:round}
.a-dot{fill:var(--lime)}

/* why */
.why-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start}
.why-l{position:sticky;top:120px}
.why-l .lead{margin-top:28px}
.why-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.why-c{padding:28px 26px 32px;border:1px solid var(--line);border-radius:22px;background:var(--panel);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s}
.why-c:hover{transform:translateY(-6px);border-color:rgba(255,106,26,.5)}
.why-n{font-size:clamp(4rem,7vw,6rem);line-height:.9;font-weight:800;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.35);transition:color .35s,-webkit-text-stroke-color .35s}
.why-c:hover .why-n{color:var(--lime);-webkit-text-stroke-color:var(--lime)}
.why-c h3{margin-top:26px;font-size:1.2rem;font-weight:800;letter-spacing:-.03em;text-transform:uppercase}
.why-c p{margin-top:10px;color:var(--mute);font-size:.95rem;line-height:1.55}

/* cases */
.cases{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.chip{padding:10px 20px;border:1px solid var(--line-2);border-radius:999px;font-weight:700;font-size:.9rem;color:var(--mute);transition:background .25s,color .25s,border-color .25s,transform .25s}
.chip:hover{border-color:var(--lime);color:var(--text)}
.chip[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:#0a0a0a}
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.case{display:flex;flex-direction:column;gap:22px;padding:30px;border:1px solid var(--line);border-radius:24px;background:var(--bg);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s}
.case[hidden]{display:none}
.case:hover{transform:translateY(-5px);border-color:rgba(255,106,26,.5)}
.case-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.case h3{font-size:1.2rem;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.case-city{color:var(--dim);font-size:.88rem;font-weight:600}
.tag{flex:none;padding:6px 12px;border-radius:8px;background:var(--lime-soft);color:var(--lime);font-size:.76rem;font-weight:800;letter-spacing:.01em}
.case-obj{color:var(--mute);font-size:.95rem;line-height:1.5}
.case-obj b{color:var(--text);font-weight:700}
.case-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.big{font-size:clamp(2rem,3.4vw,3rem);line-height:1;font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.stat-l{display:block;margin-top:10px;color:var(--dim);font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.case-q{display:flex;align-items:center;gap:16px;font-size:.92rem}
.case-q strong{font-size:1.15rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bar{flex:1;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--lime);border-radius:6px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.case-res{margin-top:auto;padding:16px 18px;border-radius:14px;background:var(--panel);font-weight:700;letter-spacing:-.015em;display:flex;gap:12px;align-items:flex-start}
.case-res::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--lime);margin-top:8px}
.foot-note{margin-top:22px;color:var(--dim);font-size:.85rem}

/* process */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-top:56px}
.track{position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line)}
.track i{display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform 2s cubic-bezier(.5,.1,.2,1) .2s}
.steps.on .track i{transform:scaleX(1)}
.step{position:relative}
.step::before{content:"";position:absolute;top:-56px;left:0;width:20px;height:20px;border-radius:50%;background:var(--bg);border:2px solid var(--line-2);transition:background .4s,border-color .4s}
.steps.on .step::before{background:var(--lime);border-color:var(--lime)}
.steps.on .step:nth-child(3)::before{transition-delay:.6s}
.steps.on .step:nth-child(4)::before{transition-delay:1.1s}
.steps.on .step:nth-child(5)::before{transition-delay:1.6s}
.step-n{font-weight:800;font-size:.95rem;color:var(--lime);letter-spacing:-.01em}
.step h3{margin-top:12px;font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:800;letter-spacing:-.045em;text-transform:uppercase;line-height:1}
.step p{margin-top:14px;color:var(--mute);font-size:.98rem;line-height:1.55}
.step ul{margin-top:20px;border-top:1px solid var(--line)}
.step li{padding:11px 0;border-bottom:1px solid var(--line);font-size:.9rem;font-weight:600}
.loopnote{display:flex;align-items:center;gap:16px;margin-top:56px;padding:22px 26px;border:1px solid var(--line);border-radius:20px;color:var(--mute);font-size:.98rem}
.loopnote b{color:var(--text)}

/* about */
.about{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center}
.about .lead{margin-top:28px;color:var(--text);font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.5;font-weight:500;letter-spacing:-.02em}
.about .lead+.lead{margin-top:18px;color:var(--mute);font-size:1.02rem}
.dg{width:100%;aspect-ratio:480/300;border:1px solid var(--line);border-radius:28px;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 1px,transparent 1.5px) 0 0/26px 26px,var(--bg)}
.dg svg{width:100%;height:100%}
.dg text{font-family:inherit;font-weight:800;font-size:17px;fill:var(--text);letter-spacing:-.01em}
.dg .sub{font-weight:600;font-size:13px;fill:var(--dim)}
.dg-ring{fill:none;stroke:var(--lime);stroke-width:1.2;transform-box:fill-box;transform-origin:center;opacity:0;animation:pulse 3.2s ease-out infinite}

/* final cta */
.final{padding:clamp(60px,8vw,110px) 0}
.cta-card{position:relative;overflow:hidden;border:1px solid var(--line-2);border-radius:36px;background:var(--panel);padding:clamp(40px,7vw,96px) clamp(26px,6vw,88px)}
.cta-card .txt{position:relative;z-index:2;max-width:640px}
.cta-card h2{font-size:clamp(2.4rem,6vw,5.2rem);line-height:.94;letter-spacing:-.05em;font-weight:800;text-transform:uppercase}
.cta-card p{margin-top:28px;color:var(--mute);font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:30em}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px 30px;margin-top:38px}
.cta-art{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:56%;max-width:640px;z-index:1}

/* footer */
.foot{border-top:1px solid var(--line);padding:56px 0 44px}
.foot-in{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:start;
}

.foot-links{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.foot-links ul{
    display:flex;
    flex-wrap:nowrap;
    gap:28px;
    margin:0;
}

.foot-s{
    display:flex;
    gap:12px;
    margin-top:24px;
}
.foot-tag{margin-top:16px;color:var(--dim);font-size:.92rem;max-width:22em}
.foot ul{display:flex;flex-wrap:wrap;gap:12px 28px}
.foot ul a{color:var(--mute);font-weight:600;font-size:.95rem;position:relative;padding-bottom:3px;transition:color .25s}
.foot ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.foot ul a:hover{color:var(--text)}
.foot ul a:hover::after{transform:scaleX(1)}
.foot-s{display:flex;gap:12px;grid-column:2;justify-content:flex-start;margin-top:5px}
.foot-s a{padding:9px 18px;border:1px solid var(--line-2);border-radius:999px;font-weight:700;font-size:.88rem;transition:border-color .25s,color .25s}
.foot-s a:hover{border-color:var(--lime);color:var(--lime)}
.foot-b{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--dim);font-size:.88rem}

/* dialog */
dialog{margin:auto;width:min(520px,calc(100% - 28px));padding:0;border:1px solid var(--line-2);border-radius:28px;background:var(--panel);color:var(--text)}
dialog::backdrop{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dlg{position:relative;padding:34px 30px 32px}
.dlg-x{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);font-size:1.1rem;transition:border-color .25s,color .25s}
.dlg-x:hover{border-color:var(--lime);color:var(--lime)}
.dlg h3{font-size:1.7rem;line-height:1.05;letter-spacing:-.045em;font-weight:800;text-transform:uppercase;padding-right:40px;margin-top:14px}
.dlg .sub{margin-top:10px;color:var(--mute);font-size:.96rem}
.dlg form{display:grid;gap:16px;margin-top:26px}
.fld{display:grid;gap:7px;font-weight:700;font-size:.85rem}
.fld input,.fld select{width:100%;height:50px;padding:0 16px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg);color:var(--text);font:inherit;font-weight:500;font-size:.98rem;transition:border-color .25s}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--lime)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dlg .btn{width:100%;margin-top:6px}
.ld{display:none;gap:8px}
.ld i{width:9px;height:9px;border-radius:50%;background:#0a0a0a;animation:blink 1s infinite}
.ld i:last-child{animation-delay:.25s}
.btn.loading .lbl{display:none}
.btn.loading .ld{display:inline-flex}
@keyframes blink{0%,100%{transform:scale(.6);opacity:.5}50%{transform:scale(1.2);opacity:1}}
.done{display:none;padding:22px 0 6px}
.done.show{display:block}
.done p{color:var(--mute);margin-top:12px}

/* responsive */
@media (max-width:1100px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc-wide{flex-direction:column;align-items:flex-start}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:56px}
  .steps .track{display:none}
  .steps .step::before{top:-30px;background:var(--lime);border-color:var(--lime)}
  .steps{padding-top:30px}
}
@media (max-width:980px){
  .nav-in{grid-template-columns:1fr auto}
  .nav-cta{display:none}
  .burger{display:block}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:8px var(--pad) 24px;background:rgba(8,8,8,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);display:none}
  .nav.open .nav-links{display:flex}
  .nav.open{background:rgba(8,8,8,.96)}
  .nl{padding:16px 0;font-size:1.1rem;border-bottom:1px solid var(--line)}
  .nl::after{display:none}
  .nav-cta-m{display:block;margin-top:20px}
  .nav-cta-m .btn{width:100%}
  .hero-grid,.prob-grid,.eng-grid,.why-grid,.about-grid,.sec-head{grid-template-columns:1fr}
  .hv{margin:0 auto}
  .prob-r,.why-l{position:static}
  .eng-wrap{padding:44px 70px 52px}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .trust-c:nth-child(2){border-right:0}
  .trust-c:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .ind-grid,.case-grid{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
  .cta-art{opacity:.9;width:70%;right:-22%;top:auto;bottom:-16%;transform:none}
  .cta-card{padding-bottom:clamp(150px,34vw,240px)}
}
@media (max-width:700px){
  body{font-size:16px}
  .cta-row .btn,.cta-actions .btn{width:100%}
  .eng-wrap{padding:24px 0 12px}
  .eng-node .lab{display:none}
  .eng-node{width:30px;height:30px}
  .eng-legend{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:28px;counter-reset:l}
  .eng-legend li{display:flex;gap:10px;align-items:center;font-weight:700;font-size:.9rem;color:var(--mute)}
  .eng-legend b{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-size:.72rem;color:var(--text)}
  .eng-core{width:52%}
  .eng-core p{display:none}
  .why-cards{grid-template-columns:1fr}
  .case-stats{gap:8px}
  .case{padding:24px 20px}
  .ind{min-height:440px;padding:26px 22px}
  .ind-more{grid-template-rows:1fr}
  .ind dl{opacity:1}
  .steps{grid-template-columns:1fr;padding:0 0 0 44px;row-gap:44px}
  .steps .track{display:block;left:9px;right:auto;top:6px;bottom:6px;width:2px;height:auto}
  .steps .track i{transform-origin:top;transform:scaleY(0);width:100%;height:100%}
  .steps.on .track i{transform:scaleY(1)}
  .steps .step::before{top:2px;left:-44px;background:var(--bg);border-color:var(--line-2)}
  .steps.on .step::before{background:var(--lime);border-color:var(--lime)}
  .svc-grid{grid-template-columns:1fr}
  .svc{min-height:0}
  .svc-wide .svc-t{flex-direction:column;gap:16px}
  .frow{grid-template-columns:1fr}
  .pill{font-size:.72rem;padding:7px 10px;gap:6px}
  .foot-b{flex-direction:column;align-items:flex-start}
  .hv-l small{display:none}
}
@media (hover:none){
  .ind-more{grid-template-rows:1fr}
  .ind dl{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hv-base{stroke-dashoffset:0}
  .hv-node,.hv-l,.hv-flow{opacity:1}
  .steps .track i{transform:none}
}

/* TwoDots Media: lowercase headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .hero-h,
.section-title, .section-kicker,
.card h3, .svc h3, .ind h3, .case h3, .why h3,
.cta-card h2, .dlg h2 {
  text-transform: lowercase;
}


/* v1.1.0 production responsiveness and interaction fixes */
html, body { max-width:100%; overflow-x:hidden; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
.btn, .burger, .nav-links a, .ulink { position:relative; z-index:2; }
.nav { isolation:isolate; }
.nav-in { min-width:0; }
.hero-grid > *, .sec-head > *, .prob-grid > *, .eng-grid > *, .why-grid > *, .about-grid > * { min-width:0; }
.hero-h, .h2, .lead, .case, .ind, .svc, .cta-card { overflow-wrap:anywhere; }

.page-landing, .industry-page { min-height:60vh; }
.page-hero { padding:clamp(90px,12vw,160px) 0 80px; }
.page-hero .eyebrow { margin-bottom:18px; }
.page-hero .h1 { font-size:clamp(2.8rem,7vw,6.5rem); line-height:.96; letter-spacing:-.055em; font-weight:800; }
.page-hero .lead { margin-top:24px; max-width:46em; }
.page-hero .cta-row { margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }

.industry-hero { position:relative; overflow:hidden; }
.industry-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:42px; }
.industry-meta > div { padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--panel); }
.industry-meta dt { color:var(--dim); font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.industry-meta dd { margin-top:6px; font-weight:800; }
.industry-sections { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:40px; }
.industry-panel { padding:28px; border:1px solid var(--line); border-radius:24px; background:var(--panel); }
.industry-panel h3 { font-size:1.4rem; line-height:1.1; font-weight:800; }
.industry-panel p { margin-top:12px; color:var(--mute); }
.industry-cta { margin-top:48px; padding:clamp(32px,6vw,70px); border:1px solid var(--line-2); border-radius:28px; background:linear-gradient(135deg,var(--panel),#0d0d0d); }
.industry-cta h2 { font-size:clamp(2rem,4.5vw,4rem); line-height:.98; letter-spacing:-.05em; font-weight:800; }
.industry-cta p { margin-top:14px; color:var(--mute); max-width:42em; }
.form-error { min-height:20px; color:#ff9b75; font-size:.86rem; margin-top:4px; }
dialog[open] { z-index:1000; }
dialog::backdrop { z-index:999; }
@media (max-width:980px){
  .wrap { width:100%; }
  .hero-grid { gap:42px; }
  .hero-h { font-size:clamp(2.7rem,8vw,5.2rem); }
  .hv { width:min(100%,560px); }
  .eng-wrap { width:100%; max-width:100%; overflow:hidden; }
  .industry-meta { grid-template-columns:1fr; }
  .industry-sections { grid-template-columns:1fr; }
}
@media (max-width:700px){
  :root { --pad:18px; }
  body { font-size:16px; line-height:1.6; }
  section { padding:68px 0; }
  .wrap { padding-left:var(--pad); padding-right:var(--pad); }
  .nav-in { height:68px; }
  .logo { min-width:0; font-size:.95rem; }
  .logo span:last-child { white-space:nowrap; }
  .hero { padding-top:40px; padding-bottom:68px; }
  .hero-h { font-size:clamp(2.35rem,11.5vw,3.8rem); line-height:.94; }
  .hero-sub { font-size:1rem; }
  .cta-row { width:100%; flex-direction:column; }
  .cta-row .btn, .cta-actions .btn { width:100%; }
  .hv { width:100%; max-width:390px; margin:0 auto; }
  .trust-grid { grid-template-columns:1fr; }
  .trust-c { border-right:0!important; border-bottom:1px solid var(--line); }
  .trust-c:last-child { border-bottom:0; }
  .h2 { font-size:clamp(2rem,9.5vw,3.2rem); }
  .lead { font-size:1rem; }
  .prob-grid, .why-grid, .about-grid, .sec-head { gap:28px; }
  .eng-wrap { padding:20px 0 10px; min-height:0; }
  .eng-ring { width:min(100%,360px); aspect-ratio:1; margin:0 auto; }
  .eng-core { width:52%; }
  .eng-legend { grid-template-columns:1fr 1fr; }
  .ind { min-height:0; }
  .case-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .big { font-size:clamp(1.35rem,6.5vw,2rem); }
  .stat-l { font-size:.68rem; }
  .page-hero { padding:72px 0 56px; }
  .page-hero .h1 { font-size:clamp(2.55rem,12vw,4.2rem); }
  .page-hero .cta-row { flex-direction:column; }
  .page-hero .cta-row .btn { width:100%; }
  .industry-meta, .industry-sections { margin-top:28px; }
  .industry-panel { padding:22px; }
  .industry-cta { margin-top:32px; padding:30px 22px; }
  dialog { width:calc(100% - 20px); max-width:none; max-height:calc(100dvh - 20px); margin:auto; border-radius:22px; }
  .dlg { padding:28px 18px 22px; }
  .dlg h3 { font-size:1.45rem; }
  .frow { grid-template-columns:1fr; }
  .dlg .btn { min-height:52px; }
}
@media (prefers-reduced-motion:reduce){
  .eng-node, .hv-node, .hv-l, .hv-flow, .steps .track i { animation:none!important; }
}