:root{
  /* Claude-style paper background */
  --cream:#faf9f5;
  --cream-2:#f0eee6;
  --cream-3:#e8e5da;

  /* Ink + brand */
  --ink:#0f2647;
  --navy:#163a63;
  --navy-deep:#0b2039;
  --red:#b31312;
  --red-soft:#c9262a;
  --gold:#c08b34;

  --body:#55606f;
  --muted:#7b8494;
  --line:rgba(15,38,71,.11);
  --shadow-sm:0 2px 8px rgba(15,38,71,.06);
  --shadow-md:0 14px 40px -18px rgba(15,38,71,.28);
  --shadow-lg:0 40px 90px -36px rgba(15,38,71,.42);
  --radius:18px;
}

*{ -webkit-font-smoothing:antialiased; }

body{
  background:var(--cream);
  color:var(--body);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,.display-serif{
  font-family:'Playfair Display',Georgia,serif;
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.01em;
}

a{ text-decoration:none; }

::selection{ background:rgba(179,19,18,.14); }

/* ---------- Shared bits ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.75rem;
  font-family:'Inter',sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--red);
}
.eyebrow::before{
  content:""; width:34px; height:2px; background:var(--gold); display:block;
}
.eyebrow.center{ justify-content:center; }

.section{ padding:96px 0; }
.section-head{ max-width:720px; }
.section-head.center{ margin:0 auto; text-align:center; }
.section-head h2{
  font-size:clamp(2rem,3.6vw,3rem); line-height:1.15; margin:1rem 0 1rem;
}
.section-head p{ color:var(--muted); font-size:1.05rem; margin-bottom:0; }
.accent{ color:var(--red); }
.text-gold{ color:var(--gold); }

.btn-hm{
  --bs-btn-focus-shadow-rgb:179,19,18;
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Inter',sans-serif; font-size:.78rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.95rem 1.9rem; border-radius:999px;
  transition:all .25s ease; border:1.5px solid transparent;
}
.btn-hm-solid{ background:var(--red); color:#fff; box-shadow:0 12px 26px -12px rgba(179,19,18,.75); }
.btn-hm-solid:hover{ background:#9c100f; color:#fff; transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(179,19,18,.8); }
.btn-hm-ghost{ border-color:rgba(15,38,71,.28); color:var(--ink); background:transparent; }
.btn-hm-ghost:hover{ border-color:var(--ink); background:var(--ink); color:#fff; transform:translateY(-2px); }
.btn-hm-light{ background:#fff; color:var(--ink); box-shadow:var(--shadow-md); }
.btn-hm-light:hover{ background:var(--cream-2); color:var(--ink); transform:translateY(-2px); }

/* ---------- Utility bar ---------- */
.topbar{
  background:var(--navy-deep); color:rgba(255,255,255,.72);
  font-size:.78rem; letter-spacing:.02em;
}
.topbar a{ color:rgba(255,255,255,.72); transition:color .2s; }
.topbar a:hover{ color:#fff; }
.topbar .sep{ color:rgba(255,255,255,.25); }
.topbar i{ color:var(--gold); }

/* ---------- Navbar ---------- */
.hm-nav{
  background:rgba(250,249,245,.88);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  padding:.6rem 0;
  transition:box-shadow .3s, background .3s;
}
.hm-nav.scrolled{ background:rgba(250,249,245,.97); box-shadow:0 10px 30px -22px rgba(15,38,71,.55); }
.hm-brand{ display:flex; align-items:center; gap:.85rem; }
.hm-brand img{ height:54px; width:auto; }
.hm-brand .bt{ line-height:1.1; }
.hm-brand .bt strong{
  font-family:'Playfair Display',serif; font-size:1.42rem; font-weight:700;
  color:var(--ink); display:block; letter-spacing:-.015em;
}
.hm-brand .bt span{
  font-family:'Inter',sans-serif; font-size:.62rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--red);
}
.hm-nav .nav-link{
  font-size:.83rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink); padding:.6rem .95rem !important; position:relative;
}
.hm-nav .nav-link:hover,.hm-nav .nav-link.active{ color:var(--red); }
.hm-nav .nav-item.current > .nav-link::after{
  content:""; position:absolute; left:.95rem; right:.95rem; bottom:.15rem;
  height:2px; background:var(--gold);
}
.hm-nav .dropdown-menu{
  border:1px solid var(--line); border-radius:14px; padding:.5rem;
  box-shadow:var(--shadow-md); background:#fff; margin-top:.55rem;
  font-size:.86rem; min-width:260px;
}
.hm-nav .dropdown-item{ border-radius:9px; padding:.55rem .8rem; color:var(--body); font-weight:500; }
.hm-nav .dropdown-item:hover{ background:var(--cream-2); color:var(--red); }
.nav-cta{
  font-size:.73rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  background:var(--red); color:#fff; padding:.8rem 1.5rem; border-radius:999px;
  box-shadow:0 12px 24px -14px rgba(179,19,18,.85); transition:all .25s;
}
.nav-cta:hover{ background:#9c100f; color:#fff; transform:translateY(-2px); }
.navbar-toggler{ border-color:var(--line); }
.navbar-toggler:focus{ box-shadow:none; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--cream);
}
.hero-carousel{ position:relative; }

/* every slide carries its own image and copy, and slides as one piece */
.hero-slide{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:760px; padding:86px 0 270px;
  background:var(--cream);
}

/* layer 0 — the picture, edge to edge */
.hero-media{
  position:absolute; inset:0; z-index:0;
  transform-origin:70% 50%; will-change:transform;
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:cover; object-position:78% center;
}
/* holds, then zooms up to 125% before the next slide arrives */
.hero-carousel .carousel-item.active .hero-media{ animation:heroZoom 6s ease-in-out forwards; }
@keyframes heroZoom{
  0%, 30% { transform:scale(1); }
  100%    { transform:scale(1.25); }
}

/* layer 1 — the copy, always on top and hugging the left edge of the screen */
.hero-slide-body{ position:relative; z-index:5; }
.hero-slide-body,
.hero-foot-body{ padding-left:clamp(1rem,4vw,4.5rem); padding-right:clamp(1rem,4vw,4.5rem); }
.hero-copy{ position:relative; z-index:5; text-align:left; }
.hero-copy,
.hero-foot-body .col-lg-7{ max-width:780px; }
.hero-title{
  font-size:clamp(2.1rem,4vw,3.7rem); line-height:1.04; margin:1.4rem 0 1.3rem;
  letter-spacing:-.015em; text-transform:uppercase; color:var(--ink);
}
.hero-title .line2{ display:block; color:var(--red); }
.hero-lead{ font-size:1.08rem; color:var(--body); max-width:31em; margin-bottom:0; }
.hero-cta{ margin-top:2.3rem; }

/* fixed footer of the hero: stats + slide controls, above every slide */
.hero-foot{
  position:absolute; left:0; right:0; bottom:104px; z-index:10;
  pointer-events:none;
}
.hero-foot .hero-stats,
.hero-foot .hero-controls{ pointer-events:auto; }
.hero-stats{
  display:flex; flex-wrap:wrap; gap:2.6rem;
  border-top:1px solid var(--line); padding-top:1.4rem; max-width:34rem;
}
.hero-stats .lbl{
  font-size:.63rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:.3rem;
}
.hero-stats .val{
  font-family:'Playfair Display',serif; font-size:1.22rem; font-weight:600; color:var(--ink);
}

.hero-controls{ display:flex; align-items:center; gap:1rem; margin-top:1.4rem; }
.hero-arrow{
  width:40px; height:40px; border-radius:999px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(15,38,71,.22); background:rgba(255,255,255,.7); color:var(--ink);
  transition:all .25s ease;
}
.hero-arrow:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
/* Bootstrap's indicators, restyled as the gold pill dots */
.hero-carousel .hero-dots{
  position:static; margin:0; padding:0; justify-content:flex-start; gap:.5rem;
}
.hero-carousel .hero-dots [data-bs-target]{
  width:9px; height:9px; border-radius:999px; border:0; padding:0; margin:0;
  background:rgba(15,38,71,.22); opacity:1; text-indent:0; flex:0 0 auto;
  transition:all .3s;
}
.hero-carousel .hero-dots .active{ width:26px; background:var(--gold); }

@media (prefers-reduced-motion:reduce){
  .hero-carousel .carousel-item.active .hero-media{ animation:none; }
}

