@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&family=Montserrat:wght@500;600;700&display=swap');
/* ============================================================
   Left of Boom - website stylesheet (revamp).
   Warm editorial identity: Nunito Sans (headings), Inter (body),
   JetBrains Mono (labels). Cream background, ink text, terracotta accent,
   soft rounded corners. Mobile-first sizing via clamp().

   The original LoB brand token names are retained but remapped to the new
   palette, so existing inline styles and component rules adopt the new look
   without markup changes.
   ============================================================ */
:root{
  /* New design tokens */
  --bg:#F4F1EB;          /* page background (cream) */
  --ink:#142330;         /* primary text / dark surfaces */
  --ink-darkest:#061220; /* header / darkest surface */
  --accent:#D97742;      /* terracotta accent (buttons, links, rules) */
  --accent-hover:#BE5F2C;/* darker terracotta for hover/pressed */
  --beige:#EFE7D8;       /* warm panel fill */
  --signature-navy:#163B53; /* LoB signature navy for mid-tone dark sections */
  --card:#FFFFFF;
  --display:'Nunito Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sans:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Legacy brand token names remapped to the new palette (keeps inline styles on-brand) */
  --white:#FFFFFF;
  --navy:#142330;        /* was navy; now ink dark surface */
  --slate:#D97742;       /* was slate accent; now terracotta accent */
  --dark:#142330;        /* body text */
  --deep-navy:#BE5F2C;   /* hover accent */
  --toc-navy:#061220;    /* darkest */
  --mid-grey:#5B6672;    /* muted text (ink at ~62%) */
  --light-grey:#EFE7D8;  /* light section fill (beige) */
  --border:rgba(20,35,48,.14);

  --max:1160px;
  --radius:14px;
  --radius-lg:22px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-hover);text-decoration:underline;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}

h1,h2,h3,h4{font-family:var(--display);margin:0 0 16px;font-weight:500;color:var(--ink);letter-spacing:-.01em;line-height:1.12;}
h1{font-size:clamp(2.1rem,6vw,3.4rem);line-height:1.06;letter-spacing:-.02em;}
h2{font-size:clamp(1.6rem,3.4vw,2.35rem);}
h3{font-size:clamp(1.2rem,2.4vw,1.4rem);color:var(--ink);}
h4{font-size:1.1rem;}
p{margin:0 0 16px;color:var(--ink);}
.lede{font-size:clamp(1.05rem,2.2vw,1.25rem);color:var(--mid-grey);line-height:1.55;}
.eyebrow{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:600;
  color:var(--accent);margin-bottom:14px;display:block;
}
.service-line-label{font-family:'Montserrat',sans-serif;font-size:1.0368rem;font-weight:700;} /* Services page card labels: Montserrat, bold, 44% larger than standard .eyebrow (two 20% increases) */


/* Header - dark ink surface, white logo */
header.site-header{
  position:sticky;top:0;z-index:50;background:var(--ink-darkest);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:var(--max);margin:0 auto;gap:16px;}
.logo-img{height:48.96px;width:auto;display:block;} /* matches home page banner logo size across all pages */
.logo-img-home{height:48.96px;}
nav.main-nav ul{list-style:none;display:flex;gap:24px;margin:0;padding:0;align-items:center;flex-wrap:wrap;}
nav.main-nav a{font-family:var(--sans);font-weight:500;font-size:.95rem;color:var(--white);}
nav.main-nav a:hover{color:var(--white);text-decoration:none;opacity:.8;border-bottom:2px solid var(--accent);}
.nav-active{border-bottom:2px solid var(--accent);}
.nav-cta{
  background:var(--accent);color:var(--white)!important;padding:10px 20px;border-radius:999px;font-weight:600;
}
.nav-cta:hover{background:var(--accent-hover);text-decoration:none;opacity:1;border-bottom:none;}
.has-dropdown{position:relative;}
.dropdown{
  display:none;position:absolute;top:100%;left:0;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);min-width:260px;padding:8px;
  box-shadow:0 16px 34px rgba(20,35,48,.18);
}
.has-dropdown:hover .dropdown{display:block;}
nav.main-nav .dropdown a{display:block;padding:10px 12px;border-radius:8px;font-weight:500;color:var(--ink);}
nav.main-nav .dropdown a:hover{background:var(--beige);color:var(--ink);border-bottom:none;text-decoration:none;}

