/* =========================================================
   ABS · COST CALCULATOR PAGE
   Builds on style.css (tokens, nav, footer, buttons, cursor).
   ========================================================= */

.page-calc{background:var(--off-white);}

/* ---------- hero (dark scope, see style.css) ---------- */
.calc-hero{
  position:relative;overflow:hidden;
  padding:clamp(140px,20vh,200px) 0 clamp(80px,12vh,130px);
  background:#073B4C;
}
.calc-hero-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(50% 60% at 85% 30%,rgba(45,212,191,.18),transparent 70%),
    radial-gradient(40% 50% at 5% 100%,rgba(20,184,166,.14),transparent 70%);
}
.calc-hero-bg{display:none;}
.calc-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,110px);align-items:center;}
.calc-hero-eyebrow{margin-bottom:clamp(20px,3vh,32px);}
.calc-title{font-weight:300;font-size:clamp(2.6rem,4.5vw,5.2rem);line-height:1;letter-spacing:-.045em;}
.ct-a{display:block;}
.ct-b{display:block;font-family:var(--f-serif);font-weight:400;letter-spacing:-.02em;padding-left:.9em;padding-bottom:.06em;}
.calc-hero-intro{max-width:46ch;margin-top:clamp(22px,3.5vh,34px);font-size:clamp(15px,1.15vw,17px);font-weight:300;line-height:1.75;color:rgba(234,246,243,.82);}
.calc-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,4vh,40px);}
.calc-badges{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:clamp(26px,4vh,38px);}
.calc-badges li{position:relative;padding-left:16px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--beige);}
.calc-badges li::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--aqua);box-shadow:0 0 10px rgba(45,212,191,.7);}
.calc-hero-foot{margin-top:clamp(30px,5vh,52px);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}
.calc-hero-foot span{font-family:var(--f-serif);font-style:italic;letter-spacing:0;font-size:15px;color:var(--aqua);margin-right:10px;}

.calc-hero-visual{position:relative;justify-self:end;width:min(100%,440px);}
.calc-arch{
  position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:999px 999px 6px 6px;
  box-shadow:0 40px 90px -30px rgba(2,24,32,.8);will-change:transform;
}
.calc-arch::after{content:"";position:absolute;inset:14px;border-radius:999px 999px 2px 2px;border:1px solid rgba(45,212,191,.45);pointer-events:none;}
.calc-arch img{width:100%;height:112%;object-fit:cover;filter:saturate(.9) brightness(.92);will-change:transform;}
.calc-hero-visual figcaption{display:flex;justify-content:space-between;margin-top:14px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--beige);}
.calc-stamp{
  position:absolute;left:-42px;bottom:70px;width:108px;height:108px;border-radius:50%;
  display:grid;place-content:center;text-align:center;
  background:rgba(7,59,76,.85);border:1px solid rgba(45,212,191,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 20px 40px -18px rgba(2,24,32,.8);
}
.calc-stamp b{font-family:var(--f-serif);font-weight:400;font-size:40px;line-height:1;color:var(--aqua);}
.calc-stamp span{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--beige);margin-top:4px;}

/* current page marker on the nav pill */
.btn-pill.is-current{border-color:rgba(45,212,191,.8);}

/* ---------- calculator section ---------- */
.calc-section{position:relative;padding:clamp(80px,12vh,130px) 0 clamp(100px,14vh,160px);scroll-margin-top:90px;}
.calc-card{
  position:relative;background:#FFFFFF;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 40px 90px -50px rgba(7,59,76,.35),0 2px 0 rgba(255,255,255,.9) inset;
}

