/* Forsters lifecycle block — from Figma "Forsters_lifecycle" */
.forsters_lifecycle_block *, .forsters_lifecycle_block *::before, .forsters_lifecycle_block *::after { box-sizing:border-box; }
.forsters_lifecycle_block { --lc-teal:#00495f; --lc-accent:#ec681d; --lc-stone:#f0eae3; --lc-gap:.9cqw; }
.forsters_lifecycle_block.lc-theme-orange { --lc-accent:#ec681d; }
.forsters_lifecycle_block.lc-theme-purple { --lc-accent:#9088f2; }
.forsters_lifecycle_block.lc-theme-teal   { --lc-accent:#00495f; }
.forsters_lifecycle_block.lc-theme-mauve  { --lc-accent:#d8babd; }
.forsters_lifecycle_block { color:var(--lc-teal); }
.forsters_lifecycle_block button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; appearance:none; }
.forsters_lifecycle_block [hidden] { display:none !important; }

/* Intro */
.forsters_lifecycle_block .lc-intro { max-width:1126px; margin:0 auto 2.5rem; }
.forsters_lifecycle_block .lc-heading { font-weight:300; font-size:clamp(28px,3vw,40px); line-height:1.2; color:var(--lc-teal); margin-bottom:1.25rem; }
.forsters_lifecycle_block .lc-intro-text { font-size:clamp(16px,1.33vw,18px); line-height:1.45; margin:0; }

/* Phase tabs (angled) */
.forsters_lifecycle_block .lc { container-type:inline-size; }
.forsters_lifecycle_block .lc-phases { --s:11.4cqw; --h:11.9cqw; display:flex; align-items:stretch; }
.forsters_lifecycle_block .lc-phase { position:relative; flex:1 1 0; min-width:0; height:var(--h); text-align:left; color:var(--lc-teal); z-index:1; }
.forsters_lifecycle_block .lc-phase.lc-right { text-align:right; margin-left:calc(var(--lc-gap) - var(--s)); }
.forsters_lifecycle_block .lc-phase.lc-left:not(:first-child) { margin-left:.9cqw; }
.forsters_lifecycle_block .lc-phase::before,
.forsters_lifecycle_block .lc-phase::after { content:""; position:absolute; inset:0; z-index:-1; transition:background-color .2s; }
/* outer shape = border colour, inner shape = fill. Inner slant is offset by exactly 3px perpendicular:
   slant ratio S/H = 11.4/11.9 = .958, so horizontal shift = 3px*sqrt(1+.958^2) = 4.16px; corner offsets 7.03px (top/outer end) and 1.28px (inner end). */
.forsters_lifecycle_block .lc-phase.lc-left::before  { background:var(--lc-accent); clip-path:polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%); }
.forsters_lifecycle_block .lc-phase.lc-left::after   { background:var(--lc-page-bg,#fff); clip-path:polygon(3px 3px,calc(100% - 7.03px) 3px,calc(100% - var(--s) - 1.28px) calc(100% - 3px),3px calc(100% - 3px)); }
.forsters_lifecycle_block .lc-phase.lc-right::before { background:var(--lc-accent); clip-path:polygon(var(--s) 0,100% 0,100% 100%,0 100%); }
.forsters_lifecycle_block .lc-phase.lc-right::after  { background:var(--lc-page-bg,#fff); clip-path:polygon(calc(var(--s) + 1.28px) 3px,calc(100% - 3px) 3px,calc(100% - 3px) calc(100% - 3px),7.03px calc(100% - 3px)); }
.forsters_lifecycle_block.bg-f0ebe3 { --lc-page-bg:#f0ebe3; }
.forsters_lifecycle_block.bg-ffffff { --lc-page-bg:#fff; }
.forsters_lifecycle_block .lc-phase.is-active { color:#fff; }
.forsters_lifecycle_block .lc-phase.is-active::after { background:var(--lc-accent); }
.forsters_lifecycle_block.lc-theme-mauve .lc-phase.is-active { color:var(--lc-teal); }

/* Text clearance: the slant is S wide over height H, so text ~9.5cqw down needs ~.8*S of room beside the slanted edge. Everything is in cqw so it scales with the container. */
.forsters_lifecycle_block .lc-phase-inner { display:flex; flex-direction:column; justify-content:flex-start; height:100%; padding:1.3cqw 2.6cqw 4.4cqw; }
.forsters_lifecycle_block .lc-phase.lc-right .lc-phase-inner { justify-content:flex-end; padding:3.8cqw 1.5cqw 1.2cqw calc(var(--s) * .8 + 1cqw); }
.forsters_lifecycle_block .lc-phase.lc-left .lc-phase-inner { padding-right:calc(var(--s) * .8 + 1cqw); }
.forsters_lifecycle_block .lc-phase-title { font-weight:300; font-size:clamp(20px,2.65cqw,36px); line-height:1.15; }
.forsters_lifecycle_block .lc-phase-desc { font-size:clamp(12px,1.3cqw,16px); line-height:1.4; margin-top:.5em; }
.forsters_lifecycle_block .lc-phase.lc-right .lc-phase-desc { margin-left:auto; }

/* plus icon (supplied SVG, used as a mask so it follows the tab text colour). Left tabs: bottom-left. Right tabs: top-right. */
.forsters_lifecycle_block .lc-plus { position:absolute; width:2cqw; height:2cqw; min-width:16px; min-height:16px; background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.46 10.23H30.458v10.458h-30V10.231ZM20.687.46V30.458H10.231v-30h10.457Z' fill-rule='nonzero'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg width='31' height='31' viewBox='0 0 31 31' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.46 10.23H30.458v10.458h-30V10.231ZM20.687.46V30.458H10.231v-30h10.457Z' fill-rule='nonzero'/%3E%3C/svg%3E") center / contain no-repeat; }
.forsters_lifecycle_block .lc-phase.lc-left .lc-plus { left:2.6cqw; bottom:1.2cqw; }
.forsters_lifecycle_block .lc-phase.lc-right .lc-plus { right:1.5cqw; top:1.2cqw; }

/* Sub tabs */
.forsters_lifecycle_block .lc-tabs { display:grid; grid-template-columns:repeat(var(--lc-tabs),1fr); gap:.9cqw; margin-top:.9cqw; }
.forsters_lifecycle_block .lc-tab { height:clamp(48px,5.1cqw,69px); font-weight:200; font-size:clamp(15px,calc(4.2cqw / var(--lc-tabs)),24px); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 12px; color:#fff; background:var(--lc-accent); opacity:.5; transition:opacity .2s; text-align:center; }
.forsters_lifecycle_block .lc-tab.is-active, .forsters_lifecycle_block .lc-tab:hover { opacity:1; }
.forsters_lifecycle_block.lc-theme-mauve .lc-tab { color:var(--lc-teal); }

/* Content panel */
/* Slide height: images are 1200 x 630 and fill the right-hand half of the slide, so the slide needs at least
   (half the block width) x 630/1200 to show a whole image. Every slide of every tab in a phase is stacked in the
   same grid cell (inactive ones are just hidden), so the tallest slide sets the height for all of them. */
.forsters_lifecycle_block { --lc-slide-min:calc(50cqw * 630 / 1200); }
.forsters_lifecycle_block .lc-content { position:relative; margin-top:.9cqw; background:var(--lc-panel-bg,#f0eae3); min-height:var(--lc-slide-min); display:grid; }
.forsters_lifecycle_block.bg-f0ebe3 { --lc-panel-bg:#fff; }
.forsters_lifecycle_block .lc-tab-panel { position:relative; grid-area:1 / 1; min-height:inherit; display:grid; }
.forsters_lifecycle_block .lc-tab-panel[hidden], .forsters_lifecycle_block .lc-slide[hidden] { display:grid !important; visibility:hidden; }
.forsters_lifecycle_block .lc-tab-panel > * { grid-area:1 / 1; }
.forsters_lifecycle_block .lc-slide { display:grid; grid-template-columns:1fr 1fr; min-height:var(--lc-slide-min); }
.forsters_lifecycle_block .lc-empty { padding:2.6cqw 3cqw; margin:0; }
.forsters_lifecycle_block .lc-copy { padding:2.6cqw 3cqw 5cqw; display:flex; flex-direction:column; align-items:flex-start; }
.forsters_lifecycle_block .lc-slide-heading { font-weight:400; font-size:24px; line-height:1.33; color:var(--lc-teal); margin:0 0 .6em; }
.forsters_lifecycle_block .lc-has-heading .lc-question { font-size:clamp(16px,1.33cqw,18px); line-height:1.45; }
.forsters_lifecycle_block .lc-question { font-size:clamp(18px,1.77cqw,24px); line-height:1.33; margin:0 0 2cqw; }
.forsters_lifecycle_block .lc-button { display:inline-block; background:var(--lc-teal); color:#fff; font-weight:600; font-size:clamp(13px,1.33cqw,18px); letter-spacing:.075em; text-transform:uppercase; line-height:1.2; padding:1.3cqw 2.6cqw; text-decoration:none; transition:background-color .2s,color .2s; }
.forsters_lifecycle_block .lc-button:hover, .forsters_lifecycle_block .lc-button:focus { background:var(--lc-accent); color:#fff; }
.forsters_lifecycle_block.lc-theme-mauve .lc-button:hover { color:var(--lc-teal); }
.forsters_lifecycle_block .lc-image { position:relative; overflow:hidden; }
.forsters_lifecycle_block .lc-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* Pager dots (bottom-left of the panel, as in the design) */
.forsters_lifecycle_block .lc-dots { position:absolute; left:3cqw; bottom:2cqw; display:flex; gap:.9cqw; z-index:2; }
.forsters_lifecycle_block .lc-dot { width:max(12px,1.3cqw); height:max(12px,1.3cqw); border-radius:50%; background:#99afb7; padding:0; }
.forsters_lifecycle_block .lc-dot.is-active { background:var(--lc-teal); }

.forsters_lifecycle_block button:focus { outline: none; }

/* Mobile / tablet: simple stacked layout (angled tabs don't fit) */
@container (max-width: 1100px) {
  .forsters_lifecycle_block .lc-phases { --h:auto; flex-direction:column; gap:8px; }
  .forsters_lifecycle_block .lc-phase, .forsters_lifecycle_block .lc-phase.lc-right, .forsters_lifecycle_block .lc-phase.lc-left:not(:first-child) { margin-left:0; height:auto; text-align:left; }
  .forsters_lifecycle_block .lc-phase.lc-left::before, .forsters_lifecycle_block .lc-phase.lc-right::before { clip-path:none; }
  .forsters_lifecycle_block .lc-phase.lc-left::after, .forsters_lifecycle_block .lc-phase.lc-right::after { clip-path:inset(3px); }
  .forsters_lifecycle_block .lc-phase-inner, .forsters_lifecycle_block .lc-phase.lc-right .lc-phase-inner, .forsters_lifecycle_block .lc-phase.lc-left .lc-phase-inner { padding:16px 48px 16px 16px; justify-content:flex-start; }
  .forsters_lifecycle_block .lc-phase-title { font-size:22px; }
  .forsters_lifecycle_block .lc-phase-desc { font-size:15px; margin-left:0 !important; }
  .forsters_lifecycle_block .lc-plus, .forsters_lifecycle_block .lc-phase.lc-left .lc-plus, .forsters_lifecycle_block .lc-phase.lc-right .lc-plus { left:auto; right:16px; bottom:auto; top:20px; width:16px; height:16px; }
  .forsters_lifecycle_block .lc-tabs { grid-template-columns:1fr; gap:6px; margin-top:12px; }
  .forsters_lifecycle_block .lc-tab { height:auto; min-height:48px; padding:12px; font-size:20px; white-space:normal; }
  .forsters_lifecycle_block .lc-content { margin-top:6px; }
  .forsters_lifecycle_block .lc-content { --lc-slide-min:0px; } /* must target a descendant of .lc: the container query can't match the section itself */
  .forsters_lifecycle_block .lc-slide { grid-template-columns:1fr; min-height:0; }
  .forsters_lifecycle_block .lc-image { order:-1; aspect-ratio:1200/630; } /* whole image visible on small screens too */
  .forsters_lifecycle_block .lc-copy { padding:20px 20px 56px; }
  .forsters_lifecycle_block .lc-question { font-size:19px; margin-bottom:20px; }
  .forsters_lifecycle_block .lc-button { font-size:14px; padding:14px 22px; }
  .forsters_lifecycle_block .lc-dots { left:20px; bottom:20px; gap:10px; }
  .forsters_lifecycle_block .lc-dot { width:12px; height:12px; }
}