/* A single editorial composition, using the existing shared 3D renderer.
   Background layers are static: no additional WebGL, blur or scroll handlers. */
.departure-section.section-space{
  --surface-top:#303d49;--ink:#dde8f2;--accent:#bacbd9;--muted:#b7c6d2;
  position:relative;isolation:isolate;overflow:clip;
  padding-block:110px 120px;
  background:var(--surface-top);color:var(--ink);
}
.departure-section>.shell{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  column-gap:64px;row-gap:34px;align-items:center;
}
/* Hönö and its approach, cropped from the existing cloudy map asset. */
.departure-section::before{
  content:"";position:absolute;inset:-12px;pointer-events:none;
  background:url("assets/map-cloudy.jpg") 0% 100% / cover no-repeat;
  filter:blur(4px);opacity:.8;
}
.departure-section::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#303d49e6 0%,#303d49ad 40%,#303d4933 75%),
    linear-gradient(180deg,#303d4970,transparent 25%,transparent 75%,#303d4970);
}
.departure-section .chapter-heading{grid-column:1;grid-row:1;margin:0;align-self:end}
.departure-section h2{font-size:clamp(40px,4.3vw,64px)}
.departure-section .eyebrow{color:var(--muted)}
.departure-section .departure-composition{display:contents}
.departure-section .paired-phones{
  grid-column:2;grid-row:1 / span 2;align-self:center;
  display:block;position:relative;isolation:isolate;width:100%;max-width:none;
  height:auto;aspect-ratio: .79;padding:0;
}
/* A soft cloudy-theme light follows the phones at every breakpoint. */
.departure-section .paired-phones::before{
  content:"";position:absolute;inset:-12% -20%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 52% 52%,#788fa347 0%,#788fa324 34%,#788fa300 70%);
}
.departure-section .paired-phones .device{
  position:absolute;inset:auto;top:9%!important;width:49%;
  opacity:1;--pose-lift:0px;
}
.departure-section .paired-phones .phone-back{
  left:8%;z-index:1;--pose-roll:-10deg;transform:rotate(-10deg);
}
.departure-section .paired-phones .phone-front{
  left:39%;top:21%!important;width:54%;z-index:2;
  --pose-roll:5deg;transform:rotate(5deg);
}
.departure-section .paired-phones .model-phone{
  transform:translateY(var(--pose-lift)) rotate(var(--pose-roll));
}
.departure-section .editorial-copy{grid-column:1;grid-row:2;align-self:start;max-width:460px}
.departure-section .editorial-copy h3{font-size:23px}
.departure-section .editorial-copy p{font-size:17px;margin-top:10px}
.departure-section .text-feature{margin-top:28px}
@media(max-width:1000px) and (min-width:701px){
  .departure-section>.shell{column-gap:36px}
  .departure-section .paired-phones{aspect-ratio:.64}
  .departure-section .paired-phones .phone-back{top:17%!important}
  .departure-section .paired-phones .phone-front{top:30%!important}
}
@media(max-width:700px){
  .departure-section.section-space{padding-block:64px 72px}
  .departure-section::before{background-position:17% 80%}
  .departure-section::after{background:linear-gradient(180deg,#303d49cc 0%,#303d494d 24%,#303d4966 58%,#303d49eb 78%)}
  .departure-section>.shell{display:flex;flex-direction:column;gap:24px;align-items:stretch}
  .departure-section .chapter-heading{align-self:auto}
  .departure-section h2{font-size:clamp(38px,10.5vw,54px)}
  .departure-section .paired-phones{width:100%;max-width:460px;align-self:center;aspect-ratio:.68}
  .departure-section .paired-phones .phone-back{left:8%;top:8%!important}
  .departure-section .paired-phones .phone-front{left:39%;top:19%!important}
  .departure-section .editorial-copy{max-width:none}
  .departure-section .editorial-copy p{font-size:16px}
}