/* ============================================================
   Rockwell Health — "Editorial" · Our Approach (interior page)
   Page-only section styles, art-directed for this page. Reuses the
   shared design system (../style.css): :root tokens, base type,
   header, footer, .ed-wrap, .ed-btn*. Everything below is namespaced
   ap- so it never collides with shared components or sibling pages.
   Brand: navy #262168 / red #e0271c only (+ warm neutrals).

   Composition spine for the page:
     1 · open   — oversized serif statement, hanging label, off-axis deck
     2 · story  — tall framed photo + drop initial + real pull-quote
     3 · phil   — sticky aside + numbered ruled index (the page's signature)
     4 · means  — LIGHT sand surface, flowing two-column notes (breaks navy)
     5 · close  — the ONE navy block: lobby photo + CTA
   ============================================================ */

/* ============================================================
   1 · Page intro — art-directed masthead
   Big Spectral statement, the label hangs to its left like a folio
   marker, the supporting deck sits off-axis to the right so the
   opening reads as a designed spread, not a centered template column.
   ============================================================ */
.ap-open{
  background:
    radial-gradient(120% 140% at 88% -10%, #fffdf9 0%, rgba(255,253,249,0) 46%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper) 60%, var(--paper-2) 100%);
  border-bottom:1px solid var(--line);
}
.ap-open-in{
  padding-block:clamp(60px,9vw,124px) clamp(48px,6.5vw,84px);
}
.ap-open-label{
  display:flex; align-items:center; gap:.85em;
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red-ink); margin-bottom:clamp(22px,2.6vw,34px);
}
.ap-open-label::before{
  content:""; width:34px; height:1.5px; background:var(--red); flex:none;
}
.ap-open h1{
  font-size:clamp(2.6rem,6.6vw,5.4rem);
  line-height:1.0; letter-spacing:-.03em; color:var(--navy);
  max-width:14ch;
}
.ap-open h1 em{ font-style:italic; font-weight:600; color:var(--red); }

/* off-axis deck: lede + keyword rail, pushed right of the headline
   measure on desktop to open intentional whitespace under the H1 */
.ap-open-lede{
  margin-top:clamp(34px,4.4vw,58px);
  display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:clamp(26px,4vw,72px); align-items:start;
  padding-top:clamp(24px,2.8vw,34px);
  border-top:1px solid var(--line-2);
}
.ap-open-deck{
  max-width:46ch;
  font-size:clamp(1.12rem,1.45vw,1.34rem);
  line-height:1.6; color:var(--body); text-wrap:pretty;
}
.ap-open-keys{
  display:flex; flex-direction:column;
  border-top:2px solid var(--navy);
}
.ap-open-keys li{
  font-family:"Spectral",serif; font-style:italic; font-weight:500;
  font-size:clamp(1.16rem,1.5vw,1.42rem); letter-spacing:-.01em;
  color:var(--navy); line-height:1.2;
  padding:.62em 0;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:.7em;
}
.ap-open-keys li::before{
  content:""; width:7px; height:7px; flex:none;
  border-radius:var(--r-pill); background:var(--red);
}

/* ============================================================
   2 · The Rockwell Story — considered editorial spread
   Tall framed reception photo with an offset caption plate, a
   dropped initial opening the deck, and a pull-quote that carries
   its own thought. Asymmetric: photo narrower, text the wider column.
   ============================================================ */
.ap-story{
  padding-block:var(--sec);
  background:var(--paper);
}
.ap-story-in{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(40px,6vw,92px); align-items:start;
}

/* figure — portrait-leaning frame, paper mat keyline, caption plate
   that floats off the lower-right corner */
.ap-story-fig{ margin:0; position:relative; align-self:start; }
.ap-story-frame{
  position:relative;
  border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:5/5.6;
  background:var(--card); box-shadow:var(--sh-3);
  border:1px solid rgba(255,255,255,.7);
}
.ap-story-frame::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(40,34,80,.07);
}
.ap-story-frame img{
  width:100%; height:100%; object-fit:cover; object-position:center 32%;
  transition:transform .8s var(--ease-expo);
}
.ap-story-fig:hover .ap-story-frame img{ transform:scale(1.035); }
.ap-story-cap-k{
  display:block;
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red-ink); margin-bottom:5px;
}
.ap-story-fig figcaption{
  position:absolute; right:clamp(16px,2vw,26px); bottom:clamp(-18px,-1.4vw,-22px);
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh-2);
  padding:13px 18px;
  font-family:"Spectral",serif; font-weight:600; font-style:italic;
  font-size:1.02rem; letter-spacing:-.01em; color:var(--navy); line-height:1.2;
}

