/* Desktop keeps its approved upright composition; phones use the original collage; tablets share the desktop layout. */
@media(min-width:768px){
/* Owner-approved opening: upright portrait beside two equal case tiles. */
#intro .hero-stage{
 display:grid;grid-template-columns:minmax(0,44fr) minmax(0,54fr);grid-template-rows:auto;
 column-gap:2%;align-items:center;
}
#intro .hero-copy{grid-column:1;grid-row:1;width:100%;max-width:656px;min-width:0;gap:0}
#intro .hero-duration{margin:0 0 16px;font-size:clamp(14px,1.2vw,18px);line-height:1.4;font-weight:600}
#intro .hero-offer{margin-top:28px}
#intro .hero-offer>.hero-explanation{max-width:none;margin:0;font-size:clamp(24px,2.05vw,32px);line-height:1.3;font-weight:500;letter-spacing:-.04em}
#intro .hero-offer>.hero-explanation+.hero-explanation{margin-top:12px}
#intro .hero-art{
 display:grid;position:relative;grid-column:2;grid-row:1;align-self:center;
 grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);grid-template-rows:repeat(2,auto);
 gap:clamp(12px,1.4vw,22px);width:100%;height:auto;
 min-width:0;isolation:isolate;container-type:inline-size;
}
#intro .hero-art .hero-portrait,
#intro .hero-art .floating-post{
 position:relative;inset:auto;width:100%;height:100%;min-width:0;min-height:0;margin:0;transform:none!important;
}
#intro .hero-art .hero-portrait{grid-column:2;grid-row:1 / 3;max-height:none;border-radius:24px}
#intro .hero-portrait>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:none}
#intro .hero-art .floating-post{grid-column:1;height:auto;display:flex;flex-direction:column;padding:6px;box-shadow:0 12px 32px #123b6415}
#intro .hero-art .float-one{grid-row:1}
#intro .hero-art .float-two{grid-row:2}
#intro .hero-art .floating-post>img{display:block;flex:none;min-height:0;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain}
#intro .hero-art .floating-post>.hero-case-action{flex:none;font-size:clamp(10px,1vw,14px);padding:8px 2px 3px}
#intro .hero-art .flower-scene{left:auto;right:-3%;top:-5%;bottom:auto;width:30%;transform:none!important}
}
/* Restore the original phone title and artwork rules from hero-mobile.css.
   Only the duration remains below the collage; the old 1:1 has no markup. */
@media(max-width:767px){
 #intro .hero-duration{position:relative;grid-row:3;grid-column:1;align-self:start;z-index:5;margin:0;font-size:13px;line-height:1.4;font-weight:600}
}

/* One supporting-copy block on phones, with a clear rhythm to the CTA. */
@media(max-width:767px){
 #intro{--hero-support-size:clamp(20px,4.7vw,24px);--hero-art-copy-space:16px}
 #intro .hero-stage{row-gap:8px}
 #intro #hero-title{margin-bottom:8px}
 #intro .hero-art{height:calc(100% - var(--hero-art-copy-space));margin-bottom:var(--hero-art-copy-space)}
 #intro .hero-duration,
 #intro .hero-offer>.hero-explanation{margin:0;font-family:inherit;font-size:var(--hero-support-size);font-weight:500;line-height:1.35;letter-spacing:-.025em}
 #intro .hero-track-actions{margin-top:20px}
}
@media(max-width:767px) and (max-height:660px){
 #intro{--hero-art-copy-space:12px}
 #intro .hero-track-actions{margin-top:16px}
}

/* Tablet: the same text-left/artwork-right composition as desktop, sized to fit. */
@media(min-width:768px) and (max-width:1100px){
 #intro .hero-stage{height:auto;min-height:calc(var(--page-svh,1svh)*100);min-width:0;max-width:100%;align-content:center;padding:calc(var(--nav-height) + clamp(28px,4vw,44px)) var(--gutter) clamp(32px,4vw,44px)}
 #intro .hero-copy{display:flex;flex-direction:column;position:relative;z-index:5;align-self:center}
 #intro #hero-title{position:static;width:100%;margin:0;font-size:clamp(32px,4.1vw,45px);line-height:1.08;letter-spacing:-.05em;white-space:normal}
 #intro #hero-title .hero-heading-line{white-space:normal;overflow-wrap:break-word}
 #intro .hero-offer{position:static;width:100%;max-width:none}
 #intro .hero-offer>.hero-explanation{font-size:clamp(20px,2.05vw,24px)}
 #intro .hero-track-actions .hero-format-cta{width:100%;min-width:0;min-height:88px;padding:24px 28px;font-size:24px;border-width:2px}
 #intro .hero-format-cta>.hero-track-arrow{width:30px;height:30px}
 #intro .hero-format-cta>span:first-child{min-width:0;white-space:normal;overflow-wrap:anywhere}
}

