/* ==========================================================================
   Local overrides - loaded after style.css / responsive.css
   Brand navy: #173158   deep: #0b1b33
   ========================================================================== */

/* The banner artwork is deliberately positioned past the edges, so keep it
   from making the whole document scroll sideways. */
html, body{ overflow-x:hidden; }

/* The logo backdrop ships as a purple bitmap, so paint its silhouette in the
   brand navy instead of showing the baked-in colour. */
.home-banner::before{
  background-image:none !important;
  background-color:#0b1b33;
  -webkit-mask-image:url("../img/banner-shape-before.webp");
          mask-image:url("../img/banner-shape-before.webp");
  -webkit-mask-size:contain;            mask-size:contain;
  -webkit-mask-repeat:no-repeat;        mask-repeat:no-repeat;
  -webkit-mask-position:right center;   mask-position:right center;
}

/* Banner: full height, library photograph under a brand-navy wash so the
   white copy keeps its contrast. */
.banner.home-banner{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:130px;
  padding-bottom:70px;
  overflow:hidden;
  background-image:
    linear-gradient(115deg, rgba(11,27,51,.94) 0%, rgba(23,49,88,.88) 55%, rgba(23,49,88,.82) 100%),
    url("../img/bg-sec.png");
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
.banner.home-banner > .container{ width:100%; position:relative; z-index:2; }

/* Decorative books sit behind the columns now that the right side is a form. */
.banner.home-banner .book-before-img{ z-index:1; opacity:.85; }

@media (max-width:991px){
  .banner.home-banner{
    min-height:auto;
    padding-top:140px;
    padding-bottom:70px;
  }
}

/* Banner form ---------------------------------------------------------------
   Reuses the site's .contact-form skin (white card, pill inputs) and only
   adjusts what the banner context needs. */
.banner-form{
  --gold:#173158;          /* accent, kept in the site's blue family */
  --ink:#0b1b33;
  position:relative;
  margin-left:40px;
  padding:46px 44px 40px;
  border-radius:34px;
  background:#fff;
  box-shadow:0 34px 70px -32px rgba(11,27,51,.75);
  overflow:hidden;
}
/* the thin gold keyline set in from the card edge */
.banner-form::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(19,42,76,.18);
  border-radius:26px;
  pointer-events:none;
  z-index:2;
}
/* navy sweep across the bottom corners */
.banner-form::after{
  content:"";
  position:absolute;
  left:-14%;
  right:-14%;
  bottom:-150px;
  height:210px;
  border-radius:50%;
  border-top:7px solid #8ab6e8;
  background:var(--ink);
  pointer-events:none;
  z-index:0;
}
.banner-form > *{ position:relative; z-index:1; }

/* Heading ----------------------------------------------------------------- */
.banner-form .model-header{
  margin:0 0 26px;
  text-align:center;
}
.banner-form .top-modal{
  display:block;
  /* the site's own family, not a serif */
  font-family:inherit;
  font-size:30px;
  font-weight:700;
  line-height:1.14;
  letter-spacing:-1px;
  color:var(--ink);
  margin-bottom:0;
}
.banner-form .top-modal em{ font-style:normal; color:var(--gold); }

/* rule + book glyph under the headline */
.banner-form .bf-rule{
  display:flex;
  align-items:center;
  gap:14px;
  margin:14px auto 12px;
  max-width:330px;
  color:var(--gold);
  font-size:19px;
}
.banner-form .bf-rule::before,
.banner-form .bf-rule::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(23,49,88,.55));
}
.banner-form .bf-rule::after{ background:linear-gradient(270deg,transparent,rgba(23,49,88,.55)); }

.banner-form .bf-sub{
  display:block;
  font-size:16px;
  font-weight:600;
  color:var(--ink);
}
.banner-form .bf-sub em{ font-style:normal; color:var(--gold); }

/* Fields ------------------------------------------------------------------ */
.banner-form .form-group{ margin-bottom:14px; }
.banner-form .bf-field{ position:relative; }
.banner-form .bf-field > i{
  position:absolute;
  left:20px;
  top:19px;
  font-size:16px;
  color:var(--gold);
  pointer-events:none;
}
.banner-form .bf-field--area > i{ top:18px; }

