/* =========================================================================
   CodedMD — LAYOUT ARRANGEMENTS
   A global tweak that re-arranges every page's structure. Three options:
     • split    (default) — asymmetric two-column, alternating rows, left-aligned
     • centered           — single centered column, symmetrical, calm
     • stacked            — single left column, full-width visuals, editorial scroll
   Targets the section patterns shared across all 5 pages. Selectors are
   html[data-layout=…] .x so they beat page <style> rules.
   ========================================================================= */

/* ----------------------------------------------------------------------
   CENTERED — everything pulled to the middle, symmetrical
   ---------------------------------------------------------------------- */
html[data-layout="centered"] .hero-grid,
html[data-layout="centered"] .work-row,
html[data-layout="centered"] .prod,
html[data-layout="centered"] .ct-grid,
html[data-layout="centered"] .grid-2{
  grid-template-columns:1fr;
  text-align:center;
  justify-items:center;
  gap:36px;
}
html[data-layout="centered"] .ct-grid{max-width:680px;margin-inline:auto}
html[data-layout="centered"] .ct-grid .formcard,
html[data-layout="centered"] .ct-grid form{text-align:left;width:100%}
html[data-layout="centered"] .work-row,
html[data-layout="centered"] .prod{max-width:820px;margin-inline:auto}
/* visual always sits below the copy, regardless of flip */
html[data-layout="centered"] .work-row .visual,
html[data-layout="centered"] .work-row.flip .visual,
html[data-layout="centered"] .prod .pvisual,
html[data-layout="centered"] .prod.flip .pvisual{order:2;width:100%;max-width:560px;margin-inline:auto}
html[data-layout="centered"] .prod .pvisual[style*="max-width"]{max-width:320px}
/* center the heading/lead blocks and page heroes */
html[data-layout="centered"] .hero,
html[data-layout="centered"] .about-hero,
html[data-layout="centered"] .work-hero,
html[data-layout="centered"] .c-hero,
html[data-layout="centered"] .ct-hero{text-align:center}
html[data-layout="centered"] .about-hero .lead,
html[data-layout="centered"] .work-hero .lead,
html[data-layout="centered"] .c-hero .lead,
html[data-layout="centered"] .ct-hero .lead,
html[data-layout="centered"] .hero .lead,
html[data-layout="centered"] .lead{margin-inline:auto}
html[data-layout="centered"] .about-hero .kicker,
html[data-layout="centered"] .work-hero .kicker,
html[data-layout="centered"] .c-hero .kicker,
html[data-layout="centered"] .ct-hero .kicker,
html[data-layout="centered"] .jump,
html[data-layout="centered"] .cta-fill{justify-content:center}
/* section headers stack & center */
html[data-layout="centered"] .sec-head{flex-direction:column;align-items:center;text-align:center;gap:14px}
html[data-layout="centered"] .sec-head p{max-width:54ch}
/* keep inner lists/forms readable: re-left-align body lists inside centered cards */
html[data-layout="centered"] .feat,
html[data-layout="centered"] .com-list{text-align:left;max-width:48ch;margin-inline:auto}
html[data-layout="centered"] .collage{margin-inline:auto}
html[data-layout="centered"] .story{text-align:center}
html[data-layout="centered"] .story .ledger{justify-content:center}
/* centre the hero word-cycler cell so short words don't sit off to one side */
html[data-layout="centered"] .cycler{justify-items:center}

/* ----------------------------------------------------------------------
   STACKED — single left column, big full-width visuals, long editorial scroll
   ---------------------------------------------------------------------- */
html[data-layout="stacked"] .hero-grid,
html[data-layout="stacked"] .work-row,
html[data-layout="stacked"] .prod,
html[data-layout="stacked"] .ct-grid,
html[data-layout="stacked"] .grid-2{
  grid-template-columns:1fr;
  gap:34px;
}
html[data-layout="stacked"] .work-row .visual,
html[data-layout="stacked"] .work-row.flip .visual,
html[data-layout="stacked"] .prod .pvisual,
html[data-layout="stacked"] .prod.flip .pvisual{order:2;width:100%}
html[data-layout="stacked"] .visual{min-height:340px}
/* bigger, more generous headline scale for the editorial feel */
html[data-layout="stacked"] .prod h3,
html[data-layout="stacked"] .work-row .h3{font-size:clamp(2rem,4.4vw,3.1rem)}
html[data-layout="stacked"] .prod p,
html[data-layout="stacked"] .work-row .lead{max-width:60ch}
/* section header: number/kicker over a big title, rule under */
html[data-layout="stacked"] .sec-head{flex-direction:column;align-items:flex-start;gap:16px}
/* collage gets room */
html[data-layout="stacked"] .collage{max-width:560px;margin-top:8px}
html[data-layout="stacked"] .hero-grid{align-items:start}

/* ----------------------------------------------------------------------
   small-screen safety: on phones every layout collapses to one column
   (base mobile CSS already does this — nothing extra needed)
   ---------------------------------------------------------------------- */