/* feature strip */
.feature-strip{
  position:relative; z-index:6; margin-top:-72px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-md); overflow:hidden;
}
.feature-strip .fs-item{
  padding:1.9rem .6rem; text-align:center; border-right:1px solid var(--line);
  transition:background .25s;
}
.feature-strip .fs-item:last-child{ border-right:0; }
.feature-strip .fs-item:hover{ background:var(--cream); }
.feature-strip i{ font-size:1.55rem; color:var(--red); display:block; margin-bottom:.65rem; }
.feature-strip .fs-item:nth-child(even) i{ color:var(--navy); }
.feature-strip span{
  font-size:.78rem; font-weight:600; color:var(--ink); line-height:1.35; display:block;
}

/* ---------- Why cards ---------- */
.why-card{
  height:100%; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:2.1rem 1.85rem; transition:transform .3s, box-shadow .3s, border-color .3s;
}
.why-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(15,38,71,.18); }
.why-ico{
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  background:var(--cream-2); color:var(--navy); font-size:1.35rem; margin-bottom:1.25rem;
}
.why-card:hover .why-ico{ background:var(--red); color:#fff; }
.why-card h5{ font-size:1.18rem; margin-bottom:.6rem; }
.why-card p{ font-size:.94rem; color:var(--muted); margin-bottom:0; }

/* ---------- Products ---------- */
.band-cream{ background:var(--cream-2); }
.prod-card{
  height:100%; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.9rem 1.7rem; position:relative; overflow:hidden;
  transition:transform .3s, box-shadow .3s;
}
.prod-card::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--red); transform:scaleY(0); transform-origin:top; transition:transform .35s;
}
.prod-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.prod-card:hover::after{ transform:scaleY(1); }
.prod-num{
  font-family:'Playfair Display',serif; font-size:.95rem; color:var(--gold);
  font-weight:700; letter-spacing:.05em;
}
.prod-card h5{ font-size:1.12rem; margin:.45rem 0 .55rem; }
.prod-card p{ font-size:.92rem; color:var(--muted); margin-bottom:0; }

