/* ==========================================================
   MY APPROACH PAGE — CONVEYOR HERO + SCALED CARD STACK v12.1
   Based on Rob's supplied v9.1 CSS, with card scaling added only.

   Main manual controls live in :root below.
   ========================================================== */

:root{
  --approach-card-bg:#c1e1ff;
  --approach-panel-bg:#000078;
  --approach-process-bg:#ffffff;
  --approach-process-ink:#000078;
  --approach-stack-peek:5px;
  --approach-stack-exit-duration:520ms;
  --approach-stack-return-duration:620ms;
  --approach-stack-exit-ease:cubic-bezier(.35,0,.25,1);
  --approach-stack-return-ease:cubic-bezier(.18,.88,.22,1);
  --approach-card-radius:18px;

  /* Intro / hero graphic controls */
  --approach-hero-art-width:430px;

  /* Animated hero interaction controls */
  --approach-page-bg:#ffe1dc;
  --approach-ink:#000078;
  --approach-card-zone-ink:#ffffff;
  --approach-hero-icon-size:180px;
  --approach-hero-icon-gap:52px;
  --approach-hero-viewport-width:calc((var(--approach-hero-icon-size) * 3) + (var(--approach-hero-icon-gap) * 2));
  --approach-hero-interaction-height:400px;
  --approach-hero-interaction-bottom-gap:34px;
  --approach-hero-hand-width:248px;
  --approach-hero-hand-left:50%;
  --approach-hero-hand-top:92px;
  --approach-hero-press-duration:200ms;
  --approach-hero-slide-duration:620ms;
  --approach-hero-cycle-delay:600ms;
  --approach-hero-slide-ease:cubic-bezier(.45,0,.2,1);

  /* Fixed serif type controls */
  --approach-hero-title-size:64px;
  --approach-hero-title-leading:1.1;
  --approach-section-title-size:46px;
  --approach-section-title-leading:1.2;
  --approach-process-title-size:46px;
  --approach-process-title-leading:1.02;

  /* Intro copy controls */
  --approach-intro-copy-size:20px;
  --approach-intro-copy-weight:300;
  --approach-intro-copy-leading:1.5;
  --approach-intro-copy-gap:22px;

  /* Main section spacing controls */
  --approach-hero-padding-top:90px;
  --approach-hero-bottom-padding:110px;
  --approach-card-zone-padding-top:90px;
  --approach-card-title-to-stack-gap:45px;
  --approach-stack-to-control-gap:30px;
  --approach-card-zone-padding-bottom:80px;
  --approach-card-zone-to-process-gap:0px;

  /* Card stack controls */
  --approach-card-width:500px;
  --approach-card-max-scale:.88;
  --approach-card-min-scale:.70;
  --approach-card-fit-horizontal-reserve:110px;
  --approach-card-fit-height-vh:86;
  --approach-card-fit-vertical-reserve:118px;

  /* Card shadow controls */
  --approach-card-shadow-x:0px;
  --approach-card-shadow-y:2px;
  --approach-card-shadow-blur:15px;
  --approach-card-shadow-spread:0px;
  --approach-card-shadow-opacity:0.3;
  --approach-card-shadow-colour:rgba(0,0,120,var(--approach-card-shadow-opacity));
  --approach-card-shadow:var(--approach-card-shadow-x) var(--approach-card-shadow-y) var(--approach-card-shadow-blur) var(--approach-card-shadow-spread) var(--approach-card-shadow-colour);

    /* Card internal spacing controls */
  --approach-card-padding-top:39px;
  --approach-card-padding-x:46px;
  --approach-card-padding-bottom:80px;
  --approach-card-art-width:85%;
  --approach-card-art-max-width:305px;
  --approach-card-art-bottom-gap:31px;

  /* Card internal typography controls */
  --approach-card-title-size:40px;
  --approach-card-title-leading:1.1;
  --approach-card-title-width:100%;
  --approach-card-title-bottom-gap:29px;
  --approach-card-copy-size:18px;
  --approach-card-copy-leading:1.55;
  --approach-card-copy-weight:400;
  --approach-card-copy-gap:20px;
  --approach-card-kicker-weight:400;

  /* Process + footer controls */
  --approach-process-padding-top:90px;
  --approach-process-padding-bottom:110px;
  --approach-footer-padding-top:28px;
  --approach-footer-padding-bottom:120px;
  --approach-footer-rule-colour:rgba(0,87,162,.55);
}