/* copy column */
.ap-story-body{ max-width:60ch; padding-top:clamp(0px,1vw,12px); }
.ap-story-label{
  display:flex; align-items:center; gap:.7em;
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red-ink); margin-bottom:clamp(16px,1.8vw,22px);
}
.ap-story-label-no{
  font-family:"Spectral",serif; font-style:italic; font-weight:500;
  font-size:1.12rem; letter-spacing:0; text-transform:none;
  color:var(--navy); line-height:1;
  padding-right:.7em; position:relative;
}
.ap-story-label-no::after{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:1px; height:1.2em; background:var(--line-2);
}
.ap-story-body h2{
  font-size:clamp(2.1rem,3.8vw,3.2rem); font-weight:600;
  letter-spacing:-.024em; line-height:1.05; color:var(--navy);
  max-width:18ch;
}
.ap-story-deck{
  margin-top:clamp(22px,2.6vw,30px); max-width:54ch;
  font-size:clamp(1.1rem,1.25vw,1.22rem); line-height:1.62; color:var(--body);
}
/* dropped initial — a single editorial flourish that earns its place */
.ap-story-drop{
  float:left; margin:.06em .14em -.04em 0;
  font-family:"Spectral",serif; font-weight:700;
  font-size:3.4em; line-height:.82; color:var(--red);
}
.ap-story-text{
  margin-top:18px; max-width:54ch;
  font-size:1.02rem; line-height:1.66; color:var(--body-2); text-wrap:pretty;
}

/* pull-quote — large hanging serif marker, no left-stripe cliche;
   the mark sits in the left margin as a true folio device */
.ap-story-quote{
  margin:clamp(30px,3.6vw,44px) 0 0; padding:0;
  position:relative; max-width:46ch;
}
.ap-story-quote::before{
  content:"\201C";
  position:absolute; left:-.06em; top:-.34em;
  font-family:"Spectral",serif; font-weight:700; font-style:italic;
  font-size:4.4rem; line-height:1; color:var(--red);
  opacity:.9; pointer-events:none;
}
.ap-story-quote p{
  margin:0; padding-top:clamp(20px,2vw,28px);
  border-top:1px solid var(--line-2);
  font-family:"Spectral",serif; font-style:italic; font-weight:500;
  font-size:clamp(1.32rem,2vw,1.74rem); line-height:1.36;
  letter-spacing:-.008em; color:var(--navy); text-wrap:pretty;
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ap-story-fig,.ap-story-body > *{
      animation:ed-rise .8s var(--ease) both;
      animation-timeline:view(); animation-range:entry 0% cover 26%;
    }
  }
}

/* ============================================================
   3 · Our care philosophy — numbered editorial index (the spine)
   Sticky heading column on the left, five ruled rows on the right.
   A real ordered set of five, so Roman folio numerals carry meaning,
   and there is no grid and no orphan cell. The signature of the page.
   ============================================================ */
.ap-phil{
  padding-block:var(--sec);
  background:var(--paper-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.ap-phil-in{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(40px,5.5vw,92px); align-items:start;
}

/* aside */
.ap-phil-aside{ position:sticky; top:104px; }
.ap-phil-label{
  display:flex; align-items:center; gap:.7em;
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red-ink); margin-bottom:clamp(16px,1.8vw,22px);
}
.ap-phil-label::before{
  content:""; width:30px; height:1.5px; background:var(--red); flex:none;
}
.ap-phil-aside h2{
  font-size:clamp(2rem,3.4vw,2.9rem); font-weight:600;
  letter-spacing:-.022em; line-height:1.07; color:var(--navy);
  max-width:14ch;
}
.ap-phil-deck{
  margin-top:clamp(18px,2vw,24px); max-width:42ch;
  font-size:clamp(1.04rem,1.15vw,1.16rem); line-height:1.6; color:var(--body-2);
}
.ap-phil-note{
  margin-top:clamp(22px,2.4vw,30px); max-width:40ch;
  padding-top:clamp(18px,2vw,22px); border-top:1px solid var(--line-2);
  font-family:"Spectral",serif; font-style:italic; font-weight:500;
  font-size:clamp(1.02rem,1.2vw,1.16rem); line-height:1.46;
  letter-spacing:-.006em; color:var(--navy); text-wrap:pretty;
}

/* numbered ruled rows */
.ap-phil-list{ border-top:1px solid var(--line-2); }
.ap-phil-row{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:start; column-gap:clamp(18px,2vw,28px);
  padding:clamp(26px,3vw,38px) 0;
  border-bottom:1px solid var(--line);
}
.ap-phil-no{
  font-family:"Spectral",serif; font-weight:600; font-style:italic;
  font-size:clamp(1.5rem,2.2vw,2.1rem); line-height:1;
  letter-spacing:0; color:var(--red);
  min-width:1.9ch; padding-top:.06em;
}
.ap-phil-ic{
  display:grid; place-items:center; flex:none;
  width:48px; height:48px; border-radius:var(--r-sm);
  background:var(--card); color:var(--navy);
  border:1px solid var(--line-2); box-shadow:var(--sh-1);
}
.ap-phil-ic svg{ width:24px; height:24px; }
.ap-phil-txt h3{
  font-size:clamp(1.26rem,1.5vw,1.5rem); font-weight:600; line-height:1.16;
  letter-spacing:-.014em; color:var(--navy);
}
.ap-phil-txt p{
  margin-top:10px; max-width:52ch;
  color:var(--body-2); font-size:1.0rem; line-height:1.58; text-wrap:pretty;
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ap-phil-row{
      animation:ed-rise .7s var(--ease) both;
      animation-timeline:view(); animation-range:entry 0% cover 22%;
    }
  }
}

