/* Causelane V2.1 — a consistent type/space system with interaction-led motion.
   The existing V2 remains the semantic HTML baseline. This layer adds refinement. */
:root {
  --max:1220px;
  --frame:clamp(22px,5vw,72px);
  --ink:#171b2d;
  --night:#181c30;
  --accent:#ff7355;
  --easing:cubic-bezier(.22,1,.36,1);
  --reader:Arial,"Helvetica Neue",Helvetica,sans-serif;
}
html{scroll-padding-top:86px}
body{font-family:var(--reader);font-feature-settings:"kern";overflow-x:clip}
/* Keep the technical mono notation — consistent throughout the entire studio. */
.micro-label,.eyebrow,.section-kicker,.lens-display-category,.lens-display-head,
.flow-board-header,.flow-legend,.flow-readout-number,.stage-pill,.stage-text,
.hero-index,.hero-foot,.detail-side>.micro-label,.visual-top,.showcase-note {font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.075em}
.micro-label,.eyebrow,.section-kicker{font-size:11px;line-height:1.5;font-weight:650}
.container,.nav-inner{width:min(calc(100% - 2 * var(--frame)),var(--max))}
/* Calm, disciplined size scale. Big editorial type is reserved for meaningful hero messages. */
h1,h2,h3{letter-spacing:-.048em;text-wrap:balance}
p{overflow-wrap:break-word}
.site-header{height:72px;box-shadow:none}
.brand{font-size:25px;gap:9px;letter-spacing:-.075em}
.brand-symbol-v2{width:33px;height:33px}
.brand-symbol-v2 svg{width:33px;height:33px}
.nav-desktop{gap:28px}.nav-desktop a{font-size:13px}
.nav-contact{min-height:42px;padding:11px 17px}
.site-header .brand:hover .brand-symbol-v2{transform:rotate(-22deg) scale(1.06)}
/* Opening: fewer giant lines, better baseline, wider usable board area. */
.hero-upper{padding-top:24px}.hero-body{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(28px,4vw,56px);padding:55px 0 65px;align-items:center}
.hero h1{font:720 clamp(54px,6.7vw,96px)/.98 var(--text);letter-spacing:-.075em;max-width:690px}
.hero h1 em{font:italic 400 .88em/1.06 Georgia,"Times New Roman",serif;letter-spacing:-.075em;white-space:normal}
.hero-lede{margin-top:27px;font-size:clamp(16px,1.3vw,18px);line-height:1.62;max-width:510px}
.hero-buttons{margin-top:28px;gap:24px}
.hero .button{min-height:48px}.hero-foot{padding:18px 0;font-size:10px}
/* Flow is an active conceptual instrument, not an inert hero illustration. */
.flow-board{min-height:440px;border-radius:19px;box-shadow:0 23px 60px #4b55831f,0 2px 3px #1b254007}
.flow-board-header{height:52px;align-items:center;padding:13px 21px;border-bottom:1px solid #333b5618;gap:15px}
.flow-board-live{font:10px var(--mono);letter-spacing:.07em}
.motion-toggle{border:1px solid #c1c7dc;color:#4a55bd;background:#ffffffe0;border-radius:99px;display:inline-flex;align-items:center;gap:8px;padding:6px 11px;min-height:32px;min-width:126px;justify-content:center;cursor:pointer;transition:background .25s ease,color .25s ease}
.motion-toggle:hover,.motion-toggle:focus-visible{color:#fff;background:#5059cc;border-color:#5059cc}
.motion-toggle span:first-child{display:inline-block;font-size:15px;transition:transform .5s var(--easing)}
.motion-toggle:not([aria-pressed="true"]) span:first-child{animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:rotate(0)}50%{transform:rotate(65deg)}}
.flow-core{width:100px;height:100px;box-shadow:0 15px 42px #1c2c5840,0 0 0 12px #7e83d716;transition:box-shadow .6s ease,background .5s ease}
.flow-board.is-running .flow-core{animation:core-breathe 4.6s ease-in-out infinite}
@keyframes core-breathe{0%,100%{box-shadow:0 12px 30px #1c2c5840,0 0 0 10px #7e83d715}50%{box-shadow:0 18px 52px #1c2c5860,0 0 0 20px #7e83d71d}}
.flow-connectors>path:first-child{animation:flow-write 2.8s var(--easing) both,flow-dashes 13s linear infinite 3s}
@keyframes flow-dashes{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-1100}}
.flow-connectors>path:nth-child(2){stroke-dasharray:6 13;animation:flow-dashes 12s linear infinite reverse}
.flow-node{min-height:48px;transition:transform .45s var(--easing),background .4s,border-color .4s,box-shadow .4s;will-change:transform}
.flow-node.is-current{box-shadow:0 10px 28px #222b5133;transform:translateY(-3px)}
.flow-node.is-current::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#ff7355;right:12px;top:10px;box-shadow:0 0 0 5px #ff73552c}
.flow-readout{bottom:28px;left:21px;right:21px;min-height:68px;padding:12px 15px;display:grid;grid-template-columns:63px minmax(0,1fr);column-gap:10px;row-gap:3px;align-content:center}
.flow-readout-number{grid-row:1/3;margin:auto 0;font-size:10px}
.flow-readout-title{font-size:14px;line-height:1.3}
.flow-readout-copy{grid-column:2;max-width:none;margin:0;font-size:11px;line-height:1.5}
.flow-readout.is-advancing{animation:readout-change .48s var(--easing)}
@keyframes readout-change{0%{opacity:.45;transform:translateY(8px)}100%{opacity:1;transform:none}}
.flow-legend{bottom:104px;font-size:9px}
/* A calmer rhythm for headings and section blocks. */
.statement-section{padding:86px 0 91px}.statement-grid{grid-template-columns:25% 1fr;gap:30px;align-items:start}
.statement-grid h2{font:600 clamp(38px,4.15vw,63px)/1.12 var(--text);letter-spacing:-.065em;max-width:820px}
.statement-grid p{max-width:670px;font-size:17px;line-height:1.7}
.feature-section{padding:86px 0 98px}
.section-heading{align-items:end;gap:25px;margin-bottom:28px}
.section-heading h2{font:620 clamp(39px,4.5vw,66px)/1.07 var(--text);letter-spacing:-.06em;margin-top:9px}
.stage-pill{font-size:10px;line-height:1.5;align-items:center}
/* Flagship: typography matches hierarchy; use a moving beam instead of empty pills. */
.aria-showcase{display:grid;grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);overflow:hidden;border-radius:18px}
.aria-showcase-copy{padding:clamp(30px,3.9vw,59px)}
.aria-showcase-copy h3{font:600 clamp(34px,3.2vw,49px)/1.09 var(--text);letter-spacing:-.06em;margin-top:29px}
.aria-showcase-copy>p:not(.showcase-note){font-size:16px;max-width:470px;line-height:1.65}
.aria-visual{margin:13px 13px 13px 0;border-radius:13px;min-height:430px;display:flex;flex-direction:column}
.visual-signal{padding:clamp(28px,3.3vw,46px);flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.visual-signal>strong{font:500 clamp(36px,3.5vw,53px)/1.14 Georgia,"Times New Roman",serif;letter-spacing:-.06em;color:#fff;max-width:530px}
.visual-signal>span:first-child{font:11px var(--mono);letter-spacing:.07em;color:#d9defb;margin-bottom:12px}
/* SVG-free CSS beam visualization, with true motion across 5 discrete evidence steps */
.signal-draw{margin-top:30px;width:min(100%,410px);height:70px;position:relative;display:block;overflow:visible}
.signal-flow{height:64px;width:100%;display:flex;align-items:center;justify-content:space-between;position:relative;padding:0 12px}
.signal-flow:before{content:"";position:absolute;left:7%;right:7%;top:50%;height:2px;background:linear-gradient(90deg,#6975d5,#b2bdff,#ff8b79);opacity:.8;transform:translateY(-50%)}
.signal-flow:after{content:"";position:absolute;left:5%;top:50%;width:14%;height:4px;background:#fff;filter:drop-shadow(0 0 12px #aab8ff);border-radius:99px;transform:translateY(-50%);animation:signal-travel 6.5s cubic-bezier(.45,.1,.55,.9) infinite alternate}
@keyframes signal-travel{to{left:79%}}
.signal-flow i{position:relative;z-index:1;width:14px;height:14px;border:2px solid #a9b6ff;background:#242a58;border-radius:50%;box-shadow:0 0 0 6px #7d88f31e;animation:signal-node 3.8s ease-in-out infinite}
.signal-flow i:nth-child(2){animation-delay:.55s}.signal-flow i:nth-child(3){animation-delay:1.1s}.signal-flow i:nth-child(4){animation-delay:1.65s}.signal-flow i:nth-child(5){animation-delay:2.2s}
@keyframes signal-node{50%{transform:scale(1.27);box-shadow:0 0 0 11px #7d88f32b;background:#8b9af0}}
.visual-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;border-top:1px solid #ffffff1b}
.visual-steps div{min-width:0;position:relative;transition:background .3s ease;isolation:isolate}
.visual-steps div.is-active{background:#39436e}
.visual-steps strong{font-size:11px;letter-spacing:-.02em;display:block;white-space:normal}
/* Product navigator: a dense, polished selectable instrument with decisive transitions. */
.lens-section{padding:84px 0 105px}
.lens-head{max-width:890px;margin-bottom:33px}
.lens-head h2{font:610 clamp(40px,4.55vw,66px)/1.08 var(--text);letter-spacing:-.06em;margin-top:10px}
.lens-head h2 em{font:italic 400 .96em Georgia,"Times New Roman",serif;letter-spacing:-.065em}
.lens-head p{font-size:16px;line-height:1.65;margin-top:18px}
.lens-frame{grid-template-columns:minmax(300px,40%) minmax(0,60%);min-height:420px;border-radius:18px}
.lens-option{min-height:102px;grid-template-columns:27px minmax(0,1fr) 22px;gap:16px;padding:19px 27px}
.lens-option strong{font-size:clamp(20px,2vw,27px);letter-spacing:-.04em;white-space:normal}
.lens-option span{font-size:11px}
.lens-display{padding:24px 31px 28px}
.lens-display-art{inset:35px 0 110px;transition:transform .9s var(--easing),filter .9s,opacity .7s;opacity:.67}
.lens-display-art svg{transform:scale(.95);transition:transform 1.1s var(--easing)}
.lens-display-name{font-size:clamp(47px,5vw,75px);line-height:1.06;letter-spacing:-.07em;margin:8px 0 12px;overflow-wrap:anywhere}
.lens-text{padding:98px 0 0;max-width:560px}
.lens-display-desc{font-size:16px;max-width:510px;line-height:1.55}
.lens-display-stage{font-size:10px;line-height:1.5}
.lens-cta-row{margin-top:23px;padding-top:16px;gap:12px}
.lens-display-head{font-size:10px;gap:10px}
.lens-display[data-transition="true"] .lens-display-art{transform:translate3d(10px,-12px,0) scale(1.05);opacity:.92}
.lens-display[data-transition="true"] .lens-display-name{animation:display-enter .6s var(--easing) both}
@keyframes display-enter{from{opacity:.12;transform:translate3d(0,22px,0);letter-spacing:-.13em}to{opacity:1;transform:none;letter-spacing:-.07em}}
.lens-frame[data-active-product="xsight"] .lens-display{background:linear-gradient(140deg,#e7f7f9,#eef1ff 65%,#fdfdf9)}
.lens-frame[data-active-product="trace"] .lens-display{background:linear-gradient(140deg,#f2edf6,#eaeffa 65%,#fdfcf9)}
.lens-frame[data-active-product="resque-sales"] .lens-display{background:linear-gradient(140deg,#fff1e8,#f1eeff 65%,#fffdf9)}
/* Cards and project details share scale and readable contrast. */
.portfolio-section{padding:87px 0 95px}
.project-card{min-height:330px;padding:27px;border-radius:16px;transition:transform .45s var(--easing),box-shadow .45s,border-color .3s,background .3s}
.project-card:hover,.project-card:focus-visible{transform:translateY(-7px);box-shadow:0 25px 48px #232b5e20}
.project-card .project-mark{background:#f2f3fc;color:#333e9b;border:1px solid #d4d8f6;box-shadow:inset 0 0 0 6px #ffffff;transition:transform .7s var(--easing),background .35s,color .35s}
.project-card:hover .project-mark{transform:rotate(-13deg) scale(1.08);background:#333e9b;color:#fff}
.project-card .card-heading strong{letter-spacing:-.055em;font-size:clamp(20px,2vw,29px)}
.project-card .card-blurb{font-size:13px;line-height:1.55}
.portfolio-strip{margin-top:24px}
.method-section{padding:90px 0}
.method-left h2{font:610 clamp(37px,4.1vw,60px)/1.1 var(--text);letter-spacing:-.06em}
.method-right>div{transition:background .4s,border-color .4s,transform .5s var(--easing)}
.method-right>div.is-awake{transform:translateX(8px);background:#ffffff55}
.contact-ribbon{padding:85px 0}.contact-ribbon h2{font:610 clamp(38px,4.25vw,61px)/1.1 var(--text);letter-spacing:-.06em}
/* Project page pictured: 150px titles and near-black-on-black symbols were inappropriate. */
.page-hero{padding:68px 0 78px}.page-intro h1{font:600 clamp(51px,6.1vw,89px)/1.06 var(--text);letter-spacing:-.07em;margin:20px 0 25px}
.page-intro h1 em{font:italic 400 .93em Georgia,serif}
.detail-hero{padding:34px 0 76px}
.crumb{margin-bottom:59px}.detail-header{margin-top:18px}
.detail-header h1{font:620 clamp(58px,7.2vw,99px)/1.03 var(--text);letter-spacing:-.075em}
.detail-headline{font:400 clamp(21px,2.3vw,30px)/1.35 var(--text);margin-top:20px;color:#e0e4ee;letter-spacing:-.04em}
.detail-symbol{width:145px;height:145px;font-size:86px;color:#f0f2ff!important;background:radial-gradient(circle at 25% 20%,#5664ac55,#202844)!important;border:1px solid #707ca28a;box-shadow:inset 0 0 70px #667ada13;flex-shrink:0}
.detail-summary{margin-top:28px;font-size:17px;line-height:1.67;color:#cdd2e1}
.detail-content{padding:78px 0 90px}.detail-layout{grid-template-columns:24% minmax(0,1fr);gap:40px}
.detail-main>section{margin-bottom:43px;padding-bottom:38px}
.detail-main h2{font:600 clamp(32px,3.5vw,50px)/1.12 var(--text);margin:14px 0 18px}
.detail-main p{font-size:16px;line-height:1.75;color:#4b5469}
.related-section{padding:85px 0}
/* Stronger reveal grammar: content fades and moves at different speeds, no generic stagger jitter. */
[data-reveal]{opacity:0;transform:translate3d(0,28px,0);transition:transform .9s var(--easing),opacity .8s ease;transition-delay:var(--reveal-delay,0ms)}
[data-reveal].is-visible{opacity:1;transform:translate3d(0,0,0)}
[data-line-reveal]{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--easing)}
[data-line-reveal].is-visible{clip-path:inset(0 0 0 0)}
.aria-visual.in-view .signal-flow:before{animation:flow-ambient 3s ease-in-out infinite alternate}
@keyframes flow-ambient{to{opacity:.28}}
@view-transition{navigation:auto}
@media(max-width:1050px){
  .hero h1{font-size:clamp(51px,6.4vw,79px)}
  .hero-body{gap:22px}
  .flow-board{min-height:418px}
  .flow-node{padding:10px}.flow-node strong{font-size:12px}
  .lens-frame{grid-template-columns:minmax(240px,40%) minmax(0,60%)}
  .lens-option{padding:14px 19px}.lens-display{padding:20px}
  .detail-header h1{font-size:clamp(55px,7vw,84px)}
}
@media(max-width:760px){
  :root{--frame:20px}
  .site-header{height:66px}
  .hero-body{grid-template-columns:1fr;gap:31px;padding:43px 0 50px}
  .hero h1{font-size:clamp(50px,11vw,77px);line-height:1.02}
  .hero-lede{margin-top:22px;font-size:16px;max-width:580px}
  .hero-buttons{margin-top:24px}
  .flow-board{min-height:410px}
  .flow-board-header{height:46px;padding:10px 13px}
  .flow-readout{bottom:16px;left:13px;right:13px}
  .flow-legend{bottom:101px;left:16px}
  .statement-section,.feature-section,.portfolio-section,.method-section,.lens-section{padding:68px 0}
  .statement-grid{display:block}.statement-grid h2{font-size:clamp(37px,8.8vw,52px)}
  .section-heading h2,.lens-head h2{font-size:clamp(36px,8.4vw,52px)}
  .lens-head p{font-size:15px}
  .aria-showcase{display:flex;flex-direction:column}
  .aria-showcase-copy{padding:29px 27px 30px}
  .aria-showcase-copy h3{font-size:clamp(30px,7.2vw,42px)}
  .aria-visual{margin:0 12px 12px;min-height:350px}
  .visual-signal{padding:26px 24px}
  .visual-signal>strong{font-size:clamp(32px,7.4vw,45px)}
  .signal-draw{margin-top:13px}
  .lens-frame{display:grid;grid-template-columns:1fr;min-height:0}
  .lens-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .lens-option{min-height:78px;padding:16px;gap:9px;grid-template-columns:24px 1fr}
  .lens-option strong{font-size:clamp(17px,4.3vw,22px)}
  .lens-display{min-height:370px;padding:20px}
  .lens-text{padding-top:115px}
  .lens-display-name{font-size:clamp(45px,9vw,67px)}
  .project-card{min-height:295px}
  .page-hero{padding:60px 0}
  .page-intro h1{font-size:clamp(50px,10vw,73px)}
  .detail-header h1{font-size:clamp(49px,10vw,75px)}
  .detail-symbol{width:98px;height:98px;font-size:59px}
  .detail-content{padding:65px 0}
  .detail-main h2{font-size:clamp(34px,8vw,47px)}
  .contact-ribbon h2{font-size:clamp(35px,8vw,50px)}
}
@media(max-width:480px){
 :root{--frame:18px}
 .hero h1{font-size:clamp(46px,11.6vw,59px)}
 .hero-upper .eyebrow{font-size:9px}
 .flow-board{min-height:382px}
 .flow-core{height:76px;width:76px}
 .flow-node{min-height:44px;padding:7px 8px}
 .flow-node strong{font-size:11px}.flow-node span{font-size:9px}
 .flow-node:nth-child(1){left:3%;top:21%}.flow-node:nth-child(2){right:3%;top:21%}
 .flow-node:nth-child(3){left:3%;top:59%}.flow-node:nth-child(4){right:3%;top:59%}
 .flow-readout{grid-template-columns:52px 1fr}
 .flow-readout-title{font-size:12px}.flow-readout-copy{font-size:10px}
 .flow-legend{font-size:8px}
 .lens-display{min-height:342px}
 .lens-text{padding-top:101px}
 .lens-display-name{font-size:48px}
 .lens-display-desc{font-size:15px}
 .section-heading{gap:20px}
 .section-heading h2{font-size:clamp(35px,9vw,46px)}
 .detail-header{gap:9px}
 .detail-header h1{font-size:clamp(46px,12vw,66px)}
 .detail-symbol{width:76px;height:76px;font-size:47px}
 .detail-headline{font-size:21px}
 .project-card{min-height:280px}
 .project-card .card-heading strong{font-size:23px}
 .motion-toggle{min-width:105px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  [data-reveal],[data-line-reveal]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .flow-core,.flow-connectors>path,.motion-toggle span:first-child,.signal-flow:after,.signal-flow i,.aria-visual.in-view .signal-flow:before{animation:none!important}
  .project-card:hover,.project-card:focus-visible,.method-right>div.is-awake{transform:none!important}
  .lens-display[data-transition="true"] .lens-display-name{animation:none!important}
  @view-transition{navigation:none}
}
/* Do not hide substantive content before a visitor scrolls. This also guarantees that
   full-page screenshots, browser reader modes and print output contain the content. */
[data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
[data-reveal].is-visible{animation:section-enter .85s var(--easing) both}
[data-line-reveal]{clip-path:none!important}
[data-line-reveal].is-visible{animation:section-enter .88s var(--easing) both}
@keyframes section-enter{from{opacity:.55;transform:translate3d(0,25px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
/* Entry sequence: short, repeat-free, compositor-friendly. */
.hero-copy h1{animation:hero-come-in .95s var(--easing) both}
.hero-lede{animation:hero-come-in 1s var(--easing) .16s both}
.hero-buttons{animation:hero-come-in 1s var(--easing) .24s both}
@keyframes hero-come-in{from{opacity:.4;transform:translate3d(0,20px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
/* Visibility of secondary actions on dark surfaces and consistent project metadata. */
.detail-actions .text-link.on-dark,.page-hero .text-link.on-dark{color:#dbe1f8}
.detail-actions .text-link.on-dark:hover{color:#fff}
.detail-side,.detail-side p{color:#8b92a4}
.detail-side strong{color:#232b44}
/* The animation can be paused when the section is outside the viewport. */
.aria-visual:not(.in-view) .signal-flow:after,
.aria-visual:not(.in-view) .signal-flow i{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  [data-reveal].is-visible,[data-line-reveal].is-visible,
  .hero-copy h1,.hero-lede,.hero-buttons{animation:none!important}
}