/* Hero - dark ink block, white text */
.hero{background:var(--signature-navy);color:var(--white);padding:clamp(48px,8vw,84px) 0;}
.hero h1{color:var(--white);}
.hero .lede{color:rgba(255,255,255,.82);max-width:640px;}
.hero .eyebrow{color:#E6A579;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.btn{
  display:inline-block;background:var(--accent);color:var(--white)!important;font-family:var(--sans);font-weight:600;
  padding:13px 26px;border-radius:999px;margin-top:8px;transition:background .15s,transform .15s;border:none;cursor:pointer;
}
.btn:hover{background:var(--accent-hover);text-decoration:none;}
.btn-outline{
  display:inline-block;border:1.5px solid rgba(255,255,255,.7);color:var(--white)!important;font-family:var(--sans);font-weight:600;
  padding:11px 24px;border-radius:999px;margin-left:12px;
}
.btn-outline:hover{background:rgba(255,255,255,.12);text-decoration:none;}
.hero-actions{margin-top:26px;}
.hero-img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 24px 50px rgba(6,18,32,.4);}
.hero-img picture{display:block;}
.hero-img img{width:100%;height:auto;}

/* Sections */
section{padding:clamp(44px,7vw,72px) 0;}
.section-tight{padding:clamp(32px,5vw,44px) 0;}
.bg-grey{background:var(--beige);}
.bg-navy{background:var(--signature-navy);color:var(--white);}
.bg-navy h2, .bg-navy h3{color:var(--white);}
.bg-navy p{color:var(--white);}
.center{text-align:center;}
.section-head{max-width:720px;margin:0 auto 40px;}
.section-head.center{text-align:center;}

/* Sector strip - a plain editorial list, deliberately not styled as buttons
   so it never reads as something clickable. */
.sector-strip{max-width:640px;margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);}
.sector-strip .sector-label{
  display:block;font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;
  font-size:.68rem;font-weight:600;color:#E6A579;margin-bottom:8px;
}
.sector-list{list-style:none;margin:0;padding:0;font-size:.95rem;line-height:1.95;color:rgba(255,255,255,.86);}
.sector-list li{display:inline;}
.sector-list li + li::before{content:"\00B7";color:rgba(255,255,255,.34);padding:0 10px;}

/* Emphasised standalone link - used where a plain inline link needs more weight
   than body copy but should not compete with the solid .btn call to action. */
.section-foot{margin-top:34px;}
.arrow-link{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1;
  color:var(--ink);padding:9px 11px 9px 24px;border-radius:999px;
  border:1.5px solid var(--border);background:var(--card);
  transition:border-color .18s,box-shadow .18s,transform .18s,background .18s;
}
.arrow-link:hover{
  text-decoration:none;color:var(--ink);border-color:var(--accent);
  box-shadow:0 12px 26px rgba(20,35,48,.12);transform:translateY(-1px);
}
.arrow-link .arrow-dot{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;
  width:34px;height:34px;border-radius:50%;background:var(--accent);
  color:var(--white);font-size:1.05rem;transition:transform .18s;
}
.arrow-link:hover .arrow-dot{transform:translateX(3px);}
.bg-navy .arrow-link{color:var(--white);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.26);}
.bg-navy .arrow-link:hover{color:var(--white);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);box-shadow:0 12px 28px rgba(6,18,32,.38);}
/* On the navy band the cards already carry the terracotta, so the arrow reverses out in white. */
.bg-navy .arrow-link .arrow-dot{background:var(--white);color:var(--signature-navy);}
@media (max-width:640px){
  .arrow-link{font-size:.98rem;padding:8px 9px 8px 18px;gap:10px;text-align:left;}
}

