/* ==========================================================================
   HardHat Scaling shared design system
   Single source of truth for every page. Page-specific rules stay inline.
   Icons are Lucide (lucide.dev, ISC). Brand marks are Simple Icons (CC0).
   ========================================================================== */

:root{
  --navy:#142a5c;
  --navy-dark:#0e1f47;
  --navy-card:#1b2a4a;
  --orange:#f18a00;
  --orange-dark:#d97a00;
  --ink:#222c3a;
  --gray:#5a6675;
  --bg:#ffffff;
  --bg-soft:#f5f7fa;
  --line:#e3e8f0;
  --tap:44px; /* minimum touch target */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Barlow',Arial,sans-serif;
  font-size:18px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3{font-family:'Barlow Condensed','Barlow',Arial,sans-serif;line-height:1.1;color:var(--navy)}
h1{font-size:clamp(2.2rem,6vw,4.2rem);font-weight:800}
h2{font-size:clamp(1.85rem,4.5vw,3rem);font-weight:800}
h3{font-size:1.35rem;font-weight:700}
.container{max-width:1140px;margin:0 auto;padding:0 24px}
section{padding:72px 0}

/* Lucide icon defaults */
.lu{
  width:20px;height:20px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}

/* BUTTONS */
.btn{
  display:inline-block;
  background:var(--orange);
  color:#fff;
  font-family:'Barlow',Arial,sans-serif;
  font-weight:700;
  font-size:1.1rem;
  padding:16px 36px;
  min-height:var(--tap);
  border-radius:8px;
  text-decoration:none;
  text-align:center;
  transition:background .15s ease,transform .15s ease;
  border:none;
  cursor:pointer;
}
.btn:hover{background:var(--orange-dark);transform:translateY(-1px);color:#fff}
.btn-big{font-size:1.25rem;padding:18px 44px}
.btn-ghost{background:transparent;border:2px solid #fff;color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.nav{position:sticky;top:0;z-index:60;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.08)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;max-width:1140px;margin:0 auto}
.nav-logo img{height:44px;width:auto}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a:not(.btn){color:var(--navy);text-decoration:none;font-weight:500}
.nav-links a:not(.btn):hover{color:var(--orange)}
.nav .btn{padding:10px 22px;font-size:1rem}

.nav-drop{position:relative}
.nav-drop-toggle{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;cursor:pointer;
  font-family:'Barlow',Arial,sans-serif;font-size:18px;font-weight:500;
  color:var(--navy);padding:0;
}
.nav-drop-toggle:hover{color:var(--orange)}
.nav-drop-toggle .lu{width:15px;height:15px;transition:transform .18s ease}
.nav-drop.open .nav-drop-toggle{color:var(--orange)}
.nav-drop.open .nav-drop-toggle .lu{transform:rotate(180deg)}
.nav-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:290px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px rgba(14,31,71,.18);
  padding:10px;
  opacity:0;visibility:hidden;
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.nav-drop.open .nav-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-menu a{display:flex;align-items:flex-start;gap:13px;padding:11px 13px;border-radius:10px;text-decoration:none;transition:background .14s ease}
.nav-menu a:hover{background:var(--bg-soft)}
.nav-menu .nm-ico{flex-shrink:0;width:38px;height:38px;border-radius:9px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;color:var(--navy)}
.nav-menu .nm-ico .lu{width:19px;height:19px}
.nav-menu .nm-title{display:block;color:var(--navy);font-weight:700;font-size:1rem;line-height:1.3}
.nav-menu .nm-sub{display:block;color:var(--gray);font-size:.86rem;line-height:1.35}

.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:10px;margin-left:8px;min-width:var(--tap);min-height:var(--tap)}
.nav-burger span{display:block;width:24px;height:2.5px;border-radius:2px;background:var(--navy);transition:transform .2s ease,opacity .2s ease}
.nav-burger span+span{margin-top:5px}
.nav-burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ==========================================================================
   BRAND LOGO MARQUEE
   ========================================================================== */
.tools{background:var(--navy);color:#fff;padding:60px 0 66px;overflow:hidden}
.tools h2{color:#fff;text-align:center;margin-bottom:8px}
.tools .sub{text-align:center;color:#bcc7dc;font-size:1.05rem;margin-bottom:40px}
.marquee{
  position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-track{display:flex;align-items:center;width:max-content;animation:scroll-x 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.brand{
  flex-shrink:0;display:flex;align-items:center;
  height:62px;padding:0 34px;
  color:#fff;opacity:.92;
  transition:opacity .2s ease;
}
.marquee:hover .brand{opacity:.5}
.marquee .brand:hover{opacity:1}
/* full brand lockup: sized by height, width follows the artwork */
.bl{height:32px;width:auto;display:block;fill:currentColor;color:#fff}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;width:100%;justify-content:center}
}

/* ==========================================================================
   CAROUSEL (trades)
   ========================================================================== */
.carousel-wrap{position:relative;padding:0 56px}
.carousel{
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);
  gap:16px;
  grid-auto-columns:calc((100% - 48px)/4);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* NOTE: no scroll-behavior:smooth here on purpose. Combined with mandatory
     snap it blocks programmatic scrollTo in some engines, which left the
     arrows and dots doing nothing. The JS passes behavior:'smooth' instead. */
  scrollbar-width:none;-ms-overflow-style:none;
  /* the cards lift and cast a shadow on hover; overflow-y:hidden would slice the
     top row off without this breathing room */
  padding:8px 0 12px;
}
.carousel::-webkit-scrollbar{display:none}
.carousel>*{scroll-snap-align:start}
.c-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1.5px solid var(--line);
  color:var(--navy);cursor:pointer;z-index:2;
  box-shadow:0 4px 14px rgba(14,31,71,.12);
  transition:background .15s ease,color .15s ease,border-color .15s ease,opacity .15s ease;
}
.c-arrow:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.c-arrow[disabled]{opacity:.3;cursor:default}
.c-arrow[disabled]:hover{background:#fff;border-color:var(--line);color:var(--navy)}
.c-arrow .lu{width:24px;height:24px;stroke-width:2.4}
.c-prev{left:0}
.c-next{right:0}
.c-dots{display:flex;gap:2px;justify-content:center;margin-top:12px}
/* the dot is small but the hit area is a full 44px, so it is thumb-friendly */
.c-dot{
  width:26px;height:var(--tap);
  background:none;border:none;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.c-dot::after{
  content:'';display:block;
  width:9px;height:9px;border-radius:50%;
  background:var(--line);
  transition:background .18s ease,width .18s ease;
}
.c-dot.on::after{background:var(--orange);width:24px;border-radius:99px}

.trade{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;min-height:60px;
  border:1px solid var(--line);border-radius:10px;
  background:var(--bg-soft);
  font-weight:600;font-size:1rem;color:var(--navy);
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.trade:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 8px 20px rgba(14,31,71,.09)}
.trade .lu{color:var(--orange)}

/* ==========================================================================
   FLIP CARD (process step 2)
   ========================================================================== */
/* the flip card supplies its own faces, so strip the .step chrome off the shell */
.flip{
  perspective:1400px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:none !important;border:none !important;padding:0 !important;
}
.flip:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:12px}
.flip-inner{
  position:relative;width:100%;height:100%;min-height:352px;
  transform-style:preserve-3d;
  /* keep an explicit 3D transform even at rest: with `none`, iOS Safari flattens
     the 3D context, backface-visibility stops applying, and the hidden face's
     pips bleed through mirrored next to the real ones */
  transform:rotateY(0deg);
  transition:transform .55s cubic-bezier(.4,.2,.2,1);
}
/* belt and braces: once a flip has settled, hard-hide the face that is turned
   away, so nothing can show through regardless of engine quirks */
.flip-inner.settled[data-up="front"] .flip-back,
.flip-inner.settled[data-up="back"] .flip-front{visibility:hidden}
.flip-face{
  position:absolute;inset:0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:var(--navy-card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:28px 24px 46px;
  display:flex;flex-direction:column;
}
.flip-back{transform:rotateY(180deg)}
.flip-hint{
  position:absolute;left:0;right:0;bottom:14px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  color:#8fa2c4;font-size:.8rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}
.flip-hint .lu{width:15px;height:15px;animation:nudge 2.6s ease-in-out infinite}
@keyframes nudge{0%,88%,100%{transform:rotate(0)}94%{transform:rotate(28deg)}}
.flip-pips{display:flex;gap:6px}
.flip-pip{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22)}
.flip-pip.on{background:var(--orange)}
.flip:hover .flip-face{border-color:rgba(241,138,0,.45)}
@media (prefers-reduced-motion:reduce){
  .flip-inner{transition:none}
  .flip-hint .lu{animation:none}
}

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast-zone{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{
  pointer-events:auto;position:relative;overflow:hidden;
  min-width:280px;max-width:min(360px,calc(100vw - 40px));
  background:var(--navy-dark);color:#fff;
  border:1px solid rgba(241,138,0,.5);border-radius:12px;
  padding:16px 18px 18px;
  box-shadow:0 16px 40px rgba(0,0,0,.34);
  transform:translateY(14px);opacity:0;
  transition:transform .26s ease,opacity .26s ease;
}
.toast.in{transform:translateY(0);opacity:1}
.toast-head{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1rem;margin-bottom:4px}
.toast-head .lu{width:18px;height:18px;color:var(--orange)}
.toast p{color:#cdd6e6;font-size:.92rem;line-height:1.45}
.toast-count{color:var(--orange);font-weight:700}
.toast-bar{position:absolute;left:0;bottom:0;height:3px;background:var(--orange);width:100%;transform-origin:left}

/* shake + red glow on the armed agency button */
@keyframes shake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-7px)}30%{transform:translateX(6px)}
  45%{transform:translateX(-5px)}60%{transform:translateX(4px)}
  75%{transform:translateX(-2px)}
}
.agency-btn.warn{
  animation:shake .5s ease;
  border-color:#e5484d !important;
  background:rgba(229,72,77,.16) !important;
  color:#ff9b9e !important;
  box-shadow:0 0 22px rgba(229,72,77,.5);
}

/* ==========================================================================
   BOOK A CALL band
   ========================================================================== */
.book-band{background:linear-gradient(180deg,var(--navy-dark) 0%,var(--navy) 100%);color:#fff;text-align:center}
.book-band h2{color:#fff;margin-bottom:14px}
.book-band p{max-width:620px;margin:0 auto 32px;color:#e6eaf2;font-size:1.15rem}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{background:var(--navy-dark);color:#9fb0cc;padding:48px 0;text-align:center}
footer img.f-logo{height:52px;width:auto;margin:0 auto 16px}
footer p{font-size:.95rem}
footer a{color:var(--orange);text-decoration:none}
.iwh-link{color:inherit;text-decoration:underline;text-underline-offset:3px;transition:color .18s ease,text-shadow .18s ease}
.iwh-link:hover{color:var(--orange);text-shadow:0 0 14px rgba(241,138,0,.7)}
.agency-btn{
  display:inline-flex;align-items:center;gap:10px;
  margin:26px auto 6px;padding:12px 26px;min-height:var(--tap);
  border:1.5px solid rgba(241,138,0,.55);border-radius:99px;
  background:rgba(241,138,0,.08);color:#f5b04d;
  font-weight:700;font-size:.98rem;text-decoration:none;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.agency-btn .lu{flex-shrink:0;width:16px;height:16px;transition:transform .18s ease}
.agency-btn:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-1px)}
.agency-btn:hover .lu{transform:translateX(3px)}
.footer-legal{margin-top:18px;font-size:.9rem}
.footer-legal a{color:#9fb0cc;text-decoration:underline;text-underline-offset:3px}
.footer-legal a:hover{color:var(--orange)}
.footer-nav{
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
  text-align:left;max-width:900px;margin:0 auto 36px;
  padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-nav h4{font-family:'Barlow Condensed',Arial,sans-serif;font-size:1.05rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:12px}
.footer-nav ul{list-style:none}
.footer-nav li{margin-bottom:8px}
.footer-nav a{color:#9fb0cc;text-decoration:none;font-size:.93rem}
.footer-nav a:hover{color:var(--orange)}
.socials{display:flex;gap:12px;justify-content:center;margin:22px 0 4px}
.socials a{
  width:var(--tap);height:var(--tap);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:#cdd6e6;
  transition:background .16s ease,color .16s ease,transform .16s ease,border-color .16s ease;
}
.socials a:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-2px)}
.socials svg{width:19px;height:19px}


/* screen-reader-only text, used where a lockup carries the visible name */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   SHARED CONTENT COMPONENTS
   ========================================================================== */
.check-item{margin-bottom:20px}
.check-item h3{
  color:var(--orange);font-family:'Barlow',Arial,sans-serif;
  font-size:1.1rem;font-weight:700;
  display:flex;align-items:center;gap:10px;margin-bottom:4px;
}
/* the original filled-disc tick, restored */
.check-item h3 .ck{width:20px;height:20px;flex-shrink:0}
.check-item p{color:var(--ink);font-size:1.02rem}

.section-head{text-align:center;max-width:720px;margin:0 auto 48px}
.section-head .lede{font-style:italic;color:var(--gray);margin-top:8px}

.page-head{background:linear-gradient(180deg,var(--navy-dark) 0%,var(--navy) 100%);color:#fff;padding:64px 0 60px;text-align:center}
.page-head h1{color:#fff;margin-bottom:16px}
.page-head p{font-size:1.2rem;color:#e6eaf2;max-width:680px;margin:0 auto}
.page-kicker{
  display:inline-block;background:rgba(241,138,0,.15);border:1px solid var(--orange);
  color:var(--orange);font-weight:700;font-size:.95rem;letter-spacing:.06em;
  text-transform:uppercase;padding:6px 16px;border-radius:99px;margin-bottom:22px;
}
.crumbs{font-size:.9rem;color:#bcc7dc;margin-bottom:18px}
.crumbs a{color:#bcc7dc;text-decoration:none}
.crumbs a:hover{color:var(--orange)}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width:900px){
  body{font-size:17px}
  section{padding:52px 0}
  .container{padding:0 18px}
  .nav-logo img{height:38px}
  .nav-burger{display:block}
  .nav-links{
    position:fixed;top:68px;left:0;right:0;bottom:0;
    background:#fff;flex-direction:column;align-items:stretch;gap:0;
    padding:18px 20px 40px;overflow-y:auto;
    transform:translateX(100%);transition:transform .24s ease;
    box-shadow:0 -1px 0 rgba(0,0,0,.06);
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links a:not(.btn){padding:15px 4px;min-height:var(--tap);border-bottom:1px solid var(--line);font-size:1.15rem;font-weight:600;display:flex;align-items:center}
  .nav .btn{margin-top:22px;padding:15px 22px;font-size:1.1rem}
  .nav-drop{width:100%}
  .nav-drop-toggle{width:100%;justify-content:space-between;padding:15px 4px;min-height:var(--tap);border-bottom:1px solid var(--line);font-size:1.15rem;font-weight:600}
  .nav-menu{
    position:static;transform:none;min-width:0;width:100%;
    border:none;box-shadow:none;border-radius:0;padding:0;
    display:none;opacity:1;visibility:visible;background:var(--bg-soft);
  }
  .nav-drop.open .nav-menu{display:block;transform:none}
  .nav-menu a{padding:13px 16px;min-height:var(--tap);border-radius:0;border-bottom:1px solid var(--line)}
  .nav-menu a:last-child{border-bottom:none}

  .book-band p{font-size:1.05rem}

  /* FOOTER, mobile: two tidy left-aligned link columns, then a compact centred
     identity block. Previously every line was centred, which read as a wall. */
  footer{padding:40px 0 34px;text-align:left}
  .footer-nav{
    grid-template-columns:repeat(2,1fr);
    gap:26px 18px;max-width:none;margin-bottom:28px;padding-bottom:26px;
  }
  .footer-nav h4{font-size:.95rem;margin-bottom:9px;color:#dfe6f2}
  .footer-nav li{margin-bottom:2px}
  .footer-nav a{display:block;padding:10px 0;font-size:.9rem;min-height:var(--tap)}
  .f-identity{text-align:center;padding-top:2px}
  footer img.f-logo{height:42px;margin-bottom:12px}
  .f-tagline{font-size:.88rem;color:#8fa2c4;margin-bottom:2px}
  .socials{margin:18px 0 6px;gap:10px}
  .agency-btn{margin:18px auto 4px;padding:10px 20px;font-size:.9rem}
  .f-fineprint{
    margin-top:18px;padding-top:16px;
    border-top:1px solid rgba(255,255,255,.09);
    font-size:.8rem;line-height:1.7;color:#7d8dab;
  }
  .f-fineprint p{font-size:.8rem}
  .footer-legal{margin-top:10px;font-size:.82rem}

  /* carousel: 2 columns of 2 rows = 4 visible, swipeable */
  .carousel-wrap{padding:0}
  .carousel{grid-auto-columns:calc((100% - 12px)/2);gap:12px}
  .c-arrow{display:none}
  .trade{font-size:.93rem;padding:14px 13px;min-height:56px;gap:9px}
  .trade .lu{width:18px;height:18px}

  .brand{height:52px;padding:0 22px}
  .bl{height:26px}

  /* Mobile: the flip card used to be pinned at 410px while its neighbours sat at
     ~250, so step 2 towered over steps 1 and 3. Tighten the tier content, drop the
     floor to what the tallest face actually needs, then let the grid equalise all
     three rows so the column reads as one consistent stack. */
  .steps{grid-auto-rows:1fr}
  .steps>*{height:100%}
  .flip-inner{min-height:296px}
  .flip-face{padding:24px 20px 42px}
  .tier-list li{font-size:.88rem;margin-bottom:5px;line-height:1.35;padding-left:18px}
  .tier-list li::before{width:7px;height:7px}
  .tier-time{margin-bottom:10px}
  .flip-hint{bottom:12px;font-size:.74rem}

  .toast-zone{right:12px;left:12px;bottom:12px}
  .toast{min-width:0;max-width:100%}

  /* inline "Full guide:" links get a real tap target on touch screens */
  .guide-link{display:inline-flex;align-items:center;min-height:var(--tap);padding:4px 0}
  /* secondary footer links too */
  .footer-legal{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;align-items:center}
  .footer-legal a{display:inline-flex;align-items:center;min-height:var(--tap);padding:2px 4px}
  .iwh-link{display:inline-flex;align-items:center;min-height:36px}
}
@media (max-width:520px){
  .footer-nav{grid-template-columns:repeat(2,1fr);max-width:none;text-align:left}
  .container{padding:0 16px}
  .btn{width:100%;max-width:340px}
  .btn-big{font-size:1.12rem;padding:16px 24px}
}

/* lockups are declared once in a hidden <defs> and referenced with <use> */
.bl-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}