/* Breakout preview: reduce AI-made LP rhythm and push the top page toward an editorial studio site. */
.breakout-page{
  --bo-paper:#fbf8f0;
  --bo-warm:#efe6d6;
  --bo-ink:#1f211d;
  --bo-soft:#736b5f;
  --bo-green:#0a5c54;
  --bo-deep:#062f2b;
  --bo-gold:#b98b3d;
  --bo-line:rgba(38,34,28,.13);
  background:
    radial-gradient(circle at 18% 8%,rgba(185,139,61,.16),transparent 31%),
    linear-gradient(135deg,#fffdf7 0%,#f5eee2 42%,#fbf8f0 100%);
  color:var(--bo-ink);
}

.breakout-page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.28;
  background:
    linear-gradient(90deg,rgba(31,33,29,.04) 1px,transparent 1px) 0 0/9.5vw 100%,
    radial-gradient(circle at 52% 38%,rgba(10,92,84,.08),transparent 34%);
}

.breakout-page .site-header{
  background:rgba(251,248,240,.88);
  border-bottom:1px solid rgba(38,34,28,.075);
  backdrop-filter:blur(18px) saturate(1.16);
}

.breakout-page .logo img{
  width:138px;
}

.breakout-page .logo span{
  color:#5f574d;
  font-size:12px;
  font-weight:780;
}

.breakout-page .nav a:not(.header-cta){
  color:#2c2924;
  font-size:13px;
  font-weight:820;
}

.breakout-page .flow-hero{
  isolation:isolate;
  min-height:100svh;
  padding-bottom:clamp(26px,4vw,54px);
  background:
    linear-gradient(90deg,rgba(251,248,240,.98) 0%,rgba(251,248,240,.92) 45%,rgba(239,230,214,.64) 100%);
}

.breakout-page .flow-hero::before{
  display:none;
}

.breakout-page .flow-hero::after{
  content:"DEVISION";
  position:absolute;
  right:-.09em;
  bottom:-.18em;
  z-index:-1;
  color:rgba(31,33,29,.035);
  font-size:clamp(92px,17vw,260px);
  line-height:.82;
  font-weight:900;
  letter-spacing:-.01em;
  pointer-events:none;
}

.breakout-page .ambient-layer{
  background:
    linear-gradient(90deg,rgba(10,92,84,.09) 1px,transparent 1px) 7.5vw 0/28vw 100%,
    radial-gradient(circle at 68% 28%,rgba(185,139,61,.18),transparent 28%),
    radial-gradient(circle at 84% 62%,rgba(10,92,84,.1),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(239,230,214,.48) 100%);
}

.breakout-page .editorial-index{
  position:absolute;
  left:clamp(18px,3.2vw,52px);
  top:50%;
  z-index:4;
  color:rgba(10,92,84,.76);
  font-size:11px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
  transform:translateY(-50%) rotate(-90deg);
  transform-origin:left center;
}

.breakout-page .flow-hero-grid{
  width:min(1460px,100%);
  grid-template-columns:minmax(0,.92fr) minmax(430px,1.08fr);
  gap:clamp(26px,4vw,66px);
  align-items:center;
}

.breakout-page .flow-hero-copy{
  position:relative;
  z-index:4;
  max-width:640px;
  padding:clamp(24px,4.8vw,58px) 0 clamp(30px,4.2vw,58px);
}

.breakout-page .flow-hero-copy::after{
  content:"";
  position:absolute;
  left:-24px;
  bottom:clamp(16px,3vw,38px);
  width:64px;
  height:1px;
  background:linear-gradient(90deg,var(--bo-gold),transparent);
  opacity:.7;
}

.breakout-page .kicker,
.breakout-page .section-kicker{
  color:var(--bo-green);
  letter-spacing:.16em;
  font-size:11px;
}

.breakout-page .flow-hero h1{
  max-width:700px;
  margin-top:22px;
  font-size:clamp(42px,4.85vw,68px);
  line-height:1.07;
  font-weight:430;
  letter-spacing:0;
}

.breakout-page .flow-hero h1 span:nth-child(2){
  color:var(--bo-green);
  font-weight:650;
}

.breakout-page .lead{
  max-width:520px;
  margin-top:24px;
  color:#524c43;
  font-size:clamp(15px,1.12vw,18px);
  line-height:1.98;
}

.breakout-page .hero-actions{
  margin-top:28px;
}

.breakout-page .button{
  border-radius:6px;
  border-color:rgba(10,92,84,.74);
  min-height:48px;
}

.breakout-page .button.primary,
.breakout-page .button.dark{
  background:var(--bo-deep);
}

.breakout-page .button.secondary{
  background:transparent;
}

.breakout-page .hero-facts{
  margin-top:28px;
  border-top:1px solid var(--bo-line);
}

.breakout-page .hero-facts li{
  padding-top:14px;
}

.breakout-page .hero-facts span{
  display:block;
  color:#7f7569;
}

.breakout-page .hero-facts strong{
  color:var(--bo-ink);
  font-size:13px;
}

.breakout-page .hero-reassurance{
  width:auto;
  margin-top:18px;
  padding-left:18px;
  border-left:2px solid rgba(185,139,61,.7);
  color:#5b5147;
}

.breakout-page .hero-visual{
  position:relative;
  z-index:2;
  min-height:min(700px,calc(100svh - 114px));
  align-items:center;
  margin-left:0;
  padding:clamp(20px,3.4vw,46px) 0 clamp(20px,3.4vw,46px);
}

.breakout-page .hero-visual::before{
  inset:9% 5% 6% -7%;
  height:auto;
  background:
    linear-gradient(90deg,rgba(6,47,43,.11),rgba(185,139,61,.075),transparent 82%),
    linear-gradient(180deg,rgba(251,248,240,.08),rgba(6,47,43,.085));
  filter:blur(0);
  border-left:1px solid rgba(10,92,84,.18);
  border-bottom:1px solid rgba(185,139,61,.18);
}