/* Cards */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:26px;transition:box-shadow .18s,transform .18s;overflow:hidden;
}
.card:hover{box-shadow:0 14px 30px rgba(20,35,48,.10);transform:translateY(-2px);}
.card .icon{font-size:1.7rem;margin-bottom:12px;}
.card h3{margin-bottom:10px;}
.card a.card-link{font-family:var(--sans);font-weight:600;color:var(--accent);}
.card img.card-img{display:block;width:calc(100% + 52px);max-width:calc(100% + 52px);height:180px;object-fit:cover;margin:-26px -26px 18px -26px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;}

/* Timeline / proven outcomes */
.timeline{border-left:2px solid var(--accent);margin-left:8px;padding-left:24px;}
.timeline-item{position:relative;padding-bottom:26px;}
.timeline-item::before{
  content:"";position:absolute;left:-31px;top:4px;width:13px;height:13px;border-radius:50%;
  background:var(--accent);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--border);
}
.timeline-item .year{font-family:var(--mono);font-weight:600;color:var(--accent);display:block;font-size:.8rem;letter-spacing:.05em;}
.timeline-item h4{margin:4px 0 4px;color:var(--ink);}

/* Testimonials */
.testimonial{
  background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:24px;margin-bottom:20px;
}
.testimonial p{font-style:italic;color:var(--ink);}
.testimonial .attrib{font-weight:600;color:var(--ink);font-style:normal;margin:0;font-family:var(--sans);}
.testimonial .role{color:var(--mid-grey);font-size:.9rem;font-family:var(--sans);font-style:normal;}
.grid-2 .testimonial{margin-bottom:0;}

/* FAQ */
details.faq{
  border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:12px;background:var(--card);
}
details.faq summary{font-family:var(--display);font-weight:500;font-size:1.05rem;color:var(--ink);cursor:pointer;list-style:none;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+";float:right;font-size:1.3rem;color:var(--accent);}
details.faq[open] summary::after{content:"\2212";}
details.faq p{margin-top:12px;margin-bottom:0;color:var(--mid-grey);}
.faq-group{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;
  font-size:.78rem;font-weight:600;color:var(--accent);
  margin:36px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border);
}
.faq-group:first-of-type{margin-top:0;}

/* Team */
.team-card{text-align:left;}
.team-card img{width:100%;border-radius:var(--radius-lg);margin-bottom:16px;aspect-ratio:1/1;object-fit:cover;background:var(--beige);}
.team-card h3{margin-bottom:2px;color:var(--ink);}
.team-role{font-family:var(--mono);color:var(--accent);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;display:block;}

/* Blog */
.post-meta{color:var(--mid-grey);font-size:.9rem;margin-bottom:24px;font-family:var(--sans);}
.author-box{
  display:flex;gap:16px;align-items:center;background:var(--beige);border-radius:var(--radius);
  padding:18px 20px;margin:32px 0;border:1px solid var(--border);
}
.author-box .a-name{font-weight:600;color:var(--ink);}
.author-box .a-role{color:var(--mid-grey);font-size:.88rem;}
article.post-body h2{margin-top:32px;color:var(--ink);}
article.post-body table{width:100%;border-collapse:collapse;margin:20px 0;}
article.post-body td,article.post-body th{border:1px solid var(--border);padding:10px;text-align:left;}
article.post-body th{background:var(--ink);color:var(--white);}

/* Placeholder / draft notes */
.draft-note{
  background:var(--beige);border:1px dashed var(--accent);border-radius:var(--radius);
  padding:16px 20px;color:var(--ink);font-size:.92rem;margin:16px 0;
}