.banner-form .form-control{
  height:56px;
  padding:0 20px 0 52px;
  border:1px solid rgba(19,42,76,.16);
  border-radius:14px;
  background:#f4f7fb;
  color:var(--ink);
  font-size:15px;
  box-shadow:none;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.banner-form .form-control::placeholder{ color:#9aa2b1; }
.banner-form .form-control:focus{
  border-color:var(--gold);
  background:#fff;
  box-shadow:0 0 0 3px rgba(23,49,88,.15);
}
.banner-form textarea.form-control{
  height:118px;
  padding:16px 20px 16px 52px;
  border-radius:14px;
  resize:vertical;
}

/* Submit ------------------------------------------------------------------ */
.banner-form .btn-purple{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:86%;
  height:62px;
  margin:6px auto 0;
  padding:0 30px;
  border:2px solid var(--gold);
  border-radius:16px;
  background:var(--ink);
  color:#fff;
  font-size:17px;
  font-weight:600;
  letter-spacing:.01em;
  box-shadow:0 14px 28px -14px rgba(19,42,76,.7);
  transition:background .3s ease, transform .3s ease;
}
.banner-form .btn-purple i{ color:var(--gold); font-size:16px; }
.banner-form .btn-purple:hover{
  background:#0b1b33;
  color:#fff;
  transform:translateY(-2px);
}

@media (max-width:575px){
  .banner-form{ padding:34px 22px 30px; border-radius:26px; }
  .banner-form::before{ inset:9px; border-radius:19px; }
  .banner-form .top-modal{ font-size:30px; }
  .banner-form .btn-purple{ width:100%; height:56px; font-size:15px; }
}

@media (max-width:1199px){
  .banner-form{ margin-left:20px; padding:38px 30px 34px; }
  .banner-form .top-modal{ font-size:32px; }
}
@media (max-width:991px){
  .banner-form{ margin-left:0; margin-top:45px; }
}

/* Editing levels ------------------------------------------------------------
   Vertical tab rail on the left, navy panel plus artwork on the right. Colours
   and type come from the site, not the reference. */
.edit-tabs{
  padding:100px 0;
  background:linear-gradient(170deg,#f7fafd 0%,#eef4fb 55%,#e6eef8 100%);
}
.edit-tabs .section-heading{ max-width:760px; margin:0 auto 54px; }

.et-wrap{
  display:grid;
  grid-template-columns:330px 1fr;
  gap:34px;
  /* Centred, and it stays put: the stage below is given a constant height by
     stacking every pane in one grid cell, so centring no longer measures
     against whichever pane happens to be open. */
  align-items:center;
}

/* the rail */
.et-list{ margin:0; padding:0; list-style:none; }
.et-tab{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:15px 20px;
  margin-bottom:6px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#0b1b33;
  font-size:16px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.et-tab i{ width:20px; font-size:15px; color:#173158; transition:color .3s ease; }
.et-tab:hover{ background:rgba(23,49,88,.07); transform:translateX(3px); }
.et-tab.is-active{
  background:linear-gradient(135deg,#20477c,#173158);
  color:#fff;
  box-shadow:0 14px 28px -16px rgba(11,27,51,.8);
}
.et-tab.is-active i{ color:#8ab6e8; }

/* the stage */
.et-stage{ position:relative; }
.et-pane{ display:none; }
.et-pane.is-active{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:36px;
  align-items:center;
}

/* copy sits on the section ground, beside the photo */
.et-card{ padding:0; }
.et-card h3{
  display:inline-block;
  margin:0 0 18px;
  padding-bottom:10px;
  border-bottom:3px solid #173158;
  font-size:32px;
  font-weight:700;
  letter-spacing:-.6px;
  color:#0b1b33;
}
.et-card p{
  margin:0 0 24px;
  font-size:16px;
  line-height:1.7;
  color:#5e6a7d;
}

/* checklist */
.et-ticks{ margin:0 0 30px; padding:0; list-style:none; }
.et-ticks li{
  position:relative;
  padding-left:32px;
  margin-bottom:13px;
  font-size:15.5px;
  line-height:1.55;
  color:#0b1b33;
}
.et-ticks li:last-child{ margin-bottom:0; }
.et-ticks li::before{
  content:"";
  position:absolute;
  left:0;
  top:1px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(23,49,88,.10);
}
.et-ticks li::after{
  content:"";
  position:absolute;
  left:6px;
  top:7px;
  width:8px;
  height:4px;
  border-left:2px solid #173158;
  border-bottom:2px solid #173158;
  transform:rotate(-45deg);
}
.et-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.et-actions .btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 30px;
  border-radius:10px;
  font-size:15px;
  font-weight:600;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.et-actions .btn-purple{ border:0; background:#0b1b33; color:#fff; }
.et-actions .btn-purple:hover{ background:#173158; color:#fff; transform:translateY(-2px); }
.et-actions .btn-ghost{
  border:1px solid rgba(11,27,51,.25);
  background:transparent;
  color:#0b1b33;
}
.et-actions .btn-ghost:hover{ background:#173158; border-color:#173158; color:#fff; transform:translateY(-2px); }

.et-figure{ margin:0; }
.et-figure img{
  display:block;
  width:100%;
  height:440px;
  object-fit:cover;
  border-radius:18px;
  box-shadow:0 30px 60px -34px rgba(11,27,51,.6);
}

/* Constant stage height, desktop only ----------------------------------------
   Hiding panes with display:none let the stage collapse to whichever pane was
   open, so the rail and the photo drifted up and down between tabs. Stacking
   every pane in a single grid cell makes the stage as tall as the longest one
   and keeps it there, which is what lets align-items:center above stay still.
   Scoped to desktop: below 992px the rail is a horizontal strip and the panes
   go single-column, where the reserved height would just be dead space. */
@media (min-width:992px){
  .et-stage{
    display:grid;
  }
  .et-pane{
    grid-area:1 / 1;
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:36px;
    align-items:center;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .35s ease;
  }
  .et-pane.is-active{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }
}

@media (max-width:1199px){
  .et-wrap{ grid-template-columns:280px 1fr; gap:24px; }
  .et-card{         padding: 34px 0px 0px;}
  .et-card h3{ font-size:26px; }
}
@media (max-width:991px){
  .edit-tabs{ padding:70px 0; }
  .et-wrap{ grid-template-columns:1fr; gap:26px; }
  /* the rail becomes a horizontal, scrollable strip */
  .et-list{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
  }
  .et-list li{ flex:0 0 auto; }
  .et-tab{ margin-bottom:0; white-space:nowrap; font-size:15px; padding:12px 18px; }
  .et-tab:hover{ transform:none; }
  .et-pane.is-active{ grid-template-columns:1fr; gap:24px; }
  .et-card h3{ font-size:25px; }
  .et-figure img{ height:260px; }
}

/* Contact page banner: no form beside the copy, so it centres instead. */
.banner-content--center{
  text-align:center;
}
.banner-content--center p{
  margin-left:auto;
  margin-right:auto;
  max-width:760px;
}
.banner-content--center .btn-wrapper{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}
.banner-content--center .btn-wrapper a:first-child{ margin-right:0; }

/* Retail partner marquee, sitting directly under the banner. */
.brands{
  background:#fff;
  padding:34px 0;
  border-bottom:1px solid #e6edf6;
}
.brands-slider .slick-track{ display:flex; align-items:center; }
.brands-slider .slick-slide{ height:auto; }
.brand-item{
  display:flex !important;
  align-items:center;
  justify-content:center;
  height:64px;
  padding:0 20px;
}
.brand-item img{
  max-height:40px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  opacity:.78;
  transition:opacity .3s ease;
}
.brand-item:hover img{ opacity:1; }

@media (max-width:575px){
  .brands{ padding:24px 0; }
  .brand-item{ height:54px; padding:0 12px; }
  .brand-item img{ max-height:32px; }
}

/* Promise rows: the pair alternates, so the mirrored one pushes its 89%-wide
   copy column against the right edge and the two rows get breathing room.
   The section ships with no bottom padding, which left the last row sitting
   flush against the slider below it. */
.podcast.expertise{ padding-bottom:100px; }
.promise-row + .promise-row{ margin-top:90px; }
.promise-row.is-flipped .podcast-left{ margin-left:auto; }

@media (max-width:991px){
  /* Stack in reading order on small screens rather than image-first. */
  .podcast.expertise{ padding-bottom:60px; }
  .promise-row.is-flipped{ flex-direction:row !important; }
  .promise-row + .promise-row{ margin-top:60px; }
  .promise-row.is-flipped .podcast-left{ margin-left:0; }
}

/* Contact details beside the bottom form. */
.contact-aside{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:20px 40px 20px 0;
}
.contact-aside__lead{
  margin:0 0 30px;
  font-size:17px;
  line-height:1.6;
  color:#5e5959;
  max-width:330px;
}
.contact-aside__item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 0;
  border-top:1px solid #dbe5f2;
  text-decoration:none;
}
.contact-aside__item:last-child{ border-bottom:1px solid #dbe5f2; }
.contact-aside__icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:linear-gradient(140deg,#20477c,#0f2444);
  color:#fff;
  font-size:18px;
  transition:transform .3s ease;
}
.contact-aside__item:hover .contact-aside__icon{ transform:scale(1.08); }
.contact-aside__text{ display:flex; flex-direction:column; min-width:0; }
.contact-aside__text small{
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8a93a5;
  margin-bottom:3px;
}
.contact-aside__text b{
  font-size:16px;
  font-weight:600;
  color:#0b1b33;
  word-break:break-word;
  transition:color .3s ease;
}
.contact-aside__item:hover .contact-aside__text b{ color:#173158; }

@media (max-width:991px){
  .contact-aside{ padding:0 0 34px; }
  .contact-aside__lead{ max-width:none; }
}

/* Bottom contact form -------------------------------------------------------
   Scoped to .contact-bottom so the banner card and the modal keep their own
   light skin. A navy card on the pale section reads as the page's closing
   call to action rather than another form. */
/* About page: "Who We Are" ---------------------------------------------------
   Intro across the top, three short blocks on the left and a raised panel on
   the right carrying the longer explanation. */
.whoweare{
  padding:90px 0;
  background:linear-gradient(170deg,#f7fafd 0%,#eaf1fa 55%,#e2ebf6 100%);
}
.wwa-intro{ max-width:1080px; margin:0 0 56px; }
.wwa-intro h2{
  margin:0 0 18px;
  font-size:64px;
  font-weight:800;
  line-height:1.02;
  letter-spacing:-2px;
  color:#0b1b33;
}
.wwa-intro p{
  margin:0;
  max-width:1000px;
  font-size:16px;
  line-height:1.7;
  color:#5e6a7d;
}








/* the navy panel is what lifts this apart from a plain two-column block */





@media (max-width:991px){
  .whoweare{ padding:64px 0; }
  .wwa-intro h2{ font-size:42px; }
  .wwa-intro{ margin-bottom:38px; }
  .wwa-grid{ grid-template-columns:1fr; gap:34px; }
  .wwa-panel{ padding:34px 26px; border-radius:20px; }
  .wwa-panel h3{ font-size:27px; }
  
  
  
}

.wwa-grid{
  display:grid;
  /* Single full-width column: the "How We Work" panel that used to sit beside
     these blocks has been removed, so a second track would just leave a gap. */
  grid-template-columns:1fr;
  gap:30px;
  align-items:start;
}

.wwa-item{ margin-bottom:38px; }
.wwa-item:last-child{ margin-bottom:0; }
.wwa-item h3{
  margin:0 0 12px;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.4px;
  color:#0b1b33;
}
.wwa-item p{
  margin:0;
  font-size:15.5px;
  line-height:1.75;
  color:#5e6a7d;
}

/* the navy panel is what lifts this apart from a plain two-column block */
.wwa-panel{
  padding:52px 54px;
  border-radius:26px;
  background:linear-gradient(155deg,#20477c 0%,#173158 55%,#0b1b33 100%);
  box-shadow:0 34px 66px -38px rgba(11,27,51,.75);
}
.wwa-panel h3{
  margin:0 0 26px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.20);
  font-size:34px;
  font-weight:800;
  letter-spacing:-1px;
  color:#fff;
}
.wwa-panel p{
  margin:0 0 20px;
  font-size:15.5px;
  line-height:1.75;
  color:rgba(255,255,255,.80);
}
.wwa-panel p:last-child{ margin-bottom:0; }
/* About page: tick lists inside the alternating blocks. */
.about-label{
  margin:22px 0 14px !important;
  font-size:16px;
  font-weight:600;
  color:#0b1b33 !important;
}
.about-ticks{ margin:0 0 4px; padding:0; list-style:none; }
.about-ticks li{
  position:relative;
  padding-left:32px;
  margin-bottom:12px;
  font-size:15.5px;
  line-height:1.6;
  color:#5e6a7d;
}
.about-ticks li::before{
  content:"";
  position:absolute;
  left:0;
  top:1px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(23,49,88,.10);
}
.about-ticks li::after{
  content:"";
  position:absolute;
  left:6px;
  top:7px;
  width:8px;
  height:4px;
  border-left:2px solid #173158;
  border-bottom:2px solid #173158;
  transform:rotate(-45deg);
}

/* Publishing path -----------------------------------------------------------
   A centre rail with numbered nodes; the cards alternate either side of it so
   the eye zig-zags down the stages instead of scanning a plain grid. */
.ppath{
  position:relative;
  padding:100px 0;
  overflow:hidden;
  background:linear-gradient(170deg,#f7fafd 0%,#eef4fb 55%,#e6eef8 100%);
}
/* faint dot grid, so the ground is not flat colour */
.ppath::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(23,49,88,.10) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%);
          mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%);
  pointer-events:none;
}
.ppath > .container{ position:relative; z-index:1; }
.ppath .section-heading{ max-width:790px; margin:0 auto 64px; }

.ppath-rail{
  position:relative;
  list-style:none;
  max-width:1080px;
  margin:0 auto;
  padding:0;
}
/* the rail itself, fading out at both ends */
.ppath-rail::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  margin-left:-1px;
  background:linear-gradient(180deg,
    rgba(23,49,88,0) 0%, #173158 8%, #173158 92%, rgba(23,49,88,0) 100%);
}

.ppath-step{
  position:relative;
  display:flex;
  margin-bottom:54px;
}
.ppath-step:last-child{ margin-bottom:0; }
.ppath-step.is-left{ justify-content:flex-start; }
.ppath-step.is-right{ justify-content:flex-end; }

/* numbered node sitting on the rail */
.ppath-node{
  position:absolute;
  left:50%;
  top:34px;
  z-index:2;
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  margin-left:-29px;
  border-radius:50%;
  background:linear-gradient(145deg,#2b5591 0%,#173158 55%,#0b1b33 100%);
  color:#fff;
  font-size:21px;
  font-weight:700;
  box-shadow:0 0 0 7px #eef4fb, 0 0 0 8px rgba(23,49,88,.16),
             0 14px 28px -14px rgba(11,27,51,.85);
  transition:transform .35s ease, box-shadow .35s ease;
}
/* a soft halo that grows on hover */
.ppath-node::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(23,49,88,.16) 0%, rgba(23,49,88,0) 70%);
  opacity:0;
  transition:opacity .35s ease;
}
.ppath-step:hover .ppath-node{
  transform:scale(1.08);
  box-shadow:0 0 0 7px #eef4fb, 0 0 0 9px rgba(23,49,88,.28),
             0 18px 34px -14px rgba(11,27,51,.9);
}
.ppath-step:hover .ppath-node::after{ opacity:1; }

.ppath-card{
  position:relative;
  overflow:hidden;
  width:calc(50% - 62px);
  padding:30px 34px 30px;
  border-radius:22px;
  border:1px solid rgba(23,49,88,.10);
  background:#fff;
  box-shadow:0 20px 44px -28px rgba(11,27,51,.5);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
/* gradient hairline across the card's top edge */
.ppath-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  background:linear-gradient(90deg,#2b5591,#173158 55%,rgba(23,49,88,0));
}
.ppath-step.is-right .ppath-card::before{
  background:linear-gradient(270deg,#2b5591,#173158 55%,rgba(23,49,88,0));
}
.ppath-step:hover .ppath-card{ border-color:rgba(23,49,88,.22); }

/* oversized watermark numeral */
.ppath-ghost{
  position:absolute;
  top:-6px;
  font-size:96px;
  font-weight:800;
  line-height:1;
  letter-spacing:-4px;
  color:rgba(23,49,88,.055);
  pointer-events:none;
}
.ppath-step.is-left  .ppath-ghost{ right:22px; }
.ppath-step.is-right .ppath-ghost{ right:22px; }

.ppath-head{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}
.ppath-ico{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:13px;
  background:linear-gradient(145deg,#2b5591,#0f2444);
  color:#fff;
  font-size:16px;
  box-shadow:0 10px 20px -12px rgba(11,27,51,.8);
  transition:transform .35s ease;
}
.ppath-step:hover .ppath-ico{ transform:rotate(-6deg) scale(1.06); }
.ppath-step:hover .ppath-card{
  transform:translateY(-6px);
  box-shadow:0 30px 54px -28px rgba(11,27,51,.6);
}
/* little notch pointing back at the rail */
.ppath-card::after{
  content:"";
  position:absolute;
  top:44px;
  width:14px;
  height:14px;
  background:#fff;
  transform:rotate(45deg);
}
.ppath-step.is-left  .ppath-card::after{ right:-7px; }
.ppath-step.is-right .ppath-card::after{ left:-7px; }

.ppath-tag{
  display:inline-block;
  padding:7px 18px;
  border-radius:50px;
  background:linear-gradient(135deg,rgba(43,85,145,.14),rgba(23,49,88,.08));
  border:1px solid rgba(23,49,88,.12);
  color:#173158;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.ppath-card h3{
  margin:0 0 12px;
  font-size:23px;
  font-weight:700;
  line-height:1.28;
  letter-spacing:-.5px;
  color:#0b1b33;
}
.ppath-card > p{
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:#5e6a7d;
}
.ppath-key{
  margin:22px 0 12px !important;
  font-size:11px !important;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#0b1b33 !important;
}
.ppath-acts{ margin:0; padding:0; list-style:none; }
.ppath-acts li{
  position:relative;
  padding-left:26px;
  margin-bottom:9px;
  font-size:14.5px;
  line-height:1.55;
  color:#5e6a7d;
}
.ppath-acts li:last-child{ margin-bottom:0; }
.ppath-acts li{ padding-left:30px; }
/* tick sits in a tinted disc, drawn from two borders - no icon font needed */
.ppath-acts li::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  width:19px;
  height:19px;
  border-radius:50%;
  background:rgba(23,49,88,.10);
}
.ppath-acts li::after{
  content:"";
  position:absolute;
  left:6px;
  top:8px;
  width:8px;
  height:4px;
  border-left:2px solid #173158;
  border-bottom:2px solid #173158;
  transform:rotate(-45deg);
}

.ppath .btn-wrapper{ margin-top:60px; }

/* Rail moves to the left edge and every card lines up beside it. */
@media (max-width:991px){
  .ppath{ padding:70px 0; }
  .ppath .section-heading{ margin-bottom:44px; }
  .ppath-rail::before{ left:27px; margin-left:0; }
  .ppath-step,
  .ppath-step.is-right{ justify-content:flex-end; margin-bottom:34px; }
  .ppath-node{ left:27px; top:26px; }
  .ppath-card{ width:calc(100% - 78px); padding:26px 22px 24px; margin-left: 80px; }
  .ppath-card::after,
  .ppath-step.is-left .ppath-card::after{ left:-7px; right:auto; top:36px; }
  .ppath-card h3{ font-size:20px; }
}

/* The first-step band pulls up over the section above it. */
section.cta{
  background-color:rgb(11, 27, 51);
  padding:200px 0px 50px;
  margin-top:-255px;
}

/* Launch-plan band -----------------------------------------------------------
   The navy here comes from cta-launch-img.webp, which is anchored to the foot
   and does not reach the top of the section - so the heading was rendering on
   the white above it and read as clipped. Giving the section the image's own
   navy makes the band continuous. Padding was also 0 top against 64 bottom. */
.success{ padding-bottom:40px; }
.cta-launch{
  background:#0b1b33;
  padding-top:58px;
}

/* Bottom form: light section, the pointing figure on the left and the fields
   filling the rest of the row. ------------------------------------------- */
.contact-bottom{
  position:relative;
  padding:90px 0 0;
  overflow:hidden;
  background:linear-gradient(170deg,#f7fafd 0%,#eaf1fa 60%,#e2ebf6 100%);
}
.contact-bottom .section-heading{ margin-bottom:44px; }

/* The figure is taken out of flow and pinned to the far left, so the form can
   sit centred directly under the heading rather than being pushed sideways. */
.cb-wrap{ position:static; }
.cb-figure{
  position:absolute;
  left:9.5%;
  bottom:0;
  width:320px;
  z-index:1;
}
.cb-figure img{ display:block; width:100%; height:auto; }

.cb-form{
  position:relative;
  z-index:2;
  max-width:860px;
  margin:0 auto;
  padding-bottom:70px;
}

.contact-bottom .cb-form .form-group{ margin-bottom:20px; }
.contact-bottom .cb-form .form-control{
  height:56px;
  padding:0 22px;
  border:1px solid rgba(19,42,76,.14);
  border-radius:12px;
  background:#fff;
  color:#0b1b33;
  font-size:15px;
  box-shadow:0 6px 18px -12px rgba(11,27,51,.4);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.contact-bottom .cb-form .form-control::placeholder{ color:#8a93a5; }
.contact-bottom .cb-form .form-control:focus{
  border-color:#173158;
  background:#fff;
  box-shadow:0 0 0 3px rgba(23,49,88,.15);
}
.contact-bottom .cb-form textarea.form-control{
  height:170px;
  padding:16px 22px;
  resize:vertical;
}

.cb-actions{ text-align:center; margin-top:6px; }
.contact-bottom .cb-form .btn-purple{
  min-width:190px;
  height:54px;
  padding:0 34px;
  border:0;
  border-radius:12px;
  background:#173158;
  color:#fff;
  font-size:16px;
  font-weight:600;
  transition:background .3s ease, transform .3s ease;
}
.contact-bottom .cb-form .btn-purple:hover{
  background:#0b1b33;
  color:#fff;
  transform:translateY(-2px);
}

.cb-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:22px auto 0;
  max-width:640px;
  font-size:13px;
  line-height:1.55;
  color:#5e6a7d;
  cursor:pointer;
}
.cb-consent input{ margin-top:3px; accent-color:#173158; flex:0 0 auto; }

@media (max-width:1399px){
  .cb-figure{ width:260px; left:0; }
}
@media (max-width:1199px){
  .cb-figure{ display:none; }          /* no room beside the form any more */
}
@media (max-width:991px){
  .contact-bottom{ padding:66px 0 0; }
  .cb-form{ padding-bottom:60px; }
  .contact-bottom .cb-form textarea.form-control{ height:140px; }
}

/* Same card treatment as the banner form: cream ground, inset keyline, blue
   accent and a navy sweep across the foot. */
.contact-bottom .contact-form{
  --accent:#173158;
  --ink:#0b1b33;
  position:relative;
  margin-left:0;
  padding:52px 52px 54px;
  border-radius:34px;
  background:#fff;
  box-shadow:0 40px 80px -46px rgba(11,27,51,.85);
  overflow:hidden;
}
.contact-bottom .contact-form::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(19,42,76,.18);
  border-radius:26px;
  pointer-events:none;
  z-index:2;
}
.contact-bottom .contact-form::after{
  content:"";
  position:absolute;
  left:-14%;
  right:-14%;
  bottom:-150px;
  height:210px;
  border-radius:50%;
  border-top:7px solid #8ab6e8;
  background:var(--ink);
  pointer-events:none;
  z-index:0;
}
.contact-bottom .contact-form > *{ position:relative; z-index:1; }

.contact-bottom .contact-form .form-group{ margin-bottom:20px; }
.contact-bottom .contact-form .bf-field{ position:relative; }
/* the label sits above, so anchor the icon to the field's own bottom edge */
.contact-bottom .contact-form .bf-field > i{
  position:absolute;
  left:20px;
  bottom:20px;
  font-size:16px;
  color:var(--accent);
  pointer-events:none;
}

.contact-bottom .contact-form label{
  display:block;
  margin-bottom:9px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#6b7688;
}

.contact-bottom .contact-form .form-control{
  height:56px;
  padding:0 20px 0 52px;
  border:1px solid rgba(19,42,76,.16);
  border-radius:14px;
  background:#f4f7fb;
  color:var(--ink);
  font-size:15px;
  box-shadow:none;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.contact-bottom .contact-form .form-control::placeholder{ color:#9aa2b1; }
.contact-bottom .contact-form .form-control:focus{
  border-color:var(--accent);
  background:#fff;
  box-shadow:0 0 0 3px rgba(23,49,88,.15);
}

.contact-bottom .contact-form .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:86%;
  height:62px;
  margin:16px auto 0;
  padding:0 30px;
  border:2px solid var(--accent);
  border-radius:16px;
  background:var(--ink);
  color:#fff;
  font-size:17px;
  font-weight:600;
  box-shadow:0 14px 28px -14px rgba(19,42,76,.7);
  transition:background .3s ease, transform .3s ease;
}
.contact-bottom .contact-form .btn i{ color:var(--accent); font-size:16px; }
.contact-bottom .contact-form .btn:hover{
  background:#0b1b33;
  color:#fff;
  transform:translateY(-2px);
}

.contact-bottom .contact-form .invalid-feedback{ color:#c0392b; padding-left:4px; }
.contact-bottom .contact-form .form-control.is-invalid{ border-color:#c0392b; }

@media (max-width:767px){
  .contact-bottom .contact-form{ padding:34px 22px 34px; border-radius:26px; }
  .contact-bottom .contact-form::before{ inset:9px; border-radius:19px; }
  .contact-bottom .contact-form .form-group{ margin-bottom:16px; }
  .contact-bottom .contact-form .btn{ width:100%; height:56px; font-size:15px; }
}

/* FAQ accordion -------------------------------------------------------------
   The markup carries no icon element, so the chevron is drawn here from a
   circle and a rotated corner - no icon font needed. */
.sec-6 .faq-image img{
  width:100%;
  border-radius:24px;
  object-fit:cover;
}

.accordion-list li > span{
  position:relative;
  display:block;
  cursor:pointer;
  padding-right:60px;
}
.accordion-list li > span::before{      /* the disc */
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:30px;
  height:30px;
  margin-top:-15px;
  border-radius:50%;
  background:#eef2f7;
  transition:background .3s ease;
}
.accordion-list li > span::after{       /* the chevron, painted over the disc */
  content:"";
  position:absolute;
  right:26px;
  top:50%;
  width:8px;
  height:8px;
  margin-top:-7px;
  border-right:2px solid #173158;
  border-bottom:2px solid #173158;
  transform:rotate(45deg);
  transition:transform .3s ease, border-color .3s ease, margin-top .3s ease;
}
.accordion-list li.active > span::before{ background:#173158; }
.accordion-list li.active > span::after{
  margin-top:-3px;
  transform:rotate(-135deg);
  border-color:#fff;
}

@media (max-width:991px){
  .sec-6 .faq-image{ margin-bottom:34px; }
}

/* Go-to partner -------------------------------------------------------------
   A horizontal accordion: collapsed panels are narrow columns with the title
   turned on its side, and the open panel widens to reveal its copy. */
.partner{ padding:100px 0; background:#fff; }
.partner-inner{
  display:flex;
  align-items:stretch;
  border-top:1px solid #dde5ef;
}

.partner-intro{
  flex:0 0 330px;
  padding:44px 44px 44px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:right;
}
.partner-intro h2{
  margin:0 0 14px;
  font-size:44px;
  font-weight:700;
  line-height:1.08;
  letter-spacing:-1.5px;
  color:#0b1b33;
}
.partner-intro h2 span{ color:#173158; }
.partner-intro p{
  margin:0 0 26px;
  font-size:16px;
  line-height:1.6;
  color:#5e5959;
}
.partner-intro .btn{ align-self:flex-end; gap:10px; }

.partner-accor{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  /* one fixed height on the track keeps every panel exactly equal */
  height:470px;
  margin:0;
  padding:0;
  list-style:none;
  border-left:1px solid #dde5ef;
}

.pa-item{
  position:relative;
  /* The width is driven by flex-grow, not flex-basis. Going 76px -> auto is
     what this used to do, and `auto` is not an interpolatable length, so the
     width snapped open in one frame and only min-width actually eased - that
     was the jerk on hover. flex-grow is a plain number, so it animates. */
  flex:0 1 76px;
  min-width:76px;
  height:100%;
  border-right:1px solid #dde5ef;
  overflow:hidden;
  transition:flex-grow 1.7s cubic-bezier(.22,.75,.25,1),              min-width 1.7s cubic-bezier(.22,.75,.25,1);
}
.pa-item.is-open{
  flex-grow:1;
  min-width:280px;
  /* copy settles into the bottom-left corner of the open panel */
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-bottom:16px;
}

/* The photograph fades in behind the copy only once the panel opens.
   The paths live here rather than in an inline custom property: a url() inside
   a custom property resolves against this stylesheet, not the page, so an
   inline "assets/img/..." would 404 from /assets/css/. */
.pa-item::before{
  content:"";
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.7s ease;
  pointer-events:none;
}
.pa-item:nth-child(1)::before{ background-image:url("../img/partner-bg-1.webp"); }
.pa-item:nth-child(2)::before{ background-image:url("../img/partner-bg-2.webp"); }
.pa-item:nth-child(3)::before{ background-image:url("../img/partner-bg-3.webp"); }
.pa-item::after{
  content:"";
  position:absolute;
  inset:0;
  /* darkest where the copy sits, clearing to the right so the photo reads */
  background:linear-gradient(100deg, rgba(11,27,51,.90) 0%, rgba(11,27,51,.60) 48%, rgba(11,27,51,.12) 100%);
  opacity:0;
  transition:opacity 1.7s ease;
  pointer-events:none;
}
.pa-item.is-open::before,
.pa-item.is-open::after{ opacity:1; }

/* Content rides above the photo, and flips to white type when open. */
.pa-item .pa-head,
.pa-item .pa-body{ position:relative; z-index:1; }
.pa-item.is-open .pa-head h4,
.pa-item.is-open .pa-head h4 span{ color:#fff; }
.pa-item.is-open .pa-body p{ color:rgba(255,255,255,.88); }

.pa-head{
  display:flex;
  align-items:flex-end;
  width:100%;
  height:100%;
  padding:26px 22px;
  border:0;
  background:none;
  cursor:pointer;
  text-align:left;
}
.pa-head h4{
  margin:0;
  font-size:19px;
  font-weight:700;
  letter-spacing:-.3px;
  color:#0b1b33;
  white-space:nowrap;
  /* sideways while collapsed, reading bottom-to-top */
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}
.pa-head h4 span{ color:#173158; }

.pa-item.is-open .pa-head{
  align-items:flex-end;
  flex:0 0 auto;
  height:auto;
  padding-bottom:10px;
}
.pa-item.is-open .pa-head h4{
  writing-mode:horizontal-tb;
  transform:none;
  white-space:normal;
  font-size:23px;
  line-height:1.25;
}

/* Was display:none -> block, which cannot transition, so the copy popped in
   the instant the class flipped. Left in flow and faded instead: while the
   panel is collapsed the head is height:100%, so this sits below the track and
   the panel's overflow:hidden clips it. The delay lets the panel widen first. */
.pa-body{
  padding:0 22px 30px;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .8s ease .55s, transform .8s ease .55s;
}
.pa-item.is-open .pa-body{ opacity:1; transform:none; }
.pa-body p{
  margin:0;
  max-width:420px;
  font-size:15.5px;
  line-height:1.65;
  color:#5e5959;
}

@media (max-width:1199px){
  .partner-intro{ flex-basis:280px; padding-right:32px; }
  .partner-intro h2{ font-size:36px; }
  .partner-accor{ height:430px; }
  .pa-item{ flex-basis:64px; min-width:64px; }
}

/* Stacked list on small screens - a sideways accordion has nowhere to go. */
@media (max-width:991px){
  .partner{ padding:70px 0; }
  .partner-inner{ flex-direction:column; border-top:0; }
  .partner-intro{
    flex:none; width:100%; padding:0 0 34px; text-align:left;
  }
  .partner-intro h2{ font-size:32px; }
  .partner-intro .btn{ align-self:flex-start; }

  /* stacked, so each panel is as tall as its own content */
  .partner-accor{ flex-direction:column; height:auto; border-left:0; border-top:1px solid #dde5ef; }
  .pa-item{
    flex:none; min-width:0; height:auto;
    border-right:0; border-bottom:1px solid #dde5ef;
  }
  .pa-head{ height:auto; padding:20px 18px; align-items:center; }
  .pa-head h4{ writing-mode:horizontal-tb; transform:none; white-space:normal; font-size:18px; }
  .pa-item.is-open .pa-head{ padding:22px 18px 8px; }
  .pa-item.is-open .pa-head h4{ font-size:19px; }
  .pa-body{ padding:0 18px 22px; }
  /* keep the photo, just let the panel breathe when stacked */
  .pa-item.is-open{ min-height:0; }
}

/* Counter tiles -------------------------------------------------------------
   The counter row now carries the eight in-house services: a navy medallion
   above the name, keeping the section's white pill-card look. */
.counter-box--icon{
  --tone:#2f9e63;                    /* green card */
  --tone-soft:rgba(47,158,99,.12);
  --tone-2:rgba(63,127,214,.14);     /* the second wave behind it */
  position:relative;
  overflow:hidden;
  padding:34px 28px 40px;
  margin-bottom:28px;
  min-height:0;
  height:calc(100% - 28px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:0;
  text-align:left;
  border-radius:20px;
  border-left:0;
  border-right:0;
  background:#fff;
  box-shadow:0 18px 40px -26px rgba(11,27,51,.45);
  transition:transform .35s ease, box-shadow .35s ease;
}
.counter-box--icon.is-blue{
  --tone:#3f7fd6;                    /* blue card */
  --tone-soft:rgba(63,127,214,.14);
  --tone-2:rgba(47,158,99,.13);
}

/* Two offset waves along the card's foot. Each is a flat colour masked by an
   S-curve, so the tone can change per card without a second image. */
.counter-box--icon::before,
.counter-box--icon::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:52px;
  pointer-events:none;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:bottom;  mask-position:bottom;
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
}
.counter-box--icon::before{
  background:var(--tone-2);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 52' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C55,8 105,44 155,30 C205,16 258,36 300,24 L300,52 L0,52 Z' fill='%23000'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 52' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C55,8 105,44 155,30 C205,16 258,36 300,24 L300,52 L0,52 Z' fill='%23000'/%3E%3C/svg%3E");
}
.counter-box--icon::after{
  background:var(--tone-soft);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 52' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C60,22 100,50 150,38 C200,26 250,46 300,34 L300,52 L0,52 Z' fill='%23000'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 52' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C60,22 100,50 150,38 C200,26 250,46 300,34 L300,52 L0,52 Z' fill='%23000'/%3E%3C/svg%3E");
}

.counter-box--icon .cb-no{
  position:absolute;
  top:16px;
  right:22px;
  font-size:44px;
  font-weight:700;
  line-height:1;
  color:rgba(11,27,51,.08);
  pointer-events:none;
}

.counter-box--icon .cb-ico{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:80px;
  height:80px;
  margin-bottom:22px;
  border-radius:50%;
  /* soft glow rather than a flat disc */
  background:radial-gradient(circle at 32% 28%, #fff 0%, var(--tone-soft) 55%, var(--tone-soft) 100%);
  box-shadow:0 8px 20px -12px rgba(11,27,51,.35);
  transition:transform .35s ease;
}
.counter-box--icon:hover .cb-ico{ transform:scale(1.06); }

/* The icons are line art with an alpha channel, so each is used as a mask and
   painted in its own card's tone - green cards get green icons, blue get blue. */
.counter-box--icon .cb-art{
  display:block;
  width:42px;
  height:42px;
  background-color:var(--tone);
  -webkit-mask-repeat:no-repeat;   mask-repeat:no-repeat;
  -webkit-mask-position:center;    mask-position:center;
  -webkit-mask-size:contain;       mask-size:contain;
}
.cb-art--1{ -webkit-mask-image:url("../img/icons/author-icon-1.webp"); mask-image:url("../img/icons/author-icon-1.webp"); }
.cb-art--2{ -webkit-mask-image:url("../img/icons/author-icon-2.webp"); mask-image:url("../img/icons/author-icon-2.webp"); }
.cb-art--3{ -webkit-mask-image:url("../img/icons/author-icon-3.webp"); mask-image:url("../img/icons/author-icon-3.webp"); }
.cb-art--4{ -webkit-mask-image:url("../img/icons/author-icon-4.webp"); mask-image:url("../img/icons/author-icon-4.webp"); }
.cb-art--5{ -webkit-mask-image:url("../img/icons/author-icon-5.webp"); mask-image:url("../img/icons/author-icon-5.webp"); }
.cb-art--6{ -webkit-mask-image:url("../img/icons/author-icon-6.webp"); mask-image:url("../img/icons/author-icon-6.webp"); }
.cb-art--7{ -webkit-mask-image:url("../img/icons/author-icon-7.webp"); mask-image:url("../img/icons/author-icon-7.webp"); }
.cb-art--8{ -webkit-mask-image:url("../img/icons/author-icon-8.webp"); mask-image:url("../img/icons/author-icon-8.webp"); }

/* keep the copy above the waves, which are positioned and would paint over it.
   .cb-no is left absolute on purpose - it is pinned to the card's corner. */
.counter-box--icon h3,
.counter-box--icon .cb-rule,
.counter-box--icon p{ position:relative; z-index:1; }
.counter-box--icon .cb-no{ z-index:1; }

.counter-box--icon h3{
  margin:0;
  font-size:20px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.4px;
  color:#0b1b33;
}
.counter-box--icon .cb-rule{
  display:block;
  width:34px;
  height:3px;
  margin:14px 0 14px;
  border-radius:3px;
  background:var(--tone);
}
.counter-box--icon p{
  margin:0;
  font-size:14.5px;
  line-height:1.6;
  color:#5e6a7d;
}
.counter-box--icon:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 44px -26px rgba(11,27,51,.55);
}

@media (max-width:991px){
  .counter-box--icon{
    padding:26px 20px 32px; margin-bottom:18px;
    height:calc(100% - 18px);
  }
  .counter-box--icon .cb-ico{ width:62px; height:62px; margin-bottom:16px; }
  .counter-box--icon .cb-ico img{ width:34px; height:34px; }
  .counter-box--icon .cb-no{ font-size:34px; top:12px; right:16px; }
  .counter-box--icon h3{ font-size:17px; }
  .counter-box--icon p{ font-size:13.5px; }
}

/* What sets us apart --------------------------------------------------------
   A staggered grid of leaf-cornered cards: ghost numeral, navy diamond icon
   and an accent rule that draws itself across on hover. */
.apart{
  padding:100px 0;
  background:linear-gradient(170deg,#0e2140 0%,#173158 55%,#20477c 100%);
}
.apart .section-heading{ max-width:820px; margin:0 auto 56px; }
/* dark ground, so the heading and lede have to lift off it */
.apart .section-heading h2{ color:#fff; }
.apart .section-heading h2 span{ color:#8ab6e8; }
.apart .section-heading p{ color:rgba(255,255,255,.78); }

.apart-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.apart-card{
  position:relative;
  overflow:hidden;
  padding:38px 32px 34px;
  background:#fff;
  border:1px solid #dbe5f2;
  border-radius:44px;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.apart-card:hover{
  transform:translateY(-8px);
  border-color:#173158;
  box-shadow:0 30px 50px -28px rgba(11,27,51,.45);
}
/* middle column rides lower so the grid reads as a rhythm, not a table */
.apart-card:nth-child(3n+2){ margin-top:38px; }

.apart-card__icon{
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  margin-bottom:24px;
  border-radius:18px;
  background:linear-gradient(140deg,#20477c,#0f2444);
  transform:rotate(-8deg);
  transition:transform .35s ease;
}
.apart-card:hover .apart-card__icon{ transform:rotate(0deg) scale(1.05); }
.apart-card__icon i{
  font-size:23px;
  color:#fff;
  transform:rotate(8deg);
  transition:transform .35s ease;
}
.apart-card:hover .apart-card__icon i{ transform:rotate(0deg); }

.apart-card h3{
  margin:0;
  font-size:21px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.6px;
  color:#0b1b33;
}
.apart-card__rule{
  display:block;
  width:34px;
  height:3px;
  margin-top:18px;
  border-radius:3px;
  background:#173158;
  transition:width .35s ease;
}
.apart-card:hover .apart-card__rule{ width:76px; }

.apart .btn-wrapper{ margin-top:56px; }
.apart .btn-wrapper a:first-child{ margin-right:12px; }

@media (max-width:991px){
  .apart{ padding:70px 0; }
  .apart-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .apart-card:nth-child(3n+2){ margin-top:0; }
  .apart-card:nth-child(2n){ margin-top:28px; }
}
@media (max-width:575px){
  .apart-grid{ grid-template-columns:1fr; }
  .apart-card{ border-radius:34px 8px 34px 8px; padding:30px 24px; }
  .apart-card:nth-child(2n){ margin-top:0; }
}

/* Marketing pencil ----------------------------------------------------------
   A rounded panel with the numbered segments stacked down the middle and the
   callouts alternating either side, each linked by a rule and a dot. */
.pencil{
  padding:90px 0 100px;
  background:linear-gradient(135deg,#20477c 0%,#173158 55%,#0e2140 100%);
}
.pencil-card{ position:relative; }
.pencil-card .section-heading{ margin-bottom:40px; }
.pencil-card .section-heading h2{ color:#fff; }
.pencil-card .section-heading h2 span{ color:#8ab6e8; }

.pencil-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:0;
  row-gap:0;
  max-width:1060px;
  margin:0 auto;
}

/* Segments stack flush so they read as one pencil. Each source is trimmed to
   the same 135px-wide artwork, so a single width lines them all up. */
.pencil-seg{ display:flex; justify-content:center; }
.pencil-seg img{ display:block; width:172px; height:auto; }

/* Callouts are taken out of flow so a long one cannot stretch its grid row
   apart - the row height stays exactly the segment height and the pencil
   reads as one solid stack. */
.pencil-side{ position:relative; align-self:stretch; }
.pencil-note{ position:absolute; top:-10px; width:330px; }
.pencil-note h3{
  margin:0 0 8px;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.5px;
  color:#fff;
}
.pencil-note p{
  margin:0;
  font-size:15px;
  line-height:24px;
  color:rgba(255,255,255,.82);
}
.pencil-note--l{ right:112px; text-align:left; }
.pencil-note--r{ left:112px;  text-align:left; }

/* Connector: a dot at the label, a short run, then an angled drop to a second
   dot beside the pencil - matching the reference artwork. */
.pencil-link{
  position:absolute;
  top:4px;
  width:104px;
  height:58px;
  overflow:visible;
}
.pencil-note--l .pencil-link{ left:100%; }
.pencil-note--r .pencil-link{ right:100%; }
.pencil-link polyline{
  fill:none;
  stroke:rgba(255,255,255,.6);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.pencil-link circle{ fill:#fff; }

@media (max-width:991px){
  .pencil{ padding:60px 0 70px; }
  .pencil-grid{ grid-template-columns:auto 1fr; }
  .pencil-side--l{ display:none; }
  .pencil-note{ position:static; width:auto; padding-left:20px; }
  .pencil-note--l,
  .pencil-note--r{ left:auto; right:auto; text-align:left; }
  .pencil-link{ display:none; }   /* the angled connector needs the wide layout */
  .pencil-seg img{ width:112px; }
}

/* Steps slider --------------------------------------------------------------
   Photograph background with the copy riding the left half; the subject of the
   picture sits right of centre, so the gradient only darkens the left. */
.steps-slider{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;          /* slider sits centred top-to-bottom */
  padding:90px 0;
  overflow:hidden;
  background:url("../img/75percent-bg.webp") right center / cover no-repeat;
}
.steps-slider > .container{ width:100%; }
.steps-slider::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(11,27,51,.86) 0%, rgba(11,27,51,.62) 42%, rgba(11,27,51,0) 68%);
}
.steps-slider .container{ position:relative; z-index:1; }
/* Nudge the cards below the optical centre so they sit clear of the sky. */
.steps-slider__track{ margin-top:90px; }

/* Every card shares one height, so nothing resizes between steps. The slide
   is made a flex parent too: its own height comes from stretching, which a
   percentage height on the card cannot resolve against. */
.steps-slider__track .slick-track{ display:flex; align-items:stretch; }
.steps-slider__track .slick-slide{ height:auto; display:flex; }
/* slick can insert its own row wrapper between the slide and the card. */
.steps-slider__track .slick-slide > div{ display:flex; flex:1 1 auto; }
.steps-slider__track .step-slide{ flex:1 1 auto; }

.step-slide{
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:rgba(11,27,51,.88);
  border:1px solid rgba(255,255,255,.16);
  border-radius:30px;
  padding:38px 34px;
  color:#fff;
}
.step-slide__badge{ align-self:flex-start; }
.step-slide__badge{
  display:inline-block;
  background:#173158;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50px;
  padding:7px 22px;
  margin-bottom:18px;
  font:600 13px/1 Inter, sans-serif;
  color:#fff;
}
.step-slide h3{
  margin:0 0 14px;
  font-size:30px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-1px;
  color:#fff;
}
.step-slide p{
  margin:0;
  font-size:15px;
  line-height:24px;
  color:rgba(255,255,255,.82);
}

.steps-slider__track .slick-dots{ position:static; margin-top:22px; text-align:left; }
.steps-slider__track .slick-dots li button:before{ font-size:11px; color:#fff; opacity:.4; }
.steps-slider__track .slick-dots li.slick-active button:before{ color:#fff; opacity:1; }

@media (max-width:991px){
  .steps-slider{ min-height:auto; padding:60px 0; background-position:center; }
  .steps-slider__track{ margin-top:0; }
  .steps-slider::before{ background:rgba(11,27,51,.82); }
  .step-slide{ padding:28px 24px; }
  .step-slide h3{ font-size:25px; }
  .steps-slider__track .slick-dots{ text-align:center; }
}

/* Text on the dark navy sections -------------------------------------------
   The brand navy is too close to the dark section background to read against
   it, so headings go white and the accent takes a light tint instead. */
.cta .section-heading h2{ color:#fff; }
.cta .section-heading p{ color:rgba(255,255,255,.82); margin-bottom:0; }

.cta .section-heading h2 span,
.type .section-heading h2 span,
.counter .section-heading h2 span,
section.type .tab-content .tab-pane h3{ color:#8ab6e8; }

/* Section backdrops ---------------------------------------------------------
   These ship as lavender bitmaps, so replace them with the same gentle wash
   mixed from the brand navy. */
.numbers,
.podcast,
.contact-bottom{
  background-image:linear-gradient(160deg,#f7fafd 0%,#eaf1fa 55%,#dfe9f6 100%);
}
.reviewed{
  background-image:linear-gradient(160deg,#eff4fb 0%,#e3ecf7 100%);
}

/* Footer flourishes are purple bitmaps - paint their silhouettes instead. */
footer::before,
footer::after{
  background-image:none !important;
  background-color:rgba(255,255,255,.08);
  -webkit-mask-size:contain;     mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
footer::before{
  -webkit-mask-image:url("../img/footer-cirlce-before.png");
          mask-image:url("../img/footer-cirlce-before.png");
}
footer::after{
  -webkit-mask-image:url("../img/footer-cirlce-after.png");
          mask-image:url("../img/footer-cirlce-after.png");
}

/* Form validation states - the stylesheet rounds inputs, so match them. */
.contact-form .form-control.is-invalid,
.modal .contact-form .form-control.is-invalid{
  border-color:#dc3545;
  background-image:none;
}
.contact-form .invalid-feedback{
  font-size:13px;
  padding-left:16px;
  margin-top:4px;
}
.contact-form .alert-success{
  border-radius:20px;
  font-size:15px;
}

/* Book-type tabs -----------------------------------------------------------
   The tab labels are <p> elements sharing the .section-heading wrapper with the
   intro copy, so they pick up its 100px side padding and force the row to wrap.
   Item widths and spacing still come from the stylesheet's own
   `section.type ul li {flex:0 0 13%}` - only the label padding is reset. */
.type .nav-tabs .nav-link p{ padding:0; }

/* The strip is pulled up 50px, so give the intro copy room to clear it. */
.type .section-heading > .tab-content{ padding-bottom:60px; }

/* Slick dots under the review carousel. */
.reviewed-slider .slick-dots{ position:static; margin-top:20px; }
.reviewed-slider .slick-dots li button:before{ font-size:10px; color:#173158; opacity:.35; }
.reviewed-slider .slick-dots li.slick-active button:before{ color:#173158; opacity:1; }

/* Slick tracks stretch so neighbouring cards share a baseline. */
.reviewed-slider .slick-track{ display:flex; }
.reviewed-slider .slick-slide{ height:auto; }

/* ============================================================
   POLICY PAGES  (privacy-policy.html, terms-and-conditions.html)
   Site palette only: navy #173158, ink #0b1b33, accent #8ab6e8.
   Poppins comes down from body, so nothing sets a font here.
   ============================================================ */

/* Short banner: the home banner reserves a full viewport for artwork and a
   form, which a text-only page does not need. Matching .banner.home-banner's
   two-class specificity is what actually releases the 100vh floor. */
.banner.home-banner.legal-banner{
  min-height:0;
  padding:190px 0 90px;
}
.legal-banner .banner-content{
  margin-top:0;
}
.legal-banner h1{
  margin-bottom:12px;
}
.legal-banner p{
  color:#8ab6e8;
  font-size:17px;
  line-height:30px;
  margin-bottom:0;
}

.legal{
  background:#fff;
  padding:80px 0 90px;
}

/* A measured column: legal copy is read line by line, so it is capped
   well short of the container width. */
.legal-doc{
  max-width:900px;
  margin:0 auto;
  color:#4a5568;
  font-size:16px;
  line-height:30px;
}

.legal-updated{
  display:inline-block;
  background:rgba(23,49,88,.07);
  color:#173158;
  font-size:14px;
  font-weight:500;
  letter-spacing:.2px;
  padding:8px 18px;
  border-radius:100px;
  margin-bottom:38px;
}

.legal-doc h2{
  position:relative;
  color:#0b1b33;
  font-size:24px;
  line-height:34px;
  font-weight:600;
  margin:44px 0 14px;
  padding-left:18px;
}
.legal-doc h2:first-of-type{
  margin-top:0;
}
/* navy rule beside each heading, matching the accent bars used elsewhere */
.legal-doc h2::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  bottom:7px;
  width:4px;
  border-radius:4px;
  background:#173158;
}

.legal-doc p{
  margin-bottom:18px;
}

.legal-doc a{
  color:#173158;
  font-weight:500;
  text-decoration:none;
  border-bottom:1px solid rgba(23,49,88,.35);
  transition:color .25s ease, border-color .25s ease;
}
.legal-doc a:hover{
  color:#0b1b33;
  border-bottom-color:#0b1b33;
}

.legal-doc ul{
  list-style:none;
  padding-left:0;
  margin:0 0 22px;
}
.legal-doc ul li{
  position:relative;
  padding-left:30px;
  margin-bottom:12px;
}
/* CSS-drawn tick, so the list does not depend on an icon font loading */
.legal-doc ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  width:6px;
  height:11px;
  border:solid #173158;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

@media (max-width:991px){
  .banner.home-banner.legal-banner{ padding:150px 0 70px; }
  .legal{ padding:60px 0 70px; }
  .legal-doc h2{ font-size:21px; line-height:31px; margin-top:36px; }
}
@media (max-width:575px){
  .banner.home-banner.legal-banner{ padding:130px 0 55px; }
  .legal-doc{ font-size:15px; line-height:28px; }
  .legal-doc h2{ font-size:19px; line-height:29px; }
}

/* ============================================================
   FORM TERMS CONSENT + FOOTER LINK HOVER
   ============================================================ */

/* Sits above the submit button on every form. All three form layouts sit on
   a white card, so one treatment covers them. */
.form-terms{
  position:relative;
  z-index:3;                       /* clears the card's inset keyline */
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 18px;
  font-size:13px;
  line-height:1.55;
  color:#5e6a7d;
  text-align:left;
}
.form-terms input{
  flex:0 0 auto;
  width:15px;
  height:15px;
  margin-top:3px;
  accent-color:#173158;
  cursor:pointer;
}
.form-terms a{
  color:#173158;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .25s ease;
}
.form-terms a:hover{
  color:#0b1b33;
}

/* Bottom form: the row runs the full width of the card, which puts the start of
   this line straight over the figure's shoulder - grey text on a tan cardigan.
   Centring it over the button clears her and matches the old consent line. */
.contact-bottom .form-terms{
  justify-content:center;
  text-align:center;
  max-width:620px;
  margin:0 auto 16px;
}

/* style.css hovers footer links to #0b1b33, which is all but invisible against
   the navy footer - a leftover from the light-footer palette. Take them to the
   accent used on the site's other dark sections instead. */
.menu-list a{
  transition:color .25s ease;
}
.menu-list a:hover,
.menu-list a:focus-visible{
  color:#8ab6e8;
}

/* ============================================================
   PROMISE ROW: TICK LIST + OUTLINE BUTTON
   ============================================================ */

.promise-points{
  list-style:none;
  padding-left:0;
  margin:4px 0 30px;
}
.promise-points li{
  position:relative;
  padding-left:34px;
  margin-bottom:14px;
  color:#0b1b33;
  font-size:16px;
  line-height:26px;
  font-weight:500;
}
/* CSS-drawn tick, so the list never waits on an icon font */
.promise-points li::before{
  content:"";
  position:absolute;
  left:5px;
  top:5px;
  width:7px;
  height:13px;
  border:solid #173158;
  border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);
}

/* Outline partner to .btn-purple-light. Both filled classes are navy, so two
   of them side by side read as a single block; the secondary is a keyline. */
.btn-line{
  border-radius:50px;
  font-family:Inter, sans-serif;
  padding:8px 24px;
  border:1px solid #173158;
  background:transparent;
  color:#173158;
  transition:background .3s ease, color .3s ease;
}
.btn-line:hover{
  background:#173158;
  color:#fff;
}

@media (max-width:575px){
  .promise-points li{ font-size:15px; line-height:25px; padding-left:30px; }
}

/* ============================================================
   PORTFOLIO COVERS
   The stock covers this slider shipped with carried their margin and drop
   shadow inside the bitmap. The portfolio jackets are full-bleed, so without
   these rules they butt together edge to edge with no separation at all.
   ============================================================ */

.author-slider .author-box{
  padding:26px 14px;
}
.author-slider .author-box img{
  display:block;
  width:100%;
  height:auto;
  border-radius:3px;
  /*box-shadow:0 22px 45px -20px rgba(11,27,51,.65);*/
  transition:transform .4s ease, box-shadow .4s ease;
}
.author-slider .author-box:hover img{
  transform:translateY(-6px);
  box-shadow:0 30px 55px -22px rgba(11,27,51,.75);
}

@media (max-width:575px){
  .author-slider .author-box{ padding:20px 10px; }
}

/* ============================================================
   TESTIMONIAL COVERS
   The art this slider shipped with was a 381x491 3D mockup carrying its own
   shadow. The portfolio jackets are 574x940 flat covers, so without a width
   here they render at natural size and push the quote out of the row.
   ============================================================ */

.reviewed-left{
  flex:0 0 auto;
}
.reviewed-left img{
  display:block;
  width:300px;
  max-width:100%;
  height:auto;
  border-radius:3px;
  box-shadow:0 22px 45px -20px rgba(11,27,51,.6);
}

@media (max-width:1199px){
  .reviewed-left img{ width:250px; }
}
@media (max-width:767px){
  .reviewed-left img{ width:200px; }
}

/* The review track sits outside any .container, so the first cover lands hard
   against x=0 while the last slide's shorter copy leaves air on the right.
   Padding the slick root indents the whole track; slick remeasures .slick-list
   on load, so the slides just come out fractionally narrower. */
.reviewed-slider{
  /* Full width, no side inset. The clip stays because the next cover otherwise
     paints past the end of the track as a dark band at the edge. */
  overflow:hidden;
  clip-path:inset(0);
}


/* style.css still paints the footer icons #ffcc00 - the last of the old gold
   theme, sitting on the navy footer. Same specificity as that rule, and this
   sheet loads after it. */
.menu-list a i{
  color:#fff;
}

/* Sub-headings inside a policy section. Lighter than the h2 rule - no navy
   bar, so the numbered sections stay the visible structure. */
.legal-doc h3{
  color:#173158;
  font-size:18px;
  line-height:27px;
  font-weight:600;
  margin:28px 0 10px;
  padding-left:18px;
}
.legal-doc h3 + p{
  margin-top:0;
}
@media (max-width:575px){
  .legal-doc h3{ font-size:17px; line-height:26px; padding-left:0; }
}

/* Modal backdrop, pinned explicitly at the client's request.
   Note: these values match what Bootstrap already computes. Measured with the
   modal open, sampled every 300ms for 2.1s: at DPR 1.25 (body zoom .8) and at
   DPR 1.5 (zoom .665) the backdrop came out 1476x668 on a 1476x668 viewport -
   full coverage, no gap at either edge. So this rule changes nothing today; it
   is here as a guard. Opacity is left to Bootstrap's .modal-backdrop.show,
   otherwise the overlay would be solid black instead of a 50% wash. */
.modal-backdrop{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  z-index:1040 !important;
  width:100% !important;
  height:100% !important;
  background-color:#000 !important;
}

/* Tick list on a dark banner. The base .promise-points is drawn for the white
   sections, so navy ticks and near-black text would vanish here. */
.banner-content .banner-lead{
  margin:0 0 12px;
  color:#8ab6e8;
  font-size:16px;
  font-weight:600;
  letter-spacing:.2px;
}
.promise-points--light li{
  color:#fff;
  font-weight:400;
}
.promise-points--light li::before{
  border-color:#8ab6e8;
}

/* Bold lead-in on the home banner's ticks. The base rule sets the list to
   font-weight 400, so state the label weight rather than leaning on the
   browser default. */
.promise-points--light li strong{
  color:#fff;
  font-weight:600;
}

/* style.css sets .banner-content ul li to display:flex with a 15px gap. That
   turns a bold lead-in and the sentence after it into two separate flex items:
   a 15px gutter opens after the colon, and a long label wraps into its own
   column. These ticks position their mark with an absolute ::before, so the
   flex box buys nothing here. Selector is deliberately as specific as the rule
   it has to beat. */
.banner-content ul.promise-points li{
  display:block;
  gap:0;
}

/* ============================================================
   FORM-STEP  (form-step.php)
   Step two of the enquiry. Same white card, navy palette and Poppins as the
   rest of the site - it reuses .form-control, .form-terms and .btn-purple so
   the fields match the contact form exactly.
   ============================================================ */

.form-step{
  padding:190px 0 100px;                 /* clears the fixed header */
  background:linear-gradient(170deg,#f7fafd 0%,#eaf1fa 55%,#e2ebf6 100%);
}
.form-step .section-heading{
  margin-bottom:38px;
}
.form-step h1{
  margin:0 0 12px;
  color:#0b1b33;
  font-size:44px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:-1px;
}
.form-step h1 span{ color:#173158; }
.form-step .section-heading p{
  margin:0;
  color:#5e6a7d;
  font-size:16px;
  line-height:1.7;
}

.fs-card{
  position:relative;
  max-width:900px;
  margin:0 auto;
  padding:46px 46px 40px;
  border-radius:28px;
  background:#fff;
  box-shadow:0 40px 80px -46px rgba(11,27,51,.75);
}
/* the inset keyline the other cards on the site carry */
.fs-card::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(19,42,76,.16);
  border-radius:19px;
  pointer-events:none;
}
.fs-card > *{ position:relative; z-index:1; }

.fs-who{
  margin:0 0 26px;
  padding:12px 18px;
  border-radius:100px;
  background:rgba(23,49,88,.07);
  color:#173158;
  font-size:14px;
  display:inline-block;
}
.fs-who strong{ font-weight:600; }

.fs-error{
  margin:0 0 22px;
  padding:12px 18px;
  border-radius:12px;
  background:rgba(192,57,43,.08);
  color:#c0392b;
  font-size:14.5px;
  font-weight:500;
}

.fs-label{
  display:block;
  margin:0 0 8px;
  color:#0b1b33;
  font-size:15px;
  font-weight:600;
}
.form-step .form-group{ margin-bottom:22px; }
.form-step .form-control{
  height:54px;
  padding:0 18px;
  border:1px solid rgba(19,42,76,.16);
  border-radius:12px;
  background:#f4f7fb;
  color:#0b1b33;
  font-size:15px;
  box-shadow:none;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.form-step select.form-control{
  /* the native arrow differs per platform, so draw a consistent one */
  appearance:none;
  -webkit-appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23173158' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 18px center;
  cursor:pointer;
}
.form-step .form-control:focus{
  border-color:#173158;
  background:#fff;
  box-shadow:0 0 0 3px rgba(23,49,88,.15);
}
.form-step .form-control.is-invalid{
  border-color:#c0392b;
  background:#fff;
}

.fs-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:58px;
  margin-top:6px;
  border:0;
  border-radius:14px;
  background:#173158;
  color:#fff;
  font-size:16px;
  font-weight:600;
  transition:background .3s ease, transform .3s ease;
}
.fs-submit:hover{
  background:#0b1b33;
  color:#fff;
  transform:translateY(-2px);
}

/* ---- the thank-you state ---- */
.fs-card--done{
  max-width:720px;
  text-align:center;
  padding:56px 46px 48px;
}
.fs-card--done h1{
  margin:0 0 14px;
  color:#0b1b33;
  font-size:38px;
  font-weight:700;
  letter-spacing:-1px;
}
.fs-card--done p{
  margin:0 0 10px;
  color:#5e6a7d;
  font-size:16px;
  line-height:1.7;
}
.fs-card--done .fs-meta{ font-size:14.5px; margin-bottom:26px; }
.fs-card--done .fs-meta a{ color:#173158; font-weight:600; text-decoration:none; }
.fs-card--done .btn-wrapper{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}
/* CSS-drawn tick, so the confirmation never waits on an icon font */
.fs-tick{
  display:block;
  width:64px;
  height:64px;
  margin:0 auto 22px;
  border-radius:50%;
  background:rgba(23,49,88,.08);
  position:relative;
}
.fs-tick::after{
  content:"";
  position:absolute;
  left:50%;
  top:46%;
  width:12px;
  height:22px;
  margin:-13px 0 0 -6px;
  border:solid #173158;
  border-width:0 3px 3px 0;
  transform:rotate(45deg);
}

@media (max-width:991px){
  .form-step{ padding:150px 0 70px; }
  .form-step h1{ font-size:34px; }
  .fs-card{ padding:34px 24px 30px; border-radius:22px; }
  .fs-card::before{ inset:9px; border-radius:15px; }
  .fs-card--done{ padding:40px 24px 36px; }
  .fs-card--done h1{ font-size:29px; }
}

/* Contact lines on the thank-you page. */
.fs-contact{
  list-style:none;
  margin:22px 0 30px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 30px;
}
.fs-contact li{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:15.5px;
  color:#0b1b33;
}
.fs-contact i{ color:#173158; font-size:15px; }
.fs-contact a{
  color:#0b1b33;
  font-weight:600;
  text-decoration:none;
  transition:color .25s ease;
}
.fs-contact a:hover{ color:#173158; }

.fs-card--done h1 span{ color:#173158; }

@media (max-width:575px){
  .fs-contact{ gap:10px 0; }
  .fs-contact li{ width:100%; justify-content:center; }
}

/* Pages that open without a dark banner behind the header (form-step,
   thankyou). The bar is white-on-transparent until .sticky lands on scroll,
   so on a pale page the logo and nav were invisible on arrival. Give the bar
   its own navy ground from the first paint; the sticky state still takes over
   on scroll exactly as it does elsewhere. */
.page-plain header{
  top:0;
  background:#0b1b33;
  padding:12px 0;
}
.page-plain header.sticky{
  padding:0;
}

/* Banner heading: 52px on every page except the home page.
   style.css declares .banner-content h1 three times (52px, 60px, 60px) and the
   last one wins, so the whole site was rendering at 60px.
   Confined to min-width:1400px on purpose - responsive.css steps this heading
   down to 38/34/30/26/22px below that, and this selector is specific enough to
   have overridden every one of those steps. */
@media (min-width:1400px){
  body:not(.page-home) .banner-content h1{
    font-size:52px;
    line-height:1.15;
  }
}

/* ============================================================
   BANNER FIT ON SHORT SCREENS
   The banner asks for 100vh, but its own contents are taller than that on a
   typical laptop: at 1896x808 the quote card measured 654px and the banner
   padding 150+60, totalling 864px. The 56px of overflow pushed the button row
   below the fold, so the buttons only appeared once you scrolled.
   Keyed to viewport height rather than trimmed by a fixed amount, so it
   corrects itself across screen sizes instead of being right on only one.
   ============================================================ */

@media (min-width:992px) and (max-height:920px){
  section.banner.home-banner{
    padding-top:104px;
    padding-bottom:38px;
  }
  /* an 80px push that fought the flex centring and cost a whole button row */
  section.banner.home-banner .banner-content{
    margin-top:0;
  }
  .banner-form{
    padding:32px 34px 28px;
  }
  .banner-form .form-group{
    margin-bottom:12px;
  }
  .banner-form .btn-purple{
    height:54px;
  }
}

/* Shorter still - netbooks and split screens. */
@media (min-width:992px) and (max-height:760px){
  section.banner.home-banner{
    padding-top:96px;
    padding-bottom:30px;
  }
  .banner-form{
    padding:24px 30px 22px;
  }
  .banner-form .form-control{
    height:46px;
  }
  .banner-form textarea.form-control{
    height:74px;
  }
}

/* Below 760px of viewport height the quote card is no longer the tallest
   column - the copy is. Tighten its internal spacing so the button row stays
   above the fold on short laptop screens too. */
@media (min-width:992px) and (max-height:760px){
  section.banner.home-banner .banner-content p{
    margin-bottom:14px;
  }
  .banner-content .banner-lead{
    margin-bottom:8px;
  }
  .banner-content .promise-points{
    margin:0 0 18px;
  }
  .banner-content .promise-points li{
    margin-bottom:9px;
  }
  section.banner.home-banner .banner-content h1{
    line-height:1.08;
    margin-bottom:10px;
  }
}

/* Home page banner heading. style.css declares .banner-content h1 three times
   (52/60/60) and the last wins, so this has to out-specify it: body.page-home
   is two classes to its one. */
@media (min-width:1400px){
  body.page-home .banner-content h1{
    color:rgb(255, 255, 255);
    font-size:64px;
    line-height:70px;
    font-weight:400;
    margin-bottom:15px;
  }
}

/* ============================================================
   BUTTON RADIUS - ONE VALUE EVERYWHERE
   Was: 50px on the main classes, but 16px on the banner and bottom form
   submits, 14px on the form-step submit, 12px on the contact submit and 10px
   in the tab panes. All of them are pills now.
   ============================================================ */

.banner-form .btn-purple,
.contact-bottom .contact-form .btn,
.contact-bottom .cb-form .btn-purple,
.et-actions .btn,
.fs-submit{
  border-radius:50px;
}

/* The tab rail buttons were still on 12px while everything else went to the
   50px pill. */
.et-tab{
  border-radius:50px;   /* the tab rail joins them */
}

/* Phones: collapsed bodies must not reserve space.
   The desktop panels keep .pa-body in flow at opacity 0 so it can fade -
   display:none cannot transition. There the collapsed head is height:100%, so
   the body falls outside the clipped box and costs nothing. Stacked on a phone
   the item is auto height, so each hidden body was still holding its full
   height: measured 238px and 234px for collapsed panels whose heads are only
   62px and 83px. No fade is needed here, so take them out of flow. */
@media (max-width:991px){
  .pa-body{
    display:none;
    opacity:1;
    transform:none;
    transition:none;
  }
  .pa-item.is-open .pa-body{
    display:block;
  }
}

/* section.cta is pulled up 255px so it tucks under the artwork above it. That
   figure is tuned for the desktop artwork; on a phone the same image is only
   245px tall, so the same pull dragged the covers 55px over the heading.
   Measured at 492px wide: image bottom 9698, heading top 9643. */
@media (max-width:991px){
  section.cta{
    margin-top:-110px;
    padding:150px 0 40px;
  }
}
@media (max-width:575px){
  section.cta{
    margin-top:-80px;
    padding:130px 0 36px;
  }
}

/* ============================================================
   MOBILE MENU - SLIDES IN FROM THE LEFT
   Bootstrap's collapse drops the menu down under the header. On a phone that
   pushes the page around; a panel off the left edge keeps the page still.
   The collapse still drives it - only .show is styled - so the toggler,
   aria state and dropdowns all keep working as they are.
   ============================================================ */

@media (max-width:991px){
  .navbar-collapse{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    z-index:1050;
    width:min(320px, 84vw);
    height:100% !important;
    padding:88px 22px 28px;
    background:#0b1b33;
    box-shadow:14px 0 40px -20px rgba(0,0,0,.7);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    /* Bootstrap hides a closed collapse with display:none, which would kill the
       slide. Kept displayed and moved off-screen instead. */
    display:block !important;
    visibility:hidden;
    transform:translateX(-100%);
    transition:transform .38s cubic-bezier(.4,0,.2,1), visibility 0s linear .38s;
  }
  .navbar-collapse.show,
  .navbar-collapse.collapsing{
    visibility:visible;
    transition:transform .38s cubic-bezier(.4,0,.2,1), visibility 0s;
  }
  .navbar-collapse.show{
    transform:translateX(0);
  }

  /* the toggler has to stay above the panel so it can close it again */
  .navbar-toggler{
    position:relative;
    z-index:1060;
  }

  /* links stack down the panel */
  #navbarSupportedContent .navbar-nav{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    margin:0 0 22px !important;
    width:100%;
  }
  #navbarSupportedContent .nav-item{ width:100%; }
  #navbarSupportedContent .nav-link{
    display:block;
    width:100%;
    padding:12px 4px;
    border-bottom:1px solid rgba(255,255,255,.10);
    color:#fff !important;
    font-size:16px;
  }
  #navbarSupportedContent .dropdown-menu{
    background:rgba(255,255,255,.06) !important;
    margin:0 0 6px !important;
  }
  #navbarSupportedContent .dropdown-item{
    padding:10px 12px;
    color:rgba(255,255,255,.85) !important;
    font-size:15px;
  }
  #navbarSupportedContent .form-inline ul{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
    padding:0;
    margin:0;
    list-style:none;
  }
  #navbarSupportedContent .form-inline .btn{
    display:block;
    width:100%;
    text-align:center;
  }

  /* dimmed page behind the panel */
  .nav-backdrop{
    position:fixed;
    inset:0;
    z-index:1040;
    background:rgba(11,27,51,.55);
    opacity:0;
    visibility:hidden;
    transition:opacity .38s ease, visibility 0s linear .38s;
  }
  .nav-backdrop.is-on{
    opacity:1;
    visibility:visible;
    transition:opacity .38s ease, visibility 0s;
  }
  /* the page must not scroll behind an open panel */
  body.nav-open{ overflow:hidden; }
}

/* The panel lives inside <header>, and header sits at z-index:10 - so the
   panel's own 1050 counts only inside that stacking context, and the backdrop
   at 1040 on <body> landed on top of the whole thing. Every tap hit the
   backdrop and closed the menu instead of following the link. Lift the header
   above the backdrop while the panel is open. */
body.nav-open header{
  z-index:1060;
}