.breakout-page .hero-visual::after{
  content:"";
  position:absolute;
  right:8%;
  bottom:10%;
  width:min(220px,26vw);
  height:min(140px,17vw);
  z-index:4;
  border:1px solid rgba(255,253,248,.42);
  background:
    linear-gradient(90deg,rgba(255,253,248,.26),rgba(255,253,248,.04)),
    linear-gradient(rgba(255,253,248,.4) 1px,transparent 1px) 20px 30px/72% 22px no-repeat;
  box-shadow:0 24px 70px rgba(36,30,22,.12);
  pointer-events:none;
}

.breakout-page .hero-photo{
  width:min(830px,100%);
  aspect-ratio:1.18/1;
  border-radius:0;
  box-shadow:
    0 44px 124px rgba(36,30,22,.2),
    -26px 30px 0 rgba(10,92,84,.06),
    22px -22px 0 rgba(185,139,61,.06);
  transform:perspective(1400px) rotateY(-1.5deg) rotateX(.5deg);
  transform-origin:center;
  -webkit-mask-image:linear-gradient(180deg,#000 0 90%,rgba(0,0,0,.42) 100%);
  mask-image:linear-gradient(180deg,#000 0 90%,rgba(0,0,0,.42) 100%);
}

.breakout-page .hero-photo::before{
  content:"";
  position:absolute;
  inset:16px;
  z-index:2;
  border:1px solid rgba(255,253,248,.56);
  pointer-events:none;
}

.breakout-page .hero-photo::selection{
  background:transparent;
}

.breakout-page .hero-photo::after{
  background:
    linear-gradient(90deg,rgba(6,47,43,.04),rgba(251,248,240,.015) 34%,rgba(251,248,240,.06)),
    linear-gradient(180deg,transparent 0%,rgba(31,33,29,.1) 100%);
}

.breakout-page .hero-photo img{
  filter:saturate(1.04) contrast(1.08) brightness(1.03);
  transform:translate3d(calc(var(--hero-x) * -16px), calc(var(--hero-y) * -9px), 0) scale(1.05);
}

.breakout-page .visual-caption{
  position:absolute;
  z-index:5;
  left:-8px;
  top:clamp(58px,10vw,118px);
  display:grid;
  gap:7px;
  color:#1f211d;
  mix-blend-mode:normal;
  pointer-events:none;
}

.breakout-page .visual-caption span{
  width:max-content;
  padding:6px 9px;
  border:1px solid rgba(31,33,29,.16);
  background:rgba(251,248,240,.66);
  color:#2f2b25;
  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.has-motion .breakout-page .flow-hero-copy .kicker,
.has-motion .breakout-page .flow-hero h1 span,
.has-motion .breakout-page .lead,
.has-motion .breakout-page .hero-actions,
.has-motion .breakout-page .hero-facts,
.has-motion .breakout-page .hero-reassurance{
  opacity:0;
  transform:translateY(18px);
}

.has-motion.is-ready .breakout-page .flow-hero-copy .kicker,
.has-motion.is-ready .breakout-page .flow-hero h1 span,
.has-motion.is-ready .breakout-page .lead,
.has-motion.is-ready .breakout-page .hero-actions,
.has-motion.is-ready .breakout-page .hero-facts,
.has-motion.is-ready .breakout-page .hero-reassurance{
  opacity:1;
  transform:translateY(0);
  transition:opacity .68s ease, transform .82s cubic-bezier(.16,1,.3,1);
}

.has-motion.is-ready .breakout-page .flow-hero h1 span:nth-child(1){transition-delay:.04s}
.has-motion.is-ready .breakout-page .flow-hero h1 span:nth-child(2){transition-delay:.1s}
.has-motion.is-ready .breakout-page .flow-hero h1 span:nth-child(3){transition-delay:.16s}
.has-motion.is-ready .breakout-page .lead{transition-delay:.24s}
.has-motion.is-ready .breakout-page .hero-actions{transition-delay:.31s}
.has-motion.is-ready .breakout-page .hero-facts{transition-delay:.38s}
.has-motion.is-ready .breakout-page .hero-reassurance{transition-delay:.44s}

.has-motion .breakout-page .hero-photo{
  clip-path:inset(0 22% 0 0);
  opacity:.28;
  transform:translateX(18px);
}

.has-motion.is-ready .breakout-page .hero-photo{
  clip-path:inset(0 0 0 0);
  opacity:1;
  transform:translateX(0);
  transition:
    clip-path .96s cubic-bezier(.16,1,.3,1) .08s,
    opacity .82s ease .08s,
    transform .96s cubic-bezier(.16,1,.3,1) .08s;
}

.has-motion .breakout-page .visual-caption span{
  opacity:0;
  transform:translateX(-14px);
}

.has-motion.is-ready .breakout-page .visual-caption span{
  opacity:1;
  transform:translateX(0);
  transition:opacity .72s ease, transform .8s cubic-bezier(.16,1,.3,1);
}

.has-motion.is-ready .breakout-page .visual-caption span:nth-child(1){transition-delay:.58s}
.has-motion.is-ready .breakout-page .visual-caption span:nth-child(2){transition-delay:.64s}
.has-motion.is-ready .breakout-page .visual-caption span:nth-child(3){transition-delay:.7s}

.breakout-page .design-layer{
  border-radius:0;
  border-color:rgba(251,248,240,.5);
  background:rgba(251,248,240,.14);
  box-shadow:0 22px 68px rgba(16,13,8,.08);
}

.breakout-page .layer-one{
  top:auto;
  left:auto;
  right:6%;
  bottom:13%;
  width:min(210px,28%);
  opacity:.86;
}

.breakout-page .layer-three{
  left:8%;
  bottom:9%;
  opacity:.72;
}

.breakout-page .scroll-cue{
  color:#776d60;
}

.breakout-page .flow-intro{
  padding-top:clamp(62px,8vw,116px);
  padding-bottom:clamp(60px,8vw,112px);
  background:linear-gradient(180deg,#f0e7d8 0%,#fbf8f0 100%);
}

.breakout-page .intro-inner{
  width:min(1220px,100%);
  grid-template-columns:minmax(0,.82fr) minmax(360px,1.18fr);
}

.breakout-page .intro-copy h2{
  max-width:500px;
  font-size:clamp(34px,4.8vw,64px);
  line-height:1.08;
  font-weight:470;
}

.breakout-page .intro-text{
  position:relative;
  padding:clamp(24px,4vw,46px) 0 clamp(20px,3vw,34px) clamp(28px,5vw,70px);
  border-left:1px solid rgba(10,92,84,.25);
}

.breakout-page .intro-text p{
  max-width:620px;
  font-size:clamp(15px,1.35vw,19px);
  line-height:2.05;
}

.breakout-page .editorial-note{
  margin-top:20px!important;
  color:#2c2924!important;
  font-weight:760!important;
}

.breakout-page .intro-steps{
  max-width:620px;
  margin-top:34px;
  grid-template-columns:repeat(3,1fr);
}

.breakout-page .intro-steps li{
  min-height:84px;
  align-items:flex-start;
  padding:18px;
  border:0;
  border-top:2px solid rgba(10,92,84,.65);
  border-radius:0;
  background:rgba(251,248,240,.5);
}

.breakout-page .intro-steps li::after{
  display:none;
}

.breakout-page .intro-steps span{
  font-size:18px;
}

.breakout-page .flow-build{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 76% 18%,rgba(185,139,61,.12),transparent 28%),
    radial-gradient(circle at 22% 78%,rgba(10,92,84,.08),transparent 30%),
    linear-gradient(180deg,#fbf8f0 0%,#efe6d6 52%,#fbf8f0 100%);
}

.breakout-page .flow-build::after{
  content:"DESIGN MAP";
  position:absolute;
  right:-.18em;
  bottom:-.24em;
  color:rgba(31,33,29,.034);
  font-size:clamp(90px,14vw,220px);
  line-height:.82;
  font-weight:900;
  letter-spacing:.02em;
  pointer-events:none;
}

.breakout-page .build-grid{
  z-index:1;
  grid-template-columns:minmax(300px,.58fr) minmax(0,1.42fr);
  gap:clamp(34px,6vw,100px);
}

.breakout-page .build-copy h2{
  font-size:clamp(36px,4.5vw,62px);
  line-height:1.08;
  font-weight:440;
}

.breakout-page .build-proof{
  border-left-color:var(--bo-gold);
  background:
    linear-gradient(90deg,rgba(251,248,240,.76),rgba(251,248,240,.36));
  box-shadow:0 18px 54px rgba(48,39,27,.045);
}

.breakout-page .build-canvas{
  border-radius:0;
  border-color:rgba(38,34,28,.12);
  background:
    linear-gradient(135deg,rgba(251,248,240,.78),rgba(230,218,198,.5)),
    radial-gradient(circle at 68% 18%,rgba(10,92,84,.1),transparent 34%);
  box-shadow:
    0 44px 132px rgba(36,30,22,.14),
    -22px 28px 0 rgba(10,92,84,.04);
  transform:perspective(1300px) rotateY(-1.15deg) rotateX(.45deg);
  transform-origin:center;
}

.breakout-page .build-canvas::before{
  content:"";
  position:absolute;
  inset:-10% -8% -8% 38%;
  z-index:0;
  opacity:.18;
  background:url("devision-firstview-planning-v3.png") center/cover no-repeat;
  filter:saturate(.82) contrast(1.08);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 72%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 24%,#000 72%,transparent);
  pointer-events:none;
}

.breakout-page .build-canvas > *{
  position:absolute;
  z-index:1;
}

.breakout-page .build-canvas::after{
  content:"";
  position:absolute;
  inset:18px;
  z-index:4;
  border:1px solid rgba(251,248,240,.62);
  box-shadow:inset 0 0 0 1px rgba(10,92,84,.04);
  pointer-events:none;
}

.breakout-page .build-photo-wash{
  opacity:calc(var(--photo-wash-opacity,.1) * .42);
  mix-blend-mode:normal;
}

.breakout-page .build-map-labels{
  left:clamp(34px,5.8vw,78px);
  right:clamp(24px,4vw,52px);
  top:clamp(18px,3vw,32px);
  z-index:3;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  opacity:calc(.46 + var(--browser-opacity,.35) * .32);
  pointer-events:none;
}

.breakout-page .build-map-labels::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,rgba(10,92,84,.28),rgba(185,139,61,.3),rgba(10,92,84,.18));
  transform:translateY(-50%);
}

.breakout-page .build-map-labels span{
  position:relative;
  width:max-content;
  padding:6px 8px;
  background:rgba(251,248,240,.72);
  border:1px solid rgba(38,34,28,.11);
  color:rgba(10,92,84,.82);
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
}

.breakout-page .build-map-labels span:nth-child(2){
  justify-self:center;
}

.breakout-page .build-map-labels span:nth-child(3){
  justify-self:end;
}

.breakout-page .build-map-note{
  left:clamp(28px,4.8vw,64px);
  bottom:clamp(30px,5vw,60px);
  z-index:3;
  width:min(178px,24%);
  padding:14px 16px;
  border-left:2px solid rgba(185,139,61,.74);
  background:linear-gradient(90deg,rgba(251,248,240,.72),rgba(251,248,240,.28));
  box-shadow:0 18px 52px rgba(48,39,27,.06);
  opacity:calc(.58 + var(--browser-opacity,.35) * .3);
  pointer-events:none;
}

.breakout-page .build-map-note strong,
.breakout-page .build-map-note span{
  display:block;
}

.breakout-page .build-map-note strong{
  color:#2f2b25;
  font-size:12px;
  line-height:1.45;
  font-weight:860;
}

.breakout-page .build-map-note span{
  margin-top:7px;
  color:#6c6358;
  font-size:10px;
  line-height:1.5;
  font-weight:760;
}

.breakout-page .build-browser{
  left:32%;
  top:16%;
  width:60%;
  min-height:62%;
  border-radius:8px;
  border-color:rgba(223,210,189,.72);
  background:rgba(255,253,248,.9);
  box-shadow:
    0 42px 112px rgba(48,39,27,.145),
    0 18px 58px rgba(13,98,90,var(--browser-complete-glow,0)),
    0 0 0 1px rgba(255,253,248,.48) inset;
}

.breakout-page .build-bar{
  background:linear-gradient(180deg,#efe5d7,#e7dac5);
}

.breakout-page .build-browser-nav{
  background:rgba(251,248,240,.78);
}

.breakout-page .build-browser-body{
  grid-template-columns:minmax(0,1fr) 116px;
  gap:16px;
}

.breakout-page .build-hero-line{
  min-height:138px;
  border-radius:6px;
  background:
    linear-gradient(90deg,rgba(10,92,84,.1) 0 4px,transparent 4px),
    linear-gradient(110deg,rgba(255,253,248,.98) 0%,rgba(250,246,238,.94) 50%,rgba(226,216,198,.7) 100%);
}

.breakout-page .build-hero-line::before{
  border-radius:0 6px 6px 0;
}

.breakout-page .build-browser-side{
  min-height:196px;
  border-radius:6px;
  background:
    linear-gradient(180deg,rgba(255,253,248,.72),rgba(247,241,232,.68)),
    linear-gradient(90deg,rgba(10,92,84,.075),transparent 4px);
}

.breakout-page .build-browser-side span{
  border-radius:6px;
}

.breakout-page .build-blocks span{
  border-radius:5px;
}

.breakout-page .build-phone{
  background:rgba(42,36,29,.42);
  opacity:calc(var(--phone-opacity,.2) * 1.35);
}

.breakout-page .page-thread-section,
.breakout-page .support-thread-section{
  background:var(--bo-paper);
}

.breakout-page .section{
  position:relative;
  scroll-margin-top:86px;
  padding-top:clamp(76px,9vw,140px);
  padding-bottom:clamp(76px,9vw,140px);
}

.breakout-page .section::before{
  content:"";
  position:absolute;
  left:clamp(22px,5vw,72px);
  right:clamp(22px,5vw,72px);
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(10,92,84,.16),rgba(185,139,61,.14),transparent);
}

.breakout-page .section-head{
  display:grid;
  grid-template-columns:minmax(220px,.54fr) minmax(0,1fr);
  gap:clamp(26px,5vw,82px);
  align-items:start;
  margin-bottom:clamp(34px,5vw,68px);
}

.breakout-page .section-head h2{
  margin:0;
  font-size:clamp(31px,4.4vw,58px);
  line-height:1.12;
  font-weight:440;
}

.breakout-page .section-head .section-kicker{
  margin-top:.65em;
}

.breakout-page .section-lead{
  max-width:620px;
  margin:20px 0 0;
  color:#5b544b;
  font-size:clamp(14px,1.12vw,17px);
  line-height:1.95;
}

.breakout-page .home-works-layout{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(320px,.98fr);
  gap:clamp(22px,3.4vw,48px);
  align-items:stretch;
}

.breakout-page .home-works-layout::before{
  content:"Selected works";
  position:absolute;
  right:0;
  top:-32px;
  color:rgba(10,92,84,.48);
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.breakout-page .home-featured-work,
.breakout-page .work-card,
.breakout-page .price-panel,
.breakout-page .faq-card{
  border-radius:0;
  box-shadow:none;
}

.breakout-page .home-featured-work{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(260px,.62fr);
  min-height:470px;
  overflow:hidden;
  border:0;
  background:
    radial-gradient(circle at 82% 18%,rgba(185,139,61,.18),transparent 28%),
    linear-gradient(135deg,#0d2422,#143f3a);
  color:#fffdf7;
}

.breakout-page .home-featured-work::before{
  content:"";
  position:absolute;
  inset:18px;
  z-index:2;
  border:1px solid rgba(255,253,247,.18);
  pointer-events:none;
}

.breakout-page .home-featured-work figure{
  min-height:100%;
  background:#0d2422;
}

.breakout-page .home-featured-work figure::after{
  background:
    linear-gradient(90deg,rgba(6,47,43,.04),transparent 48%,rgba(13,36,34,.46)),
    linear-gradient(180deg,transparent 34%,rgba(8,23,22,.44));
}

.breakout-page .home-featured-work figure > img{
  opacity:.96;
  filter:brightness(1.34) saturate(.78) contrast(.96);
  object-position:center;
}

.breakout-page .home-featured-work > div{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(24px,3.3vw,42px);
  border-left:1px solid rgba(255,253,247,.16);
}

.breakout-page .home-featured-work h3{
  font-size:clamp(26px,3vw,38px);
  line-height:1.1;
  color:#fffdf7;
}

.breakout-page .home-featured-work p{
  color:rgba(255,253,247,.78);
}

.breakout-page .home-featured-work .work-meta span{
  color:rgba(255,253,247,.82);
  border-color:rgba(255,253,247,.24);
}

.breakout-page .home-featured-work .work-link{
  color:#fffdf7;
  border-bottom-color:rgba(255,253,247,.42);
}

.breakout-page .home-work-side{
  display:grid;
  align-content:start;
  gap:14px;
}

.breakout-page .work-card{
  position:relative;
  display:grid;
  grid-template-columns:124px minmax(0,1fr);
  min-height:0;
  border-top:1px solid rgba(38,34,28,.16);
  background:transparent;
  transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .45s ease;
}

.breakout-page .work-card:hover{
  transform:translateX(4px);
  border-top-color:rgba(10,92,84,.35);
}

.breakout-page .work-card .work-image{
  aspect-ratio:1/1;
  border-radius:0;
}

.breakout-page .work-card .work-body{
  padding:16px 0 16px 18px;
}

.breakout-page .home-work-side .work-card h3{
  font-size:19px;
  line-height:1.25;
}

.breakout-page .home-work-side .work-card p{
  font-size:13px;
  line-height:1.72;
}

.breakout-page .work-meta span{
  border-radius:0;
  background:transparent;
  border:1px solid rgba(10,92,84,.18);
}

.breakout-page .home-pricing-band{
  position:relative;
  overflow:hidden;
  padding-bottom:clamp(58px,6vw,96px);
  background:
    radial-gradient(circle at 80% 22%,rgba(185,139,61,.13),transparent 28%),
    linear-gradient(135deg,transparent 0 48%,rgba(10,92,84,.045) 48% 52%,transparent 52% 100%),
    linear-gradient(180deg,#efe6d6,#fbf8f0);
}

.breakout-page .home-pricing-band::after{
  content:"";
  position:absolute;
  right:0;
  top:18%;
  width:min(440px,34vw);
  height:min(440px,34vw);
  border:1px solid rgba(10,92,84,.11);
  border-radius:50%;
  pointer-events:none;
}

.breakout-page .price-overview{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
  gap:clamp(18px,2.6vw,34px);
  padding:clamp(22px,3vw,42px);
  border:1px solid rgba(38,34,28,.13);
  background:
    linear-gradient(135deg,rgba(251,248,240,.62),rgba(251,248,240,.2)),
    radial-gradient(circle at 72% 12%,rgba(185,139,61,.08),transparent 36%);
  box-shadow:0 24px 74px rgba(48,39,27,.052);
}

.breakout-page .price-overview::after{
  content:"";
  position:absolute;
  left:50%;
  top:clamp(34px,4vw,56px);
  bottom:clamp(34px,4vw,56px);
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(10,92,84,.22),rgba(185,139,61,.2),transparent);
  transform:translateX(-50%);
  pointer-events:none;
}

.breakout-page .price-overview::before{
  content:"Estimate";
  position:absolute;
  right:clamp(20px,3vw,42px);
  top:clamp(18px,2.5vw,34px);
  width:auto;
  height:auto;
  transform:none;
  background:transparent;
  opacity:.34;
  color:var(--bo-green);
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.breakout-page .price-panel{
  position:relative;
  padding:clamp(32px,4.2vw,58px) 0 clamp(12px,2vw,24px);
  border:0;
  border-right:0;
  background:transparent;
}

.breakout-page .price-panel::before{
  content:"";
  position:absolute;
  left:0;
  right:clamp(18px,3vw,42px);
  top:0;
  height:1px;
  background:linear-gradient(90deg,rgba(10,92,84,.46),rgba(185,139,61,.34),transparent);
}

.breakout-page .price-panel .price{
  font-size:clamp(36px,4.5vw,64px);
  letter-spacing:0;
}

.breakout-page .price-panel h3{
  margin-top:12px;
}

.breakout-page .price-panel p{
  max-width:520px;
}

.breakout-page .assurance-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  margin-top:22px;
  padding:16px 0 0;
  border-radius:0;
  background:transparent;
  border:0;
  border-top:1px solid rgba(38,34,28,.1);
  border-bottom:0;
}

.breakout-page .assurance-row span{
  min-height:0;
  justify-content:flex-start;
  padding:0 0 0 14px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#5d554c;
  font-size:12px;
  font-weight:820;
  text-align:left;
  position:relative;
}

.breakout-page .assurance-row span::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--bo-green);
}

.breakout-page .pricing-continuity{
  display:grid;
  grid-template-columns:auto minmax(36px,1fr) auto minmax(36px,1fr) auto;
  align-items:center;
  gap:12px;
  width:min(680px,100%);
  margin:24px auto 0;
  color:#5e564c;
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.breakout-page .pricing-continuity span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(10,92,84,.16);
  background:rgba(251,248,240,.46);
}

.breakout-page .pricing-continuity i{
  display:block;
  height:1px;
  background:linear-gradient(90deg,rgba(10,92,84,.3),rgba(185,139,61,.34),rgba(10,92,84,.12));
}

.breakout-page .pricing-next-cta{
  margin-top:18px;
  padding:20px 24px;
  border-radius:0;
  border:1px solid rgba(6,47,43,.18);
  background:
    linear-gradient(90deg,var(--bo-deep),rgba(10,92,84,.92)),
    radial-gradient(circle at 88% 32%,rgba(185,139,61,.34),transparent 26%);
  box-shadow:0 20px 58px rgba(6,47,43,.12);
}

.breakout-page .pricing-next-cta span{
  color:rgba(255,253,247,.72);
}

.breakout-page .pricing-next-cta strong{
  color:#fffdf7;
  letter-spacing:0;
}

.breakout-page .pricing-next-cta .button{
  border-color:rgba(255,253,247,.16);
  background:rgba(6,47,43,.72);
  color:#fffdf7;
}

.breakout-page .support-contrast-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr);
  gap:clamp(34px,6vw,86px);
}