/* Framework diagram */
.boom-line{display:flex;align-items:center;gap:0;margin:36px 0;}
.boom-side{flex:1;padding:24px;border-radius:var(--radius);}
.boom-left{background:var(--ink);color:var(--white);border-radius:var(--radius) 0 0 var(--radius);}
.boom-right{background:var(--signature-navy);color:var(--white);border-radius:0 var(--radius) var(--radius) 0;}
.boom-left h3,.boom-left p,.boom-right h3,.boom-right p{color:var(--white);}
.boom-marker{
  background:var(--accent);color:var(--white);font-family:var(--sans);font-weight:600;padding:14px 18px;
  border-radius:50%;z-index:2;box-shadow:0 6px 14px rgba(20,35,48,.3);white-space:nowrap;
}

/* CTA band */
.cta-band{background:var(--signature-navy);color:var(--white);padding:clamp(44px,7vw,60px) 0;text-align:center;}
.cta-band h2{color:var(--white);}

/* Footer */
footer.site-footer{background:var(--ink-darkest);color:rgba(255,255,255,.72);padding:56px 0 24px;font-family:var(--sans);}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:28px;margin-bottom:32px;}
footer.site-footer h4{font-family:var(--mono);color:var(--white);font-size:.78rem;margin-bottom:14px;text-transform:uppercase;letter-spacing:.12em;}
footer.site-footer a{color:rgba(255,255,255,.72);}
footer.site-footer a:hover{color:var(--white);}
footer.site-footer ul{list-style:none;padding:0;margin:0;}
footer.site-footer li{margin-bottom:8px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:20px;font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.footer-logo{height:60px;width:auto;margin-bottom:16px;}

/* Contact form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-grid .full{grid-column:1/-1;}
label{font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--ink);display:block;margin-bottom:6px;}
input,textarea,select{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);font-size:.95rem;
  font-family:inherit;background:var(--card);color:var(--ink);
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent);}
.contact-card{background:var(--beige);border-radius:var(--radius-lg);padding:24px;border:1px solid var(--border);}
.form-status{font-size:.9rem;font-weight:600;margin-top:14px;}
.form-status:empty{display:none;}
.form-status-success{color:var(--accent);}
.form-status-error{color:var(--accent-hover);}

/* ---- Responsive ---- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:32px;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-5{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .form-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .wrap{padding:0 18px;}
  .header-inner{flex-wrap:wrap;gap:10px;padding:12px 18px;}
  nav.main-nav ul{gap:12px 16px;font-size:.9rem;}
  nav.main-nav a{font-size:.9rem;}
  .grid-4,.grid-5{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:20px;}
  .footer-bottom{flex-direction:column;}
  .btn,.btn-outline{display:block;text-align:center;margin-left:0;margin-top:10px;}
  .boom-line{flex-direction:column;}
  .boom-left,.boom-right{border-radius:var(--radius);}
}

/* ---- Mobile navigation (hamburger) ---- */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto;}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
@media (max-width:760px){
  .header-inner{flex-wrap:wrap;}
  .nav-toggle{display:block;}
  nav.main-nav{display:none;flex-basis:100%;order:3;}
  .site-header .nav-cta{display:none;order:4;}
  .site-header.nav-open nav.main-nav{display:block;}
  .site-header.nav-open .nav-cta{display:inline-block;margin-top:10px;}
  nav.main-nav ul{flex-direction:column;align-items:stretch;gap:0;width:100%;}
  nav.main-nav li{width:100%;border-top:1px solid rgba(255,255,255,.12);}
  nav.main-nav>ul>li>a{display:block;padding:13px 2px;}
  nav.main-nav a:hover{border-bottom:none;opacity:1;}
  .nav-active{border-bottom:none;color:#E6A579!important;}
  .has-dropdown .dropdown{position:static;display:block;background:transparent;border:none;box-shadow:none;min-width:0;padding:0 0 8px 14px;}
  nav.main-nav .dropdown a{color:rgba(255,255,255,.78);padding:9px 2px;border-radius:0;}
  nav.main-nav .dropdown a:hover{background:transparent;color:#fff;}
  .site-header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .site-header.nav-open .nav-toggle span:nth-child(2){opacity:0;}
  .site-header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}