:root{
  color-scheme:light;
  --paper:#fffdf8;
  --base:#f3ecdf;
  --ink:#211f1b;
  --muted:#625a50;
  --line:#dfd2bd;
  --green:#0d625a;
  --green-dark:#073d37;
  --gold:#b58732;
  --hero-x:0;
  --hero-y:0;
  --scroll-y:0;
}
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:92px;
}
html,body{min-height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  letter-spacing:0;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.flow-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:30;
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:0 clamp(22px,5vw,72px);
  background:rgba(255,253,248,.82);
  border-bottom:1px solid rgba(223,210,189,.62);
  backdrop-filter:blur(16px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.flow-logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.flow-logo img{width:148px}
.flow-logo span{
  color:#534c43;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.mobile-header-cta{display:none}
.flow-nav{
  display:flex;
  align-items:center;
  gap:22px;
  color:#332f2a;
  font-size:14px;
  font-weight:850;
}
.nav-cta{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  padding:0 16px;
  background:var(--green);
  color:#fff;
  border-radius:8px;
}
.flow-page{
  position:relative;
  overflow:hidden;
  background:var(--paper);
}
.flow-thread{
  position:absolute;
  top:calc(100svh - 30px);
  bottom:0;
  left:50%;
  z-index:0;
  width:1px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(13,98,90,.28),rgba(13,98,90,.08) 18%,rgba(13,98,90,0) 78%);
}
.flow-thread span{
  position:sticky;
  top:52%;
  display:block;
  width:9px;
  height:9px;
  margin-left:-4px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 8px rgba(13,98,90,.08);
  opacity:.72;
}
.flow-hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  padding:78px clamp(22px,5vw,72px) 0;
  background:
    linear-gradient(90deg,rgba(255,253,248,1) 0%,rgba(255,253,248,.965) 39%,rgba(255,253,248,.68) 100%),
    var(--paper);
}
.flow-hero::before{
  content:"";
  position:absolute;
  top:78px;
  right:-9vw;
  width:min(58vw,900px);
  height:calc(100svh - 78px);
  min-height:500px;
  pointer-events:none;
  background:url("devision-firstview-planning-v3.png") right center/cover no-repeat;
  opacity:.12;
  filter:blur(.2px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 78%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 78%,transparent 100%);
  transform:translate3d(calc(var(--hero-x) * -9px), calc(var(--hero-y) * -7px), 0);
  transition:opacity 1.2s ease, transform .7s ease-out;
}
.ambient-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 76% 26%,rgba(185,135,50,.18),transparent 25%),
    radial-gradient(circle at 54% 58%,rgba(13,98,90,.07),transparent 30%),
    linear-gradient(120deg,transparent 0%,rgba(185,135,50,.04) 49%,transparent 68%),
    linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(243,236,223,.72) 88%);
  transition:opacity 1.2s ease;
}
.flow-hero-grid{
  position:relative;
  z-index:2;
  width:min(1520px,100%);
  min-height:calc(100svh - 78px);
  margin:0 auto;
  display:grid;
  grid-template-columns:.94fr 1.06fr;
  gap:clamp(22px,3.4vw,56px);
  align-items:center;
}
.flow-hero-copy{
  max-width:620px;
  padding:42px 0 72px;
}
.kicker,
.section-kicker{
  margin:0;
  color:var(--green);
  font-size:12px;
  font-weight:950;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.flow-hero h1{
  margin:20px 0 0;
  max-width:640px;
  color:var(--ink);
  font-size:clamp(34px,4.18vw,53px);
  line-height:1.23;
  letter-spacing:0;
  font-weight:520;
}
.flow-hero h1 span{
  display:block;
  white-space:nowrap;
}
.lead{
  max-width:560px;
  margin:28px 0 0;
  color:var(--muted);
  font-size:clamp(15px,1.18vw,18px);
  line-height:2;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:36px;
}
.hero-reassurance{
  width:min(560px,100%);
  margin:12px 0 0;
  color:#5b5349;
  font-size:13px;
  line-height:1.8;
  font-weight:760;
}
.button{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  border:1px solid var(--green);
  border-radius:999px;
  font-size:14px;
  font-weight:820;
  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    background-color .24s ease,
    border-color .24s ease,
    box-shadow .24s ease;
}
.button.primary,
.button.dark{
  background:var(--green);
  color:#fff;
}
.button.secondary{
  background:rgba(255,253,248,.72);
  color:var(--green);
}
.button:hover{transform:translateY(-2px)}
.button.primary:hover,
.button.dark:hover{
  background:var(--green-dark);
  box-shadow:0 12px 26px rgba(7,61,55,.16);
}
.button.secondary:hover{
  background:rgba(255,253,248,.94);
  box-shadow:0 10px 24px rgba(51,43,34,.08);
}
.hero-facts{
  width:min(560px,100%);
  margin:20px 0 0;
  padding:12px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:0;
  list-style:none;
  border-top:1px solid rgba(223,210,189,.64);
}
.hero-facts li{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  padding:0 16px 0 0;
  margin:0 16px 0 0;
  color:#6d6459;
  font-size:11px;
  line-height:1.35;
  white-space:nowrap;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.hero-facts li:not(:last-child)::after{
  content:"";
  position:absolute;
  top:.15em;
  right:0;
  width:1px;
  height:1.1em;
  background:rgba(223,210,189,.9);
}
.hero-facts span{color:#80766a;font-weight:720}
.hero-facts strong{color:var(--green);font-size:12px;font-weight:820}
.hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  margin-left:clamp(-128px,-6.2vw,-48px);
  perspective:1200px;
}
.hero-visual::before{
  content:"";
  position:absolute;
  inset:8% -6% 5% 6%;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,253,248,0),rgba(243,236,223,.48) 46%,rgba(255,253,248,0));
  filter:blur(22px);
}
.design-layer{
  position:absolute;
  z-index:2;
  pointer-events:none;
  border:1px solid rgba(255,253,248,.42);
  background:linear-gradient(135deg,rgba(255,253,248,.16),rgba(255,253,248,.025));
  box-shadow:0 18px 44px rgba(43,35,25,.035);
  backdrop-filter:blur(2px);
}
.design-layer span{
  display:block;
  background:rgba(255,253,248,.48);
  border-radius:999px;
}
.layer-one{
  top:14%;
  left:8%;
  width:min(190px,25%);
  min-height:104px;
  padding:16px;
  transform:translate3d(calc(var(--hero-x) * 18px), calc(var(--hero-y) * 12px), 0) rotate(-4deg);
  opacity:.5;
}
.layer-one::before{
  content:"";
  display:block;
  width:54%;
  height:30px;
  margin-bottom:14px;
  border:1px solid rgba(255,253,248,.42);
  background:linear-gradient(135deg,rgba(13,98,90,.09),rgba(185,135,50,.07));
}
.layer-one span:nth-child(1){width:84%;height:5px}
.layer-one span:nth-child(2){width:62%;height:5px;margin-top:10px}
.layer-one span:nth-child(3){width:44%;height:5px;margin-top:10px}
.layer-three{
  left:39%;
  bottom:13%;
  width:min(142px,20%);
  min-height:66px;
  padding:13px;
  border-color:rgba(185,135,50,.16);
  background:linear-gradient(135deg,rgba(255,253,248,.3),rgba(185,135,50,.045));
  transform:translate3d(calc(var(--hero-x) * 10px), calc(var(--hero-y) * -14px), 0) rotate(2deg);
  opacity:.56;
}
.layer-three::before{
  content:"";
  position:absolute;
  left:13px;
  top:13px;
  width:25px;
  height:25px;
  border-radius:50%;
  background:rgba(13,98,90,.1);
  box-shadow:35px 0 0 rgba(185,135,50,.11);
}
.layer-three span:nth-child(1){width:70%;height:4px;margin:36px 0 0 auto;background:rgba(13,98,90,.1)}
.layer-three span:nth-child(2){width:46%;height:4px;margin:8px 0 0 auto;background:rgba(13,98,90,.07)}
.hero-photo{
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio:1.9/1;
  margin:0;
  overflow:hidden;
  background:transparent;
  box-shadow:0 34px 96px rgba(43,35,25,.11);
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0%,#000 7%,#000 94%,transparent 100%),
    linear-gradient(180deg,transparent 0%,#000 6%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg,transparent 0%,#000 7%,#000 94%,transparent 100%),
    linear-gradient(180deg,transparent 0%,#000 6%,#000 91%,transparent 100%);
  mask-composite:intersect;
}
.hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,253,248,.28) 0%,rgba(255,253,248,.08) 28%,rgba(255,253,248,0) 100%),
    linear-gradient(180deg,rgba(255,253,248,0) 0%,rgba(255,253,248,.12) 100%);
}
.hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:translate3d(calc(var(--hero-x) * -12px), calc(var(--hero-y) * -8px), 0) scale(1.02);
  transition:transform .7s ease-out;
}
.has-motion.is-ready .hero-photo img{
  animation:image-drift 14s ease-in-out infinite alternate;
}
.scroll-cue{
  display:none;
  position:absolute;
  z-index:3;
  left:50%;
  bottom:26px;
  display:grid;
  justify-items:center;
  gap:9px;
  color:#7b7164;
  font-size:10px;
  font-weight:820;
  letter-spacing:.12em;
  text-transform:uppercase;
  transform:translateX(-50%);
}
.scroll-cue::after{
  content:"";
  width:1px;
  height:42px;
  background:linear-gradient(180deg,var(--green),rgba(13,98,90,0));
  transform-origin:top;
  animation:scroll-line 1.8s ease-in-out infinite;
}
.flow-intro{
  position:relative;
  z-index:1;
  padding:clamp(34px,4.2vw,58px) clamp(22px,5vw,72px) clamp(24px,3.2vw,42px);
  background:linear-gradient(180deg,var(--paper) 0%,#f7f1e8 100%);
}
.intro-inner{
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:clamp(28px,7vw,96px);
  align-items:center;
}
.intro-copy h2,
.service-copy h2,
.works-copy h2{
  margin:18px 0 0;
  color:var(--ink);
  font-size:clamp(26px,2.7vw,36px);
  line-height:1.23;
  font-weight:560;
  letter-spacing:0;
}
.service-copy h2 span{
  display:block;
}
.intro-text p,
.service-copy p,
.works-copy p{
  margin:0;
  color:var(--muted);
  font-size:clamp(14px,1.18vw,16px);
  line-height:1.9;
  font-weight:500;
}
.intro-steps{
  margin:20px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  list-style:none;
}
.intro-steps li{
  position:relative;
  min-height:56px;
  display:flex;
  align-items:flex-end;
  padding:13px;
  overflow:hidden;
  border:1px solid rgba(223,210,189,.72);
  border-radius:8px;
  background:rgba(255,253,248,.58);
}
.intro-steps li::before{
  content:"";
  position:absolute;
  left:13px;
  right:13px;
  top:13px;
  height:1px;
  background:linear-gradient(90deg,rgba(13,98,90,.5),rgba(185,135,50,.28),transparent);
  transform:scaleX(.45);
  transform-origin:left;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.intro-steps li::after{
  content:"";
  position:absolute;
  top:22px;
  left:13px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(13,98,90,.12);
  box-shadow:34px 0 0 rgba(185,135,50,.14),68px 0 0 rgba(13,98,90,.08);
}
.intro-steps span{
  position:relative;
  color:var(--green-dark);
  font-size:13px;
  font-weight:880;
}
.intro-text.is-visible .intro-steps li:nth-child(1)::before{transform:scaleX(.72)}
.intro-text.is-visible .intro-steps li:nth-child(2)::before{transform:scaleX(.88);transition-delay:.12s}
.intro-text.is-visible .intro-steps li:nth-child(3)::before{transform:scaleX(1);transition-delay:.24s}
.flow-build{
  position:relative;
  z-index:1;
  scroll-margin-top:116px;
  min-height:106svh;
  padding:clamp(48px,6vw,76px) clamp(22px,5vw,72px) clamp(52px,5vw,72px);
  background:
    linear-gradient(180deg,#f7f1e8 0%,#fffdf8 50%,#f7f1e8 100%);
}
.flow-build::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(13,98,90,.022) 1px,transparent 1px) 0 0/78px 78px,
    linear-gradient(rgba(13,98,90,.02) 1px,transparent 1px) 0 0/78px 78px;
  mask-image:radial-gradient(circle at 66% 46%,#000 0 32%,transparent 70%);
}
.build-grid{
  position:relative;
  width:min(1280px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:.68fr 1.32fr;
  gap:clamp(32px,5vw,82px);
  align-items:start;
}
.build-copy{
  position:sticky;
  top:112px;
  padding-top:clamp(8px,4.5vw,58px);
}
.build-copy h2{
  margin:18px 0 0;
  color:#302d28;
  font-size:clamp(31px,3.08vw,44px);
  line-height:1.27;
  font-weight:500;
  letter-spacing:0;
}
.build-copy h2 span{
  display:block;
}
.build-copy p:not(.section-kicker){
  margin:24px 0 0;
  color:#5d554b;
  font-size:clamp(15px,1.28vw,18px);
  line-height:2;
  font-weight:520;
}
.build-proof{
  width:min(430px,100%);
  margin:22px 0 0;
  padding:14px 16px;
  color:#5e554b;
  font-size:13px;
  line-height:1.75;
  font-weight:760;
  border-left:3px solid rgba(13,98,90,.72);
  background:rgba(255,253,248,.56);
}
.build-offer{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin:28px 0 0;
  padding:14px 0 13px;
  border-top:1px solid rgba(223,210,189,.68);
  border-bottom:1px solid rgba(223,210,189,.5);
}
.build-offer span{
  min-width:132px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.build-offer small,
.build-offer strong{
  display:block;
}
.build-offer small{
  color:#7a7065;
  font-size:11px;
  line-height:1;
  font-weight:820;
}
.build-offer strong{
  margin-top:7px;
  color:var(--green-dark);
  font-size:16px;
  line-height:1.1;
  font-weight:900;
}
.build-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin:22px 0 0;
}
.build-actions .button{
  min-height:42px;
  padding:12px 17px;
  font-size:13px;
}
.build-actions .button.secondary{
  min-height:auto;
  padding:0 0 3px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--green-dark);
  box-shadow:none;
}
.build-stage{
  position:sticky;
  top:82px;
  min-height:min(660px,calc(100svh - 98px));
  display:grid;
  place-items:center;
}
.build-canvas{
  position:relative;
  width:min(880px,100%);
  aspect-ratio:1.36/1;
  border:1px solid rgba(223,210,189,.52);
  border-radius:12px;
  background:
    radial-gradient(circle at 22% 16%,rgba(255,253,248,.9),transparent 32%),
    linear-gradient(135deg,rgba(255,253,248,.68),rgba(243,236,223,.46));
  box-shadow:0 36px 130px rgba(48,39,27,.1);
  overflow:hidden;
}
.build-photo-wash{
  position:absolute;
  inset:-8% -2% -5% 18%;
  opacity:calc(var(--photo-wash-opacity,.1) * .68);
  background:url("devision-firstview-planning-v3.png") center/cover no-repeat;
  filter:saturate(.98) contrast(.98);
  mix-blend-mode:multiply;
  transform:translate3d(var(--photo-wash-x,26px),var(--photo-wash-y,20px),0) scale(var(--photo-wash-scale,1.08));
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 78%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 78%,transparent 100%);
}
.build-gridlines{
  position:absolute;
  inset:0;
  opacity:calc(var(--build-grid-opacity,.14) * .42);
  background:
    linear-gradient(rgba(13,98,90,.045) 1px,transparent 1px) 0 0/42px 42px,
    linear-gradient(90deg,rgba(13,98,90,.045) 1px,transparent 1px) 0 0/42px 42px;
  transform:scale(var(--build-grid-scale,.96));
  transition:opacity .2s linear;
}
.build-sheet,
.build-browser,
.build-phone{
  position:absolute;
  will-change:transform,opacity;
}
.build-sheet{
  padding:18px;
  border:1px solid rgba(223,210,189,.46);
  border-radius:8px;
  background:rgba(255,253,248,.54);
  box-shadow:0 18px 52px rgba(48,39,27,.045);
  opacity:var(--sheet-opacity,.55);
  filter:blur(var(--sheet-blur,0px));
}
.build-sheet span{
  display:block;
  width:54%;
  height:42px;
  border-radius:6px;
  background:linear-gradient(135deg,rgba(13,98,90,.22),rgba(185,135,50,.14));
}
.build-sheet i{
  display:block;
  height:6px;
  margin-top:12px;
  border-radius:999px;
  background:rgba(98,90,80,.18);
}
.build-sheet i:nth-of-type(1){width:88%}
.build-sheet i:nth-of-type(2){width:66%}
.build-sheet i:nth-of-type(3){width:44%}
.sheet-one{
  left:5%;
  top:15%;
  width:27%;
  transform:translate3d(var(--sheet1-x,-86px),var(--sheet1-y,72px),0) rotate(var(--sheet1-r,-12deg));
}
.sheet-two{
  right:4%;
  top:11%;
  width:25%;
  transform:translate3d(var(--sheet2-x,90px),var(--sheet2-y,42px),0) rotate(var(--sheet2-r,10deg));
}
.sheet-three{
  left:10%;
  bottom:12%;
  width:23%;
  transform:translate3d(var(--sheet3-x,-54px),var(--sheet3-y,88px),0) rotate(var(--sheet3-r,8deg));
}
.build-browser{
  left:16%;
  top:9%;
  width:77%;
  min-height:71%;
  border:1px solid rgba(223,210,189,.74);
  border-radius:14px;
  background:rgba(255,253,248,.94);
  box-shadow:
    0 48px 124px rgba(48,39,27,.16),
    0 18px 58px rgba(13,98,90,var(--browser-complete-glow,0)),
    0 0 0 1px rgba(255,253,248,.46) inset;
  transform:
    translate3d(var(--browser-x,16px),calc(var(--browser-y,88px) + var(--browser-complete-y,0px)),0)
    scale(calc(var(--browser-scale,.9) + var(--browser-complete-scale,0)));
  opacity:var(--browser-opacity,.35);
  overflow:hidden;
}
.build-browser::before{
  content:"";
  position:absolute;
  inset:34px 0 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(13,98,90,.22),transparent);
  transform:scaleX(var(--browser-line-scale,.2));
  transform-origin:left;
}
.build-browser::after{
  content:"";
  position:absolute;
  inset:34px 0 0;
  pointer-events:none;
  opacity:var(--browser-sheen-opacity,0);
  background:linear-gradient(105deg,transparent 0%,rgba(255,253,248,.56) 44%,transparent 58%);
  transform:translateX(var(--browser-sheen-x,-80%));
}
.build-bar{
  height:34px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 14px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#f5ece1,#efe3d2);
}
.build-bar span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#d6c7b2;
}
.build-bar strong{
  margin-left:8px;
  color:#8a8175;
  font-size:10px;
  line-height:1;
  font-weight:760;
  letter-spacing:.04em;
  text-transform:lowercase;
}
.build-browser-nav{
  height:34px;
  display:flex;
  align-items:center;
  gap:15px;
  padding:0 20px;
  border-bottom:1px solid rgba(223,210,189,.58);
  background:rgba(255,253,248,.82);
  opacity:var(--browser-nav-opacity,.36);
  transform:translateY(var(--browser-nav-y,8px));
}
.build-browser-nav span{
  display:block;
  width:auto;
  height:auto;
  border-radius:999px;
  background:transparent;
  color:#8a8175;
  font-size:8px;
  line-height:1;
  font-weight:760;
  letter-spacing:.03em;
}
.build-browser-nav span:nth-child(1){
  color:var(--green);
}
.build-browser-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 132px;
  gap:18px;
  padding:18px 20px 0;
}
.build-browser-main{
  position:relative;
  min-width:0;
}
.build-hero-line{
  position:relative;
  margin:0;
  min-height:148px;
  padding:22px 22px;
  border:1px solid rgba(13,98,90,.2);
  border-radius:12px;
  background:
    linear-gradient(90deg,rgba(13,98,90,.1) 0 4px,transparent 4px),
    radial-gradient(circle at 22% 18%,rgba(13,98,90,.06),transparent 0 18%,transparent 42%),
    linear-gradient(110deg,rgba(255,253,248,.98) 0%,rgba(250,246,238,.95) 53%,rgba(232,222,205,.72) 100%);
  transform:translateY(var(--hero-block-y,8px)) scaleX(var(--hero-block-scale,.82));
  transform-origin:left;
  overflow:hidden;
}
.build-hero-line::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:46%;
  border-radius:0 12px 12px 0;
  background:
    linear-gradient(90deg,rgba(255,253,248,.58),rgba(255,253,248,.12) 34%,rgba(9,70,64,.22)),
    url("devision-service-planning.png") center/cover no-repeat;
  opacity:calc(.24 + var(--photo-resolve,.1) * .42);
  filter:
    saturate(calc(.72 + var(--photo-resolve,.1) * .2))
    contrast(calc(.86 + var(--photo-resolve,.1) * .12));
  transform:scale(calc(1.055 - var(--photo-resolve,.1) * .045));
}
.build-hero-line::after{
  content:"";
  position:absolute;
  right:calc(46% + 16px);
  bottom:16px;
  width:54px;
  height:42px;
  border:1px solid rgba(13,98,90,.12);
  border-radius:10px;
  background:rgba(255,253,248,.76);
  box-shadow:-68px -38px 0 rgba(13,98,90,.08);
  opacity:var(--hero-detail-opacity,.15);
}
.build-hero-line span,
.build-hero-line strong,
.build-hero-line em{
  display:block;
  position:relative;
  z-index:1;
  max-width:50%;
  font-style:normal;
}
.build-hero-line span{
  color:rgba(13,98,90,.82);
  font-size:9px;
  line-height:1;
  font-weight:840;
}
.build-hero-line strong{
  margin-top:10px;
  color:#282520;
  font-size:20px;
  line-height:1.26;
  font-weight:720;
}
.build-hero-line em{
  margin-top:9px;
  color:#766d62;
  font-size:10px;
  line-height:1.4;
  font-weight:700;
}
.build-focus-line{
  position:absolute;
  left:0;
  right:0;
  top:145px;
  height:1px;
  background:linear-gradient(90deg,rgba(13,98,90,0),rgba(13,98,90,.64),rgba(185,135,50,.5),rgba(13,98,90,0));
  opacity:var(--focus-line-opacity,0);
  transform:translateY(var(--focus-line-y,0px)) scaleX(var(--focus-line-scale,.16));
  transform-origin:left;
}
.build-mini-title{
  display:block;
  margin:15px 0 0;
  opacity:var(--mini-title-opacity,.35);
  transform:translateY(var(--mini-title-y,8px));
}
.build-mini-title span{
  display:block;
  height:auto;
  border-radius:0;
  background:transparent;
  letter-spacing:0;
}
.build-mini-title span:nth-child(1){
  width:auto;
  height:auto;
  color:rgba(13,98,90,.86);
  font-size:8px;
  line-height:1;
  font-weight:820;
}
.build-mini-title span:nth-child(2){
  width:auto;
  margin-top:6px;
  color:#302b24;
  font-size:11px;
  line-height:1.35;
  font-weight:780;
}
.build-body-lines{
  margin:10px 0 0;
}
.build-body-lines span{
  display:block;
  height:auto;
  margin-top:5px;
  padding-left:10px;
  border-radius:0;
  background:transparent;
  color:#746b60;
  font-size:8px;
  line-height:1.45;
  font-weight:720;
  opacity:var(--body-line-opacity,.58);
  transform:translateX(var(--body-line-x,0px)) scaleX(var(--body-line-scale,.72));
  transform-origin:left;
}
.build-body-lines span::before{
  content:"";
  position:absolute;
}
.build-body-lines span{
  position:relative;
}
.build-body-lines span::before{
  left:0;
  top:.64em;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(13,98,90,.42);
}
.build-body-lines span:nth-child(1),
.build-body-lines span:nth-child(2),
.build-body-lines span:nth-child(3){width:auto}
.build-blocks{
  display:grid;
  grid-template-columns:1.12fr .92fr 1fr;
  gap:9px;
  margin:14px 18px 18px;
}
.build-blocks span{
  position:relative;
  min-height:44px;
  display:flex;
  align-items:flex-end;
  padding:10px;
  border-radius:8px;
  background:linear-gradient(180deg,#f0e5d6,#e4d8c4);
  border:1px solid rgba(223,210,189,.52);
  color:#5a5045;
  font-size:9px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.03em;
  transform:translateY(var(--block-y,10px)) scale(var(--block-scale,.98));
  opacity:var(--block-opacity,.62);
}
.build-blocks span::before{
  content:"";
  position:absolute;
  top:10px;
  left:10px;
  width:24px;
  height:5px;
  border-radius:999px;
  background:rgba(13,98,90,.18);
}
.build-blocks span:nth-child(1){
  opacity:var(--block1-opacity,var(--block-opacity,.62));
  transform:translateY(var(--block1-y,var(--block-y,10px))) scale(var(--block-scale,.98));
}
.build-blocks span:nth-child(2){
  background:linear-gradient(180deg,#dcece7,#cbe0da);
  opacity:var(--block2-opacity,var(--block-opacity,.62));
  transform:translateY(calc(var(--block2-y,var(--block-y,10px)) + 4px)) scale(var(--block-scale,.98));
}
.build-blocks span:nth-child(3){
  opacity:var(--block3-opacity,var(--block-opacity,.62));
  transform:translateY(var(--block3-y,var(--block-y,10px))) scale(var(--block-scale,.98));
}
.build-mini-cta{
  width:96px;
  min-height:24px;
  margin:13px 0 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--green);
  color:#fff;
  font-size:10px;
  font-weight:900;
  box-shadow:0 10px 24px rgba(13,98,90,var(--mini-cta-glow,0));
  opacity:calc(var(--mini-cta-opacity,0) + var(--mini-cta-commit,0) * .1);
  transform:scaleX(calc(var(--mini-cta-scale,.72) + var(--mini-cta-peak,0) * .025));
  transform-origin:left;
}
.build-browser-side{
  min-height:208px;
  padding:13px;
  border:1px solid rgba(223,210,189,.5);
  border-radius:10px;
  background:
    linear-gradient(180deg,rgba(255,253,248,.78),rgba(247,241,232,.72)),
    linear-gradient(90deg,rgba(13,98,90,.08),transparent 4px);
  opacity:var(--side-opacity,.2);
  transform:translate3d(var(--side-x,18px),var(--side-y,10px),0) scale(var(--side-scale,.94));
}
.build-browser-side span{
  display:flex;
  min-height:78px;
  flex-direction:column;
  justify-content:flex-end;
  gap:5px;
  padding:10px;
  border-radius:9px;
  background:
    radial-gradient(circle at 82% 24%,rgba(255,253,248,.72),transparent 0 15%,transparent 28%),
    linear-gradient(135deg,rgba(185,135,50,.12),rgba(13,98,90,.1));
}
.build-browser-side strong,
.build-browser-side em{
  display:block;
  font-style:normal;
}
.build-browser-side strong{
  color:#2f2a23;
  font-size:10px;
  line-height:1.1;
  font-weight:800;
}
.build-browser-side em{
  color:#70665a;
  font-size:8px;
  line-height:1.2;
  font-weight:740;
}
.build-browser-side i{
  display:block;
  height:auto;
  margin-top:12px;
  border-radius:999px;
  border:1px solid rgba(13,98,90,.08);
  background:rgba(13,98,90,.045);
  color:#655b50;
  font-size:8px;
  line-height:1;
  font-style:normal;
  font-weight:820;
  padding:7px 8px;
}
.build-browser-side i:nth-of-type(1){width:auto}
.build-browser-side i:nth-of-type(2){width:auto}
.build-phone{
  right:3.4%;
  bottom:9%;
  width:8.7%;
  min-width:54px;
  padding:8px 7px 12px;
  border:1px solid rgba(255,253,248,.42);
  border-radius:18px;
  background:rgba(42,36,29,.52);
  box-shadow:0 14px 34px rgba(48,39,27,.08);
  transform:
    translate3d(var(--phone-x,72px),var(--phone-y,60px),0)
    rotate(var(--phone-r,7deg))
    scale(var(--phone-scale,.9));
  opacity:var(--phone-opacity,.2);
}
.build-phone span{
  display:block;
  width:22px;
  height:4px;
  margin:0 auto 12px;
  border-radius:999px;
  background:#4f473e;
}
.build-phone i{
  display:block;
  height:6px;
  margin:8px 8px 0;
  border-radius:999px;
  background:#eee6da;
}
.build-phone i:nth-of-type(1){
  height:34px;
  margin:0;
  border-radius:13px;
  background:#fffdf8;
}
.build-phone i:nth-of-type(2){width:76%}
.build-phone i:nth-of-type(3){width:54%}
.build-caption{
  display:none;
}
.flow-process{
  position:relative;
  z-index:1;
  padding:clamp(22px,3vw,42px) clamp(22px,5vw,72px) clamp(82px,10vw,128px);
  background:#f7f1e8;
}
.process-grid{
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:clamp(28px,5.8vw,82px);
  align-items:center;
}
.process-image{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:8px;
  background:#e8dccb;
  box-shadow:0 28px 80px rgba(48,39,27,.12);
  transform:translate3d(0,calc(var(--scroll-y) * -10px),0);
}
.process-image::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,253,248,.52) 46%,transparent 62%);
  transform:translateX(-120%);
}
.process-image.is-visible::before{
  animation:surface-scan 1.4s .22s cubic-bezier(.16,1,.3,1) both;
}
.process-image img{
  width:100%;
  aspect-ratio:1.18/1;
  height:auto;
  object-fit:cover;
}
.process-image figcaption{
  position:absolute;
  left:18px;
  bottom:18px;
  max-width:calc(100% - 36px);
  padding:10px 14px;
  border-radius:8px;
  background:rgba(255,253,248,.9);
  color:var(--green-dark);
  font-size:13px;
  line-height:1.5;
  font-weight:820;
}
.process-cards{
  display:grid;
  gap:14px;
}
.process-card{
  position:relative;
  padding:22px 24px;
  border-top:1px solid rgba(13,98,90,.28);
  background:rgba(255,253,248,.52);
  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    background-color .42s ease,
    border-color .42s ease,
    box-shadow .42s ease;
}
.process-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:3px;
  height:0;
  background:linear-gradient(180deg,var(--green),rgba(185,135,50,.72));
  transition:height .5s cubic-bezier(.16,1,.3,1);
}
.process-card.is-current{
  transform:translateX(-8px);
  border-color:rgba(13,98,90,.5);
  background:rgba(255,253,248,.82);
  box-shadow:0 18px 44px rgba(48,39,27,.08);
}
.process-card.is-current::before{height:100%}
.process-card span{
  color:var(--gold);
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
}
.process-card h3{
  margin:8px 0 0;
  font-size:21px;
  line-height:1.35;
  font-weight:760;
}
.process-card p{
  margin:9px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.85;
  font-weight:520;
}
.flow-service{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:clamp(30px,6vw,96px);
  align-items:center;
  padding:clamp(84px,12vw,144px) clamp(22px,5vw,72px) clamp(76px,10vw,128px);
  background:var(--green-dark);
  color:#fffdf8;
}
.flow-service::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,253,248,.1),transparent 28%),
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.2));
  pointer-events:none;
}
.flow-service::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:
    linear-gradient(rgba(255,253,248,.09) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(255,253,248,.08) 1px,transparent 1px) 0 0/44px 44px;
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 76%,transparent);
}
.service-copy,
.service-window{
  position:relative;
  z-index:1;
}
.service-copy .section-kicker{color:#b9d8d1}
.service-copy h2{color:#fffdf8}
.service-copy p{
  margin-top:24px;
  color:#d8e8e4;
}
.service-window{
  max-width:760px;
  justify-self:end;
  width:100%;
  border:1px solid rgba(255,253,248,.28);
  border-radius:10px;
  background:#fffdf8;
  color:var(--ink);
  box-shadow:0 40px 110px rgba(0,0,0,.22);
  transform:translate3d(calc(var(--hero-x) * 8px), calc(var(--hero-y) * 5px),0);
  transition:transform .7s ease-out;
}
.window-bar{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 16px;
  border-bottom:1px solid var(--line);
  background:#f5eee4;
}
.window-bar span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#d6c7b2;
}
.window-bar strong{
  margin-left:12px;
  color:#7a7166;
  font-size:12px;
  font-weight:850;
}
.window-body{
  padding:28px;
}
.window-hero{
  min-height:210px;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border-radius:8px;
  background:
    linear-gradient(180deg,rgba(13,98,90,.05),rgba(13,98,90,.56)),
    linear-gradient(135deg,#f2dfc7,#e6f0ec 55%,#b9d7cf);
}
.window-hero::before{
  content:"";
  position:absolute;
  inset:28px;
  border:1px solid rgba(255,253,248,.22);
  border-radius:7px;
  opacity:.65;
}
.window-hero{
  position:relative;
  overflow:hidden;
}
.window-hero::after{
  content:"";
  position:absolute;
  width:36%;
  height:1px;
  left:28px;
  top:36px;
  background:rgba(255,253,248,.45);
  box-shadow:0 20px 0 rgba(255,253,248,.24),0 40px 0 rgba(255,253,248,.18);
  animation:window-lines 4.8s ease-in-out infinite;
}
.window-hero small{
  position:relative;
  z-index:1;
  color:#eefaf7;
  font-size:12px;
  font-weight:900;
}
.window-hero strong{
  position:relative;
  z-index:1;
  max-width:420px;
  margin-top:8px;
  color:#fff;
  font-size:30px;
  line-height:1.25;
  font-weight:760;
}
.window-path{
  height:28px;
  position:relative;
}
.window-path::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,rgba(13,98,90,.18),rgba(185,135,50,.36),rgba(13,98,90,.18));
}
.window-path span{
  position:absolute;
  left:10%;
  top:50%;
  width:8px;
  height:8px;
  margin-top:-4px;
  border-radius:50%;
  background:var(--green);
  animation:path-dot 5.4s cubic-bezier(.66,0,.34,1) infinite;
}
.window-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.window-grid span{
  min-height:64px;
  display:flex;
  align-items:center;
  padding:12px;
  border-radius:8px;
  background:#eee6da;
  color:#50483d;
  font-size:13px;
  line-height:1.45;
  font-weight:800;
  transition:transform .28s ease, background-color .28s ease;
}
.window-grid span:nth-child(1){animation:grid-lift 5.8s ease-in-out infinite}
.window-grid span:nth-child(2){animation:grid-lift 5.8s .35s ease-in-out infinite}
.window-grid span:nth-child(3){animation:grid-lift 5.8s .7s ease-in-out infinite}
.window-grid span:nth-child(4){animation:grid-lift 5.8s 1.05s ease-in-out infinite}
.phone-card{
  position:absolute;
  right:-28px;
  bottom:-34px;
  width:142px;
  min-height:230px;
  padding:12px 12px 18px;
  border:1px solid rgba(255,253,248,.34);
  border-radius:24px;
  background:#171512;
  color:#fff;
  box-shadow:0 28px 70px rgba(0,0,0,.28);
  animation:phone-float 8s ease-in-out infinite;
}
.phone-card span{
  display:block;
  width:34px;
  height:4px;
  margin:0 auto 18px;
  border-radius:999px;
  background:#4d463d;
}
.phone-card strong{
  display:block;
  padding:18px 12px;
  border-radius:16px;
  background:#fffdf8;
  color:var(--green-dark);
  font-size:18px;
  line-height:1.35;
}
.phone-card i{
  display:block;
  height:8px;
  margin:12px 12px 0;
  border-radius:999px;
  background:#ddd3c3;
}
.phone-card i:nth-of-type(2){width:72%}
.phone-card i:nth-of-type(3){width:54%}
.flow-works-teaser{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:clamp(30px,6vw,98px);
  align-items:center;
  padding:clamp(88px,12vw,150px) clamp(22px,5vw,72px) clamp(92px,13vw,170px);
  background:linear-gradient(180deg,#f7f1e8 0%,var(--paper) 100%);
}
.flow-works-teaser::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(13,98,90,.24),transparent);
}
.works-copy{
  max-width:560px;
}
.works-copy p{
  margin-top:22px;
}
.works-copy .button{
  margin-top:30px;
}
.works-stack{
  position:relative;
  min-height:470px;
  transform:translate3d(0,calc(var(--scroll-y) * -8px),0);
}
.works-label{
  position:absolute;
  top:0;
  right:12%;
  z-index:3;
  padding:8px 12px;
  border:1px solid rgba(13,98,90,.16);
  border-radius:999px;
  background:rgba(255,253,248,.78);
  color:var(--green);
  font-size:10px;
  font-weight:920;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 14px 34px rgba(48,39,27,.08);
}
.work-shot{
  position:absolute;
  margin:0;
  overflow:hidden;
  border-radius:8px;
  background:#ece3d7;
  box-shadow:0 32px 90px rgba(48,39,27,.14);
  transition:transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s ease;
}
.work-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.work-shot.main{
  top:28px;
  left:6%;
  width:78%;
  aspect-ratio:16/10;
}
.works-stack.is-visible .work-shot.main{
  animation:work-main-settle 1.1s cubic-bezier(.16,1,.3,1) both;
}
.works-stack.is-visible .work-shot.sub-one{
  animation:work-sub-settle 1s .1s cubic-bezier(.16,1,.3,1) both;
}
.works-stack.is-visible .work-shot.sub-two{
  animation:work-phone-settle 1s .18s cubic-bezier(.16,1,.3,1) both;
}
.work-shot.sub-one{
  left:0;
  bottom:18px;
  width:38%;
  aspect-ratio:16/11;
}
.work-shot.sub-two{
  right:4%;
  bottom:0;
  width:20%;
  min-width:132px;
  aspect-ratio:9/18;
}
.has-motion .flow-header,
.has-motion .kicker,
.has-motion .flow-hero h1 span,
.has-motion .lead,
.has-motion .hero-actions,
.has-motion .hero-facts li,
.has-motion .hero-photo,
.has-motion .design-layer{
  transition-property:opacity, transform, filter;
  transition-timing-function:cubic-bezier(.16,1,.3,1);
  transition-duration:760ms;
}
.has-motion:not(.is-ready) .flow-header,
.has-motion:not(.is-ready) .kicker,
.has-motion:not(.is-ready) .lead,
.has-motion:not(.is-ready) .hero-actions,
.has-motion:not(.is-ready) .hero-facts li{
  opacity:0;
  transform:translateY(14px);
}
.has-motion:not(.is-ready) .flow-header{transform:translateY(-10px)}
.has-motion:not(.is-ready) .flow-hero h1 span{
  opacity:0;
  transform:translateY(.32em);
}
.has-motion:not(.is-ready) .hero-photo{
  opacity:0;
  filter:blur(10px);
  transform:translateY(18px) scale(.985);
}
.has-motion:not(.is-ready) .design-layer{
  opacity:0;
  filter:blur(8px);
}
.has-motion:not(.is-ready) .layer-one{transform:translateY(20px) rotate(-8deg)}
.has-motion:not(.is-ready) .layer-three{transform:translateY(18px) rotate(-2deg)}
.has-motion:not(.is-ready) .flow-hero::before,
.has-motion:not(.is-ready) .ambient-layer{
  opacity:0;
}
.is-ready .kicker{transition-delay:.1s}
.is-ready .flow-hero h1 span:nth-child(1){transition-delay:.14s}
.is-ready .flow-hero h1 span:nth-child(2){transition-delay:.22s}
.is-ready .flow-hero h1 span:nth-child(3){transition-delay:.3s}
.is-ready .lead{transition-delay:.36s}
.is-ready .hero-actions{transition-delay:.44s}
.is-ready .hero-facts li:nth-child(1){transition-delay:.54s}
.is-ready .hero-facts li:nth-child(2){transition-delay:.6s}
.is-ready .hero-facts li:nth-child(3){transition-delay:.66s}
.is-ready .hero-photo{transition-delay:.18s}
.is-ready .layer-one{transition-delay:.38s}
.is-ready .layer-three{transition-delay:.54s}
.motion-js .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s ease;
}
.motion-js .reveal-copy{
  transform:translateY(34px);
}
.motion-js .reveal-soft{
  transform:translateY(18px);
  transition-duration:.78s;
}
.motion-js .reveal-image{
  filter:blur(7px);
  transform:translateY(34px) scale(.985);
  transition-duration:1s;
}
.motion-js .reveal-card{
  transform:translateX(20px);
  transition-duration:.78s;
}
.motion-js .process-card:nth-child(2).reveal-card{transition-delay:.08s}
.motion-js .process-card:nth-child(3).reveal-card{transition-delay:.16s}
.motion-js .reveal-window{
  filter:blur(6px);
  transform:translateY(36px) scale(.975);
  transition-duration:1.05s;
}
.motion-js .reveal-stack{
  transform:translateY(34px) scale(.985);
  transition-duration:1s;
}
.motion-js .reveal.is-visible{
  opacity:1;
  transform:translateY(0);
  filter:none;
}
.motion-js .reveal-card.is-visible{
  transform:translateX(0);
}
.motion-js .reveal-image.is-visible,
.motion-js .reveal-window.is-visible,
.motion-js .reveal-stack.is-visible{
  transform:translateY(0) scale(1);
}
.motion-js .home-featured-work.reveal{
  transform:translateY(34px) scale(.985);
  filter:blur(5px);
  transition-duration:1s;
}
.motion-js .home-featured-work.reveal.is-visible{
  transform:translateY(0) scale(1);
  filter:none;
}
.motion-js .home-work-side .work-card.reveal{
  transform:translateX(22px);
}
.motion-js .home-work-side .work-card.reveal:nth-child(2){
  transition-delay:.1s;
}
.motion-js .home-work-side .work-card.reveal.is-visible{
  transform:translateX(0);
}
.motion-js .price-panel.reveal:first-child{
  transform:translateX(-20px) translateY(18px);
}
.motion-js .price-panel.reveal:nth-child(2){
  transform:translateX(20px) translateY(18px);
  transition-delay:.08s;
}
.motion-js .price-panel.reveal.is-visible{
  transform:translateX(0) translateY(0);
}
.motion-js .pricing-next-cta.reveal{
  transform:translateY(16px) scale(.99);
  transition-delay:.12s;
}
.motion-js .pricing-next-cta.reveal.is-visible{
  transform:translateY(0) scale(1);
}
.motion-js .pricing-continuity.reveal{
  transform:translateY(12px);
  transition-delay:.08s;
}
.motion-js .pricing-continuity.reveal.is-visible{
  transform:translateY(0);
}
.motion-js .support-memo.reveal{
  transform:translateX(-14px);
  transition-delay:.1s;
}
.motion-js .support-memo.reveal.is-visible{
  transform:translateX(0);
}
.motion-js .support-contrast.reveal{
  transform:translateY(20px) scale(.985);
  transition-duration:.95s;
}
.motion-js .support-contrast.reveal.is-visible{
  transform:translateY(0) scale(1);
}
.motion-js .flow-readiness.reveal{
  transform:translateY(16px);
  transition-delay:.04s;
}
.motion-js .flow-readiness.reveal.is-visible{
  transform:translateY(0);
}
.motion-js .compact-decision-faq .faq-card.reveal:nth-child(2){transition-delay:.08s}
.motion-js .compact-decision-faq .faq-card.reveal:nth-child(3){transition-delay:.16s}
.motion-js .decision-bridge.reveal{
  transform:translateY(16px);
  transition-delay:.12s;
}
.motion-js .decision-bridge.reveal.is-visible{
  transform:translateY(0);
}
@keyframes image-drift{
  0%{transform:translate3d(calc(var(--hero-x) * -12px), calc(var(--hero-y) * -8px), 0) scale(1.02)}
  100%{transform:translate3d(calc((var(--hero-x) * -12px) - 10px), calc((var(--hero-y) * -8px) + 5px), 0) scale(1.038)}
}
@keyframes scroll-line{
  0%,100%{transform:scaleY(.35);opacity:.45}
  50%{transform:scaleY(1);opacity:1}
}
@keyframes phone-float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-10px) rotate(-1.2deg)}
}
@keyframes surface-scan{
  from{transform:translateX(-120%)}
  to{transform:translateX(120%)}
}
@keyframes window-lines{
  0%,100%{opacity:.5;transform:translateX(0)}
  50%{opacity:.85;transform:translateX(18px)}
}
@keyframes path-dot{
  0%{left:10%;opacity:.22}
  18%,78%{opacity:1}
  100%{left:88%;opacity:.22}
}
@keyframes grid-lift{
  0%,100%{transform:translateY(0);background:#eee6da}
  50%{transform:translateY(-3px);background:#f5eee4}
}
@keyframes work-main-settle{
  from{transform:translateY(26px) rotate(-1.6deg);opacity:.62}
  to{transform:translateY(0) rotate(0deg);opacity:1}
}
@keyframes work-sub-settle{
  from{transform:translate(-18px,22px) rotate(-4deg);opacity:.54}
  to{transform:translate(0,0) rotate(0deg);opacity:1}
}
@keyframes work-phone-settle{
  from{transform:translate(18px,22px) rotate(5deg);opacity:.54}
  to{transform:translate(0,0) rotate(0deg);opacity:1}
}
@media (min-width:901px) and (max-height:820px){
  .flow-hero-copy{
    padding:28px 0 46px;
  }
  .flow-build{
    min-height:100svh;
    padding-top:54px;
    padding-bottom:54px;
  }
  .build-copy{
    top:92px;
    padding-top:0;
  }
  .build-copy h2{
    font-size:clamp(34px,3.28vw,42px);
    line-height:1.24;
  }
  .build-stage{
    top:78px;
    min-height:calc(100svh - 92px);
  }
  .build-canvas{
    width:min(680px,100%);
  }
}
@media (min-width:901px) and (max-height:620px){
  .flow-hero-copy{padding:22px 0 34px}
  .flow-hero h1{
    margin-top:16px;
    font-size:clamp(34px,3.52vw,46px);
    line-height:1.18;
  }
  .lead{
    margin-top:22px;
    max-width:600px;
    font-size:15px;
    line-height:1.78;
  }
  .hero-actions{margin-top:24px}
  .hero-reassurance{margin-top:12px;line-height:1.65}
  .hero-facts{margin-top:12px}
  .hero-photo{aspect-ratio:2.08/1}
  .flow-build{
    min-height:98svh;
    padding-top:48px;
    padding-bottom:48px;
  }
  .build-copy{
    top:86px;
    padding-top:8px;
  }
  .build-copy h2{
    font-size:clamp(31px,3vw,39px);
    line-height:1.24;
  }
  .build-stage{
    top:76px;
    min-height:calc(100svh - 88px);
  }
  .build-canvas{
    width:min(620px,100%);
  }
}
@media (min-width:901px) and (max-height:540px){
  .flow-hero-copy{padding:16px 0}
  .flow-hero h1{
    margin-top:14px;
    font-size:clamp(32px,3.35vw,43px);
    line-height:1.16;
  }
  .lead{margin-top:18px;line-height:1.7}
  .hero-actions{margin-top:20px}
  .hero-reassurance{display:none}
  .hero-facts{margin-top:12px;padding-top:10px}
  .hero-facts li{padding:5px 9px 6px}
  .build-canvas{
    width:min(540px,100%);
  }
  .build-copy h2{
    font-size:clamp(30px,3.2vw,42px);
  }
  .build-copy p:not(.section-kicker){
    margin-top:18px;
    font-size:15px;
    line-height:1.75;
  }
}
@media (max-width:900px){
  .flow-header{
    min-height:64px;
    padding:0 16px;
  }
  .flow-logo img{width:112px}
  .flow-logo span,
  .flow-nav{display:none}
  .mobile-header-cta{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:auto;
    padding:0 14px;
    border-radius:999px;
    background:var(--green);
    color:#fff;
    font-size:13px;
    font-weight:900;
  }
  .flow-header::after{
    content:"";
    width:38px;
    height:38px;
    margin-left:8px;
    border:1px solid var(--line);
    border-radius:8px;
    background:
      linear-gradient(var(--ink),var(--ink)) center 13px/16px 2px no-repeat,
      linear-gradient(var(--ink),var(--ink)) center 19px/16px 2px no-repeat,
      linear-gradient(var(--ink),var(--ink)) center 25px/16px 2px no-repeat,
      rgba(255,253,248,.82);
  }
  .flow-hero{
    padding:64px 16px 0;
  }
  .flow-hero::before{
    top:64px;
    right:-48px;
    width:326px;
    height:318px;
    min-height:0;
    opacity:.3;
    background-position:right top;
    -webkit-mask-image:radial-gradient(circle at 72% 18%,#000 0 34%,transparent 70%);
    mask-image:radial-gradient(circle at 72% 18%,#000 0 34%,transparent 70%);
  }
  .flow-hero-grid{
    min-height:auto;
    grid-template-columns:1fr;
    gap:22px;
  }
  .flow-hero-copy{
    padding:48px 0 0;
    position:relative;
    z-index:2;
  }
  .flow-hero h1{
    font-size:clamp(31px,8.1vw,38px);
    line-height:1.24;
  }
  .lead{
    margin-top:20px;
    font-size:15px;
    line-height:1.85;
  }
  .hero-actions{
    display:grid;
    gap:10px;
  }
  .button{width:100%}
  .hero-facts{
    display:grid;
    grid-template-columns:1fr;
    gap:5px;
    margin-top:20px;
    padding-top:12px;
  }
  .hero-facts li{
    display:block;
    padding:0;
    margin:0;
    white-space:normal;
    width:max-content;
    max-width:100%;
  }
  .hero-facts li:not(:last-child)::after{display:none}
  .hero-facts span{margin-right:6px}
  .hero-facts strong{font-size:13px}
  .hero-visual{
    display:none;
  }
  .hero-visual::before{inset:8% -4% 2% -4%}
  .design-layer{display:none}
  .hero-photo{
    width:100%;
    aspect-ratio:1.38/1;
    box-shadow:0 18px 56px rgba(43,35,25,.1);
    -webkit-mask-image:
      linear-gradient(90deg,transparent 0%,#000 10%,#000 95%,transparent 100%),
      linear-gradient(180deg,transparent 0%,#000 8%,#000 91%,transparent 100%);
    mask-image:
      linear-gradient(90deg,transparent 0%,#000 10%,#000 95%,transparent 100%),
      linear-gradient(180deg,transparent 0%,#000 8%,#000 91%,transparent 100%);
  }
  .hero-photo img{
    object-position:center;
  }
  .scroll-cue{display:none}
  .intro-inner,
  .process-grid,
  .flow-service,
  .flow-works-teaser{
    grid-template-columns:1fr;
  }
  .flow-intro{
    padding:40px 16px 34px;
  }
  .flow-build{
    min-height:auto;
    padding:62px 16px 76px;
  }
  .flow-build::before{
    opacity:.55;
    mask-image:radial-gradient(circle at 50% 58%,#000 0 30%,transparent 68%);
  }
  .build-grid{
    grid-template-columns:1fr;
    gap:34px;
  }
  .build-copy{
    position:relative;
    top:auto;
    padding-top:0;
  }
  .build-copy h2{
    font-size:clamp(29px,8vw,38px);
    line-height:1.28;
  }
  .build-stage{
    position:relative;
    top:auto;
    min-height:auto;
    display:block;
  }
  .build-canvas{
    width:100%;
    aspect-ratio:.94/1;
    box-shadow:0 22px 74px rgba(48,39,27,.08);
  }
  .build-photo-wash{
    inset:2% -10% 0 0;
    opacity:calc(var(--photo-wash-opacity,.1) * .58);
  }
  .build-gridlines{
    opacity:calc(var(--build-grid-opacity,.1) * .45);
  }
  .build-rail,
  .build-sheet{
    display:none;
  }
  .build-browser{
    left:6%;
    top:17%;
    width:88%;
    min-height:66%;
    box-shadow:0 28px 74px rgba(48,39,27,.16);
  }
  .build-browser-nav{
    height:30px;
    padding:0 12px;
    gap:10px;
  }
  .build-bar strong{
    display:none;
  }
  .build-browser-nav span{
    width:auto;
    height:auto;
    font-size:7px;
  }
  .build-browser-body{
    grid-template-columns:1fr 76px;
    gap:8px;
    padding:12px 12px 0;
  }
  .build-hero-line{
    min-height:112px;
    padding:13px 14px;
  }
  .build-hero-line span{font-size:8px}
  .build-hero-line span,
  .build-hero-line strong,
  .build-hero-line em{
    max-width:60%;
  }
  .build-hero-line strong{
    margin-top:7px;
    font-size:12px;
    line-height:1.28;
  }
  .build-hero-line em{
    margin-top:6px;
    font-size:7px;
  }
  .build-hero-line::before{
    top:0;
    right:0;
    bottom:0;
    width:35%;
  }
  .build-hero-line::after{
    width:28px;
    height:24px;
    right:calc(35% + 14px);
    bottom:10px;
    box-shadow:-34px -22px 0 rgba(13,98,90,.07);
  }
  .build-focus-line{top:106px}
  .build-mini-title{margin-top:10px}
  .build-mini-title span:nth-child(1){
    height:auto;
    font-size:7px;
  }
  .build-mini-title span:nth-child(2){
    margin-top:4px;
    font-size:8px;
  }
  .build-body-lines{margin-top:9px}
  .build-body-lines span{
    height:auto;
    margin-top:4px;
    padding-left:8px;
    font-size:7px;
    line-height:1.35;
  }
  .build-body-lines span::before{
    top:.58em;
    width:3px;
    height:3px;
  }
  .build-mini-cta{
    width:70px;
    min-height:17px;
    margin-top:10px;
    font-size:9px;
  }
  .build-browser-side{
    min-height:150px;
    padding:8px;
  }
  .build-browser-side span{
    min-height:58px;
    padding:7px;
  }
  .build-browser-side strong{font-size:8px}
  .build-browser-side em{font-size:6px}
  .build-browser-side i{
    height:auto;
    margin-top:7px;
    padding:5px 6px;
    font-size:6px;
  }
  .build-blocks{
    gap:6px;
    margin:10px 12px 14px;
  }
  .build-blocks span{
    min-height:36px;
    padding:7px;
    font-size:8px;
  }
  .build-blocks span::before{
    top:7px;
    left:7px;
    width:18px;
    height:4px;
  }
  .build-phone{display:none}
  .build-caption{display:none}
  .intro-copy h2,
  .service-copy h2,
  .works-copy h2{
    font-size:clamp(29px,8vw,38px);
    line-height:1.28;
  }
  .flow-process{
    padding:0 16px 86px;
  }
  .process-image img{aspect-ratio:1.18/1}
  .process-card{padding:20px 0;background:transparent}
  .process-card.is-current{transform:none;box-shadow:none}
  .motion-js .reveal-card{transform:translateY(22px)}
  .motion-js .reveal-card.is-visible{transform:translateY(0)}
  .flow-service{
    padding:78px 16px 96px;
  }
  .window-body{padding:16px}
  .window-hero{min-height:168px;padding:20px}
  .window-hero strong{font-size:24px}
  .window-grid{grid-template-columns:1fr 1fr}
  .phone-card{
    right:18px;
    bottom:-76px;
    width:112px;
    min-height:184px;
    border-radius:20px;
  }
  .phone-card strong{
    font-size:15px;
    padding:14px 10px;
  }
  .flow-works-teaser{
    padding:88px 16px 88px;
  }
  .works-stack{
    min-height:360px;
    order:-1;
  }
  .work-shot.main{
    width:86%;
    left:6%;
  }
  .work-shot.sub-one{
    width:48%;
  }
  .work-shot.sub-two{
    width:28%;
    min-width:96px;
  }
}
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
  .has-motion:not(.is-ready) .flow-header,
  .has-motion:not(.is-ready) .kicker,
  .has-motion:not(.is-ready) .lead,
  .has-motion:not(.is-ready) .hero-actions,
  .has-motion:not(.is-ready) .hero-facts li,
  .has-motion:not(.is-ready) .flow-hero h1 span,
  .has-motion:not(.is-ready) .hero-photo,
  .has-motion:not(.is-ready) .design-layer,
  .reveal{
    opacity:1;
    filter:none;
    transform:none;
  }
  .flow-build{
    --build-grid-opacity:.3;
    --build-grid-scale:1;
    --photo-wash-opacity:.18;
    --photo-wash-x:0px;
    --photo-wash-y:0px;
    --photo-wash-scale:1.04;
    --sheet-opacity:.52;
    --sheet1-x:0px;
    --sheet1-y:0px;
    --sheet1-r:-4deg;
    --sheet2-x:0px;
    --sheet2-y:0px;
    --sheet2-r:4deg;
    --sheet3-x:0px;
    --sheet3-y:0px;
    --sheet3-r:2deg;
    --browser-x:0px;
    --browser-y:0px;
    --browser-scale:1;
    --browser-opacity:1;
    --browser-complete-y:0px;
    --browser-complete-scale:0;
    --browser-complete-glow:.04;
    --browser-line-scale:1;
    --browser-sheen-opacity:0;
    --browser-sheen-x:100%;
    --browser-nav-opacity:1;
    --browser-nav-y:0px;
    --focus-line-opacity:.8;
    --focus-line-scale:1;
    --hero-detail-opacity:.86;
    --photo-resolve:1;
    --hero-block-y:0px;
    --sheet-blur:.8px;
    --mini-title-opacity:1;
    --mini-title-y:0px;
    --hero-block-scale:1;
    --body-line-scale:1;
    --body-line-opacity:1;
    --body-line-x:0px;
    --block-y:0px;
    --block-scale:1;
    --block-opacity:1;
    --block1-opacity:1;
    --block1-y:0px;
    --block2-opacity:1;
    --block2-y:0px;
    --block3-opacity:1;
    --block3-y:0px;
    --mini-cta-opacity:.82;
    --mini-cta-scale:1;
    --mini-cta-commit:1;
    --mini-cta-peak:0;
    --mini-cta-glow:.12;
    --side-opacity:1;
    --side-x:0px;
    --side-y:0px;
    --side-scale:1;
    --phone-x:0px;
    --phone-y:0px;
    --phone-r:-1deg;
    --phone-scale:1;
    --phone-opacity:.5;
  }
}