/* TALANUM V2 visual correction layer — post human review.
   Purpose: spacing discipline, consistent controls, sticky estimator form,
   readable editorial line breaks and non-stock explanatory motion visuals. */

:root{--talanum-control-radius:12px}

/* GLOBAL POLISH GATE #0 — never expose freshly rewritten Hero DOM before its story stylesheet is ready. */
.story-visual,
.hero-transition.story-home,
.story-founding{visibility:hidden}

.button,
.submit-button,
.fake-lead-button,
.nav-cta,
.result-review-cta{
  border-radius:var(--talanum-control-radius)!important;
}

.headline-break{display:block}

@media(min-width:901px){
  .estimate-layout{align-items:start}
  .estimate-form{
    position:sticky;
    top:18px;
    align-self:start;
  }
}

/* Explanatory hero visuals replace generic stock photography. */
.page-concept-visual{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:520px;
  padding:clamp(30px,4vw,52px);
  overflow:hidden;
  background:#111;
  color:#fff;
  border-left:1px solid rgba(15,15,15,.12);
  isolation:isolate;
}
.page-concept-visual:before{
  content:"";
  position:absolute;
  width:320px;
  height:320px;
  right:-170px;
  top:-160px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
}
.page-concept-visual:after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  left:-80px;
  bottom:-80px;
  background:#FDC41F;
  border-radius:50%;
  opacity:.92;
}
.concept-caption{
  position:relative;
  z-index:2;
  margin-bottom:22px;
  color:#9d9d98;
  font:700 10px/1.2 Inter,system-ui,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.concept-browser{
  position:relative;
  z-index:2;
  padding:18px;
  border:1px solid #383838;
  border-radius:18px;
  background:#191919;
  box-shadow:0 22px 50px rgba(0,0,0,.26);
}
.concept-browser-bar{
  display:flex;
  align-items:center;
  gap:7px;
  padding-bottom:14px;
  border-bottom:1px solid #333;
}
.concept-browser-bar span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#555;
}
.concept-browser-bar b{
  margin-left:auto;
  color:#8f8f8b;
  font-size:9px;
  font-weight:600;
}
.concept-module{
  border:1px solid #3b3b3b;
  border-radius:14px;
  background:#222;
  padding:16px;
}
.concept-module small,
.concept-market-card small,
.concept-audit-step small,
.concept-partner-card small{
  display:block;
  margin-bottom:6px;
  color:#90908b;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.concept-module strong,
.concept-market-card strong,
.concept-audit-step strong,
.concept-partner-card strong{
  display:block;
  color:#fff;
  font-size:15px;
  line-height:1.25;
}

/* WHAT WE DO — multiple website layers become one working delivery. */
.concept-delivery-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.concept-delivery .concept-module{
  transform:translateY(6px);
  animation:concept-module-settle 5.8s ease-in-out infinite;
}
.concept-delivery .concept-module:nth-child(2){animation-delay:.35s}
.concept-delivery .concept-module:nth-child(3){animation-delay:.7s}
.concept-delivery .concept-module:nth-child(4){animation-delay:1.05s}
.concept-ready{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:42px 1fr;
  grid-template-rows:auto auto;
  column-gap:12px;
  width:min(88%,390px);
  margin:-6px 0 0 auto;
  padding:16px 18px;
  border-radius:16px;
  background:#FDC41F;
  color:#111;
  box-shadow:0 16px 34px rgba(0,0,0,.2);
  transform:translateY(8px);
  animation:concept-ready-pulse 5.8s ease-in-out infinite;
}
.concept-ready span{
  grid-row:1/3;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:#111;
  color:#FDC41F;
  font-weight:900;
}
.concept-ready strong{font-size:14px}
.concept-ready small{font-size:10px;color:#5b4b05}

/* FIT — existing site, business intent and target market align. */
.concept-fit-map{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 74px 1fr;
  align-items:center;
  gap:12px;
  min-height:330px;
}
.concept-market-card{
  padding:22px;
  border:1px solid #3a3a3a;
  border-radius:18px;
  background:#1b1b1b;
}
.concept-market-card.target{
  border-color:#FDC41F;
  box-shadow:inset 0 4px 0 #FDC41F;
}
.concept-market-card p{
  margin:10px 0 0;
  color:#aaa;
  font-size:11px;
  line-height:1.55;
}
.concept-bridge{
  position:relative;
  height:2px;
  background:#454545;
}
.concept-bridge:before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#FDC41F;
  transform:translate(-50%,-50%);
  animation:concept-bridge-run 3.2s ease-in-out infinite;
}
.concept-fit-signals{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-top:18px;
}
.concept-fit-signals span{
  padding:12px;
  border:1px solid #343434;
  border-radius:12px;
  background:#1c1c1c;
  color:#c9c9c4;
  font-size:10px;
  text-align:center;
}

/* DEEP AUDIT — public scan becomes exact three-option proposal. */
.concept-audit-flow{
  position:relative;
  z-index:2;
  display:grid;
  gap:11px;
}
.concept-audit-step{
  position:relative;
  padding:18px 20px 18px 52px;
  border:1px solid #393939;
  border-radius:16px;
  background:#1c1c1c;
}
.concept-audit-step:before{
  content:attr(data-step);
  position:absolute;
  left:14px;
  top:50%;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:8px;
  background:#2c2c2c;
  color:#FDC41F;
  font:800 9px/1 Inter,sans-serif;
  transform:translateY(-50%);
}
.concept-audit-step.is-active{
  border-color:#FDC41F;
  animation:concept-audit-focus 4.8s ease-in-out infinite;
}
.concept-proposal-mini{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:16px;
}
.concept-proposal-mini span{
  padding:14px 8px;
  border:1px solid #3a3a3a;
  border-radius:12px;
  background:#202020;
  color:#d4d4cf;
  font-size:10px;
  font-weight:700;
  text-align:center;
}
.concept-proposal-mini span:nth-child(2){background:#FDC41F;color:#111;border-color:#FDC41F}

/* PARTNERS — agency and specialist layer combine into one client delivery. */
.concept-partner-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 70px 1fr;
  align-items:center;
  gap:12px;
  min-height:300px;
}
.concept-partner-card{
  padding:22px;
  border:1px solid #3b3b3b;
  border-radius:18px;
  background:#1b1b1b;
}
.concept-partner-card.talanum{border-color:#FDC41F}
.concept-partner-card ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.concept-partner-card li{color:#aaa;font-size:10px}
.concept-partner-card li:before{content:"✓";color:#FDC41F;margin-right:7px}
.concept-partner-link{
  position:relative;
  height:2px;
  background:#444;
}
.concept-partner-link:after{
  content:"";
  position:absolute;
  right:-2px;
  top:50%;
  width:8px;
  height:8px;
  border-top:2px solid #FDC41F;
  border-right:2px solid #FDC41F;
  transform:translateY(-50%) rotate(45deg);
}
.concept-partner-output{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  margin-top:16px;
  padding:15px 18px;
  border-radius:14px;
  background:#FDC41F;
  color:#111;
  font-size:11px;
  font-weight:700;
}
.concept-partner-output small{color:#5f500a;font-weight:600}

@keyframes concept-module-settle{
  0%,100%{transform:translateY(6px);border-color:#3b3b3b}
  28%,62%{transform:translateY(0);border-color:#FDC41F}
}
@keyframes concept-ready-pulse{
  0%,68%,100%{transform:translateY(8px);box-shadow:0 16px 34px rgba(0,0,0,.2)}
  76%,90%{transform:translateY(0);box-shadow:0 20px 44px rgba(253,196,31,.18)}
}
@keyframes concept-bridge-run{
  0%,100%{left:0}
  50%{left:100%}
}
@keyframes concept-audit-focus{
  0%,100%{background:#1c1c1c}
  40%,66%{background:#25220f}
}

@media(max-width:900px){
  .page-concept-visual{border-left:0;border-top:1px solid rgba(15,15,15,.12);min-height:430px}
}
@media(max-width:600px){
  .headline-break{display:inline}
  .headline-break+.headline-break:before{content:" "}
  .page-concept-visual{min-height:390px;padding:28px 22px}
  .concept-delivery-grid{grid-template-columns:1fr}
  .concept-ready{width:96%;margin-top:10px}
  .concept-fit-map,.concept-partner-grid{grid-template-columns:1fr;gap:10px;min-height:0}
  .concept-bridge,.concept-partner-link{width:2px;height:34px;margin:auto}
  .concept-bridge:before{top:0;left:50%;animation:concept-bridge-run-mobile 3.2s ease-in-out infinite}
  .concept-partner-link:after{right:50%;top:auto;bottom:-2px;transform:translateX(50%) rotate(135deg)}
  .concept-fit-signals,.concept-proposal-mini{grid-template-columns:1fr}
  .concept-partner-output{display:grid}
}
@keyframes concept-bridge-run-mobile{
  0%,100%{top:0}
  50%{top:100%}
}
@media(prefers-reduced-motion:reduce){
  .concept-delivery .concept-module,
  .concept-ready,
  .concept-bridge:before,
  .concept-audit-step.is-active{animation:none;transform:none}
}

/* HOME HERO — stronger client-site composition from the 2026-08-23 visual review. */
.hero-transition{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 82% 18%,rgba(253,196,31,.24),transparent 23%),
    linear-gradient(145deg,#ecebe7 0%,#f8f7f3 48%,#e4e2dc 100%);
}
.hero-transition:before,
.hero-transition:after{
  position:absolute;
  z-index:4;
  display:grid;
  gap:4px;
  min-width:176px;
  padding:13px 15px;
  border:1px solid rgba(15,15,15,.12);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  color:#111;
  box-shadow:0 18px 38px rgba(15,15,15,.12);
  backdrop-filter:blur(10px);
  font:700 11px/1.25 Inter,system-ui,sans-serif;
  letter-spacing:.01em;
  animation:hero-card-float 6.4s ease-in-out infinite;
}
.hero-transition:before{
  content:"SITE STRUCTURE\A Mapped before localization";
  white-space:pre;
  left:clamp(18px,3vw,44px);
  top:clamp(28px,5vw,72px);
  border-left:4px solid #FDC41F;
}
.hero-transition:after{
  content:"FORMS + LINKS\A Checked in the working site";
  white-space:pre;
  right:clamp(18px,3vw,44px);
  bottom:clamp(24px,4vw,58px);
  animation-delay:-3.1s;
}
.hero-transition .transition-screen{
  position:relative;
  z-index:2;
  width:min(100%,720px);
  margin:auto;
  border:1px solid rgba(15,15,15,.18);
  border-radius:22px;
  overflow:hidden;
  background:#111;
  box-shadow:0 34px 70px rgba(15,15,15,.21);
  transform:perspective(1100px) rotateY(-4deg) rotateX(1.5deg);
  animation:hero-screen-float 8.5s ease-in-out infinite;
}
.hero-transition .transition-screen:before{
  content:"";
  position:absolute;
  z-index:5;
  left:14px;
  top:12px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#FDC41F;
  box-shadow:13px 0 0 rgba(255,255,255,.45),26px 0 0 rgba(255,255,255,.22);
}
.hero-transition .transition-base,
.hero-transition .transition-overlay img{
  display:block;
  width:100%;
  height:auto;
}
.hero-transition .transition-line{
  box-shadow:0 0 0 1px rgba(253,196,31,.28),0 0 20px rgba(253,196,31,.52);
}
@media(min-width:901px){
  .hero-section{
    grid-template-columns:minmax(420px,.88fr) minmax(560px,1.12fr);
    min-height:640px;
  }
  .hero-copy{padding-right:clamp(40px,4.5vw,68px)}
  .hero-transition{padding:clamp(42px,5vw,70px) clamp(36px,4vw,58px)}
}
@keyframes hero-card-float{
  0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}
  50%{transform:translate3d(0,-10px,0) rotate(1deg)}
}
@keyframes hero-screen-float{
  0%,100%{transform:perspective(1100px) rotateY(-4deg) rotateX(1.5deg) translateY(0)}
  50%{transform:perspective(1100px) rotateY(-2deg) rotateX(.4deg) translateY(-8px)}
}

/* Mobile is a separately composed vertical hero, not a scaled desktop scene. */
@media(max-width:900px){
  .hero-transition{
    min-height:440px;
    padding:58px 24px 68px;
    align-items:center;
  }
  .hero-transition .transition-screen{
    width:min(86%,520px);
    margin:18px auto 0;
    border-radius:18px;
    transform:none;
    animation:hero-screen-float-mobile 7s ease-in-out infinite;
  }
  .hero-transition:before{
    left:18px;
    top:20px;
    min-width:164px;
  }
  .hero-transition:after{
    right:18px;
    bottom:20px;
    min-width:164px;
  }
}
@media(max-width:600px){
  .hero-transition{
    min-height:410px;
    padding:62px 16px 72px;
  }
  .hero-transition .transition-screen{width:92%}
  .hero-transition:before,
  .hero-transition:after{
    min-width:148px;
    padding:11px 12px;
    font-size:9px;
  }
  .hero-transition:before{left:10px;top:16px}
  .hero-transition:after{right:10px;bottom:16px}
}
@keyframes hero-screen-float-mobile{
  0%,100%{transform:translateY(0) rotate(-.35deg)}
  50%{transform:translateY(-7px) rotate(.35deg)}
}
@media(prefers-reduced-motion:reduce){
  .hero-transition:before,
  .hero-transition:after,
  .hero-transition .transition-screen{
    animation:none;
    transform:none;
  }
}