.breakout-page .support-thread-section{
  padding-top:clamp(58px,6vw,98px);
}

.breakout-page .support-contrast-grid::before{
  content:"";
  position:absolute;
  left:clamp(8px,2vw,22px);
  right:clamp(8px,2vw,22px);
  top:clamp(-48px,-3vw,-24px);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(185,139,61,.34),rgba(10,92,84,.16),transparent);
}

.breakout-page .support-contrast-grid .section-head{
  display:block;
  margin-bottom:0;
}

.breakout-page .support-contrast-grid .section-head h2{
  max-width:560px;
  font-size:clamp(34px,4.4vw,58px);
  line-height:1.16;
}

.breakout-page .support-contrast-grid .section-lead{
  max-width:500px;
}

.breakout-page .support-memo{
  width:min(360px,100%);
  margin-top:26px;
  padding:18px 20px;
  border-left:2px solid rgba(185,139,61,.72);
  background:
    linear-gradient(90deg,rgba(251,248,240,.62),rgba(251,248,240,.22)),
    linear-gradient(180deg,rgba(10,92,84,.055),transparent);
  box-shadow:0 22px 70px rgba(48,39,27,.055);
}

.breakout-page .support-memo span{
  display:block;
  color:var(--bo-green);
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.breakout-page .support-memo strong{
  display:block;
  margin-top:10px;
  color:#302b25;
  font-size:13px;
  line-height:1.55;
  font-weight:850;
}

.breakout-page .support-thread{
  border-radius:0;
  border:0;
  border-top:1px solid rgba(38,34,28,.18);
  border-bottom:1px solid rgba(38,34,28,.18);
  background:
    linear-gradient(90deg,rgba(251,248,240,.5),rgba(251,248,240,.18));
  box-shadow:0 30px 100px rgba(48,39,27,.06);
}

.breakout-page .support-thread-row{
  position:relative;
  min-height:116px;
  border-radius:0;
  border:0;
  border-bottom:1px solid rgba(38,34,28,.13);
  background:transparent;
  padding-left:0;
  padding-right:0;
  transition:background .35s ease, transform .45s cubic-bezier(.16,1,.3,1);
}

.breakout-page .support-thread-row:hover{
  background:rgba(255,253,247,.38);
  transform:translateX(4px);
}

.breakout-page .support-thread-row:first-child{
  border-top:0;
}

.breakout-page .support-thread-row:last-child{
  border-bottom:0;
}

.breakout-page .support-thread-row span{
  color:rgba(10,92,84,.72);
  font-weight:850;
}

.breakout-page .support-thread-row p{
  color:#2d2923;
  font-size:clamp(17px,1.7vw,24px);
  font-weight:620;
}

.breakout-page .support-thread-row strong{
  justify-self:end;
  padding:8px 11px;
  border:1px solid rgba(10,92,84,.18);
  background:rgba(251,248,240,.45);
  color:var(--bo-green);
  font-size:12px;
  line-height:1.35;
  font-weight:850;
}

.breakout-page .home-flow-thread{
  position:relative;
  scroll-margin-top:118px;
  background:
    radial-gradient(circle at 18% 74%,rgba(10,92,84,.08),transparent 30%),
    linear-gradient(180deg,#fbf8f0,#f0e7d8);
}

.breakout-page .home-flow-thread::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(10,92,84,.16),transparent);
  pointer-events:none;
}