/* stepper rail */
.calc-rail{position:relative;padding:32px clamp(20px,4vw,48px) 22px;border-bottom:1px solid var(--line);}
.calc-rail-list{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:0;list-style:none;}
.calc-rail__item{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;}
.calc-rail__circle{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:#FFFFFF;border:1px solid var(--line-strong);
  font-family:var(--f-serif);font-size:16px;color:var(--muted);
  transition:background .5s var(--ease),border-color .5s,color .5s,box-shadow .6s var(--ease),transform .6s var(--ease);
}
.calc-rail__label{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .5s;}
.calc-rail__item.is-active .calc-rail__circle{border-color:#14B8A6;color:#0B7285;transform:scale(1.08);box-shadow:0 0 0 6px rgba(20,184,166,.12);}
.calc-rail__item.is-active .calc-rail__label{color:var(--cream);}
.calc-rail__item.is-done .calc-rail__circle{background:#14B8A6;border-color:#14B8A6;color:#FFFFFF;font-family:var(--f-sans);font-size:15px;}
.calc-rail__item.is-done .calc-rail__label{color:#0B7285;}
.calc-rail-line{position:absolute;z-index:0;top:53px;left:calc(clamp(20px,4vw,48px) + 10%);right:calc(clamp(20px,4vw,48px) + 10%);height:1px;background:var(--line-strong);}
.calc-rail-line__fill{display:block;height:100%;background:linear-gradient(90deg,#0B7285,#14B8A6,#2DD4BF);transform-origin:left;transform:scaleX(0);transition:transform .8s var(--ease);}
.calc-rail-meta{display:flex;justify-content:space-between;margin-top:22px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
#calc-pct-meta{color:#0B7285;}

/* body */
.calc-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;}
.calc-main,.calc-summary{min-width:0;}
/* layering: the step body (and any open dropdown, even one that flips upward) sits above the stepper rail */
.calc-rail{z-index:1;}
.calc-body{position:relative;z-index:2;}
.calc-dropdown.is-open{z-index:30;}
.calc-main{padding:clamp(28px,4vw,56px);min-height:520px;display:flex;flex-direction:column;}
.calc-step{display:none;}
.calc-step.is-active{display:block;}
.calc-step__header{display:flex;gap:22px;align-items:flex-start;margin-bottom:34px;}
.calc-step__index{font-family:var(--f-serif);font-style:italic;font-size:clamp(2.4rem,3.6vw,3.4rem);line-height:.9;color:#14B8A6;flex:none;}
.calc-step__title{font-family:var(--f-serif);font-weight:400;font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.1;letter-spacing:-.01em;margin-bottom:10px;}
.calc-step__sub{max-width:52ch;font-size:15px;font-weight:300;color:rgba(var(--fg-rgb),.66);}

.calc-field-group{margin-bottom:30px;}
.calc-field-label{display:block;margin-bottom:12px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);}
.calc-required{color:#14B8A6;}
.calc-error{min-height:1.2em;margin-top:8px;font-size:13px;color:#C2410C;}
.calc-error:empty{min-height:0;margin:0;}
.calc-tip{margin-top:12px;padding:12px 16px;border-radius:10px;background:var(--mint);border-left:2px solid #14B8A6;font-size:14px;color:#0B5563;}

/* shared selectable surface */
.calc-dropdown-toggle,.calc-visa-btn,.calc-yesno__btn,.calc-pill-card,.calc-timeline-card,.calc-input,.calc-counter{
  border:1px solid var(--line-strong);border-radius:12px;background:#FFFFFF;
  transition:border-color .35s var(--ease),background-color .35s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease),color .35s;
}
.calc-visa-btn:hover,.calc-yesno__btn:hover,.calc-pill-card:hover,.calc-timeline-card:hover,.calc-dropdown-toggle:hover{border-color:#14B8A6;transform:translateY(-2px);box-shadow:0 12px 26px -18px rgba(7,59,76,.45);}
.is-selected.calc-visa-btn,.is-selected.calc-yesno__btn,.is-selected.calc-pill-card,.is-selected.calc-timeline-card{
  border-color:#14B8A6;background:var(--mint);color:#073B4C;box-shadow:0 0 0 3px rgba(20,184,166,.16);
}
.is-error.calc-input,.is-error.calc-dropdown-toggle{border-color:#C2410C;box-shadow:0 0 0 3px rgba(194,65,12,.1);}

/* dropdown */
.calc-dropdown{position:relative;}
.calc-dropdown-toggle{width:100%;height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;text-align:left;font-size:16px;color:var(--cream);}
.calc-dropdown-toggle__text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.calc-dropdown-toggle__arrow{flex:none;width:9px;height:9px;border-right:1.5px solid #0B7285;border-bottom:1.5px solid #0B7285;transform:translateY(-3px) rotate(45deg);transition:transform .4s var(--ease);}
.calc-dropdown.is-open .calc-dropdown-toggle{border-color:#14B8A6;box-shadow:0 0 0 3px rgba(20,184,166,.14);}
.calc-dropdown.is-open .calc-dropdown-toggle__arrow{transform:translateY(2px) rotate(-135deg);}
.calc-dropdown-menu{
  position:absolute;z-index:20;left:0;right:0;top:calc(100% + 8px);
  max-height:300px;overflow-y:auto;overscroll-behavior:contain;padding:8px;
  background:#FFFFFF;border:1px solid var(--line-strong);border-radius:14px;
  box-shadow:0 30px 60px -24px rgba(7,59,76,.4);
  animation:ddIn .35s var(--ease);
}
.calc-dropdown.opens-up .calc-dropdown-menu{top:auto;bottom:calc(100% + 8px);}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.calc-dropdown-option{display:block;width:100%;padding:12px 14px;border-radius:8px;text-align:left;font-size:15px;color:var(--cream);transition:background .25s,color .25s;}
.calc-dropdown-option:hover{background:var(--mint);color:#073B4C;}
.calc-dropdown-option.is-selected{background:#14B8A6;color:#FFFFFF;}

/* counter */
.calc-counter-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px;padding:20px 22px;border-radius:14px;background:var(--off-white);border:1px solid var(--line);}
.calc-counter-label{font-weight:600;color:var(--cream);}
.calc-counter-note{font-size:14px;font-weight:300;color:rgba(var(--fg-rgb),.62);}
.calc-counter{display:flex;align-items:center;gap:6px;padding:6px;flex:none;}
.calc-counter__btn{width:40px;height:40px;border-radius:9px;font-size:20px;color:#0B7285;transition:background .3s,color .3s;}
.calc-counter__btn:hover:not(:disabled){background:var(--mint);}
.calc-counter__btn:disabled{opacity:.3;cursor:not-allowed;}
.calc-counter__val{min-width:34px;text-align:center;font-family:var(--f-serif);font-size:22px;color:#073B4C;}

/* visas */
.calc-visa-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;}
.calc-visa-btn{height:58px;font-family:var(--f-serif);font-size:20px;color:var(--cream);}

/* yes / no */
.calc-yesno{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:440px;}
.calc-yesno__btn{height:58px;font-weight:500;font-size:15px;letter-spacing:.06em;color:var(--cream);}

/* turnover + timeline */
.calc-cards--turnover{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.calc-pill-card{padding:16px 14px;font-size:14px;font-weight:500;color:var(--cream);}
.calc-cards--timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.calc-timeline-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:20px;text-align:left;}
.calc-timeline-card__icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:8px;border-radius:10px;background:var(--mint);color:#0B7285;transition:background .35s,color .35s;}
.calc-timeline-card__icon svg{width:22px;height:22px;}
.calc-timeline-card.is-selected .calc-timeline-card__icon{background:#14B8A6;color:#FFFFFF;}
.calc-timeline-card__label{font-family:var(--f-serif);font-size:19px;color:var(--cream);}
.calc-timeline-card__desc{font-size:13px;font-weight:300;color:rgba(var(--fg-rgb),.62);}

/* details form */
.calc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;}
.calc-form-field{margin-bottom:14px;}
.calc-input{width:100%;height:60px;padding:0 18px;font:inherit;font-size:16px;color:var(--cream);outline:none;}
.calc-input::placeholder{color:rgba(var(--fg-rgb),.38);}
.calc-input:focus{border-color:#14B8A6;box-shadow:0 0 0 3px rgba(20,184,166,.14);}
.calc-privacy{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;color:rgba(var(--fg-rgb),.6);}
.calc-privacy::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:1px solid #14B8A6;background:radial-gradient(circle,#14B8A6 35%,transparent 40%);}

/* navigation */
.calc-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:34px;border-top:1px solid var(--line);}
.calc-next{margin-left:auto;}
.calc-back{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px;border-radius:999px;border:1px solid var(--line-strong);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);transition:border-color .35s,background .35s,transform .45s var(--ease);}
.calc-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .45s var(--ease);}
.calc-back:hover{border-color:#14B8A6;background:var(--mint);}
.calc-back:hover svg{transform:translateX(-4px);}
.calc-back[hidden]{display:none;}

/* live summary */
.calc-summary{padding:clamp(28px,3vw,44px) clamp(22px,2.4vw,34px);border-left:1px solid var(--line);background:linear-gradient(180deg,var(--mint),#F3FBF9 60%,#FFFFFF);border-radius:0 18px 18px 0;}
.calc-summary__title{margin-bottom:18px;font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#0B7285;}
.calc-summary__list{margin:0;}
.calc-summary__row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px dashed rgba(11,114,133,.2);}
.calc-summary__row dt{font-size:13px;color:rgba(var(--fg-rgb),.55);}
.calc-summary__row dd{margin:0;text-align:right;font-size:13.5px;font-weight:500;color:rgba(var(--fg-rgb),.35);transition:color .4s;}
.calc-summary__row.is-filled dd{color:#073B4C;}
.calc-summary__row.is-filled dt::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:#14B8A6;vertical-align:middle;}
.calc-summary__note{margin-top:22px;font-size:12.5px;line-height:1.6;color:rgba(var(--fg-rgb),.55);}

/* ---------- results ---------- */
.calc-results{padding:clamp(34px,5vw,70px);}
.calc-results[hidden]{display:none;}
.calc-results__header{max-width:640px;margin-bottom:clamp(34px,5vh,56px);}
.calc-results__check{display:grid;place-items:center;width:64px;height:64px;margin-bottom:24px;border-radius:50%;background:#14B8A6;box-shadow:0 0 0 10px rgba(20,184,166,.14);}
.calc-results__check svg{width:28px;height:28px;fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.calc-results__title{font-weight:300;font-size:clamp(2.4rem,4.4vw,4.2rem);line-height:1.02;letter-spacing:-.04em;margin-bottom:16px;}
.calc-results__title em{font-family:var(--f-serif);font-weight:400;letter-spacing:-.02em;}
.calc-results__sub{font-size:16px;font-weight:300;color:rgba(var(--fg-rgb),.72);}
.calc-results__sub strong{font-weight:600;color:#073B4C;}
.calc-results__body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;}
.calc-results__heading{font-family:var(--f-serif);font-weight:400;font-size:clamp(1.6rem,2.2vw,2rem);margin-bottom:22px;}
.calc-next-steps{margin:0 0 30px;padding:0;list-style:none;}
.calc-next-steps li{display:flex;gap:18px;padding:18px 0;border-top:1px solid var(--line);}
.calc-next-steps__num{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid #14B8A6;font-family:var(--f-serif);font-size:16px;color:#0B7285;}
.calc-next-steps h4{margin-bottom:4px;font-size:16px;font-weight:600;color:var(--cream);}
.calc-next-steps p{font-size:14.5px;font-weight:300;color:rgba(var(--fg-rgb),.66);}
.calc-next-steps strong{font-weight:600;color:#073B4C;}
.calc-results__cta{padding:22px 22px 30px;border-radius:16px;background:#073B4C;}
.calc-results__cta-img{aspect-ratio:16/10;overflow:hidden;border-radius:10px;margin-bottom:22px;}
.calc-results__cta-img img{width:100%;height:100%;object-fit:cover;}
.calc-results__cta h3{font-family:var(--f-serif);font-weight:400;font-size:1.7rem;margin-bottom:8px;}
.calc-results__cta p{font-size:14.5px;font-weight:300;color:rgba(234,246,243,.75);margin-bottom:22px;}
.calc-results__call{display:inline-block;margin-left:18px;font-size:14px;}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .calc-body{grid-template-columns:minmax(0,1fr);}
  .calc-summary{border-left:0;border-top:1px solid var(--line);border-radius:0 0 18px 18px;}
  .calc-summary__list{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;}
}
@media (max-width:900px){
  .calc-hero-grid{grid-template-columns:1fr;}
  /* phones/tablets: drop the arch card, the same photo fills the hero behind the copy */
  .calc-hero-visual{display:none;}
  .calc-hero-bg{display:block;position:absolute;inset:0;overflow:hidden;}
  .calc-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;filter:saturate(.85);will-change:transform;}
  .calc-hero-bg::after{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(180deg,rgba(7,59,76,.78) 0%,rgba(7,59,76,.72) 40%,rgba(7,59,76,.9) 75%,#073B4C 100%),
      linear-gradient(90deg,rgba(7,59,76,.55),rgba(7,59,76,.1));
  }
  .calc-results__body{grid-template-columns:1fr;}
}
@media (max-width:700px){
  .ct-b{padding-left:0;}
  .calc-rail__label{display:none;}
  .calc-rail__circle{width:34px;height:34px;font-size:14px;}
  .calc-rail-line{top:48px;}
  .calc-step__header{flex-direction:column;gap:10px;}
  .calc-visa-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .calc-cards--turnover{grid-template-columns:1fr 1fr;}
  .calc-cards--timeline{grid-template-columns:1fr;}
  .calc-timeline-card{flex-direction:row;align-items:center;flex-wrap:wrap;column-gap:14px;}
  .calc-timeline-card__icon{margin-bottom:0;}
  .calc-timeline-card__desc{width:100%;}
  .calc-form-grid{grid-template-columns:1fr;}
  .calc-counter-row{flex-direction:column;align-items:flex-start;}
  .calc-summary__list{grid-template-columns:minmax(0,1fr);}
  .calc-summary__row dd{overflow-wrap:anywhere;}
  .calc-nav{flex-wrap:wrap;}
  .calc-next{width:100%;justify-content:space-between;}
  .calc-results__call{margin:18px 0 0;display:block;}
}