/* Concrete 21st.dev adaptations. See SOURCES.md for authors and distinctions.
   GridBento layout port: Copyright (c) 2025 Youcef Benmessabih, MIT.
   Original TSX retained under vendor/systaliko/. No external runtime required. */
:root{--radius:12px}
.hero-scroll{width:100%;padding:0;margin:0;overflow:clip;view-timeline-name:--hero;view-timeline-axis:block}
.hero-stage{height:850px;max-height:calc(100svh - 82px);min-height:650px;position:relative;width:min(1500px,100%);margin:auto}
.hero-copy{position:absolute;top:36%;left:50%;transform:translateX(-50%);width:66%;z-index:2;text-align:center;isolation:isolate}
.hero-copy h1{font-size:clamp(44px,4.5vw,68px);line-height:1.04;letter-spacing:-.035em}
.hero-copy .eyebrow{margin-bottom:18px}.hero-copy .hero-intro{margin:20px 0 24px}.hero-copy .button{border-radius:4px}
/* GridBento's eight columns / four rows and asymmetric transform origins,
   spaced around the central copy as in the 21st Hero Gallery preview. */
.hero-gallery{position:absolute;inset:0;margin:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:1fr .5fr .5fr 1fr;gap:16px;padding:28px 38px;pointer-events:none;align-items:stretch}
.hero-gallery .hero-cell{min-width:0;min-height:0;overflow:hidden;border-radius:var(--radius);margin:0;box-shadow:0 10px 28px #4A3F3B0c;align-self:stretch;position:relative}
.hero-gallery .hero-cell img{width:100%;height:100%;border-radius:0;object-fit:cover;object-position:center 38%}
.hero-cell:nth-child(1){grid-column:1/4;grid-row:1;transform-origin:top right;transform:translate(7%,0);height:100%}
.hero-cell:nth-child(2){grid-column:7/9;grid-row:1;transform:translate(-8%,18%);width:85%;justify-self:end;background:var(--slot-alt)}
.hero-cell:nth-child(3){grid-column:1/3;grid-row:4;transform-origin:bottom right;transform:translate(0,-5%);height:85%;align-self:end}
.hero-cell:nth-child(4){grid-column:4/6;grid-row:4;transform-origin:top right;transform:translate(0,16%);height:85%;align-self:end}
.hero-cell:nth-child(5){grid-column:7/9;grid-row:4;transform:translate(9%,0);height:100%;background:var(--slot-alt)}
.hero-topics{margin-top:0;padding-block:24px 28px;border-bottom:1px solid var(--line)}
.hero-cell.photo-slot{border:1px dashed color-mix(in srgb,var(--muted) 35%,transparent)}
.hero-cell.photo-slot span{font-size:clamp(22px,2.2vw,32px)}.hero-cell.photo-slot small{font-size:10px}
@supports(animation-timeline:view()){
 @media(min-width:768px) and (prefers-reduced-motion:no-preference){
  .hero-cell{animation:hero-spread linear both;animation-timeline:--hero;animation-range:exit 0% exit 90%}
  .hero-copy{animation:hero-copy-scale linear both;animation-timeline:--hero;animation-range:exit 0% exit 80%}
  .hero-cell:nth-child(1){--shift-x:-20%;--shift-y:-15%}
  .hero-cell:nth-child(2){--shift-x:25%;--shift-y:-12%}
  .hero-cell:nth-child(3){--shift-x:-20%;--shift-y:15%}
  .hero-cell:nth-child(4){--shift-x:0%;--shift-y:20%}
  .hero-cell:nth-child(5){--shift-x:20%;--shift-y:15%}
 }
}
@keyframes hero-spread{to{translate:var(--shift-x) var(--shift-y);scale:.88}}
@keyframes hero-copy-scale{to{scale:.94;opacity:.15}}
.effects{margin-top:30px;padding-block:90px}.effects .section-heading{margin-inline:auto;text-align:center}.effects .section-heading>p{margin-inline:auto}.category-filter{justify-content:center;border:0;gap:8px;margin-bottom:32px}.category-filter button{border:1px solid transparent;border-radius:30px;padding:10px 24px}.category-filter button[aria-pressed=true]{background:var(--paper);border-color:var(--line);box-shadow:0 3px 12px #4A3F3B08}.case-feature{display:grid;grid-template-columns:1fr;gap:28px;max-width:1000px;margin:auto}.comparison{height:auto;aspect-ratio:16/9;border-radius:var(--radius);box-shadow:0 16px 45px #4A3F3B0b}.comparison-divider{width:1px;background:var(--paper)}.comparison-divider>span{border-radius:24px;width:32px;height:60px;font-size:20px;box-shadow:0 3px 12px #4A3F3B25}.comparison-label{position:absolute;top:20px;z-index:2;font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--ink);background:var(--paper);padding:6px 14px;border-radius:4px;pointer-events:none}.label-before{left:20px}.label-after{right:20px}.comparison .before{background:var(--slot)}.comparison .after{background:var(--slot-alt)}.comparison-layer span{font-size:clamp(30px,4vw,56px)}.comparison-layer small{font-size:12px}.comparison-caption{padding-inline:3px}.case-copy{display:grid;grid-template-columns:1.6fr 1fr;column-gap:45px;align-items:start;padding-top:12px}.case-copy .draft-note{grid-column:1/-1;margin-bottom:12px}.case-copy h3{grid-column:1;grid-row:2;font-size:36px;margin-bottom:15px}.case-copy>p:not(.draft-note){grid-column:1;grid-row:3}.case-copy dl{grid-column:2;grid-row:2/4;margin:0;display:flex;gap:35px}.case-copy dl>div{margin:0;flex:1}.case-copy .text-link{grid-column:1;justify-self:start;margin-top:12px}.effects .fine-print{text-align:center}
/* Interactive Bento Gallery: mixed-span media tiles, hover focus, expanded viewer.
   Visual/interaction adaptation of Anurag Mishra's 21st preview, not its TSX. */
.bento{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:280px 280px;gap:18px}
.gallery-card{position:relative;overflow:hidden;border-radius:var(--radius);isolation:isolate;min-width:0;height:100%;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.gallery-card:nth-child(1){grid-column:span 7;grid-row:auto}.gallery-card:nth-child(2){grid-column:span 5}.gallery-card:nth-child(3){grid-column:span 3}.gallery-card:nth-child(4){grid-column:span 6}.gallery-card:nth-child(5){grid-column:span 3}
.gallery-card .photo-slot,.gallery-card:nth-child(1) .photo-slot{height:100%;min-height:0;padding-bottom:80px;transition:transform .5s}.gallery-card>img{height:100%;width:100%;object-fit:cover;transition:transform .5s}.gallery-card .photo-slot>span{font-size:clamp(27px,3vw,40px)}.gallery-card .photo-slot small{font-size:10px}.gallery-card .gallery-caption{position:absolute;bottom:0;left:0;right:0;min-height:70px;padding:20px 24px;background:var(--paper);font-size:13px;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius)}.gallery-caption>span{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;transition:transform .25s}.gallery-card:hover,.gallery-card:focus-visible{transform:translateY(-5px);box-shadow:0 14px 35px #4A3F3B15}.gallery-card:hover>img{transform:scale(1.045)}.gallery-card:hover .gallery-caption>span{transform:rotate(45deg)}.gallery-help{font-size:12px;margin-top:20px;text-align:center}
#detail-dialog.case-viewer{width:min(1060px,calc(100% - 32px));padding:0;border:0;overflow:auto;border-radius:16px}#detail-dialog.case-viewer .dialog-close{z-index:3;background:var(--paper);border-radius:50%;box-shadow:0 2px 10px #0001}.case-viewer-layout{display:grid;grid-template-columns:1.05fr 1fr;min-height:560px}.case-viewer-media{background:var(--slot);position:relative;display:flex;min-height:350px}.case-viewer-media>.photo-slot,.case-viewer-media>img{width:100%;height:100%;min-height:560px;border-radius:0}.case-viewer-content{padding:52px 38px 30px}.case-viewer-content h2{font-size:38px}.case-viewer-content h3{font:600 11px Mulish,sans-serif;letter-spacing:.09em;text-transform:uppercase;margin:24px 0 10px}.case-viewer-content p{font-size:13px}.case-viewer-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 30px;border-top:1px solid var(--line)}.case-viewer-controls button{border:1px solid var(--line);background:var(--paper);width:44px;height:44px;border-radius:50%;font-size:20px}.case-viewer-controls span{font-size:12px;color:var(--muted)}
@media(prefers-reduced-motion:no-preference){dialog[open]{animation:viewer-enter .25s ease-out}.review-slide.is-changing{animation:review-enter .4s ease-out}@keyframes viewer-enter{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}@keyframes review-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}}
@media(max-width:1023px){.hero-stage{min-height:640px;height:740px}.hero-copy{width:75%;top:37%}.hero-copy h1{font-size:46px}.hero-gallery{padding:25px;gap:12px}.hero-cell.photo-slot small{font-size:9px}.hero-cell.photo-slot span{font-size:24px}.bento{grid-template-rows:240px 240px}.gallery-card .gallery-caption{padding:16px}.case-copy{column-gap:24px}.case-copy dl{gap:15px}}
@media(max-width:767px){
 .hero-stage{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;padding:35px 18px 10px}
 .hero-copy{position:static;transform:none;width:100%;order:0}.hero-copy h1{font-size:clamp(36px,9vw,48px)}.hero-copy .hero-intro{font-size:13px}.hero-gallery{position:static;order:1;margin-top:30px;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:100px 50px 50px 100px;gap:10px}
 .hero-gallery .hero-cell{transform:none;height:100%;width:100%;align-self:stretch;justify-self:stretch}
 .hero-cell:nth-child(1){grid-column:1/6;grid-row:1/4}.hero-cell:nth-child(2){grid-column:6/9;grid-row:1/3}.hero-cell:nth-child(3){grid-column:6/9;grid-row:3/5}.hero-cell:nth-child(4){grid-column:1/3;grid-row:4}.hero-cell:nth-child(5){grid-column:3/6;grid-row:4}
 .hero-cell.photo-slot{padding:9px}.hero-cell.photo-slot span{font-size:20px}.hero-cell.photo-slot small{font-size:8px;margin-top:8px}.hero-topics{padding-block:20px;gap:4px 20px}.effects{margin-top:12px;padding-block:55px}.category-filter{justify-content:flex-start;gap:2px}.category-filter button{padding:9px 16px;flex-shrink:0}.comparison{aspect-ratio:4/3}.comparison-label{top:12px;font-size:10px;padding:5px 10px}.label-before{left:12px}.label-after{right:12px}.comparison-layer span{font-size:29px}.comparison-layer small{font-size:10px}.case-copy{display:block;padding:0}.case-copy h3{font-size:33px}.case-copy dl{display:flex;margin:25px 0 10px;gap:25px}.case-copy dl>div{flex:1}.bento{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:225px;gap:14px}.gallery-card:nth-child(1){grid-column:1/-1;grid-row:auto}.gallery-card:nth-child(2),.gallery-card:nth-child(3),.gallery-card:nth-child(4),.gallery-card:nth-child(5){grid-column:span 1}.gallery-card:nth-child(1) .photo-slot{height:100%;min-height:0}.gallery-card .photo-slot>span{font-size:25px}.gallery-card .gallery-caption{font-size:11px;padding:12px;min-height:60px;gap:8px}.gallery-caption>span{flex-shrink:0;width:25px;height:25px}.case-viewer-layout{grid-template-columns:1fr}.case-viewer-media{min-height:220px;max-height:300px}.case-viewer-media>.photo-slot,.case-viewer-media>img{min-height:240px;height:240px}.case-viewer-content{padding:28px 24px}.case-viewer-content h2{font-size:33px}.case-viewer-controls{padding:12px 24px}.case-viewer-controls span{font-size:10px}
}
@media(min-width:768px){.hero-copy{top:33%}.hero-cell:nth-child(4){height:70%;transform:translate(0,10%)}.hero-cell:nth-child(1) img{object-position:center 67%}}
/* Supplied clinical collages: show full frames, never crop a half from evidence. */
[hidden]{display:none!important}
.hero-gallery .client-photo img,.client-photo img{object-fit:contain!important;object-position:center!important;width:100%;height:100%;background:var(--slot)}
.hero-gallery .client-photo{background:var(--slot);box-shadow:none}
.comparison.is-collage{aspect-ratio:1;max-width:660px;margin-inline:auto;background:var(--paper)}
.comparison.is-collage .client-collage{display:block;width:100%;height:100%;object-fit:contain}
.comparison.is-collage .comparison-layer,.comparison.is-collage .comparison-divider,.comparison.is-collage .comparison-label,.comparison.is-collage input{display:none}
#case-gallery{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:430px 430px}
#case-gallery .gallery-card{grid-row:auto;grid-column:span 5}
#case-gallery .gallery-card:nth-child(1),#case-gallery .gallery-card:nth-child(4){grid-column:span 7}
#case-gallery .gallery-card>img{height:calc(100% - 70px);object-fit:contain;background:var(--slot);transform:none}
.problem-card>img{width:100%;height:230px;object-fit:contain;background:var(--slot);border-radius:var(--radius)}
.case-viewer-media{flex-direction:column;justify-content:center}
.case-viewer-media>img{object-fit:contain;min-height:0;height:auto;max-height:65dvh;background:var(--slot)}
.case-photo-controls{display:flex;justify-content:center;gap:10px;padding:16px;flex-wrap:wrap}
.case-photo-controls button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--paper)}
.case-photo-controls button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.story-photo.client-photo{min-height:0;aspect-ratio:1;overflow:hidden;border-radius:var(--radius)}
.closing-photo.client-photo{height:auto;aspect-ratio:1;overflow:hidden;border-radius:var(--radius)}
@media(max-width:767px){#case-gallery{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto}#case-gallery .gallery-card,#case-gallery .gallery-card:nth-child(1),#case-gallery .gallery-card:nth-child(4){grid-column:1;aspect-ratio:1/1.18}#case-gallery .gallery-card>img{height:calc(100% - 60px)}.problem-card>img{height:155px}.case-viewer-media>img{max-height:45dvh;min-height:0;height:240px}.case-viewer-media{max-height:none}}

.photo-order{font-size:12px;line-height:1.6;text-align:center;padding:12px 16px;margin:0;color:var(--ink)}

/* Reveal two halves of each original collage without modifying source photographs. */
.comparison.split-collage{width:100%;max-width:360px;aspect-ratio:1/2;margin-inline:auto}
.comparison.split-collage .comparison-layer{overflow:hidden}
.comparison.split-collage .comparison-layer img{position:absolute;top:0;width:200%;max-width:none;height:100%;object-fit:fill}
.comparison.split-collage .before img{left:0}
.comparison.split-collage .after img{left:-100%}
.comparison.is-empty{height:280px;aspect-ratio:auto;box-shadow:none}
.comparison.is-empty .before{display:none}
.comparison.is-empty .after>span{transform:none;padding:24px}
.comparison.is-empty .after small{display:block;margin-top:16px}
/* Documented cases and the complete problem-to-consultation pathway. */
.documented-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.documented-cases article{min-width:0}.documented-cases img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--slot)}.documented-cases h3{font-size:34px;margin:24px 0 14px}.documented-cases p{font-size:14px}.documented-cases .text-link{margin-top:18px}.problem-pathway>p{margin-block:20px}.problem-pathway section{padding-block:28px;border-top:1px solid var(--line)}.problem-pathway h3{font-size:30px;margin-bottom:18px}.problem-pathway ol{padding-left:22px;line-height:1.9}.problem-evidence img{display:block;max-width:100%;width:100%;max-height:480px;object-fit:contain;background:var(--slot)}.problem-evidence figcaption{font-size:12px;margin-block:10px;color:var(--muted)}.problem-pathway .text-link{margin-top:16px}.pathway-consultation .text-link{margin-left:20px}.problem-text-tile{display:flex;align-items:center;justify-content:center;height:230px;background:var(--slot-alt);font-family:'Cormorant Garamond',serif;font-size:28px;padding:20px;color:var(--ink)}.review-rating{display:block;color:var(--ink);letter-spacing:.18em;margin:12px 0 6px}#review-source small{display:block;font-size:11px;color:var(--muted)}
@media(max-width:767px){.documented-cases{grid-template-columns:1fr;gap:40px}.documented-cases img{max-height:380px}.problem-text-tile{height:155px;font-size:24px}.pathway-consultation .text-link{margin-left:0;display:block}.problem-evidence img{max-height:360px}}
.hero-gallery .hero-cell img.hero-incoming{position:absolute;inset:0;z-index:1}.hero-rotation-controls{display:flex;justify-content:center;padding:12px 20px 0}.hero-rotation-controls button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:11px;min-height:44px;padding:10px 16px;text-decoration:underline;text-underline-offset:4px}.hero-rotation-controls button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* Larger opening portfolio: complete before/after collages, with room for the headline. */
.hero-stage{height:1120px;max-height:none;min-height:0;width:min(1500px,100%)}
.hero-gallery{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:360px 290px 360px;padding:28px 38px;gap:20px}
.hero-gallery .hero-cell{transform:none;width:100%;height:100%;align-self:stretch;justify-self:stretch;animation:none}
.hero-gallery .hero-cell:nth-child(1){grid-column:1/5;grid-row:1}
.hero-gallery .hero-cell:nth-child(2){grid-column:9/13;grid-row:1}
.hero-gallery .hero-cell:nth-child(3){grid-column:1/5;grid-row:3}
.hero-gallery .hero-cell:nth-child(4){grid-column:5/9;grid-row:3}
.hero-gallery .hero-cell:nth-child(5){grid-column:9/13;grid-row:3}
.hero-gallery .hero-cell.client-photo img{object-fit:contain;object-position:center;background:var(--surface)}
.hero-copy{top:390px;animation:none}
@media(min-width:768px) and (max-width:1100px){
 .hero-stage{height:1020px}.hero-gallery{grid-template-rows:300px 300px 300px;padding:24px;gap:20px}.hero-copy{top:345px}
 .hero-gallery .hero-cell:nth-child(1){grid-column:1/6}.hero-gallery .hero-cell:nth-child(2){grid-column:8/13}
}
@media(max-width:767px){
 .hero-stage{height:auto;padding:30px 18px 10px}.hero-copy{position:static}
 .hero-gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;padding:0;gap:12px}
 .hero-gallery .hero-cell:nth-child(n){grid-column:auto;grid-row:auto;aspect-ratio:1;width:100%;height:auto}
 .hero-gallery .hero-cell:nth-child(1){grid-column:1/-1}
 .hero-gallery .hero-cell img{position:absolute;inset:0}
}

/* Make room for the invitation without covering the rotating photographs. */
.hero-experience{font-size:11px;color:var(--muted);margin:0 0 20px}.hero-copy .hero-intro{line-height:1.65;margin:18px 0 12px}.care-message{margin-top:18px}
@media(min-width:1101px){.hero-stage{height:1190px}.hero-gallery{grid-template-rows:360px 360px 360px}}
@media(min-width:768px) and (max-width:1100px){.hero-stage{height:1100px}.hero-gallery{grid-template-rows:300px 380px 300px}}

.comparison.split-collage.vertical-collage{max-width:720px;aspect-ratio:2/1}.comparison.vertical-collage .comparison-layer img{width:100%;height:200%;left:0}.comparison.vertical-collage .before img{top:0}.comparison.vertical-collage .after img{top:-100%}