/* Portrait tablets follow the phone's reading order, using the upright desktop
   artwork. The flexible middle row fills the screen without an empty top. */
@media(min-width:768px) and (max-width:1100px) and (orientation:portrait){
 #intro .hero-stage{
  --hero-footer-size:clamp(22px,2.5vw,28px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:auto minmax(240px,1fr) repeat(2,auto);
  gap:12px 28px;
  padding-top:calc(var(--nav-height) + 28px);
  padding-bottom:max(32px,env(safe-area-inset-bottom));
 }
 #intro .hero-copy{display:contents}
 #intro #hero-title{grid-column:1 / -1;grid-row:1;font-size:clamp(48px,6.4vw,66px);max-width:900px}
 #intro .hero-duration{grid-column:1;grid-row:3}
 #intro .hero-offer{display:contents}
 #intro .hero-offer>.hero-explanation{grid-column:1;grid-row:4}
 #intro .hero-duration,
 #intro .hero-offer>.hero-explanation{align-self:end;margin:0;font-size:var(--hero-footer-size);font-weight:500;line-height:1.35;letter-spacing:-.025em}
 #intro .hero-track-actions .hero-format-cta{font-size:clamp(20px,2.3vw,24px)}
 #intro .hero-track-actions{grid-column:2;grid-row:3 / 5;align-self:end;position:relative;z-index:5;width:100%;margin:0;max-width:none}
 #intro .hero-art{grid-column:1 / -1;grid-row:2;justify-self:center;width:min(100%,calc((calc(var(--page-svh,1svh)*100) - 480px)*1.1));align-self:center;margin-bottom:0}
 #intro .hero-art .floating-post>.hero-case-action{font-size:14px;padding:10px 4px 5px}
}

/* Tall narrow phones use a proportional portrait and a vertically balanced collage. */
@media(max-width:767px) and (min-height:740px) and (max-aspect-ratio:1/2){
 #intro .hero-art{
  height:min(calc(100% - var(--hero-art-copy-space)),185vw);align-self:center;container-type:size;
  --hero-case-size:min(38cqw,30cqh);
  --hero-case-top:max(8px,calc((100cqh - var(--hero-case-size)*2.5 - 60px)/2));
 }
 #intro .hero-art .hero-portrait{left:auto;right:0;top:50%;width:min(88cqw,60cqh);height:auto;aspect-ratio:1600/2416;transform:translateY(-50%) rotate(-5deg)!important}
 #intro .hero-portrait>img{left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center}
 #intro .hero-portrait .portrait-label{left:auto;right:12px;bottom:12px;width:max-content;max-width:calc(100% - 24px);font-size:12px;padding:10px 12px}
 #intro .hero-art .floating-post{width:var(--hero-case-size)}
 #intro .hero-art .float-one{left:2%;top:var(--hero-case-top);bottom:auto}
 #intro .hero-art .float-two{left:8%;top:calc(var(--hero-case-top) + var(--hero-case-size)*1.25 + 48px);bottom:auto}
 #intro .hero-art .flower-scene{top:calc(50cqh - min(66.44cqw,45.3cqh))}
}

/* Compact text-only action; retain the existing touch target and type size. */
#intro .hero-track-actions{width:fit-content;max-width:100%}
#intro .hero-track-actions .hero-format-cta{width:auto;min-width:0;justify-content:center;text-align:center;gap:0}
@media(min-width:768px) and (max-width:1100px) and (orientation:portrait){
 #intro .hero-track-actions{justify-self:end}
}

/* Very tall phones use the lower edge for case studies instead of empty air. */
@media(max-width:767px) and (min-height:900px) and (max-aspect-ratio:19/50){
 #intro .hero-art{--hero-case-size:42cqw}
 #intro .hero-art .hero-portrait{right:1%;top:4cqh;width:95cqw;transform:rotate(-5deg)!important}
 #intro .hero-art .float-one{left:1%;top:calc(100cqh - var(--hero-case-size)*1.25 - 38px)}
 #intro .hero-art .float-two{left:56%;top:calc(100cqh - var(--hero-case-size)*1.25 - 38px)}
 #intro .hero-art .flower-scene{top:2cqh}
 #intro .hero-portrait .portrait-label{left:12px;right:auto;bottom:auto;top:12px}
}