/* Interactive result, then an editorial planning-record studio. */
.case-gallery-section{--case-feedback:180ms;--case-ease:cubic-bezier(.16,1,.3,1);background:var(--sage);}
.case-gallery-heading{align-items:end;margin-bottom:38px}
.case-gallery-heading h2{font-size:clamp(42px,4.4vw,64px);line-height:1.12}
.case-gallery-heading h2 em{color:var(--rust)}
.case-gallery-heading>p{max-width:270px;font-size:15px;line-height:1.8}
.case-tabs{display:flex;gap:34px;border-bottom:1px solid var(--line);margin-bottom:34px}
.case-tab{position:relative;padding:16px 0 18px;min-height:52px;color:var(--muted);background:none;border:0;font-size:14px;text-align:left}
.case-tab::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform var(--case-feedback) var(--case-ease)}
.case-tab[aria-selected=true]{color:var(--ink)}
.case-tab[aria-selected=true]::after{transform:scaleX(1)}
.case-story-heading{display:flex;justify-content:space-between;gap:30px;margin-bottom:30px;align-items:start}
.case-story-heading h3{font:400 clamp(27px,2.5vw,36px)/1.25 var(--font-display);letter-spacing:-.025em}
.case-story-heading p{font-size:14px;line-height:1.8;color:var(--muted);margin-top:13px;max-width:66ch}