.breakout-page .home-flow-thread .section-head{
  margin-bottom:clamp(26px,4vw,52px);
}

.breakout-page .home-flow-thread .section-head h2{
  max-width:780px;
}

.breakout-page .flow-readiness{
  position:relative;
  display:grid;
  grid-template-columns:minmax(160px,.34fr) minmax(0,1fr) auto;
  gap:clamp(18px,3vw,38px);
  align-items:center;
  margin:calc(clamp(34px,5vw,68px) * -0.35) 0 clamp(28px,4vw,48px);
  padding:18px clamp(18px,3vw,32px);
  border:1px solid rgba(38,34,28,.1);
  background:
    linear-gradient(90deg,rgba(251,248,240,.72),rgba(251,248,240,.26)),
    linear-gradient(135deg,rgba(10,92,84,.055),transparent 42%);
  box-shadow:0 24px 80px rgba(48,39,27,.052);
}

.breakout-page .flow-readiness::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg,var(--bo-gold),rgba(10,92,84,.38));
}

.breakout-page .flow-readiness span{
  color:var(--bo-green);
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.breakout-page .flow-readiness strong{
  color:#302b25;
  font-size:clamp(15px,1.35vw,19px);
  line-height:1.62;
  font-weight:780;
}

.breakout-page .flow-readiness div{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

.breakout-page .flow-readiness i{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(10,92,84,.15);
  background:rgba(255,253,247,.42);
  color:#5d554c;
  font-size:11px;
  font-style:normal;
  font-weight:850;
}

.breakout-page .home-flow-list{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:clamp(20px,3vw,34px);
  padding-top:30px;
  border-top:1px solid rgba(38,34,28,.16);
  border-bottom:0;
  overflow:visible;
  background:transparent;
  box-shadow:none;
}

.breakout-page .home-flow-list::before{
  content:"";
  position:absolute;
  inset:-22px -24px auto -24px;
  height:calc(100% + 44px);
  border:1px solid rgba(38,34,28,.08);
  background:linear-gradient(135deg,rgba(251,248,240,.34),transparent 58%);
  pointer-events:none;
}

.breakout-page .home-flow-list::after{
  top:30px;
  height:1px;
  background:linear-gradient(90deg,rgba(10,92,84,.58),rgba(185,139,61,.44),rgba(10,92,84,.16));
}

.breakout-page .flow-line-item{
  position:relative;
  min-height:230px;
  padding:clamp(24px,3vw,38px) clamp(18px,2.5vw,30px) 0 0;
  border:0;
  border-right:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.breakout-page .flow-line-item::after{
  content:"";
  position:absolute;
  right:clamp(14px,2vw,24px);
  top:34px;
  bottom:0;
  width:1px;
  background:linear-gradient(180deg,rgba(38,34,28,.1),transparent 70%);
}

.breakout-page .flow-line-item:last-child::after{
  display:none;
}

.breakout-page .flow-line-item span{
  position:relative;
  z-index:2;
  width:auto;
  height:auto;
  display:block;
  background:transparent;
  border:0;
  box-shadow:none;
  color:rgba(10,92,84,.58);
  font-size:clamp(36px,5vw,76px);
  line-height:1;
  font-weight:430;
}

.breakout-page .flow-line-item em{
  display:inline-flex;
  width:max-content;
  margin-top:14px;
  padding:5px 8px;
  border:1px solid rgba(10,92,84,.14);
  background:rgba(251,248,240,.42);
  color:rgba(10,92,84,.72);
  font-size:10px;
  line-height:1;
  font-style:normal;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.breakout-page .flow-line-item h3{
  margin-top:clamp(18px,2.6vw,34px);
  font-size:clamp(20px,2vw,28px);
  line-height:1.22;
  font-weight:620;
}

.breakout-page .flow-line-item p{
  max-width:220px;
  color:#625a50;
  font-size:14px;
  line-height:1.82;
  font-weight:560;
}

.breakout-page .decision-zone{
  position:relative;
  background:
    radial-gradient(circle at 12% 18%,rgba(185,139,61,.13),transparent 28%),
    linear-gradient(180deg,#f0e7d8 0%,#fbf8f0 34%,#0a5c54 74%);
}

.breakout-page .decision-zone::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(10,92,84,.25),rgba(185,139,61,.22),transparent);
}

.breakout-page .mini-faq-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,30px);
  border-top:0;
}

.breakout-page .compact-decision-faq{
  scroll-margin-top:118px;
}

.breakout-page .decision-note{
  position:relative;
  padding:28px 24px 26px 0;
  border:0;
  border-top:1px solid rgba(38,34,28,.16);
  border-right:0;
  background:transparent;
  min-height:210px;
}

.breakout-page .decision-note::before{
  left:0;
  top:-1px;
  width:38px;
  height:2px;
  background:var(--bo-gold);
}

.breakout-page .decision-note h3{
  margin-top:18px;
  font-size:clamp(17px,1.45vw,22px);
  line-height:1.5;
  font-weight:720;
}

.breakout-page .decision-note span{
  display:inline-flex;
  min-height:26px;
  align-items:center;
  padding:0 9px;
  border:1px solid rgba(10,92,84,.15);
  background:rgba(251,248,240,.46);
  color:var(--bo-green);
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.breakout-page .decision-note p{
  color:#5c554c;
  font-size:14px;
  line-height:1.88;
  font-weight:560;
}

.breakout-page .decision-bridge{
  position:relative;
  display:grid;
  grid-template-columns:minmax(130px,.28fr) minmax(0,.92fr) minmax(260px,.8fr);
  gap:clamp(18px,3vw,42px);
  align-items:center;
  margin-top:clamp(28px,4vw,50px);
  padding:clamp(18px,2.5vw,28px) clamp(18px,3vw,34px);
  border:1px solid rgba(38,34,28,.1);
  background:
    linear-gradient(90deg,rgba(251,248,240,.68),rgba(251,248,240,.28)),
    linear-gradient(135deg,rgba(185,139,61,.08),transparent 48%);
  box-shadow:0 28px 92px rgba(48,39,27,.055);
}

.breakout-page .decision-bridge::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg,rgba(185,139,61,.88),rgba(10,92,84,.45));
}