/* ============================================================
   4 · What this means for you — LIGHT sand surface
   Deliberately the warm centre of gravity between the cream story
   and the navy closer, so navy never stacks on navy. Layout is a
   flowing two-column set of short outcome notes with hanging rules,
   not the icon-tile module used by the philosophy section.
   ============================================================ */
.ap-means{
  padding-block:var(--sec);
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.ap-means-head{ max-width:60ch; margin-bottom:clamp(40px,5vw,64px); }
.ap-means-label{
  display:flex; align-items:center; gap:.7em;
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red-ink); margin-bottom:clamp(16px,1.8vw,22px);
}
.ap-means-label::before{
  content:""; width:30px; height:1.5px; background:var(--red); flex:none;
}
.ap-means-head h2{
  font-size:clamp(2.1rem,3.8vw,3.1rem); font-weight:600;
  letter-spacing:-.024em; line-height:1.05; color:var(--navy);
  max-width:20ch;
}
.ap-means-deck{
  margin-top:clamp(18px,2vw,24px); max-width:56ch;
  font-size:clamp(1.06rem,1.2vw,1.2rem); line-height:1.6; color:var(--body-2);
}

/* flowing notes — two columns of ruled rows, each note hangs from a
   top hairline with a small red tick; reads as a considered list, not
   a card grid */
.ap-means-list{
  display:grid; grid-template-columns:repeat(2,1fr);
  column-gap:clamp(36px,5vw,80px); row-gap:0;
  border-top:1px solid var(--line-2);
}
.ap-means-item{
  padding:clamp(24px,2.6vw,34px) 0;
  border-bottom:1px solid var(--line);
  position:relative;
}
.ap-means-item::before{
  content:""; position:absolute; left:0; top:-1px;
  width:34px; height:2px; background:var(--red);
}
.ap-means-item h3{
  font-size:clamp(1.18rem,1.4vw,1.42rem); font-weight:600; line-height:1.18;
  letter-spacing:-.014em; color:var(--navy);
}
.ap-means-item p{
  margin-top:10px; max-width:44ch;
  color:var(--body-2); font-size:1.0rem; line-height:1.58; text-wrap:pretty;
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ap-means-item{
      animation:ed-rise .7s var(--ease) both;
      animation-timeline:view(); animation-range:entry 0% cover 24%;
    }
  }
}

/* ============================================================
   5 · Closing CTA — the page's single navy surface
   Split: a real Astoria waiting-room photograph anchors the left so
   navy arrives as a designed close, not a flat slab; CTA copy right.
   ============================================================ */
.ap-close{
  background:linear-gradient(165deg, var(--navy) 0%, var(--navy-deeper) 100%);
  color:var(--on-navy);
  padding-block:clamp(40px,5vw,72px);
}
.ap-close-in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(34px,5vw,76px); align-items:center;
}
.ap-close-fig{
  margin:0; position:relative;
  border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:7/5;
  box-shadow:var(--sh-3);
  border:1px solid rgba(251,247,240,.14);
}
.ap-close-fig::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(251,247,240,.1);
  background:linear-gradient(180deg, rgba(20,16,63,0) 60%, rgba(20,16,63,.34) 100%);
}
.ap-close-fig img{
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
  transition:transform .8s var(--ease-expo);
}
.ap-close-fig:hover img{ transform:scale(1.04); }