.case-framework h4{font:400 clamp(30px,3.3vw,46px)/1.15 var(--font-display);letter-spacing:-.025em;margin:0}
.case-inspection{margin:0;border:0}
.case-inspection-content{max-width:980px;margin-inline:auto}
.case-nojs-label{display:none}
.case-image-fallback{font-size:14px;line-height:1.8;color:var(--muted);padding:28px;text-align:center;justify-self:center}
.case-image-toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:4px}
.case-comparison-note{font-size:12px;line-height:1.7;color:var(--muted)}
.case-stage{--case-amount:50%;position:relative;isolation:isolate}
.case-reveal{position:relative;width:100%;aspect-ratio:1.95;background:var(--paper);overflow:hidden}
.case-photo-layer{position:absolute;inset:0;display:grid;place-items:center;background:var(--paper);font-size:13px;text-align:center}
.case-photo-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.case-after-layer{clip-path:inset(0 calc(100% - var(--case-amount)) 0 0);transition:clip-path 350ms var(--case-ease);pointer-events:none}
.case-state,.case-other-label{position:absolute;top:12px;padding:4px 10px;background:var(--paper);color:var(--ink);font-size:12px;line-height:1.5;pointer-events:none}
.case-state{left:12px}.case-other-label{right:12px}
.case-divider{position:absolute;left:var(--case-amount);top:0;bottom:0;width:1px;background:var(--paper);pointer-events:none;transition:left 350ms var(--case-ease)}
.case-divider-grip{position:absolute;left:clamp(22px,var(--case-amount),calc(100% - 22px));top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:52px;border:2px solid var(--paper);border-radius:22px;background:var(--ink);color:var(--paper);cursor:ew-resize;touch-action:none;user-select:none;transition:left 350ms var(--case-ease)}
.case-divider-grip svg{width:27px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.case-stage.is-adjusting .case-after-layer,.case-stage.is-adjusting .case-divider,.case-stage.is-adjusting .case-divider-grip{transition:none}
.case-stage.is-dragging .case-divider-grip{cursor:grabbing;background:var(--rust)}
.case-range-label{display:flex;justify-content:space-between;gap:20px;margin-top:18px;font-size:12px;line-height:1.6}
.case-comparison-range{appearance:none;-webkit-appearance:none;display:block;width:100%;height:40px;margin:0;background:none;accent-color:var(--rust);cursor:ew-resize;touch-action:pan-y}
.case-comparison-range::-webkit-slider-runnable-track{height:2px;background:#879780}
.case-comparison-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-9px;border:3px solid var(--paper);border-radius:50%;background:var(--rust);box-shadow:0 0 0 1px var(--rust)}
.case-comparison-range::-moz-range-track{height:2px;background:#879780}
.case-comparison-range::-moz-range-thumb{width:14px;height:14px;border:3px solid var(--paper);border-radius:50%;background:var(--rust);box-shadow:0 0 0 1px var(--rust)}
.case-view-controls{display:flex;justify-content:flex-end;gap:3px}
.case-view-controls button{min-height:44px;padding:10px 18px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:12px;transition:background var(--case-feedback),color var(--case-feedback)}
.case-view-controls button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.case-planning{border-top:1px solid var(--line);padding-top:54px;margin-top:60px}
.case-planning-intro{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:36px}
.case-planning-intro h4 em{color:var(--rust)}
.case-planning-intro>p{font-size:15px;line-height:1.85;color:var(--muted);max-width:32ch;padding-bottom:4px}
.planning-studio{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(240px,.8fr);gap:clamp(32px,5vw,72px);align-items:center}
.planning-viewer{min-width:0}
.planning-record-panel{background:var(--ink);color:var(--paper);padding:26px;min-width:0}
.planning-image-ground{position:relative;display:grid;place-items:center;height:clamp(290px,31vw,430px);overflow:hidden;background:#152c27}
.planning-image-ground img{width:100%;height:100%;object-fit:contain;transition:opacity 180ms var(--case-ease);min-height:0}
.planning-record-panel[aria-busy=true] .planning-image-ground img{opacity:.4}
.planning-image-ground .case-image-fallback{color:var(--paper);max-width:35ch}
.planning-record-copy{padding-top:22px;min-height:116px}
.planning-record-copy h5{font:400 clamp(22px,2vw,28px)/1.25 var(--font-display);letter-spacing:-.02em;margin:0;color:var(--paper)}
.planning-record-copy p{font-size:13px;line-height:1.85;color:#d1d9cb;margin-top:12px;max-width:65ch}
.planning-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.planning-tab{display:grid;grid-template-columns:1fr auto;gap:12px 5px;align-items:center;min-width:0;padding:11px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:13px;text-align:left;line-height:1.4;transition:background var(--case-feedback),border-color var(--case-feedback),color var(--case-feedback)}
.planning-thumb{grid-column:1/-1;display:grid;place-items:center;background:var(--paper);height:84px;overflow:hidden}
.planning-thumb img{width:100%;height:100%;object-fit:contain}
.planning-tab>.icon{width:16px;height:16px;transition:transform var(--case-feedback) var(--case-ease)}
.planning-tab[aria-selected=true]{background:var(--paper);border-color:var(--ink);color:var(--ink)}
.planning-tab[aria-selected=true]>.icon{transform:rotate(45deg)}
.planning-perspective h5{font:400 clamp(28px,2.8vw,39px)/1.22 var(--font-display);letter-spacing:-.025em;margin:0}
.planning-perspective h5 em{color:var(--rust)}
.planning-perspective>p{font-size:14px;line-height:1.9;color:var(--muted);margin-top:24px;max-width:35ch}
.planning-perspective .planning-invitation{display:flex;align-items:center;gap:22px;border-top:1px solid var(--line);padding-top:22px;margin-top:28px;font-size:12px}
.planning-invitation .icon{width:17px;height:20px}
.planning-perspective .text-link{margin-top:32px;font-size:13px;min-height:44px}
.case-consultation{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:60px;margin-top:56px;border-top:1px solid var(--line);padding-top:42px}
.case-consultation h4{font-size:clamp(29px,3vw,40px);line-height:1.2}
.case-consultation h4 em{color:var(--rust)}
.case-consultation p{font-size:14px;line-height:1.8;color:var(--muted);margin-top:18px;max-width:51ch}
.case-consultation-action{justify-self:end}
.case-consultation .button{min-width:220px;justify-content:space-between}
.case-consultation-action p{font-size:12px;max-width:30ch;margin-top:13px}
.case-pagination{display:flex;align-items:center;gap:15px;flex-shrink:0;font-size:13px;font-variant-numeric:tabular-nums}
.case-pagination button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ink);background:transparent;color:var(--ink)}
.case-prev-icon{transform:rotate(180deg)}
.case-demo-notice{padding:24px 0;border-block:1px solid var(--line);font-size:15px;line-height:1.8;color:var(--muted)}
#case-panel[aria-busy=true] .case-divider-grip{pointer-events:none}
.case-result-content,.case-planning,.case-consultation{scroll-margin-top:110px}
@media(hover:hover) and (pointer:fine){.case-tab:hover{color:var(--ink)}.case-view-controls button:not([aria-pressed=true]):hover{background:var(--paper)}.planning-tab:hover{background:var(--paper);border-color:var(--ink);color:var(--ink)}}
@media(max-width:1000px){.planning-studio{grid-template-columns:minmax(0,1.6fr) minmax(220px,.8fr);gap:32px}.planning-record-panel{padding:20px}.planning-image-ground{height:310px}.planning-thumb{height:68px}.planning-tab{font-size:12px;padding:9px;gap:10px 2px}.planning-perspective h5{font-size:31px}}
@media(max-width:800px){.planning-studio{grid-template-columns:1fr}.planning-perspective{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;align-items:start}.planning-perspective h5{grid-column:1;grid-row:1/3}.planning-perspective>p{grid-column:2;margin-top:0}.planning-perspective .planning-invitation{margin-top:20px;padding-top:18px}.planning-perspective .text-link{grid-column:2;justify-self:start;margin-top:18px}.planning-image-ground{height:360px}.planning-thumb{height:90px}.planning-record-copy{min-height:110px}}
@media(max-width:700px){.case-gallery-heading{display:block;margin-bottom:27px}.case-gallery-heading h2{font-size:43px}.case-gallery-heading>p{margin-top:22px;max-width:36ch;font-size:14px}.case-tabs{gap:12px;justify-content:space-between;margin-bottom:25px}.case-tab{font-size:12px;line-height:1.5;max-width:110px;padding:12px 0 15px}.case-story-heading{margin-bottom:25px;flex-direction:column;gap:18px}.case-story-heading h3{font-size:29px;max-width:24ch}.case-story-heading p{font-size:13px;margin-top:14px}.case-range-label{font-size:12px;margin-top:15px}.case-image-toolbar{display:block;margin-top:5px}.case-comparison-note{font-size:12px;margin-bottom:15px}.case-view-controls{justify-content:flex-start}.case-view-controls button{flex:1;padding:11px 13px}.case-state,.case-other-label{top:8px;font-size:11px;padding:3px 7px}.case-state{left:8px}.case-other-label{right:8px}.case-divider-grip{height:48px}.case-planning{margin-top:35px;padding-top:35px}.case-planning-intro{display:block;margin-bottom:26px}.case-planning-intro h4{font-size:37px}.case-planning-intro>p{font-size:14px;margin-top:20px;max-width:35ch;padding:0}.planning-record-panel{padding:16px}.planning-image-ground{height:270px}.planning-record-copy{padding-top:20px;min-height:148px}.planning-record-copy h5{font-size:25px}.planning-record-copy p{font-size:13px;line-height:1.8;margin-top:12px}.planning-tabs{gap:8px;margin-top:12px}.planning-tab{padding:7px;font-size:12px;gap:9px 0;display:block}.planning-thumb{height:67px;margin-bottom:10px}.planning-tab>.icon{display:none}.planning-tab>span:last-of-type{display:block;min-height:34px;line-height:1.45}.planning-studio{gap:30px}.planning-perspective{display:block}.planning-perspective h5{font-size:32px}.planning-perspective>p{font-size:14px;margin-top:18px;max-width:40ch}.planning-perspective .planning-invitation{margin-top:24px;padding-top:20px;max-width:none}.planning-perspective .text-link{margin-top:23px}.case-consultation{grid-template-columns:1fr;gap:25px;margin-top:35px;padding-top:30px}.case-consultation h4{font-size:33px}.case-consultation-action{justify-self:stretch}.case-consultation .button{width:100%;min-height:56px}.case-consultation-action p{max-width:none;font-size:12px}.case-result-content,.case-planning,.case-consultation{scroll-margin-top:30px}}
@media(prefers-reduced-motion:reduce){.case-tab::after,.case-after-layer,.case-divider,.case-divider-grip,.case-view-controls button,.planning-tab,.planning-tab>.icon,.planning-image-ground img{transition:none}}
@media print{.case-tabs,.case-range-label,.case-comparison-range,.case-divider-grip,.case-view-controls,.planning-tabs,.case-consultation{display:none}.case-gallery-section{background:white}.planning-studio{display:block}.planning-record-panel{print-color-adjust:exact}}

/* Make the treatment choices unmistakable without changing tab behavior. */
@media screen{
  .case-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-bottom:0;margin-bottom:34px}
  .case-tab{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:72px;max-width:none;padding:18px 20px;border:1px solid #9daea3;border-radius:3px;background:var(--paper);color:var(--ink);font-size:clamp(15px,1.25vw,18px);font-weight:600;line-height:1.3;transition:background-color var(--case-feedback) var(--case-ease),border-color var(--case-feedback) var(--case-ease),color var(--case-feedback) var(--case-ease)}
  .case-tab::after{display:none}
  .case-tab[aria-selected=true],.case-tab[aria-selected=true]:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .case-tab:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
  @media(hover:hover) and (pointer:fine){.case-tab:not([aria-selected=true]):hover{border-color:var(--ink);background:#fffdf7}}
  @media(max-width:700px){.case-tabs{gap:8px;margin-bottom:25px}.case-tab{min-height:78px;padding:13px 11px;font-size:14px;line-height:1.3}}
  @media(max-width:360px){.case-tabs{grid-template-columns:1fr;gap:8px}.case-tab{min-height:52px}}
  @media(prefers-reduced-motion:reduce){.case-tab{transition:none}}
}