.breakout-page .decision-bridge span{
  color:var(--bo-green);
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.breakout-page .decision-bridge strong{
  color:#28251f;
  font-size:clamp(17px,1.75vw,24px);
  line-height:1.55;
  font-weight:760;
}

.breakout-page .decision-bridge p{
  margin:0;
  color:#5c554c;
  font-size:14px;
  line-height:1.82;
  font-weight:560;
}

.breakout-page .final-contact{
  position:relative;
  padding:clamp(76px,9vw,132px) 0;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(6,47,43,.98),rgba(10,92,84,.92)),
    radial-gradient(circle at 78% 28%,rgba(185,139,61,.38),transparent 26%);
}

.breakout-page .final-contact::before{
  content:"";
  position:absolute;
  right:-8vw;
  top:-12%;
  width:min(680px,58vw);
  height:120%;
  opacity:.13;
  background:url("devision-firstview-planning-v3.png") center/cover no-repeat;
  filter:saturate(.8) contrast(1.08);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28%,#000 70%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 28%,#000 70%,transparent);
}

.breakout-page .final-contact .wrap{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
  gap:clamp(28px,5vw,80px);
  align-items:end;
}

.breakout-page .final-contact h2{
  max-width:760px;
  font-size:clamp(34px,5vw,68px);
  line-height:1.12;
  font-weight:430;
}