/* ---------- Products · price-table cards (home) ---------- */
.pcard{
  --tone:var(--red);
  display:flex; flex-direction:column; height:100%;
  background:#fff; border-radius:16px; overflow:hidden; text-decoration:none;
  box-shadow:0 18px 40px -22px rgba(15,38,71,.30), 0 2px 6px rgba(15,38,71,.05);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
/* one footer colour per product — all AA contrast with white text */
.pcard-c1{ --tone:#b31312; }  /* brand red */
.pcard-c2{ --tone:#163a63; }  /* navy */
.pcard-c3{ --tone:#2a2f38; }  /* charcoal */
.pcard-c4{ --tone:#0f6b6b; }  /* teal */
.pcard-c5{ --tone:#7a2048; }  /* wine */
.pcard-c6{ --tone:#8a5a14; }  /* bronze */
.pcard-c7{ --tone:#2f6b3a; }  /* forest */
.pcard-c8{ --tone:#3d4f8f; }  /* indigo */
.pcard-c9{ --tone:#b04a12; }  /* burnt orange */
.pcard:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }

.pcard-top{ flex:1; padding:2.2rem 1.9rem 2.4rem; text-align:center; }
.pcard-name{
  font-family:'Inter',sans-serif; font-weight:300; letter-spacing:-.01em;
  font-size:1.65rem; line-height:1.2; color:var(--tone); margin:0 0 1.5rem;
}
.pcard-list{
  list-style:none; padding:0; margin:0 auto; display:inline-block; text-align:left;
}
.pcard-list li{
  display:flex; align-items:flex-start; gap:.8rem;
  font-size:.86rem; line-height:1.45; color:var(--muted); padding:.5rem 0;
}
.pcard-list i{ color:#2e8b3e; font-size:1.05rem; line-height:1.3; flex-shrink:0; }

.pcard-foot{
  position:relative; background:var(--tone); color:#fff; text-align:center;
  padding:1.7rem 1.5rem 1.6rem; display:flex; flex-direction:column; align-items:center;
}
/* serrated edge where the white top meets the coloured footer */
.pcard-foot::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height:11px;
  background:var(--tone);
  -webkit-mask:conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 20px 100%;
          mask:conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 20px 100%;
}
.pcard-amount{
  font-family:'Inter',sans-serif; font-weight:300; font-size:2.9rem;
  line-height:1.05; letter-spacing:-.02em;
}
.pcard-unit{ font-size:.86rem; font-weight:700; margin-top:.35rem; opacity:.95; }
.pcard-more{
  margin-top:.9rem; font-size:.7rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; opacity:.7; transition:opacity .25s;
}
.pcard-more i{ display:inline-block; margin-left:.3rem; transition:transform .25s; }
.pcard:hover .pcard-more{ opacity:1; }
.pcard:hover .pcard-more i{ transform:translateX(4px); }

/* one horizontal track: cards sit side by side (all as tall as the tallest) and snap as you scroll.
   The padding/negative-margin pair gives the hover lift and shadows room without shifting the layout;
   .75rem matches the Bootstrap container gutter, so the track never pushes the page sideways. */
.pcard-row{
  --gap:1.75rem;
  display:grid; grid-auto-flow:column; gap:var(--gap);
  grid-auto-columns:85%;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:.75rem;
  padding:1rem .75rem 3rem; margin:-1rem -.75rem -2rem;
  scrollbar-width:none;
}
.pcard-row::-webkit-scrollbar{ display:none; }
.pcard-row:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; border-radius:16px; }
.pcard-slide{ scroll-snap-align:start; }
@media (min-width:768px){ .pcard-row{ grid-auto-columns:calc((100% - var(--gap)) / 2); } }
@media (min-width:992px){ .pcard-row{ grid-auto-columns:calc((100% - 2 * var(--gap)) / 3); } }

.pcard-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
@media (min-width:992px){ .pcard-actions{ justify-content:flex-end; } }
.pcard-arrows{ display:flex; gap:.6rem; }
.pcard-arrow{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(15,38,71,.28); background:transparent; color:var(--ink); font-size:1.1rem;
  transition:background .25s, color .25s, border-color .25s, opacity .25s;
}
.pcard-arrow:hover:not(:disabled){ background:var(--ink); border-color:var(--ink); color:#fff; }
.pcard-arrow:disabled{ opacity:.35; cursor:default; }

/* ---------- Services showcase ---------- */
.svc-card{
  position:relative; height:340px; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); display:block;
}
.svc-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.svc-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,32,57,.12) 0%,rgba(11,32,57,.55) 48%,rgba(11,32,57,.92) 100%);
}
.svc-card:hover img{ transform:scale(1.08); }
.svc-body{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:1.8rem 1.6rem; }
.svc-body .n{
  font-family:'Playfair Display',serif; color:var(--gold); font-size:.9rem; font-weight:700;
  letter-spacing:.06em; display:block; margin-bottom:.4rem;
}
.svc-body h4{ color:#fff; font-size:1.3rem; margin-bottom:.45rem; }
.svc-body p{ color:rgba(255,255,255,.75); font-size:.9rem; margin-bottom:0; }

/* ---------- Stats band ---------- */
.stats-band{
  background:var(--navy-deep); color:#fff; position:relative; overflow:hidden;
}
.stats-band::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:26px 26px;
}
.stat-item{ position:relative; z-index:2; text-align:center; padding:1rem .5rem; }
.stat-item .num{
  font-family:'Playfair Display',serif; font-size:clamp(2.1rem,4vw,2.9rem);
  font-weight:600; color:#fff; line-height:1;
}
.stat-item .num small{ color:var(--gold); }
.stat-item .lbl{
  font-size:.72rem; letter-spacing:.17em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin-top:.7rem; display:block;
}

/* ---------- FAQ ---------- */
.faq-accordion .accordion-item{
  background:#fff; border:1px solid var(--line); border-radius:14px !important;
  margin-bottom:.85rem; overflow:hidden;
}
.faq-accordion .accordion-button{
  background:#fff; color:var(--ink); font-weight:600; font-size:1rem;
  padding:1.25rem 1.4rem; box-shadow:none;
}
.faq-accordion .accordion-button:not(.collapsed){ background:var(--cream-2); color:var(--red); }
.faq-accordion .accordion-button:focus{ box-shadow:none; border-color:transparent; }
.faq-accordion .accordion-button:not(.collapsed)::after{
  filter:grayscale(1) brightness(.55) sepia(1) saturate(6) hue-rotate(-18deg);
}
.faq-accordion .accordion-body{
  padding:0 1.4rem 1.4rem; color:var(--muted); font-size:.95rem;
}

/* ---------- Call back ---------- */
.callback{
  background:linear-gradient(135deg,var(--navy-deep) 0%,#16385d 60%,#1d4670 100%);
  border-radius:26px; padding:clamp(2.2rem,4vw,3.6rem); color:#fff; position:relative; overflow:hidden;
}
.callback::before{
  content:""; position:absolute; right:-90px; top:-90px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle,rgba(192,139,52,.28),transparent 65%);
}
.callback h2{ color:#fff; font-size:clamp(1.8rem,3vw,2.5rem); }
.callback p{ color:rgba(255,255,255,.7); }
.callback .eyebrow{ color:var(--gold); }
.callback .eyebrow::before{ background:rgba(255,255,255,.4); }
.cb-form{ position:relative; z-index:2; }
.cb-form .form-control,.cb-form .form-select{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  color:#fff; border-radius:12px; padding:.9rem 1.1rem; font-size:.95rem;
}
.cb-form .form-control::placeholder{ color:rgba(255,255,255,.45); }
.cb-form .form-control:focus,.cb-form .form-select:focus{
  background:rgba(255,255,255,.12); border-color:var(--gold); box-shadow:none; color:#fff;
}
.cb-form .form-select option{ color:#12263f; }
.contactus-result{ color:var(--gold); font-size:.9rem; margin:1rem 0 0; }

/* home page: wider card with the product image between the title and the form */
.cb-wrap{ padding-left:clamp(1rem,4vw,4.5rem); padding-right:clamp(1rem,4vw,4.5rem); }
.callback-wide{ padding:0 clamp(1.4rem,3vw,3rem); }
.cb-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.1fr) minmax(0,1fr);
  column-gap:clamp(1.2rem,2vw,2.2rem);
}
.cb-copy, .cb-side{ align-self:center; padding:clamp(2.2rem,3.4vw,3.2rem) 0; }
.callback-wide h2{ font-size:clamp(1.7rem,2.3vw,2.4rem); }
/* full height of the card: nothing above or below the picture */
.cb-visual{ align-self:stretch; display:flex; align-items:flex-end; justify-content:center; min-height:0; }
.cb-visual picture{ display:block; width:100%; height:100%; }
.cb-visual img{
  display:block; width:100%; height:100%;
  object-fit:contain; object-position:center bottom;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));
}
.callback-wide .cb-form .col-md-6{ flex:0 0 100%; max-width:100%; }

@media (max-width:1199.98px){
  /* stack: title, picture, form */
  .cb-grid{ grid-template-columns:1fr; }
  .cb-copy{ padding-bottom:1.6rem; }
  .cb-side{ padding-top:1.6rem; }
  .cb-visual{ margin:0 calc(-1 * clamp(1.4rem,3vw,3rem)); }
  .cb-visual picture, .cb-visual img{ height:auto; }
  .callback-wide .cb-form .col-md-6{ flex:0 0 auto; width:50%; max-width:50%; }
}
@media (max-width:767.98px){
  .callback-wide .cb-form .col-md-6{ width:100%; max-width:100%; }
}

/* ---------- Footer ---------- */
.hm-footer{ background:var(--navy-deep); color:rgba(255,255,255,.62); padding-top:76px; font-size:.92rem; }
.hm-footer h6{
  color:#fff; font-family:'Inter',sans-serif; font-size:.76rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; margin-bottom:1.3rem;
}
.hm-footer a{ color:rgba(255,255,255,.62); transition:color .2s; }
.hm-footer a:hover{ color:var(--gold); }
.hm-footer .f-brand img{ height:60px; }
.hm-footer .f-brand strong{
  font-family:'Playfair Display',serif; color:#fff; font-size:1.3rem; display:block;
}
.hm-footer .f-brand span{ font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.hm-footer ul{ list-style:none; padding:0; margin:0; }
.hm-footer ul li{ margin-bottom:.6rem; }
.f-social a{
  width:38px; height:38px; border-radius:50%; display:inline-grid; place-items:center;
  border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.72); margin-right:.5rem;
  transition:all .25s;
}
.f-social a:hover{ background:var(--gold); border-color:var(--gold); color:var(--navy-deep); }
.f-map{ border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.12); line-height:0; }
.f-map iframe{ width:100%; height:190px; border:0; filter:grayscale(.35) contrast(1.05); }
.f-bottom{
  border-top:1px solid rgba(255,255,255,.1); margin-top:56px; padding:1.4rem 0;
  font-size:.8rem; color:rgba(255,255,255,.45);
}
.f-bottom a{ color:rgba(255,255,255,.55); }

/* ---------- Chatbot ---------- */
.chatbot-container{ position:fixed; bottom:22px; right:22px; z-index:9999; }
.chatbot-icon{
  background:var(--red); color:#fff; font-size:24px; width:60px; height:60px;
  display:grid; place-items:center; border-radius:50%; cursor:pointer;
  box-shadow:0 14px 30px -10px rgba(179,19,18,.7); transition:transform .3s;
}
.chatbot-icon:hover{ transform:scale(1.07); }
.chatbot-box{
  display:none; width:340px; max-width:calc(100vw - 44px); background:#fff;
  border-radius:18px; box-shadow:var(--shadow-lg); overflow:hidden; border:1px solid var(--line);
}
.chatbot-header{
  background:var(--navy-deep); color:#fff; padding:.95rem 1.1rem;
  display:flex; align-items:center; justify-content:space-between;
}
.chatbot-header h4{ font-size:.95rem; color:#fff; margin:0; font-family:'Inter',sans-serif; font-weight:600; }
.chatbot-header span{ cursor:pointer; font-size:1.5rem; line-height:1; color:rgba(255,255,255,.7); }
.chatbot-body{ padding:1rem; }
.chatbot-body > p{ font-size:.9rem; color:var(--muted); }
.chat-log{ max-height:260px; overflow-y:auto; font-size:.9rem; margin-bottom:.75rem; }
.chat-log div{ margin-bottom:.5rem; }
.chat-msg{ padding:.5rem .7rem; border-radius:10px; line-height:1.5; word-wrap:break-word; }
.chat-msg b{ font-weight:600; }
.chat-you{ background:#f1f4f8; color:var(--ink); }
.chat-you b{ color:var(--navy); }
.chat-ai{ background:#fdf2f2; color:var(--ink); }
.chat-ai b{ color:var(--red); }
.chat-typing{ opacity:.65; font-style:italic; }
.chatbot-body #send-btn:disabled{ background:#c9a0a0; cursor:default; }
.chatbot-body textarea{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:.6rem .8rem;
  font-size:.9rem; resize:none; height:70px; outline:none;
}
.chatbot-body textarea:focus{ border-color:var(--navy); }
.chatbot-body #send-btn{
  width:100%; margin-top:.6rem; background:var(--red); color:#fff; border:0;
  border-radius:10px; padding:.6rem; font-size:.85rem; font-weight:600; letter-spacing:.05em;
}
.chatbot-body #send-btn:hover{ background:#9c100f; }

/* ---------- Back to top ---------- */
.to-top{
  position:fixed; left:22px; bottom:22px; z-index:9990;
  width:44px; height:44px; border-radius:50%; display:none; place-items:center;
  background:var(--ink); color:#fff; box-shadow:var(--shadow-md); border:0;
}
.to-top.show{ display:grid; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */

@media (max-width:1199.98px){
  .hm-nav .dropdown-menu{ box-shadow:none; border:0; background:transparent; padding-left:.6rem; }
  .hm-nav .nav-item.current > .nav-link::after{ display:none; }
  .hm-nav .navbar-collapse{ padding-bottom:.75rem; }
}
@media (max-width:991.98px){
  /* copy stays left-aligned on top of the picture */
  .hero-slide{ min-height:0; padding:52px 0 250px; }
  .hero-img{ object-position:66% center; }
  .hero-media{ transform-origin:60% 75%; }
  .hero-cta{ justify-content:flex-start !important; }
  /* stats and controls drop below the slides instead of floating over the picture */
  .hero-foot{ position:relative; bottom:auto; background:var(--cream-2); padding:1.4rem 0 80px; }
  .hero-stats{ gap:1.2rem 2rem; border-top:0; padding-top:0; }
  .feature-strip{ margin-top:-46px; }
  .feature-strip .fs-item{ border-right:0; border-bottom:1px solid var(--line); }
  .section{ padding:70px 0; }
}
@media (max-width:575.98px){
  .hero-slide{ padding:40px 0 210px; }
  .hero-title{ font-size:clamp(1.85rem,8.4vw,2.3rem); }
  .hero-lead{ font-size:1rem; }
  .hero-stats{ gap:1rem 1.6rem; }
  .hero-stats .val{ font-size:1.05rem; }
  .btn-hm{ padding:.85rem 1.5rem; }
}

/* =========================================================
   INNER PAGES
   ========================================================= */

/* ---------- Page hero / breadcrumb banner ---------- */
.page-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%);
  border-bottom:1px solid var(--line);
  padding:74px 0 66px;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(15,38,71,.10) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(120% 90% at 88% 30%,#000,transparent 62%);
  -webkit-mask-image:radial-gradient(120% 90% at 88% 30%,#000,transparent 62%);
}
.page-hero::after{
  content:""; position:absolute; top:-160px; right:-120px; width:460px; height:460px;
  background:radial-gradient(circle,rgba(192,139,52,.18),transparent 62%); pointer-events:none;
}
.page-hero .inner{ position:relative; z-index:2; max-width:780px; }
.page-hero h1{
  font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.1; letter-spacing:-.025em;
  margin:1.1rem 0 .9rem;
}
.page-hero p{ color:var(--body); font-size:1.05rem; max-width:34em; margin-bottom:0; }
.crumb{
  list-style:none; display:flex; flex-wrap:wrap; gap:.55rem; padding:0; margin:1.6rem 0 0;
  font-size:.78rem; letter-spacing:.06em; color:var(--muted);
}
.crumb a{ color:var(--muted); }
.crumb a:hover{ color:var(--red); }
.crumb li+li::before{ content:"/"; margin-right:.55rem; color:rgba(15,38,71,.25); }
.crumb li[aria-current]{ color:var(--ink); font-weight:600; }

/* ---------- Panels ---------- */
.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.7rem,3vw,2.8rem); box-shadow:var(--shadow-sm);
}
.panel-flush{ padding:0; overflow:hidden; }
.panel-tint{ background:var(--cream-2); border-color:transparent; box-shadow:none; }

/* ---------- Long-form prose ---------- */
.prose{ color:var(--body); font-size:1rem; line-height:1.85; }
.prose > :first-child{ margin-top:0; }
.prose > :last-child{ margin-bottom:0; }
.prose h1,.prose h2{ font-size:clamp(1.5rem,2.6vw,2rem); margin:2.4rem 0 1rem; line-height:1.25; }
.prose h3{ font-size:1.22rem; margin:2rem 0 .8rem; }
.prose h4,.prose h5{ font-size:1.06rem; margin:1.7rem 0 .6rem; }
.prose p{ margin-bottom:1.15rem; }
.prose strong,.prose b{ color:var(--ink); font-weight:600; }
.prose a{ color:var(--red); border-bottom:1px solid rgba(179,19,18,.3); }
.prose a:hover{ border-bottom-color:var(--red); }
.prose ul,.prose ol{ margin:0 0 1.25rem; padding-left:1.35rem; }
.prose li{ margin-bottom:.5rem; }
.prose ul li::marker{ color:var(--gold); }
.prose ol li::marker{ color:var(--gold); font-weight:600; }
.prose blockquote{
  margin:1.8rem 0; padding:1.1rem 0 1.1rem 1.6rem;
  border-left:3px solid var(--gold); color:var(--ink);
  font-family:'Playfair Display',serif; font-size:1.18rem; font-style:italic; line-height:1.6;
}
.prose hr{ border:0; border-top:1px solid var(--line); margin:2.4rem 0; }
.prose img{ max-width:100%; height:auto; border-radius:12px; }
.prose table{ width:100%; margin-bottom:1.4rem; }
.prose td,.prose th{ padding:.6rem .8rem; border-bottom:1px solid var(--line); }

/* drop-cap opener for editorial pages */
.prose.lead-cap > p:first-of-type::first-letter{
  font-family:'Playfair Display',serif; font-size:3.4rem; line-height:.86;
  float:left; margin:.28rem .6rem 0 0; color:var(--red); font-weight:600;
}

/* ---------- Sticky side rail ---------- */
.rail{ position:sticky; top:112px; }
.rail h6{
  font-size:.72rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1rem; font-family:'Inter',sans-serif;
}
.rail-nav{ list-style:none; padding:0; margin:0 0 2rem; }
.rail-nav li{ margin-bottom:.25rem; }
.rail-nav a{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.62rem .9rem; border-radius:10px; font-size:.9rem; font-weight:500;
  color:var(--body); border:1px solid transparent; transition:all .2s;
}
.rail-nav a:hover{ background:#fff; border-color:var(--line); color:var(--ink); }
.rail-nav a i{ opacity:0; transform:translateX(-4px); transition:all .2s; color:var(--red); }
.rail-nav a:hover i{ opacity:1; transform:none; }
.rail-nav a.active{ background:var(--ink); color:#fff; }
.rail-nav a.active i{ opacity:1; transform:none; color:var(--gold); }

.rail-card{
  background:var(--navy-deep); color:rgba(255,255,255,.72); border-radius:var(--radius);
  padding:1.7rem 1.5rem;
}
.rail-card h5{ color:#fff; font-size:1.1rem; margin-bottom:.6rem; }
.rail-card p{ font-size:.9rem; margin-bottom:1.2rem; }

/* ---------- Spec / fact rows ---------- */
.spec{ border-top:1px solid var(--line); }
.spec-row{
  display:grid; grid-template-columns:230px 1fr; gap:1.2rem;
  padding:1.05rem 0; border-bottom:1px solid var(--line);
}
.spec-row dt{
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0;
}
.spec-row dd{ margin:0; color:var(--ink); font-weight:500; }
@media (max-width:575.98px){
  .spec-row{ grid-template-columns:1fr; gap:.25rem; }
}

/* ---------- Leadership ---------- */
.leader-portrait{
  position:relative; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-md); background:var(--cream-2);
}
.leader-portrait img{ width:100%; display:block; aspect-ratio:4/5; object-fit:cover; object-position:top center; }
.leader-name{
  background:var(--navy-deep); color:#fff; padding:1.3rem 1.5rem;
}
.leader-name strong{
  display:block; font-family:'Playfair Display',serif; font-size:1.22rem; color:#fff; font-weight:600;
}
.leader-name span{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.pull-quote{
  font-family:'Playfair Display',serif; font-size:clamp(1.3rem,2.4vw,1.75rem);
  line-height:1.45; color:var(--ink); font-style:italic;
  padding-left:1.6rem; border-left:3px solid var(--gold); margin-bottom:2rem;
}
.pull-quote cite{
  display:block; margin-top:.8rem; font-family:'Inter',sans-serif; font-size:.75rem;
  font-style:normal; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

/* ---------- Value / numbered cards ---------- */
.value-card{
  height:100%; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem 1.6rem; transition:transform .3s, box-shadow .3s;
}
.value-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.value-card .n{
  font-family:'Playfair Display',serif; font-size:.9rem; font-weight:700;
  color:var(--gold); letter-spacing:.06em;
}
.value-card h5{ font-size:1.1rem; margin:.4rem 0 .5rem; }
.value-card p{ font-size:.93rem; color:var(--muted); margin-bottom:0; }

/* ---------- Light form card ---------- */
.form-card .form-control,.form-card .form-select{
  background:var(--cream); border:1px solid var(--line); color:var(--ink);
  border-radius:12px; padding:.9rem 1.1rem; font-size:.95rem;
}
.form-card .form-control::placeholder{ color:var(--muted); }
.form-card .form-control:focus,.form-card .form-select:focus{
  background:#fff; border-color:var(--navy); box-shadow:0 0 0 4px rgba(22,58,99,.08);
}
.form-card label{
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.45rem;
}
.form-note{
  font-size:.85rem; padding:.9rem 1.1rem; border-radius:12px;
  background:var(--cream-2); border-left:3px solid var(--gold); color:var(--ink);
}
.form-note.ok{ border-left-color:#2e7d52; }
.form-note.err{ border-left-color:var(--red); }

/* ---------- Contact tiles ---------- */
.contact-tile{
  height:100%; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.9rem 1.7rem; transition:transform .3s, box-shadow .3s;
}
.contact-tile:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.contact-tile i{ font-size:1.5rem; color:var(--red); }
.contact-tile h5{ font-size:1.08rem; margin:1rem 0 .5rem; }
.contact-tile p,.contact-tile a{ font-size:.94rem; color:var(--muted); margin-bottom:0; display:block; }
.contact-tile a:hover{ color:var(--red); }

/* ---------- Job / career card ---------- */
.job-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.job-head{
  padding:1.7rem 1.9rem; border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
}
.job-head h3{ font-size:1.35rem; margin:0; }
.job-tag{
  font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  background:var(--cream-2); color:var(--navy); padding:.4rem .85rem; border-radius:999px;
}
.job-body{ padding:1.9rem; }
.req-list{ list-style:none; padding:0; margin:0; }
.req-list li{
  display:flex; gap:.9rem; padding:.85rem 0; border-bottom:1px dashed var(--line);
  font-size:.95rem;
}
.req-list li:last-child{ border-bottom:0; }
.req-list i{ color:var(--gold); margin-top:.28rem; }
.req-list strong{ color:var(--ink); }

/* ---------- Misc ---------- */
.tint-band{ background:var(--cream-2); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }
.badge-soft{
  display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; padding:.4rem .8rem; border-radius:999px;
  background:var(--cream-2); color:var(--navy);
}
@media (max-width:991.98px){
  .page-hero{ padding:52px 0 46px; }
  .rail{ position:static; }
}

/* =========================================================
   LEARNING SECTION (workshop / programming hub)
   ========================================================= */

/* ---------- Pill tab navigation ---------- */
.pill-tabs{
  display:flex; flex-wrap:wrap; gap:.5rem; padding:.4rem;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  box-shadow:var(--shadow-sm); width:fit-content; max-width:100%;
}
.pill-tabs a{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.65rem 1.35rem; border-radius:999px;
  font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--body); transition:all .22s; white-space:nowrap;
}
.pill-tabs a:hover{ background:var(--cream-2); color:var(--ink); }
.pill-tabs a.active{ background:var(--ink); color:#fff; box-shadow:0 8px 18px -10px rgba(15,38,71,.7); }
.pill-tabs a.active i{ color:var(--gold); }
@media (max-width:575.98px){
  .pill-tabs{ width:100%; border-radius:16px; }
  .pill-tabs a{ flex:1 1 auto; justify-content:center; border-radius:12px; padding:.6rem .9rem; }
}

/* ---------- Benefit chips ---------- */
.benefit{
  display:flex; align-items:center; gap:.9rem;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:1rem 1.2rem; height:100%; transition:transform .3s, box-shadow .3s;
}
.benefit:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.benefit i{ font-size:1.25rem; color:var(--red); }
.benefit span{ font-size:.95rem; font-weight:500; color:var(--ink); }

/* ---------- Course cards ---------- */
.course-card{
  height:100%; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .3s, box-shadow .3s;
}
.course-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.course-media{ position:relative; }
.course-media img{ width:100%; display:block; aspect-ratio:16/10; object-fit:cover; }
.course-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,32,57,0) 40%,rgba(11,32,57,.82) 100%);
}
.course-level{
  position:absolute; z-index:2; left:1.4rem; bottom:1.1rem;
  font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:600; color:#fff;
  letter-spacing:.02em;
}
.course-body{ padding:1.7rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.course-price{
  display:flex; align-items:baseline; gap:.5rem; margin-bottom:1rem;
  padding-bottom:1rem; border-bottom:1px solid var(--line);
}
.course-price strong{
  font-family:'Playfair Display',serif; font-size:1.6rem; color:var(--ink); font-weight:600;
}
.course-price span{ font-size:.78rem; color:var(--muted); letter-spacing:.04em; }
.course-body > p{ font-size:.93rem; color:var(--muted); }
.course-feat{ list-style:none; padding:0; margin:1.1rem 0 1.6rem; }
.course-feat li{
  display:flex; align-items:flex-start; gap:.65rem; font-size:.92rem;
  color:var(--ink); padding:.4rem 0;
}
.course-feat i{ color:var(--gold); font-size:.95rem; margin-top:.25rem; }
.course-actions{ margin-top:auto; display:flex; flex-wrap:wrap; gap:.6rem; }
.course-actions .btn-hm{ padding:.8rem 1.3rem; font-size:.72rem; }

/* ---------- Terms / steps list ---------- */
.terms-list{ list-style:none; padding:0; margin:0; }
.terms-list li{ padding:1rem 0; border-bottom:1px dashed var(--line); }
.terms-list li:last-child{ border-bottom:0; }
.terms-list h6{
  font-family:'Inter',sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:.35rem;
}
.terms-list p{ font-size:.92rem; color:var(--muted); margin:0; }

/* ---------- Terms acceptance gate ---------- */
.accept-box{
  display:flex; align-items:flex-start; gap:.8rem;
  background:var(--cream-2); border-radius:12px; padding:1rem 1.2rem; margin:1.5rem 0;
}
.accept-box input{ width:1.15rem; height:1.15rem; margin-top:.15rem; accent-color:var(--red); flex:none; }
.accept-box label{ font-size:.93rem; color:var(--ink); margin:0; cursor:pointer; }

/* ---------- Success receipt ---------- */
.receipt{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(2rem,4vw,3.2rem); text-align:center; box-shadow:var(--shadow-md);
}
.receipt .tick{
  width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
  background:var(--cream-2); color:#2e7d52; font-size:2rem; margin:0 auto 1.4rem;
}
.receipt h2{ font-size:clamp(1.5rem,2.8vw,2.1rem); margin-bottom:.8rem; }
.receipt .regno{
  display:inline-block; margin:1.2rem 0; padding:.8rem 1.6rem; border-radius:12px;
  background:var(--navy-deep); color:#fff;
  font-family:'Playfair Display',serif; font-size:1.4rem;
}
.receipt .regno small{ display:block; font-family:'Inter',sans-serif; font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }

/* ---------- Video frame ---------- */
.video-frame{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-md); background:#000; line-height:0;
}
.video-frame iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }

/* ---------- Course book reader (workshop) ---------- */
.bv-meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-top:1.2rem;
}
.bv-meta > span{
  display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .9rem;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  font-size:.8rem; font-weight:500; color:var(--body);
}
.bv-meta i{ color:var(--red); }

.bv{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-md); overflow:hidden; outline:none;
}
.bv:focus-visible{ box-shadow:var(--shadow-md), 0 0 0 3px rgba(22,58,99,.28); }

.bv-bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  padding:.6rem .8rem; border-bottom:1px solid var(--line); background:#fff;
}
.bv-group{ display:flex; align-items:center; gap:.3rem; }
.bv-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-width:38px; height:38px; padding:0 .55rem;
  border:1px solid transparent; border-radius:10px; background:transparent;
  color:var(--ink); font-size:1rem; line-height:1; text-decoration:none;
  transition:background .2s, border-color .2s, color .2s;
}
.bv-btn:hover:not(:disabled){ background:var(--cream-2); color:var(--ink); }
.bv-btn:disabled{ opacity:.35; cursor:default; }
.bv-btn-text{ border-color:var(--line); font-size:.85rem; font-weight:600; padding:0 .9rem; }
.bv-zoomlabel{ min-width:58px; font-size:.82rem; font-weight:600; font-variant-numeric:tabular-nums; }