body.approach-page{--ink:var(--approach-ink);--header-bg:var(--approach-page-bg);--header-ink:var(--approach-ink);background:var(--approach-page-bg);color:var(--approach-ink);overflow-x:hidden;}
body.approach-page main{background:var(--approach-page-bg);}
body.approach-page .site-header::before{background:var(--approach-page-bg);}
body.approach-page .site-header::after{background:var(--approach-ink);}
body.approach-page .desktop-nav a,body.approach-page .mobile-drawer a,body.approach-page .logo,body.approach-page .burger{color:var(--approach-ink);}
body.approach-page .burger span{background:var(--approach-ink);}
body.approach-page footer.approach-footer{background:#ffffff;}

.approach-main{padding-top:92px;}
.approach-hero{padding-top:var(--approach-hero-padding-top);padding-bottom:var(--approach-hero-bottom-padding);text-align:center;}
.approach-hero-art{display:block;width:min(var(--approach-hero-art-width),78vw);height:auto;margin:0 auto 26px;}

.approach-hero-interaction{position:relative;width:min(var(--approach-hero-viewport-width),100%);height:var(--approach-hero-interaction-height);margin:0 auto var(--approach-hero-interaction-bottom-gap);overflow:visible;pointer-events:none;}
.approach-hero-icon-viewport{position:absolute;top:0;left:50%;width:min(var(--approach-hero-viewport-width),100vw);height:var(--approach-hero-icon-size);overflow:hidden;transform:translateX(-50%);}
.approach-hero-icon-track{display:flex;align-items:center;gap:var(--approach-hero-icon-gap);width:max-content;height:100%;transform:translateX(0);transition:transform var(--approach-hero-slide-duration) var(--approach-hero-slide-ease);will-change:transform;}
.approach-hero-icon-track.is-resetting{transition:none!important;}
.approach-hero-icon-item{flex:0 0 var(--approach-hero-icon-size);width:var(--approach-hero-icon-size);height:var(--approach-hero-icon-size);display:grid;place-items:center;}
.approach-hero-icon-item img{display:block;width:100%;height:100%;object-fit:contain;}
.approach-hero-icon-item.is-active img{transform:scale(.985);}
.approach-hero-hand{position:absolute;z-index:3;left:var(--approach-hero-hand-left);top:var(--approach-hero-hand-top);width:var(--approach-hero-hand-width);height:auto;transform:translateX(-50%);pointer-events:none;}
.approach-hero-hand--press{opacity:0;}
.approach-hero-interaction.is-pressing .approach-hero-hand--rest{opacity:0;}
.approach-hero-interaction.is-pressing .approach-hero-hand--press{opacity:1;}

.approach-hero h1{width:min(650px,100%);margin:0 auto 32px;font-family:'DM Serif Text',Georgia,serif;font-size:var(--approach-hero-title-size);line-height:var(--approach-hero-title-leading);font-weight:400;letter-spacing:var(--serif-tracking);}
.approach-intro-copy{width:min(520px,100%);margin-inline:auto;font-size:var(--approach-intro-copy-size);line-height:var(--approach-intro-copy-leading);font-weight:var(--approach-intro-copy-weight);}
.approach-intro-copy p{margin:0;}
.approach-intro-copy p + p{margin-top:var(--approach-intro-copy-gap);}

.approach-card-zone{width:100%;margin:0;background:var(--approach-panel-bg);border-radius:0;padding:var(--approach-card-zone-padding-top) 24px var(--approach-card-zone-padding-bottom);overflow:hidden;box-shadow:0 0 0 100vmax var(--approach-panel-bg);clip-path:inset(0 -100vmax);}
.approach-card-inner{width:min(760px,100%);margin-inline:auto;text-align:center;color:var(--approach-card-zone-ink);}
.approach-card-inner h2,.approach-process h2{margin:0;font-family:'DM Serif Text',Georgia,serif;font-size:var(--approach-section-title-size);line-height:var(--approach-section-title-leading);font-weight:400;letter-spacing:var(--serif-tracking);}
.approach-card-inner h2{color:var(--approach-card-zone-ink);}

.approach-stack-shell{width:var(--approach-stack-scaled-width,min(var(--approach-card-width),calc(100vw - 110px)));height:var(--approach-stack-scaled-height,var(--approach-stack-measured-height,768px));margin:var(--approach-card-title-to-stack-gap) auto 0;overflow:visible;}
.approach-stack{position:relative;left:50%;width:var(--approach-card-width);height:var(--approach-stack-measured-height,768px);overflow:visible;transform-origin:top center;transition:transform 260ms ease;cursor:pointer;}
.approach-card{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border-radius:var(--approach-card-radius);background:var(--approach-card-bg);color:var(--ink);box-shadow:var(--approach-card-shadow);padding:var(--approach-card-padding-top) var(--approach-card-padding-x) var(--approach-card-padding-bottom);text-align:left;transition-property:left;transition-duration:var(--approach-stack-return-duration);transition-timing-function:var(--approach-stack-return-ease);will-change:left;box-sizing:border-box;}
.approach-card.is-exiting{transition-duration:var(--approach-stack-exit-duration);transition-timing-function:var(--approach-stack-exit-ease);}
.approach-card-art{display:block;width:var(--approach-card-art-width);max-width:var(--approach-card-art-max-width);aspect-ratio:1 / 1;object-fit:contain;margin:0 auto var(--approach-card-art-bottom-gap);}
.approach-card h3{width:var(--approach-card-title-width);margin:0 auto var(--approach-card-title-bottom-gap);font-family:'DM Serif Text',Georgia,serif;font-size:var(--approach-card-title-size);line-height:var(--approach-card-title-leading);font-weight:400;text-align:center;letter-spacing:var(--serif-tracking);}
.approach-card p{margin:0;font-family:Inter,Arial,sans-serif;font-size:var(--approach-card-copy-size);line-height:var(--approach-card-copy-leading);font-weight:var(--approach-card-copy-weight);}
.approach-card p + p{margin-top:var(--approach-card-copy-gap);}
.approach-card-kicker{font-weight:var(--approach-card-kicker-weight);}
.approach-stack-control{appearance:none;border:0;background:transparent;color:var(--approach-card-zone-ink);font:400 14px/1.2 Inter,Arial,sans-serif;cursor:pointer;padding:8px 12px;}
.approach-stack-control:focus-visible,.approach-stack:focus-visible{outline:2px solid var(--ink);outline-offset:6px;}

.approach-process{margin-top:var(--approach-card-zone-to-process-gap);background:var(--approach-process-bg);color:var(--approach-process-ink);padding:var(--approach-process-padding-top) 0 var(--approach-process-padding-bottom);}
.approach-process-inner{width:min(720px,calc(100vw - 80px));}
.approach-process h2{color:var(--approach-process-ink);text-align:center;margin-bottom:28px;font-size:var(--approach-process-title-size);line-height:var(--approach-process-title-leading);}
.approach-process-intro,.approach-cta,.approach-phase p{margin:0;font-size:13px;line-height:1.45;font-weight:700;}
.approach-phase p{font-weight:400;}
.approach-process-intro{font-size:var(--approach-intro-copy-size);line-height:var(--approach-intro-copy-leading);font-weight:var(--approach-intro-copy-weight);}
.approach-process-intro{width:min(560px,100%);margin:0 auto 30px;}
.approach-phase-list{display:grid;gap:38px;width:min(560px,100%);margin-inline:auto;}
.approach-phase{display:grid;grid-template-columns:58px 1fr;gap:24px;align-items:start;}
.approach-phase-icon{width:54px;height:54px;object-fit:contain;display:block;margin-top:2px;}
.approach-phase h3{margin:0 0 12px;font-family:Inter,Arial,sans-serif;font-size:20px;line-height:1.15;font-weight:800;letter-spacing:0;}
.approach-cta{width:min(560px,100%);margin:32px auto 0;}
.approach-footer{
  display:block;
  width:min(var(--wrap),calc(100vw - 80px));
  margin-inline:auto;
  margin-top:0;
  background:var(--approach-process-bg);
  color:var(--approach-process-ink);
  border-top:0;
  padding-top:0;
  padding-bottom:var(--approach-footer-padding-bottom);
  text-align:center;
  font-family:Inter,Arial,sans-serif;
  font-size:13px;
  line-height:1.5;
  font-weight:300;
  position:relative;
  box-shadow:0 0 0 100vmax #ffffff;
  clip-path:inset(0 -100vmax);
}
.approach-footer::before{
  content:"";
  display:block;
  height:1px;
  background:var(--approach-process-ink);
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-bottom:var(--approach-footer-padding-top);
}

.approach-footer p{
  margin:0;
}

.approach-footer p + p{
  margin-top:18px;
}

.approach-footer a{
  display:inline;
  color:var(--approach-process-ink);
  text-decoration:none;
}

.approach-footer .footer-desktop-break{
  display:block;
}
/* Approach page text links */
.approach-page main p a,
.approach-footer a,
.approach-page main p a:link,
.approach-page main p a:visited,
.approach-page main p a:active,
.approach-footer a:link,
.approach-footer a:visited,
.approach-footer a:active{
  color:inherit;
}

.approach-page main p a:not([style*="text-decoration"]):hover,
.approach-footer a:not([style*="text-decoration"]):hover{
  text-decoration:underline;
  text-underline-offset:0.18em;
}
@media(max-width:760px){
  :root{
    --approach-stack-peek:4px;
    --approach-card-radius:16px;
    --approach-card-max-scale:1;
    --approach-card-width:380px;
    --approach-card-max-scale:1;
    --approach-card-min-scale:.60;
    --approach-card-fit-horizontal-reserve:32px;
    --approach-card-fit-height-vh:999;
    --approach-card-fit-vertical-reserve:96px;

    /* Mobile hero conveyor controls */
    --approach-hero-padding-top:56px;
    --approach-hero-icon-size:44vw;
    --approach-hero-icon-gap:10vw;
    --approach-hero-viewport-width:calc((var(--approach-hero-icon-size) * 3) + (var(--approach-hero-icon-gap) * 2));
    --approach-hero-interaction-height:500px;
    --approach-hero-interaction-bottom-gap:0px;
    --approach-hero-hand-width:68vw;
    --approach-hero-hand-top:74px;

    /* Mobile section spacing */
    --approach-hero-bottom-padding:78px;
    --approach-card-zone-padding-top:72px;
    --approach-card-title-to-stack-gap:44px;
    --approach-stack-to-control-gap:24px;
    --approach-card-zone-padding-bottom:72px;
    --approach-card-zone-to-process-gap:0px;
    --approach-process-padding-top:72px;
    --approach-process-padding-bottom:86px;
    --approach-footer-padding-bottom:86px;

    --approach-hero-title-size:52px;
    --approach-section-title-size:34px;
    --approach-process-title-size:38px;
    --approach-card-padding-top:28px;
    --approach-card-padding-x:33px;
    --approach-card-padding-bottom:50px;
    --approach-card-art-width:80%;
    --approach-card-art-max-width:220px;
    --approach-card-art-bottom-gap:22px;
    --approach-card-title-size:32px;
    --approach-card-title-leading:1.02;
    --approach-card-title-bottom-gap:21px;
    --approach-card-copy-size:13px;
    --approach-card-copy-leading:1.55;
    --approach-card-copy-gap:14px;
  }
  .approach-main{padding-top:var(--mobile-header-height);}
  .approach-hero{padding-top:var(--approach-hero-padding-top);}
  .approach-hero-interaction{width:100vw;max-width:100vw;left:50%;transform:translateX(-50%);}
  .approach-hero-icon-viewport{width:var(--approach-hero-viewport-width);max-width:none;overflow:visible;}
  .approach-hero h1{width:90vw;}
  .approach-intro-copy{width:82vw;}
  .approach-card-zone{width:100%;padding-left:0;padding-right:0;border-radius:0;}
  .approach-card-inner{width:100%;}
  .approach-card-inner h2{width:80%;margin-inline:auto;}
  .approach-process-inner{width:82vw;}
    .approach-phase{grid-template-columns:46px 1fr;gap:18px;}
  .approach-phase-icon{width:42px;height:42px;}
    .approach-phase h3{
    font-size:22px;
    line-height:1.12;
  }

  .approach-phase p{
    font-size:15px;
    line-height:1.5;
  }

  .approach-cta{
    font-size:15px;
    line-height:1.5;
  }
  .approach-footer .footer-desktop-break{
    display:inline;
  }

  .approach-footer .footer-desktop-break::before{
    content:" ";
  }
}

@media(max-width:420px){
  :root{
    --approach-hero-icon-size:40vw;
    --approach-hero-icon-gap:10vw;
    --approach-hero-viewport-width:calc((var(--approach-hero-icon-size) * 3) + (var(--approach-hero-icon-gap) * 2));
    --approach-hero-interaction-height:400px;
    --approach-hero-interaction-bottom-gap:0px;
    --approach-hero-hand-width:60vw;
    --approach-hero-hand-top:70px;
    --approach-hero-title-size:44px;
    --approach-section-title-size:31px;
    --approach-process-title-size:34px;
    --approach-card-width:350px;
    --approach-card-fit-horizontal-reserve:28px;
    --approach-card-fit-height-vh:999;
    --approach-card-padding-top:27px;
    --approach-card-padding-x:31px;
    --approach-card-padding-bottom:50px;
    --approach-card-art-width:80%;
    --approach-card-art-max-width:207px;
    --approach-card-art-bottom-gap:21px;
    --approach-card-title-size:32px;
    --approach-card-title-bottom-gap:20px;
    --approach-card-copy-size:13px;
    --approach-card-copy-leading:1.55;
    --approach-card-copy-gap:14px;
  }
}

@media(prefers-reduced-motion:reduce){
  .approach-card,.approach-stack,.approach-hero-icon-track{transition:none!important;}
}