.breakout-page .contact-panel{
  border-radius:0;
  border:1px solid rgba(251,248,240,.16);
  background:rgba(251,248,240,.08);
  backdrop-filter:blur(8px);
}

.breakout-page .contact-panel a{
  border-radius:0;
  background:transparent;
  border-bottom:1px solid rgba(251,248,240,.18);
  color:rgba(255,253,247,.94);
  font-weight:780;
}

.breakout-page .contact-panel a:last-child{
  border-bottom:0;
}

@media (max-width: 980px){
  .breakout-page .editorial-index{
    display:none;
  }

  .breakout-page .flow-hero-grid,
  .breakout-page .intro-inner,
  .breakout-page .build-grid,
  .breakout-page .section-head,
  .breakout-page .home-works-layout,
  .breakout-page .support-contrast-grid,
  .breakout-page .final-contact .wrap{
    grid-template-columns:1fr;
  }

  .breakout-page .flow-hero-copy{
    padding:44px 0 18px;
  }

  .breakout-page .flow-hero::before{
    display:block;
    top:64px;
    right:-34vw;
    width:92vw;
    height:48svh;
    min-height:320px;
    opacity:.16;
    background:url("devision-firstview-planning-v3.png") center/cover no-repeat;
    filter:saturate(1.02) contrast(1.04);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 76%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 76%,transparent 100%);
  }

  .breakout-page .flow-hero h1{
    font-size:clamp(38px,11vw,64px);
  }

  .breakout-page .hero-visual{
    min-height:auto;
    padding:8px 0 42px;
  }

  .breakout-page .hero-photo{
    aspect-ratio:1.35/1;
  }

  .breakout-page .visual-caption{
    left:14px;
    top:22px;
  }

  .breakout-page .build-map-labels{
    left:18px;
    right:18px;
    top:18px;
  }

  .breakout-page .build-map-labels span{
    padding:5px 7px;
    font-size:9px;
  }

  .breakout-page .build-map-note{
    left:18px;
    bottom:22px;
    width:min(210px,42%);
    padding:12px 14px;
  }

  .breakout-page .intro-text{
    padding-left:0;
    border-left:0;
  }

  .breakout-page .section-head{
    gap:12px;
  }

  .breakout-page .section-head .section-kicker{
    margin-top:0;
  }

  .breakout-page .home-works-layout::before{
    display:none;
  }

  .breakout-page .home-featured-work{
    grid-template-columns:1fr;
    min-height:0;
  }

  .breakout-page .home-featured-work figure{
    min-height:270px;
  }

  .breakout-page .price-overview,
  .breakout-page .home-flow-list,
  .breakout-page .mini-faq-grid{
    grid-template-columns:1fr;
  }

  .breakout-page .price-overview{
    padding:22px 18px;
  }

  .breakout-page .price-overview::before{
    position:static;
    display:block;
    margin-bottom:10px;
  }

  .breakout-page .price-overview::after{
    display:none;
  }

  .breakout-page .price-panel,
  .breakout-page .flow-line-item,
  .breakout-page .decision-note{
    border-right:0;
    border-bottom:1px solid rgba(38,34,28,.13);
  }

  .breakout-page .pricing-continuity{
    grid-template-columns:1fr;
    justify-items:start;
    gap:8px;
    margin-top:18px;
  }

  .breakout-page .pricing-continuity i{
    width:1px;
    height:18px;
    margin-left:13px;
    background:linear-gradient(180deg,rgba(10,92,84,.28),rgba(185,139,61,.28));
  }

  .breakout-page .home-flow-list{
    padding-top:18px;
  }

  .breakout-page .flow-readiness{
    grid-template-columns:1fr;
    gap:12px;
    margin:0 0 24px;
    padding:18px 18px 20px;
  }

  .breakout-page .flow-readiness div{
    justify-content:flex-start;
  }

  .breakout-page .home-flow-list::before{
    inset:-14px -14px auto -14px;
    height:calc(100% + 28px);
  }

  .breakout-page .home-flow-list::after{
    display:none;
  }

  .breakout-page .flow-line-item{
    min-height:0;
    padding:22px 0 26px;
  }

  .breakout-page .flow-line-item::after{
    right:0;
    top:26px;
  }

  .breakout-page .flow-line-item h3{
    margin-top:14px;
  }

  .breakout-page .flow-line-item p{
    max-width:480px;
  }

  .breakout-page .decision-note{
    min-height:0;
    padding:24px 0 24px;
  }

  .breakout-page .decision-note h3{
    margin-top:14px;
  }

  .breakout-page .decision-bridge{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:24px;
    padding:18px;
  }
}