.bv-pageinfo{ display:flex; align-items:center; gap:.4rem; margin:0 .2rem; font-size:.88rem; color:var(--muted); }
.bv-pageinput{
  width:3.6rem; height:34px; padding:0 .4rem; text-align:center;
  border:1px solid var(--line); border-radius:8px; background:var(--cream);
  color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; -moz-appearance:textfield;
}
.bv-pageinput::-webkit-outer-spin-button,
.bv-pageinput::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.bv-pageinput:focus{ outline:none; border-color:var(--navy); background:#fff; }

.bv-stage{
  position:relative; display:flex; overflow:auto;
  height:clamp(460px, 80vh, 900px); background:var(--cream-3);
  overscroll-behavior:contain;
}
.bv-sheet{ margin:auto; display:flex; padding:clamp(12px,2vw,28px); transition:opacity .2s; }
.bv-page, .bv-cover{
  display:block; background:#fff; box-shadow:0 18px 40px -18px rgba(15,38,71,.45), 0 2px 6px rgba(15,38,71,.08);
}
.bv-cover{ height:calc(clamp(460px, 80vh, 900px) - 56px); width:auto; max-width:100%; object-fit:contain; }
/* the fold of an open book */
.bv-sheet.is-spread .bv-page:first-child{ box-shadow:inset -18px 0 24px -20px rgba(0,0,0,.25), 0 18px 40px -18px rgba(15,38,71,.45); }
.bv-sheet.is-spread .bv-page + .bv-page{ border-left:1px solid rgba(15,38,71,.08); }

.bv-status{
  position:absolute; left:50%; bottom:1.2rem; transform:translateX(-50%);
  display:flex; align-items:center; gap:.6rem; padding:.55rem 1rem;
  background:rgba(15,38,71,.88); color:#fff; border-radius:999px;
  font-size:.82rem; white-space:nowrap; pointer-events:none;
}
.bv-status a{ color:#fff; text-decoration:underline; pointer-events:auto; }
.bv.is-ready .bv-status{ display:none; }
.bv.is-error .bv-status{ display:flex; white-space:normal; text-align:center; max-width:calc(100% - 2rem); }
.bv.is-error .bv-spinner{ display:none; }
.bv.is-busy .bv-sheet{ opacity:.85; }
.bv-spinner{
  width:14px; height:14px; border-radius:50%; flex-shrink:0;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:bv-spin .8s linear infinite;
}
@keyframes bv-spin{ to{ transform:rotate(360deg); } }

/* preview strip under the pages */
.bv-note{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.4rem 1rem;
  padding:.7rem 1rem; border-top:1px solid var(--line); background:#fff; font-size:.84rem; color:var(--muted);
}
.bv-note i{ margin-right:.3rem; }
.bv-note a{ color:var(--red); font-weight:600; text-decoration:none; }
.bv-note a i{ margin:0 0 0 .3rem; transition:transform .25s; display:inline-block; }
.bv-note a:hover i{ transform:translateX(4px); }

/* shown after the last preview page */
.bv-end{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  width:min(440px, calc(100vw - 64px)); padding:clamp(1.8rem,4vw,2.8rem) clamp(1.4rem,3vw,2.4rem);
  background:#fff; border-radius:var(--radius); box-shadow:0 18px 40px -18px rgba(15,38,71,.45);
}
.bv-end-ico{ font-size:2.4rem; color:var(--red); line-height:1; margin-bottom:1rem; }
.bv-end h3{ font-size:1.6rem; margin-bottom:.6rem; }
.bv-end p{ font-size:.94rem; color:var(--body); margin-bottom:1.4rem; }
.bv-end .btn-hm i{ margin-right:.35rem; }
.bv-end-size{ margin-top:.6rem; font-size:.78rem; color:var(--muted); }
.bv-end-back{
  margin-top:1.2rem; border:0; background:none; padding:.3rem .6rem;
  font-size:.84rem; font-weight:600; color:var(--navy); border-radius:8px;
}
.bv-end-back:hover{ background:var(--cream-2); }

.bv:fullscreen{ display:flex; flex-direction:column; border-radius:0; border:0; }
.bv:fullscreen .bv-stage{ flex:1; height:auto; }
.bv:-webkit-full-screen{ display:flex; flex-direction:column; border-radius:0; border:0; width:100%; height:100%; }
.bv:-webkit-full-screen .bv-stage{ flex:1; height:auto; }

@media (max-width:575.98px){
  .bv-bar{ justify-content:center; }
  .bv-zoomgroup{ display:none; }
  .bv-btn-text span{ display:none; }
  .bv-stage{ height:auto; min-height:420px; aspect-ratio:504/740; max-height:82vh; }
  .bv-cover{ height:auto; width:100%; }
}

/* ---------- Problem list (programming hub) ---------- */
.cat-count{
  font-size:.68rem; font-weight:600; letter-spacing:.08em;
  background:var(--cream-2); color:var(--navy); padding:.15rem .55rem; border-radius:999px;
}
.rail-nav a.active .cat-count{ background:rgba(255,255,255,.16); color:#fff; }
.problem-item{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  margin-bottom:.85rem; overflow:hidden;
}
.problem-item .accordion-button{
  background:#fff; color:var(--ink); font-weight:500; font-size:.97rem;
  padding:1.15rem 1.4rem; box-shadow:none; align-items:flex-start; line-height:1.65;
}
.problem-item .accordion-button:not(.collapsed){ background:var(--cream-2); color:var(--ink); }
.problem-item .accordion-button:focus{ box-shadow:none; }
.problem-item .accordion-button .pnum{
  font-family:'Playfair Display',serif; color:var(--gold); font-weight:700;
  margin-right:.9rem; flex:none;
}
/* the question itself — plain text or a scanned sheet — is the flex child
   that fills the header, so it must be allowed to shrink (min-width:0) */
.problem-item .accordion-button .q-body{ flex:1 1 0%; min-width:0; }
.problem-item .accordion-button .q-figure{ display:block; }
/* a definite flex basis above means this percentage has something real to
   resolve against — with a content-sized basis the scan collapsed to nothing */
.problem-item .accordion-button .q-figure img{
  display:block; width:auto; max-width:100%; height:auto;
  background:#fff; border:1px solid var(--line); border-radius:8px;
}
/* keep the chevron off the artwork now that the body claims the free space */
.problem-item .accordion-button::after{ margin-left:1rem; }
.problem-item .accordion-body{ padding:0 1.4rem 1.4rem; }
.soon{
  font-size:.9rem; color:var(--muted); background:var(--cream);
  border-left:3px solid var(--gold); border-radius:8px; padding:.85rem 1.1rem;
}

/* =========================================================
   FREE TOOLS (resume builder / leave letter)
   ========================================================= */

/* ---------- Tool intro strip ---------- */
.tool-steps{ display:flex; flex-wrap:wrap; gap:1rem; }
.tool-step{
  flex:1 1 200px; display:flex; align-items:flex-start; gap:.9rem;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.3rem;
}
.tool-step .n{
  flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); color:#fff; font-size:.8rem; font-weight:600;
}
.tool-step strong{ display:block; color:var(--ink); font-size:.95rem; font-weight:600; }
.tool-step span{ font-size:.85rem; color:var(--muted); }

/* ---------- Generic themed form (also styles JS-injected markup) ---------- */
.hm-form .form-section{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.5rem,2.6vw,2.2rem); margin-bottom:1.5rem;
}
.hm-form .section-title{
  font-family:'Playfair Display',serif; font-size:1.25rem; color:var(--ink); font-weight:600;
  padding-bottom:.9rem; margin:0 0 1.5rem; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:.7rem;
}
.hm-form .section-title i{ color:var(--red); font-size:1.05rem; }

.hm-form .form-row{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.25rem; margin-bottom:1rem;
}
.hm-form .form-row:last-child{ margin-bottom:0; }
@media (max-width:767.98px){ .hm-form .form-row{ grid-template-columns:1fr; } }

.hm-form .form-group{ display:flex; flex-direction:column; min-width:0; }
.hm-form .form-group label,
.hm-form label:not(.radio-option label){
  font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.45rem;
}
.hm-form input[type=text],
.hm-form input[type=email],
.hm-form input[type=tel],
.hm-form input[type=url],
.hm-form input[type=date],
.hm-form input[type=number],
.hm-form input[type=file],
.hm-form select,
.hm-form textarea{
  width:100%; background:var(--cream); border:1px solid var(--line); color:var(--ink);
  border-radius:12px; padding:.8rem 1rem; font-size:.95rem; font-family:inherit;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.hm-form textarea{ resize:vertical; min-height:90px; line-height:1.6; }
.hm-form input:focus,.hm-form select:focus,.hm-form textarea:focus{
  outline:none; background:#fff; border-color:var(--navy); box-shadow:0 0 0 4px rgba(22,58,99,.08);
}
.hm-form input::placeholder,.hm-form textarea::placeholder{ color:var(--muted); opacity:.8; }
.hm-form input[type=file]{ padding:.62rem .8rem; font-size:.88rem; }
.hm-form code{ color:var(--red); font-size:.72rem; background:none; }

.hm-form .radio-group{ display:flex; flex-wrap:wrap; gap:1.2rem; padding-top:.35rem; }
.hm-form .radio-option{ display:flex; align-items:center; gap:.45rem; }
.hm-form .radio-option input{ width:1.05rem; height:1.05rem; accent-color:var(--red); }
.hm-form .radio-option label{
  margin:0; font-size:.93rem; font-weight:500; letter-spacing:0; text-transform:none;
  color:var(--ink); cursor:pointer;
}

/* repeatable entries injected by script.js */
.hm-form .qualification-entry,
.hm-form .experience-entry,
.hm-form .project-entry,
.hm-form .reference-entry{
  position:relative; background:var(--cream); border:1px solid var(--line);
  border-radius:14px; padding:1.3rem 1.4rem; margin-bottom:1rem;
}
.hm-form .qualification-entry input,
.hm-form .experience-entry input,
.hm-form .project-entry input,
.hm-form .reference-entry input,
.hm-form .qualification-entry select,
.hm-form .experience-entry select,
.hm-form .project-entry select,
.hm-form .reference-entry select,
.hm-form .qualification-entry textarea,
.hm-form .experience-entry textarea,
.hm-form .project-entry textarea,
.hm-form .reference-entry textarea{ background:#fff; }

.hm-form .add-btn,
.hm-form .remove-btn{
  display:inline-flex; align-items:center; gap:.5rem; border:1.5px solid transparent;
  font-family:'Inter',sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; padding:.65rem 1.25rem;
  border-radius:999px; cursor:pointer; transition:all .22s;
}
.hm-form .add-btn{ background:var(--cream-2); color:var(--ink); }
.hm-form .add-btn:hover{ background:var(--ink); color:#fff; }
.hm-form .add-btn::before{ content:"\F64D"; font-family:'bootstrap-icons'; font-size:.85rem; }
.hm-form .remove-btn{ background:transparent; color:var(--red); border-color:rgba(179,19,18,.3); margin-top:.4rem; }
.hm-form .remove-btn:hover{ background:var(--red); color:#fff; border-color:var(--red); }

.hm-form .submit-btn{
  display:inline-flex; align-items:center; gap:.6rem; border:0; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:.78rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  padding:1.05rem 2.2rem; border-radius:999px;
  background:var(--red); color:#fff; box-shadow:0 12px 26px -12px rgba(179,19,18,.75);
  transition:all .25s;
}
.hm-form .submit-btn:hover{ background:#9c100f; transform:translateY(-2px); }
.hm-form .submit-btn::after{ content:"\F138"; font-family:'bootstrap-icons'; font-size:.9rem; }

/* ---------- Leave letter preview ---------- */
.letter-paper{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.8rem,3.4vw,3rem); box-shadow:var(--shadow-md);
  min-height:520px; color:#25303f; font-size:.96rem; line-height:1.9;
}
.letter-paper p{ margin:0 0 .9rem; }
.letter-paper b{ color:var(--ink); }
.letter-paper .letter-date{ margin-bottom:1.4rem; }
.letter-paper .letter-signature{ margin-top:2rem; }
.letter-empty{
  height:100%; min-height:440px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; color:var(--muted);
}
.letter-empty i{ font-size:2.4rem; color:var(--cream-3); margin-bottom:1rem; }
.letter-empty p{ font-size:.94rem; max-width:26em; }

.letter-loading{ text-align:center; padding:4rem 1rem; color:var(--muted); }
.letter-spinner{
  width:38px; height:38px; margin:0 auto 1.2rem; border-radius:50%;
  border:3px solid var(--cream-2); border-top-color:var(--red);
  animation:hmspin .8s linear infinite;
}
@keyframes hmspin{ to{ transform:rotate(360deg); } }

.letter-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; }
.letter-actions .btn-hm{ padding:.78rem 1.4rem; font-size:.72rem; }

/* print only the letter */
@media print{
  body{ background:#fff; }
  .topbar,.hm-nav,.page-hero,.hm-footer,.to-top,.chatbot-container,
  .letter-actions,.tool-aside,.no-print,.callback,.section-head{ display:none !important; }
  .letter-paper{ border:0; box-shadow:none; padding:0; min-height:0; }
  .section{ padding:0 !important; }
}

/* ================================================================
   Product pages  (product_page.php)
   ================================================================ */

.prod-hero-img{ overflow:hidden; }
.prod-hero-img img{ width:100%; display:block; }

.prod-lead{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.32rem; line-height:1.55; color:var(--ink);
  margin:.9rem 0 1.4rem;
}

/* ---- feature cards ---- */
.feat-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.75rem 1.6rem; transition:transform .3s, box-shadow .3s, border-color .3s;
}
.feat-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent; }
.feat-card i{ font-size:1.6rem; color:var(--red); display:block; margin-bottom:.9rem; }
.feat-card:nth-child(even) i{ color:var(--navy); }
.feat-card h5{ font-size:1.08rem; margin-bottom:.55rem; }
.feat-card p{ font-size:.92rem; color:var(--muted); margin-bottom:0; line-height:1.7; }

/* ---- working process ---- */
.proc-list{ max-width:880px; margin:0 auto; position:relative; }
.proc-list::before{
  content:''; position:absolute; left:29px; top:14px; bottom:14px;
  width:1px; background:linear-gradient(var(--cream-3), var(--line), var(--cream-3));
}
.proc-step{ display:flex; gap:1.5rem; position:relative; padding-bottom:2.1rem; }
.proc-step:last-child{ padding-bottom:0; }
.proc-num{
  flex:0 0 58px; height:58px; border-radius:50%; background:#fff;
  border:1px solid var(--line); display:grid; place-items:center;
  font-family:'Playfair Display',Georgia,serif; font-size:1.02rem; color:var(--red);
  box-shadow:var(--shadow-sm); position:relative; z-index:2;
}
.proc-text{ padding-top:.5rem; }
.proc-text h5{ font-size:1.08rem; margin-bottom:.4rem; }
.proc-text p{ font-size:.95rem; color:var(--body); margin-bottom:0; line-height:1.75; }

/* ---- screenshots ---- */
.shot{ margin:0; }
.shot .panel{ overflow:hidden; }
.shot .panel{ aspect-ratio:4/3; background:var(--cream-2, #f6f1e7); }
/* every screenshot sits in the same 4:3 frame, shown whole (wide desktop and tall phone shots alike) */
.shot img{ width:100%; height:100%; display:block; object-fit:contain; }
.shot figcaption{
  font-size:.85rem; color:var(--muted); margin-top:.8rem;
  padding-left:.9rem; border-left:2px solid var(--cream-3); line-height:1.6;
}

/* ---- pricing ---- */
.price-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem 1.7rem; text-align:center; position:relative;
  display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s;
}
.price-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.price-card-mark{ border-color:transparent; box-shadow:var(--shadow-md); }
.price-flag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--red); color:#fff; font-size:.66rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; padding:.34rem .95rem; border-radius:99px;
  white-space:nowrap;
}
.price-card h5{
  font-family:'Inter',sans-serif; font-size:.76rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-bottom:.9rem;
}
.price-amt{
  font-family:'Playfair Display',Georgia,serif; font-size:2.5rem;
  color:var(--ink); line-height:1;
}
.price-amt .cur{ font-size:1.35rem; vertical-align:super; margin-right:.1rem; color:var(--red); }
.price-unit{
  font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-top:.5rem;
}
.price-list{ list-style:none; padding:0; margin:1.5rem 0; text-align:left; flex:1 1 auto; }
.price-list li{
  display:flex; gap:.6rem; align-items:flex-start;
  font-size:.9rem; color:var(--body); margin-bottom:.65rem; line-height:1.6;
}
.price-list i{ color:var(--red); font-size:.95rem; margin-top:.15rem; flex:0 0 auto; }
.price-note{
  background:var(--cream-2); border-radius:14px; padding:1.1rem 1.35rem;
  font-size:.88rem; color:var(--body); margin:0; line-height:1.75;
}
.quote-icon{
  width:70px; height:70px; margin:0 auto 1.2rem; border-radius:50%;
  background:var(--cream-2); display:grid; place-items:center;
}
.quote-icon i{ font-size:1.8rem; color:var(--red); }

/* ---- FAQ ---- */
.hm-acc .accordion-item{
  border:1px solid var(--line); border-radius:14px !important;
  margin-bottom:.85rem; overflow:hidden; background:#fff;
}
.hm-acc .accordion-button{
  font-family:'Playfair Display',Georgia,serif; font-size:1.02rem; color:var(--ink);
  background:#fff; box-shadow:none; padding:1.1rem 1.3rem;
}
.hm-acc .accordion-button:not(.collapsed){ background:var(--cream-2); color:var(--ink); }
.hm-acc .accordion-button:focus{ box-shadow:none; border-color:transparent; }
.hm-acc .accordion-body{
  font-size:.94rem; color:var(--body); line-height:1.8; padding:0 1.3rem 1.25rem;
}

/* ---- contact band ---- */
.prod-cta{
  background:var(--navy-deep); color:#fff; border-radius:var(--radius);
  padding:3rem 2.6rem; position:relative; overflow:hidden;
}
.prod-cta::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 88% 12%, rgba(192,139,52,.22), transparent 55%);
}
.prod-cta > .row{ position:relative; z-index:2; }
.prod-cta h3{ color:#fff; font-size:1.75rem; margin:.5rem 0 .8rem; }
.prod-cta p{ color:rgba(255,255,255,.72); margin-bottom:0; font-size:.98rem; }
.btn-hm-outline-light{
  border-color:rgba(255,255,255,.32); color:#fff; background:transparent;
}
.btn-hm-outline-light:hover{ background:#fff; color:var(--ink); border-color:#fff; transform:translateY(-2px); }

/* ---- other products ---- */
.prod-card-link{ display:block; text-decoration:none; }
.prod-card-link i{ font-size:1.5rem; color:var(--red); display:block; margin-bottom:.7rem; }
.prod-card-link .prod-more{
  display:inline-block; margin-top:.9rem; font-size:.78rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--red);
}
.prod-card-link:hover .prod-more i{ transform:translateX(4px); }
.prod-card-link .prod-more i{ transition:transform .25s; margin-left:.3rem; }

.prod-prevnext{
  display:flex; justify-content:space-between; gap:1.25rem;
  margin-top:3.2rem; padding-top:2rem; border-top:1px solid var(--line);
}
.prod-prevnext a{
  display:flex; align-items:center; gap:.9rem; color:var(--ink);
  font-family:'Playfair Display',Georgia,serif; font-size:1.05rem;
}
.prod-prevnext a:hover{ color:var(--red); }
.prod-prevnext small{
  display:block; font-family:'Inter',sans-serif; font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.15rem;
}
.prod-prevnext i{ font-size:1.15rem; color:var(--red); }

@media (max-width: 991px){
  .prod-cta{ padding:2.2rem 1.6rem; }
  .prod-cta h3{ font-size:1.45rem; }
}
@media (max-width: 575px){
  .proc-list::before{ left:22px; }
  .proc-num{ flex:0 0 44px; height:44px; font-size:.88rem; }
  .proc-step{ gap:1rem; }
  .prod-lead{ font-size:1.16rem; }
  .price-amt{ font-size:2.1rem; }
  .prod-prevnext{ flex-direction:column; }
  .prod-prevnext a.text-end{ justify-content:flex-end; }
}

/* ==================================================================
   Flagship solutions — the three headline systems above the products
   carousel. Editorial split panels on a white-to-cream band, artwork
   alternating side to side. (home/flagship_sections.php)
   ================================================================== */
.fship-band{
  position:relative; overflow:hidden;
  background:
    linear-gradient(180deg,#ffffff 0%,#fdfcf9 42%,var(--cream) 100%);
  border-top:1px solid rgba(15,38,71,.06);
  border-bottom:1px solid rgba(15,38,71,.06);
}
/* two soft washes of colour so the white never reads as empty */
.fship-orb{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  filter:blur(90px); opacity:.55;
}
.fship-orb-a{
  width:640px; height:640px; top:-220px; right:-180px;
  background:radial-gradient(circle,rgba(192,139,52,.22),transparent 68%);
}
.fship-orb-b{
  width:720px; height:720px; bottom:-280px; left:-240px;
  background:radial-gradient(circle,rgba(22,58,99,.16),transparent 68%);
}
.fship-band > .container{ position:relative; z-index:1; }

/* ---- one panel ---- */
.fship{
  --tone:var(--navy);
  --tone-soft:rgba(22,58,99,.08);
  position:relative;
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  column-gap:4.75rem; row-gap:2.5rem;
  padding:5.5rem 0;
  border-top:1px solid var(--line);
  margin-top:4.5rem;
}
.fship:first-of-type{ border-top:0; }
.fship-navy  { --tone:#163a63; --tone-soft:rgba(22,58,99,.085); }
.fship-teal  { --tone:#0f6b6b; --tone-soft:rgba(15,107,107,.09); }
.fship-forest{ --tone:#256b3c; --tone-soft:rgba(37,107,60,.09); }

/* oversized edition number, sitting behind the copy */
.fship-index{
  position:absolute; top:2.2rem; right:0; z-index:0;
  font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:clamp(7rem,14vw,13rem); line-height:.8; letter-spacing:-.04em;
  color:var(--tone); opacity:.045; user-select:none;
}
.fship-flip .fship-index{ right:auto; left:0; }
.fship-flip .fship-copy{ order:2; }
.fship-flip .fship-visual{ order:1; }

.fship-copy{ position:relative; z-index:1; }

.fship-kicker{
  display:inline-flex; align-items:center; gap:.65rem;
  font-family:'Inter',sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase; color:var(--tone);
  background:var(--tone-soft); border:1px solid color-mix(in srgb,var(--tone) 18%,transparent);
  padding:.5rem 1.05rem; border-radius:999px;
}
.fship-kicker i{ font-size:.95rem; }

.fship-title{
  font-size:clamp(2.05rem,3.5vw,3.05rem); line-height:1.12;
  margin:1.5rem 0 1.35rem; color:var(--ink); letter-spacing:-.02em;
}
.fship-hl{
  display:block; position:relative; width:fit-content; max-width:100%;
  color:var(--tone);
}
/* hand-drawn swash under the second line */
.fship-hl::after{
  content:""; position:absolute; left:0; right:0; bottom:-.12em; height:.22em;
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 55%,transparent),transparent 92%);
  border-radius:999px; z-index:-1;
}

.fship-lead{
  font-size:1.055rem; line-height:1.78; color:var(--body); margin-bottom:1rem;
  max-width:36rem;
}
.fship-lead strong{ color:var(--ink); font-weight:600; }

/* ---- checklist ---- */
.fship-points{
  list-style:none; padding:0; margin:1.85rem 0 0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:1.6rem; row-gap:.72rem;
}
.fship-points li{
  display:flex; align-items:flex-start; gap:.65rem;
  font-size:.925rem; line-height:1.45; color:var(--ink); font-weight:500;
}
.fship-points i{ color:var(--tone); font-size:1.02rem; line-height:1.35; flex-shrink:0; }
.fship-more-pt{ color:var(--muted) !important; font-weight:600 !important; }
.fship-more-pt i{ color:var(--gold) !important; }

/* ---- the one thing we most want remembered ---- */
.fship-note{
  margin-top:2.1rem; padding:1.35rem 1.6rem 1.4rem;
  background:linear-gradient(120deg,var(--tone-soft),rgba(192,139,52,.07));
  border:1px solid color-mix(in srgb,var(--tone) 14%,transparent);
  border-left:4px solid var(--tone);
  border-radius:14px;
}
.fship-note-lbl{
  display:block; font-family:'Inter',sans-serif; font-size:.68rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tone); margin-bottom:.45rem;
}
.fship-note p{
  margin:0; font-family:'Playfair Display',Georgia,serif; font-size:1.1rem;
  line-height:1.5; color:var(--ink);
}

.fship-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem; }

/* ---- artwork ---- */
.fship-visual{ position:relative; z-index:1; }
.fship-frame{
  position:relative; background:#fff; border:1px solid rgba(15,38,71,.08);
  border-radius:24px; padding:1.15rem;
  box-shadow:0 46px 90px -44px rgba(15,38,71,.45), 0 4px 14px rgba(15,38,71,.05);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s;
}
/* a tinted halo so the white card lifts off the white band */
.fship-frame::before{
  content:""; position:absolute; inset:-14px; z-index:-1; border-radius:34px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--tone) 24%,transparent),rgba(192,139,52,.20));
  opacity:.45; filter:blur(18px);
}
.fship-frame:hover{
  transform:translateY(-8px);
  box-shadow:0 60px 110px -46px rgba(15,38,71,.52), 0 6px 18px rgba(15,38,71,.06);
}
.fship-frame img{
  display:block; width:100%; height:auto; border-radius:16px;
  background:var(--cream);
}

