.calculator-page {
  --calc-shadow:0 22px 60px rgba(10,10,10,.09);
  --calc-radius:2px;
  background:#fff
}
.calculator-hero {
  position:relative;
  overflow:hidden;
  padding:88px 0 92px;
  background:#0a0a0a;
  color:#fff
}
.calculator-hero:before {
  content:'';
  position:absolute;
  width:560px;
  height:560px;
  right:-180px;
  top:-250px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  box-shadow:0 0 0 90px rgba(255,255,255,.025),0 0 0 180px rgba(255,255,255,.018)
}
.calculator-hero:after {
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:3px;
  background:linear-gradient(90deg,var(--red) 0 38%,#3c0a0e 38%)
}
.calculator-hero-grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);
  align-items:end;
  gap:8vw
}
.breadcrumbs {
  display:flex;
  gap:9px;
  margin-bottom:55px;
  color:#8f8b87;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}
.breadcrumbs a:hover {color:#fff}
.calculator-hero h1 {
  max-width:850px;
  margin:.55rem 0 1.4rem;
  font-size:clamp(3.35rem,7vw,6.7rem)
}
.calculator-hero>div>div:first-child>p {
  max-width:660px;
  margin-bottom:2rem;
  color:#c8c4c0;
  font-size:1.08rem
}
.calculator-hero .btn-outline {border-color:#777;color:#fff}
.calculator-hero-card {
  border-top:3px solid var(--red);
  padding:30px 0 4px
}
.calculator-hero-card>span,.calc-card-head span,.repeat-heading span {
  color:var(--red);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase
}
.calculator-hero-card>strong {
  display:block;
  margin:4px 0 -9px;
  font-size:5.2rem;
  line-height:1;
  letter-spacing:-.08em
}
.calculator-hero-card>p {margin:0;color:#c9c5c1}
.calculator-hero-card ul {margin:27px 0 0;padding:0;list-style:none}
.calculator-hero-card li {
  padding:10px 0;
  border-top:1px solid #292929;
  color:#e5e2df;
  font-size:.82rem
}
.calculator-hero-card li:before {content:'+';margin-right:10px;color:var(--red);font-weight:800}
.calculator-section {padding-top:92px;scroll-margin-top:170px}
.calculator-intro,.calc-panel-heading,.content-grid,.faq-wrap {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:end;
  gap:8vw
}
.calculator-intro h2,.calc-panel-heading h2 {margin-bottom:0}
.calculator-intro>p,.calc-panel-heading>p {margin:0 0 5px;max-width:520px}
.calc-tabs {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  margin:50px 0 0;
  border:1px solid var(--line);
  background:var(--line);
  gap:1px
}
.calc-tab {
  position:relative;
  min-width:0;
  min-height:118px;
  padding:18px 14px;
  border:0;
  background:#fff;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  transition:.22s ease
}
.calc-tab span {display:block;color:var(--red);font-size:.64rem;font-weight:800;letter-spacing:.12em}
.calc-tab b {display:block;margin:19px 0 3px;font-size:.86rem}
.calc-tab small {display:block;color:var(--muted);font-size:.68rem;line-height:1.35}
.calc-tab:hover,.calc-tab:focus-visible {z-index:1;box-shadow:inset 0 -3px var(--red)}
.calc-tab.active {background:var(--ink);color:#fff}
.calc-tab.active:after {content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red)}
.calc-tab.active small {color:#aaa6a2}
.calc-panel {padding-top:82px;scroll-margin-top:170px}
.calc-panel[hidden] {display:none}
.calc-workspace {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
  gap:20px;
  align-items:start;
  margin-top:36px
}
.calc-card {
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--calc-shadow)
}
.calc-form {padding:34px}
.calc-card-head {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  margin-bottom:28px
}
.calc-card-head h3 {margin:4px 0 0;font-size:1.65rem}
.text-button {
  padding:0;
  border:0;
  border-bottom:1px solid var(--red);
  background:none;
  color:var(--ink);
  font:inherit;
  font-size:.72rem;
  font-weight:800;
  line-height:1.8;
  text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer
}
.text-button:hover,.text-button:focus-visible {color:var(--red)}
.calc-fields {display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}
.calc-field {display:block;min-width:0}
.shape-field[hidden] {display:none!important}
.calc-field>span {display:block;margin-bottom:7px;font-size:.72rem;font-weight:800;letter-spacing:.03em}
.calc-field>div {position:relative}
.calc-field input,.calc-field select,.opening-row input,.opening-row select,.blocking-row input,.custom-point-row input {
  width:100%;
  min-height:48px;
  padding:10px 52px 10px 12px;
  border:1px solid #d7d4d0;
  border-radius:0;
  outline:0;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:.92rem;
  transition:border-color .2s,box-shadow .2s
}
.calc-field select,.opening-row select {padding-right:30px}
.calc-field input:focus,.calc-field select:focus,.opening-row input:focus,.opening-row select:focus,.blocking-row input:focus,.custom-point-row input:focus {
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(193,18,31,.1)
}
.calc-field em {
  position:absolute;
  right:11px;
  top:50%;
  transform:translateY(-50%);
  color:#898581;
  font-size:.62rem;
  font-style:normal;
  font-weight:800;
  letter-spacing:.08em
}
.calc-field small {display:block;margin-top:6px;color:#77736f;font-size:.68rem;line-height:1.45}
.calc-note {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  margin-top:28px;
  padding:17px 18px;
  border-left:3px solid var(--red);
  background:#f7f5f3;
  font-size:.76rem
}
.calc-note b {white-space:nowrap}
.calc-note span {color:#625f5c}
.calc-results {
  position:sticky;
  top:178px;
  overflow:hidden;
  padding:34px;
  background:var(--ink);
  color:#fff;
  box-shadow:none
}
.calc-results .calc-card-head {padding-bottom:22px;border-bottom:1px solid #303030}
.result-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px 18px;
  align-items:baseline;
  padding:17px 0;
  border-bottom:1px solid #2d2d2d
}
.result-row>span {color:#c1bdb9;font-size:.78rem}
.result-row strong {font-size:1.18rem;letter-spacing:-.035em;text-align:right}
.result-row small {grid-column:1/-1;color:#85817d;font-size:.68rem}
.result-row.featured {margin:12px -34px 0;padding:24px 34px;background:var(--red);border:0}
.result-row.featured>span,.result-row.featured small {color:#ffe8ea}
.result-row.featured strong {font-size:1.8rem}
.calc-copy {width:100%;margin-top:24px;border-color:#fff;background:#fff;color:var(--ink)}
.calc-copy:hover,.calc-copy:focus {color:#fff}
.framing-shape-picker {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:1px;
  margin-top:36px;
  border:1px solid var(--line);
  background:var(--line)
}
.framing-shape-picker label {display:flex;min-width:0;height:100%;cursor:pointer}
.framing-shape-picker input {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0}
.framing-shape-picker label>span {
  display:grid;
  grid-template-columns:56px 1fr;
  grid-template-rows:auto auto;
  width:100%;
  height:100%;
  column-gap:16px;
  align-items:center;
  min-height:92px;
  padding:18px 22px;
  background:#fff;
  transition:.2s
}
.framing-shape-picker label>span>* {min-width:0}
.framing-shape-picker label>span:hover {background:#faf8f6}
.framing-shape-picker input:focus-visible+span {outline:3px solid rgba(193,18,31,.25);outline-offset:-3px}
.framing-shape-picker input:checked+span {background:var(--ink);color:#fff}
.framing-shape-picker b {align-self:end;font-size:.95rem}
.framing-shape-picker small {align-self:start;color:var(--muted);font-size:.69rem}
.framing-shape-picker input:checked+span small {color:#aaa6a2}
.shape-icon {display:block;grid-row:1/3;width:54px;height:40px;overflow:visible}
.shape-icon path {fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
.repeat-section {margin-top:32px;padding-top:27px;border-top:1px solid var(--line)}
.repeat-heading {display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:15px}
.repeat-heading p {margin:5px 0 0;font-size:.76rem}
.opening-row,.blocking-row {position:relative;margin-top:12px;padding:17px;border:1px solid var(--line);background:#fbfaf9}
.opening-row-head {display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.opening-row-head b {font-size:.82rem}
.remove-repeat {border:0;background:none;color:#7c7874;font-weight:800;cursor:pointer}
.remove-repeat:hover {color:var(--red)}
.opening-row-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.opening-row label,.blocking-row label {font-size:.67rem;font-weight:800}
.opening-row label>span,.blocking-row label>span {display:block;margin-bottom:5px}
.opening-row input,.opening-row select,.blocking-row input,.custom-point-row input {min-height:42px;padding:8px;font-size:.8rem}
.blocking-row {display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
.blocking-row .remove-repeat {width:40px;height:42px;border:1px solid var(--line)}
.empty-repeat {margin:0;padding:15px;border:1px dashed #d7d4d0;color:#8a8682;font-size:.75rem;text-align:center}
.custom-points-section {margin-top:30px;padding:25px;border:1px solid var(--line);background:#fbfaf9}
.custom-points-section.repeat-section {border-top:3px solid var(--red)}
.custom-point-scale {display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin:3px 0 13px;color:#8a8682;font-size:.57rem;font-weight:800;letter-spacing:.1em}
.custom-point-scale i {height:1px;background:linear-gradient(90deg,var(--red),#d6d2ce,var(--red))}
.custom-point-list {display:grid;gap:9px}
.custom-point-row {display:grid;grid-template-columns:38px 1fr 1fr 38px;gap:10px;align-items:end;padding:11px;border:1px solid var(--line);background:#fff}
.custom-point-row>strong {align-self:center;color:var(--red);font-size:.7rem;letter-spacing:.08em;text-align:center}
.custom-point-row label {font-size:.65rem;font-weight:800}
.custom-point-row label>span {display:block;margin-bottom:5px}
.custom-point-row .remove-repeat {width:38px;height:42px;border:1px solid var(--line)}
.point-lock {display:grid;width:38px;height:42px;place-items:center;color:#aaa6a2;font-size:.55rem}
.custom-point-row.is-endpoint {background:#f5f3f0}
.custom-point-row input[readonly] {background:#ece9e5;color:#686562;cursor:not-allowed}
.custom-point-help {margin:12px 0 0;color:#77736f;font-size:.68rem}
.wall-diagram {margin:-4px 0 20px;padding:10px 0 20px;border-bottom:1px solid #303030}
.wall-diagram svg {display:block;width:100%;height:auto}
.wall-fill {fill:#181818;stroke:#727272;stroke-width:2}
.wall-stud {stroke:#c8c8c8;stroke-width:2}
.wall-stud.king {stroke:#e44a55;stroke-width:3}
.wall-opening {fill:#0a0a0a;stroke:#e44a55;stroke-width:2;stroke-dasharray:5 4}
.wall-profile {fill:none;stroke:#fff;stroke-width:4}
.wall-dimension {stroke:#686868;stroke-width:1}
.wall-label {fill:#aaa;font:12px Arial;text-anchor:middle}
.wall-slope {fill:#e67880;font:11px Arial;text-anchor:middle}
.framing-warning {margin:14px 0 0;padding:12px 14px;border-left:3px solid #e5a435;background:#211b12;color:#f3d59b;font-size:.72rem}
.detail-table-wrap {margin-top:24px;overflow-x:auto}
.detail-table-wrap h4 {margin:0 0 10px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.detail-table {width:100%;border-collapse:collapse;font-size:.7rem}
.detail-table th,.detail-table td {padding:9px 6px;border-bottom:1px solid #303030;text-align:left}
.detail-table th {color:#8f8b87;font-size:.59rem;letter-spacing:.08em;text-transform:uppercase}
.detail-table td:nth-child(n+2),.detail-table th:nth-child(n+2) {text-align:right}
.detail-table-note {margin:9px 0 0;color:#7e7a76;font-size:.64rem}
.guide-intro {max-width:770px}
.guide-intro p {max-width:620px}
.guide-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:50px;border:1px solid var(--line);background:var(--line)}
.guide-grid article {min-height:270px;padding:28px;background:#fff}
.guide-grid article>span {color:var(--red);font-size:.7rem;font-weight:800;letter-spacing:.1em}
.guide-grid h3 {margin:42px 0 12px}
.guide-grid p {font-size:.83rem}
.formula-strip {display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:44px;padding:30px;background:var(--ink);color:#fff}
.formula-strip b,.formula-strip span {display:block}
.formula-strip b {margin-bottom:6px;color:#f6f4f2;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.formula-strip span {color:#aaa6a2;font-size:.75rem}
.content-grid {align-items:start}
.content-grid p:first-child {margin-top:5px}
.faq-wrap {align-items:start}
.faq-list details {border-top:1px solid var(--line)}
.faq-list details:last-child {border-bottom:1px solid var(--line)}
.faq-list summary {position:relative;padding:20px 40px 20px 0;font-weight:800;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker {display:none}
.faq-list summary:after {content:'+';position:absolute;right:4px;top:17px;color:var(--red);font-size:1.3rem}
.faq-list details[open] summary:after {content:'−'}
.faq-list p {margin:0;padding:0 40px 21px 0;font-size:.9rem}
.copy-toast {position:fixed;z-index:100;right:24px;bottom:24px;padding:13px 18px;background:var(--red);color:#fff;font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.copy-toast[hidden] {display:none}
@media(max-width:980px) {
  .calc-tabs {grid-template-columns:repeat(3,1fr)}
  .calc-workspace {grid-template-columns:1fr}
  .calc-results {position:relative;top:auto}
  .guide-grid {grid-template-columns:repeat(2,1fr)}
  .formula-strip {grid-template-columns:1fr 1fr}
}
@media(max-width:760px) {
  .calculator-hero {padding:54px 0 65px}
  .calculator-hero-grid,.calculator-intro,.calc-panel-heading,.content-grid,.faq-wrap {grid-template-columns:1fr;gap:28px}
  .calculator-hero-card {margin-top:16px}
  .breadcrumbs {margin-bottom:34px}
  .calculator-hero h1 {font-size:clamp(3rem,15vw,4.5rem)}
  .calculator-section {padding-top:66px}
  .calculator-section {scroll-margin-top:105px}
  .calc-tabs {grid-template-columns:1fr 1fr;margin-top:34px}
  .calc-tab {min-height:104px}
  .calc-panel {padding-top:58px;scroll-margin-top:115px}
  .calc-form,.calc-results {padding:22px}
  .calc-fields {grid-template-columns:1fr;gap:17px}
  .calc-note {grid-template-columns:1fr;gap:6px}
  .result-row.featured {margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px}
  .framing-shape-picker {grid-template-columns:repeat(2,minmax(0,1fr))}
  .framing-shape-picker label>span {grid-template-columns:42px 1fr;column-gap:10px;min-height:88px;padding:14px}
  .shape-icon {width:40px;height:30px}
  .opening-row-grid {grid-template-columns:1fr 1fr}
  .blocking-row {grid-template-columns:1fr auto}
  .blocking-row label:first-child {grid-column:1/-1}
  .guide-grid,.formula-strip {grid-template-columns:1fr}
  .guide-grid article {min-height:auto}
  .guide-grid h3 {margin-top:25px}
  .formula-strip {gap:21px}
}
@media(max-width:430px) {
  .calc-tab {min-height:88px}
  .calc-tab b {margin-top:10px}
  .opening-row-grid {grid-template-columns:1fr}
  .custom-points-section {padding:17px 13px}
  .custom-point-row {grid-template-columns:31px 1fr 1fr 34px;gap:7px;padding:9px 7px}
  .custom-point-row .remove-repeat {width:34px}
  .repeat-heading {display:block}
  .repeat-heading .text-button {margin-top:12px}
}
@media(max-width:350px) {
  .framing-shape-picker {grid-template-columns:1fr}
}