@media (min-width:981px) and (max-width:1120px){
  .breakout-page .flow-hero{
    padding-top:54px;
  }

  .breakout-page .flow-hero-grid{
    min-height:calc(100svh - 54px);
  }

  .breakout-page .flow-hero-copy,
  .breakout-page .hero-visual{
    transform:translateY(-24px);
  }

  .breakout-page .flow-hero h1{
    font-size:clamp(42px,5.4vw,58px);
  }

  .breakout-page .build-grid{
    grid-template-columns:minmax(350px,.72fr) minmax(0,1.28fr);
    gap:clamp(30px,4vw,46px);
  }

  .breakout-page .build-copy h2{
    font-size:clamp(38px,4.8vw,48px);
  }

  .breakout-page .build-canvas{
    transform:perspective(1300px) rotateY(-.8deg) rotateX(.35deg);
  }
}

@media (max-width: 640px){
  .breakout-page .logo img{
    width:118px;
  }

  .breakout-page .logo span{
    display:none;
  }

  .breakout-page .flow-hero{
    padding-left:20px;
    padding-right:20px;
  }

  .breakout-page .flow-hero-copy::after{
    left:0;
  }

  .breakout-page .build-map-labels,
  .breakout-page .build-map-note{
    display:none;
  }

  .breakout-page .hero-facts li{
    width:100%;
    margin:0;
    padding-right:0;
  }

  .breakout-page .hero-facts li:not(:last-child)::after{
    display:none;
  }

  .breakout-page .intro-steps{
    grid-template-columns:1fr;
  }

  .breakout-page .work-card{
    grid-template-columns:112px minmax(0,1fr);
  }

  .breakout-page .work-card .work-body{
    padding-left:14px;
  }
}