.fship-chips{
  list-style:none; margin:1.25rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
}
.fship-chips li{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:.5rem 1rem; font-size:.78rem; font-weight:600; color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.fship-chips i{ color:var(--tone); font-size:.95rem; }

/* ---- closing slogan, spanning the full panel ---- */
.fship-tagline{
  grid-column:1 / -1; margin:1rem 0 0; text-align:center;
  font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.1rem,1.8vw,1.42rem);
  font-style:italic; color:var(--tone); letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; gap:1.4rem;
}
.fship-tagline::before,.fship-tagline::after{
  content:""; height:1px; flex:0 1 110px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--tone) 45%,transparent));
}
.fship-tagline::after{ background:linear-gradient(270deg,transparent,color-mix(in srgb,var(--tone) 45%,transparent)); }

/* ---- responsive ---- */
@media (max-width:1199.98px){
  .fship{ column-gap:3.25rem; padding:4.5rem 0; margin-top:3.5rem; }
}
@media (max-width:991.98px){
  .fship{
    grid-template-columns:1fr; row-gap:2.5rem;
    padding:3.75rem 0; margin-top:2.75rem;
  }
  /* artwork always leads on a narrow screen */
  .fship-copy,.fship-flip .fship-copy{ order:2; }
  .fship-visual,.fship-flip .fship-visual{ order:1; }
  .fship-tagline{ order:3; }
  .fship-index{ top:.5rem; opacity:.04; }
  .fship-lead{ max-width:none; }
}
@media (max-width:575.98px){
  .fship-points{ grid-template-columns:1fr; }
  .fship-frame{ padding:.75rem; border-radius:18px; }
  .fship-note{ padding:1.15rem 1.2rem; }
  .fship-cta .btn-hm{ width:100%; justify-content:center; }
  .fship-tagline::before,.fship-tagline::after{ flex-basis:34px; }
}
@media (prefers-reduced-motion:reduce){
  .fship-frame,.fship-frame:hover{ transition:none; transform:none; }
}