.ap-close-copy{ padding-block:clamp(20px,3vw,44px); }
.ap-close-label{
  display:flex; align-items:center; gap:.7em;
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:#ff8a80; margin-bottom:clamp(16px,1.8vw,22px);
}
.ap-close-label::before{
  content:""; width:30px; height:1.5px; background:var(--red); flex:none;
}
.ap-close-copy h2{
  color:var(--on-navy);
  font-size:clamp(2.1rem,3.9vw,3.3rem); font-weight:600;
  letter-spacing:-.024em; line-height:1.04; max-width:18ch;
}
.ap-close-deck{
  margin-top:clamp(18px,2vw,24px); max-width:50ch;
  color:var(--on-navy-2); font-size:clamp(1.06rem,1.2vw,1.18rem); line-height:1.6;
}
.ap-close-cta{
  margin-top:clamp(28px,3.2vw,40px);
  display:flex; flex-wrap:wrap; gap:14px;
}
.ap-close-cta .ed-btn-red{ box-shadow:0 10px 30px rgba(224,39,28,.32); }

/* ============================================================
   Responsive — 1024 (tablet)
   ============================================================ */
@media (max-width:1024px){
  /* story stacks; photo returns to a wider landscape frame */
  .ap-story-in{ grid-template-columns:1fr; gap:clamp(40px,6vw,56px); }
  .ap-story-frame{ aspect-ratio:1200/760; }
  .ap-story-frame img{ object-position:center 30%; }
  .ap-story-fig figcaption{ right:clamp(16px,3vw,26px); }
  .ap-story-body{ max-width:none; }

  /* philosophy: aside un-sticks and sits above the index */
  .ap-phil-in{ grid-template-columns:1fr; gap:clamp(34px,4.5vw,48px); }
  .ap-phil-aside{ position:static; }
  .ap-phil-aside h2{ max-width:20ch; }
  .ap-phil-deck{ max-width:60ch; }
  .ap-phil-note{ max-width:60ch; }

  /* closer photo above copy */
  .ap-close-in{ grid-template-columns:1fr; gap:clamp(30px,4.5vw,44px); }
  .ap-close-fig{ aspect-ratio:16/9; }
  .ap-close-copy{ padding-block:0; }
  .ap-close-copy h2{ max-width:22ch; }
}

/* ============================================================
   Responsive — 760
   ============================================================ */
@media (max-width:760px){
  /* intro deck stacks: lede over keyword rail */
  .ap-open-lede{ grid-template-columns:1fr; gap:clamp(26px,5vw,34px); }
  .ap-open-deck{ max-width:60ch; }

  /* outcome notes → single ruled column */
  .ap-means-list{ grid-template-columns:1fr; column-gap:0; }
}

/* ============================================================
   Responsive — 560 (phone, 390 target)
   ============================================================ */
@media (max-width:560px){
  .ap-open h1{ font-size:clamp(2.2rem,10vw,3rem); max-width:none; }
  .ap-open-keys li{ font-size:1.16rem; }

  .ap-story-body h2{ max-width:none; }
  .ap-story-drop{ font-size:3em; }
  .ap-story-quote p{ font-size:clamp(1.24rem,6vw,1.5rem); }

  /* philosophy rows: numeral hangs above the icon+text on the tightest
     widths so copy keeps a comfortable measure */
  .ap-phil-row{
    grid-template-columns:auto 1fr;
    column-gap:clamp(14px,4vw,18px); row-gap:14px;
  }
  .ap-phil-no{
    grid-column:1 / -1; grid-row:1;
    font-size:1.6rem;
  }
  .ap-phil-ic{ grid-column:1; grid-row:2; width:44px; height:44px; }
  .ap-phil-ic svg{ width:22px; height:22px; }
  .ap-phil-txt{ grid-column:2; grid-row:2; }

  .ap-close-copy h2{ max-width:none; }
  .ap-close-cta .ed-btn{ width:100%; justify-content:center; }
}

/* ============================================================
   Reduced motion — neutralize this page's reveals defensively
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .ap-story-fig,.ap-story-body > *,
  .ap-phil-row,
  .ap-means-item{ animation:none; opacity:1; transform:none; }
  .ap-story-fig:hover .ap-story-frame img,
  .ap-close-fig:hover img{ transform:none; }
}