/* ==========================================================================
   WT Partners — site stylesheet
   Palette and type come from the WT Partners master templates and the
   Capabilities Overview. Change the values in :root to restyle the whole site.

   Nothing here loads from another server — no CDN, no web fonts, no trackers.
   All imagery is vector artwork in assets/img/, drawn for this site.
   ========================================================================== */

:root{
  /* ---- Brand colors (from the master PPTX/DOCX theme) ---- */
  --navy:        #0C2340;   /* primary brand navy    */
  --navy-800:    #15385F;   /* deep supporting blue  */
  --navy-600:    #1E4D7B;   /* mid supporting blue   */
  --accent:      #C83803;   /* brand orange accent   */
  --accent-soft: #E8541D;   /* lighter orange, hover */
  --slate:       #5C6B7A;   /* body / secondary text */
  --mist:        #EDF1F6;   /* light section band    */
  --line:        #D7DEE7;   /* hairline borders      */
  --white:       #FFFFFF;

  /* ---- Type ---- */
  --font-display: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* ---- Layout ---- */
  --container: 1180px;
  --gutter: 24px;
  --radius: 3px;

  --shadow-sm: 0 1px 2px rgba(12,35,64,.06), 0 4px 12px rgba(12,35,64,.05);
  --shadow-md: 0 10px 30px rgba(12,35,64,.10), 0 2px 6px rgba(12,35,64,.06);
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ==========================================================================
   Base
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--slate);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy);
  font-weight:400;
  line-height:1.18;
  letter-spacing:-.012em;
  margin:0 0 .5em;
}

h1{ font-size:clamp(2.3rem, 1.4rem + 3.2vw, 3.9rem); }
h2{ font-size:clamp(1.85rem, 1.25rem + 2.1vw, 2.8rem); }
h3{ font-size:clamp(1.18rem, 1.05rem + .5vw, 1.38rem); line-height:1.3; }
h4{ font-size:1.04rem; line-height:1.35; }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--navy-600); text-decoration:none; transition:color .2s var(--ease); }
a:hover{ color:var(--accent); }

strong{ color:var(--navy); font-weight:600; }

::selection{ background:var(--navy); color:#fff; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 20px; font-size:.9rem;
}
.skip-link:focus{ left:12px; top:12px; color:#fff; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ==========================================================================
   Icons
   Every icon is inline SVG in the HTML so it works offline, inherits color
   from its surroundings, and needs no icon font or external sprite.
   The small orange node inside each icon is the .dot class.
   ========================================================================== */

.icon{
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  display:block;
}
.icon .dot{ fill:var(--accent); stroke:none; }
.icon .soft{ stroke-opacity:.45; }

.card-icon{
  width:38px; height:38px;
  color:var(--navy-600);
  flex:0 0 auto;
  transition:color .25s var(--ease), transform .3s var(--ease);
}
.card:hover .card-icon{ color:var(--navy); transform:translateY(-2px); }
.card--navy .card-icon{ color:rgba(255,255,255,.9); }
.card--navy:hover .card-icon{ color:#fff; }
.card--navy .icon .dot{ fill:var(--accent-soft); }

.card-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:20px;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container{
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:var(--gutter);
}
.container--narrow{ max-width:860px; }

.section{ padding:clamp(64px, 8vw, 116px) 0; position:relative; }
.section--tight{ padding:clamp(48px, 5vw, 74px) 0; }
.section--mist{ background:var(--mist); }
.section--navy{ background:var(--navy); color:rgba(255,255,255,.78); }
.section--navy h2,.section--navy h3,.section--navy h4{ color:#fff; }

/* Faint circuit texture behind a light section. Sits under the content and
   never rises above 8% opacity — it is texture, not decoration. */
.section--texture{
  background-color:var(--mist);
  background-image:url("../img/circuit-pattern.svg");
  background-repeat:repeat;
  background-size:160px 160px;
}
.section--texture > .container{ position:relative; z-index:1; }

.section-head{ max-width:760px; margin-bottom:clamp(38px,4vw,58px); }
.section-head.is-centered{ margin-inline:auto; text-align:center; }
.section-head p{ font-size:1.1rem; }
.section-head p:last-of-type{ margin-bottom:0; }

.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-body);
  font-size:.72rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent);
  margin:0 0 18px;
}
.eyebrow::before{ content:""; flex:0 0 3px; height:14px; background:var(--accent); }
.is-centered .eyebrow{ justify-content:center; }
.section--navy .eyebrow{ color:var(--accent-soft); }
.section--navy .eyebrow::before{ background:var(--accent-soft); }

.lede{ font-size:clamp(1.07rem,1rem + .35vw,1.24rem); line-height:1.6; }

/* ==========================================================================
   Power line divider
   A distribution line drawn faintly across the page between sections.
   ========================================================================== */

.divider-power{
  height:100px;
  background-image:url("../img/powerline.svg");
  background-repeat:repeat-x;
  background-position:center bottom;
  background-size:1200px 100px;
  border-bottom:1px solid var(--line);
}
@media (max-width:700px){ .divider-power{ height:70px; background-size:900px 75px; } }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body);
  font-size:.94rem; font-weight:600; letter-spacing:.02em;
  padding:14px 28px;
  border:1px solid transparent; border-radius:var(--radius);
  cursor:pointer;
  transition:background .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-soft); color:#fff; }
.btn--navy{ background:var(--navy); color:#fff; }
.btn--navy:hover{ background:var(--navy-800); color:#fff; }
.btn--ghost{ border-color:var(--line); color:var(--navy); background:transparent; }
.btn--ghost:hover{ border-color:var(--navy); color:var(--navy); background:var(--white); }
.btn--ghost-light{ border-color:rgba(255,255,255,.42); color:#fff; background:transparent; }
.btn--ghost-light:hover{ background:rgba(255,255,255,.1); color:#fff; border-color:#fff; }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
.is-centered .btn-row{ justify-content:center; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:.94rem; color:var(--navy);
}
.link-arrow span{ transition:transform .25s var(--ease); }
.link-arrow:hover{ color:var(--accent); }
.link-arrow:hover span{ transform:translateX(5px); }

/* ==========================================================================
   Header / navigation
   ========================================================================== */

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease);
}
.site-header.is-stuck{ box-shadow:var(--shadow-sm); }

.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:78px;
}

.brand{ display:flex; align-items:center; gap:13px; }
.brand img{ width:42px; height:42px; }
.brand-name{
  font-family:var(--font-display); font-size:1.16rem;
  color:var(--navy); white-space:nowrap;
}

.nav{ display:flex; align-items:center; gap:34px; }
.nav a{ font-size:.95rem; font-weight:500; color:var(--navy); position:relative; padding:6px 0; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ font-weight:600; }

.nav-cta{ display:flex; align-items:center; gap:16px; }

/* Header call-to-action: a quiet outlined button in brand navy, so the
   orange is saved for the real calls to action further down the page. */
.btn--nav{
  padding:10px 20px;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--navy);
  background:transparent;
  border:1px solid var(--navy);
  border-radius:var(--radius);
}
.btn--nav::after{
  content:"\2192";              /* small arrow that nudges on hover */
  font-weight:400;
  transition:transform .25s var(--ease);
}
.btn--nav:hover{
  background:var(--navy);
  color:#fff;
  transform:none;
}
.btn--nav:hover::after{ transform:translateX(3px); }

.nav-toggle{
  display:none; width:44px; height:44px;
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  padding:0; cursor:pointer;
}
.nav-toggle span{
  display:block; width:20px; height:2px; background:var(--navy);
  margin:4px auto; transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* On wide screens the header is just the logo and the links, so the menu
   button's slot is removed and the links sit flush right. */
@media (min-width:921px){ .nav-cta{ display:none; } }

@media (max-width:920px){
  .nav-toggle{ display:block; }
  .nav-cta > .btn{ display:none; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md); padding:8px 0 18px; display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:14px var(--gutter); border-bottom:1px solid var(--line); }
  .nav a:not(.btn)::after{ display:none; }   /* keep the button's arrow */
  .nav a[aria-current="page"]{ border-left:3px solid var(--accent); }
  .nav .btn{ margin:16px var(--gutter) 0; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative; background:var(--navy); color:rgba(255,255,255,.8);
  overflow:hidden; padding:clamp(76px,10vw,128px) 0 clamp(64px,8vw,100px);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 78% 6%, rgba(30,77,123,.55), transparent 62%),
    radial-gradient(700px 500px at 4% 98%, rgba(21,56,95,.5), transparent 66%);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 11px);
  opacity:.5;
}

/* The transmission network, bled off the right edge and held well back so it
   never competes with the headline. */
.hero-art{
  position:absolute; right:-30px; bottom:0;
  width:min(54%, 660px);
  opacity:.17;
  z-index:0;
  pointer-events:none;
  user-select:none;
}
@media (max-width:860px){
  .hero-art{ width:118%; right:-9%; bottom:-14px; opacity:.11; }
}

.hero > .container{ position:relative; z-index:1; }

.hero-grid{ display:grid; grid-template-columns:1fr auto; gap:48px; align-items:start; }
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; } }

.hero-inner{ max-width:700px; }
/* Banner eyebrows (home tagline and each page name) in the same soft gray as
   the intro paragraph; the small orange bar in front stays as the accent. */
.hero .eyebrow,
.page-head .eyebrow{ color:rgba(255,255,255,.82); }
.hero h1{ color:#fff; margin-bottom:.4em; }
.hero h1 em{
  font-style:normal; color:#fff;
  background-image:linear-gradient(transparent 68%, rgba(200,56,3,.9) 68%);
  padding-bottom:.04em;
}
.hero .lede{ max-width:640px; color:rgba(255,255,255,.82); margin-bottom:2em; }

.hero-mark{ width:112px; opacity:.95; }
@media (max-width:860px){ .hero-mark{ display:none; } }

.hero-est{
  font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.6);
  margin:26px 0 0; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.16);
  position:relative;
}
.hero-est::before{
  content:""; position:absolute; top:-1px; left:0;
  width:56px; height:3px; background:var(--accent);
}

/* Specialty ticker beneath the hero */
.capability-bar{
  background:var(--navy-800);
  border-top:1px solid rgba(255,255,255,.1);
  padding:19px 0;
  position:relative; z-index:2;
}
.capability-bar ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 26px;
}
.capability-bar li{
  font-size:.76rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.74);
  display:flex; align-items:center; gap:26px;
}
.capability-bar li::after{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--accent); opacity:.9;
}
.capability-bar li:last-child::after{ display:none; }

/* ==========================================================================
   Grids and cards
   ========================================================================== */

.grid{ display:grid; gap:24px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

@media (max-width:940px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:660px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } }

.card{
  position:relative; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 30px; overflow:hidden;
  transition:border-color .25s var(--ease), box-shadow .3s var(--ease),
             transform .3s var(--ease);
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.card:hover{ transform:translateY(-4px); border-color:#C4CFDC; box-shadow:var(--shadow-md); }
.card:hover::before{ transform:scaleX(1); }

.card h3{ margin-bottom:.5em; }
.card p{ font-size:.97rem; margin-bottom:0; }

.card-index{
  font-family:var(--font-display); font-size:.9rem; color:var(--accent);
  letter-spacing:.06em; display:block;
}

.card-list{
  list-style:none; margin:18px 0 0; padding:16px 0 0;
  border-top:1px solid var(--line);
}

/* Aligned card rows. Every card in a .grid--align row shares the same four
   row tracks (icon row, title, description, list), so the lists all start on
   the same line however long the titles and descriptions are. */
.grid--align > .card{
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 4;
  row-gap:0;
  align-content:start;
}
.grid--align > .card > .card-top{ margin-bottom:20px; }
.grid--align > .card > h3{ margin-bottom:.5em; }
.grid--align > .card > p{ margin-bottom:0; }
@supports not (grid-template-rows:subgrid){
  .grid--align > .card{ display:flex; flex-direction:column; }
  .grid--align > .card > .card-list{ margin-top:auto; padding-top:16px; }
  .grid--align > .card > p{ margin-bottom:18px; }
}
.card-list li{ font-size:.9rem; line-height:1.45; padding:5px 0 5px 18px; position:relative; }
.card-list li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:7px; height:1px; background:var(--accent);
}

.card--navy{ background:var(--navy); border-color:var(--navy); color:rgba(255,255,255,.76); }
.card--navy h3{ color:#fff; }
.card--navy:hover{ border-color:var(--navy-600); }
.card--navy .card-index{ color:var(--accent-soft); font-size:1.05rem; }

/* ==========================================================================
   Specialties
   ========================================================================== */

.spec-row{
  display:grid; grid-template-columns:250px 1fr; gap:28px;
  padding:26px 0; border-bottom:1px solid var(--line); align-items:start;
}
.spec-row:first-of-type{ border-top:1px solid var(--line); }

.spec-label{ display:flex; align-items:center; gap:12px; margin:3px 0 0; }
.spec-label .icon{ width:26px; height:26px; color:var(--navy-600); flex:0 0 auto; }
.spec-label span{
  font-family:var(--font-body); font-size:.76rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--accent);
  line-height:1.35;
}
@media (max-width:760px){ .spec-row{ grid-template-columns:1fr; gap:14px; } }

.tag-row{ display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0; list-style:none; }
.tag{
  display:inline-block; font-size:.87rem; color:var(--navy);
  background:#fff; border:1px solid var(--line);
  border-radius:2px; padding:7px 14px;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.tag:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

.spec-more{ margin-top:34px; }

/* ==========================================================================
   Approach — numbered sequence
   ========================================================================== */

.phases{ counter-reset:phase; }
.phase{
  counter-increment:phase;
  display:grid; grid-template-columns:74px 1fr; gap:26px;
  padding:32px 0; border-top:1px solid var(--line); align-items:start;
}
.phase:last-child{ border-bottom:1px solid var(--line); }
.phase-num{
  font-family:var(--font-display); font-size:2.5rem; line-height:1;
  color:var(--navy); opacity:.22;
  transition:opacity .3s var(--ease), color .3s var(--ease);
}
.phase-num::before{ content:"0" counter(phase); }
.phase:hover .phase-num{ opacity:1; color:var(--accent); }
.phase h3{ margin-bottom:.4em; }
.phase p{ margin-bottom:0; max-width:64ch; font-size:.99rem; }

.section--navy .phase{ border-color:rgba(255,255,255,.16); }
.section--navy .phase-num{ color:#fff; opacity:.3; }
.section--navy .phase:hover .phase-num{ color:var(--accent-soft); opacity:1; }
.section--navy .phase p{ color:rgba(255,255,255,.75); }

@media (max-width:600px){
  .phase{ grid-template-columns:1fr; gap:8px; }
  .phase-num{ font-size:1.5rem; opacity:1; color:var(--accent); }
}

/* ==========================================================================
   Process diagram — "How We Engage"
   Five nodes strung along a conductor line; a vertical timeline on phones.
   ========================================================================== */

.process{
  position:relative;
  display:grid; grid-template-columns:repeat(5,1fr); gap:28px;
  margin-top:10px;
}

/* The conductor behind the nodes. Stretched to the row's width; the stroke
   stays 1.4px thanks to vector-effect. */
.process-line{
  position:absolute; left:0; right:0; top:0;
  width:100%; height:56px;
  fill:none; stroke:rgba(255,255,255,.35); stroke-width:1.4;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}
.process-line path{ vector-effect:non-scaling-stroke; }

.process-step{ position:relative; text-align:center; padding:0 4px; }

.process-node{
  position:relative; z-index:1;
  width:56px; height:56px; margin:0 auto 20px;
  border-radius:50%;
  background:var(--navy-800);
  border:1px solid rgba(255,255,255,.35);
  display:grid; place-items:center;
  box-shadow:0 0 0 8px var(--navy);      /* cuts the line cleanly around the node */
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .3s var(--ease);
}
.process-node .icon{ width:26px; height:26px; color:#fff; }
.process-node .icon .dot{ fill:var(--accent-soft); }
.process-step:hover .process-node{
  border-color:var(--accent-soft); background:var(--navy-600); transform:translateY(-3px);
}

.process-num{
  position:absolute; top:-7px; right:-9px;
  min-width:24px; height:24px; padding:0 6px;
  border-radius:12px;
  background:var(--accent); color:#fff;
  font-family:var(--font-display); font-size:.72rem; letter-spacing:.04em;
  display:grid; place-items:center;
  border:2px solid var(--navy);
}

.process-step h3{ font-size:1.18rem; margin-bottom:.45em; }
.process-step p{ font-size:.92rem; line-height:1.55; color:rgba(255,255,255,.74); margin-bottom:12px; }

.process-out{
  display:inline-block; font-size:.8rem !important; color:#fff !important;
  padding-top:10px; border-top:1px solid rgba(255,255,255,.16);
}
.process-out span{
  display:block; font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-soft); margin-bottom:3px;
}

/* Phones and narrow tablets: vertical timeline */
@media (max-width:860px){
  .process{ grid-template-columns:1fr; gap:0; }
  .process-line{ display:none; }
  .process-step{
    display:grid; grid-template-columns:56px 1fr; gap:20px;
    text-align:left; padding:0 0 30px; align-items:start;
  }
  .process-step::before{
    content:""; position:absolute; left:27.5px; top:56px; bottom:0;
    width:1px; background:rgba(255,255,255,.22);
  }
  .process-step:last-child{ padding-bottom:0; }
  .process-step:last-child::before{ display:none; }
  .process-node{ margin:0; box-shadow:none; grid-row:1 / span 4; }
  .process-step h3{ grid-column:2; margin-top:12px; }
  .process-step p,.process-out{ grid-column:2; }
  .process-node ~ *{ grid-column:2; }
}

/* ==========================================================================
   Split feature block
   ========================================================================== */

.split{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,70px); align-items:center;
}
.split--top{ align-items:start; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }

.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:6px 32px; box-shadow:var(--shadow-sm);
}
.panel dl{ margin:0; }
.panel dl > div{ padding:24px 0; border-bottom:1px solid var(--line); }
.panel dl > div:last-child{ border-bottom:0; }
.panel dt{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-size:1.13rem;
  color:var(--navy); margin-bottom:6px;
}
.panel dt .icon{
  width:26px; height:26px; color:var(--navy-600); flex:0 0 auto;
  transition:color .25s var(--ease);
}
.panel dl > div:hover dt .icon{ color:var(--accent); }
.panel dd{ margin:0; padding-left:38px; font-size:.95rem; line-height:1.55; }

/* ==========================================================================
   Client / sector list
   ========================================================================== */

.sector-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.sector-list li{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:22px 24px; background:#fff;
  display:flex; align-items:center; gap:13px;
  font-family:var(--font-display); font-size:1.05rem; color:var(--navy);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.sector-list .icon{
  width:22px; height:22px; flex:0 0 auto;
  color:var(--navy-600); opacity:.75;
  transition:color .25s var(--ease), opacity .25s var(--ease);
}
.sector-list li:hover{ background:var(--navy); color:#fff; }
.sector-list li:hover .icon{ color:#fff; opacity:1; }
@media (max-width:940px){ .sector-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .sector-list{ grid-template-columns:1fr; } }

/* ==========================================================================
   Case studies
   ========================================================================== */

.case{ display:flex; flex-direction:column; }
.case-meta{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;
  list-style:none; padding:0;
}
.case-meta li{
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy-600); background:var(--mist); border:1px solid var(--line);
  border-radius:2px; padding:5px 10px;
}
.case-meta li.is-capability{ color:var(--accent); background:#fff; }
.case h3{ margin-bottom:.9em; }

.case-block{ margin-bottom:16px; }
.case-block h4{
  font-family:var(--font-body); font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin:0 0 5px;
}
.case-block p{ font-size:.96rem; }

.case-result{
  margin-top:auto; padding-top:18px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
}
.case-result .icon{ width:24px; height:24px; color:var(--navy-600); margin-top:2px; }
.case-result strong{ display:block; font-family:var(--font-display); font-weight:400; font-size:1.02rem; margin-bottom:2px; }
.case-result span{ font-size:.9rem; }

.case--wide{ grid-column:1 / -1; }
.case-apps{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:4px 0 18px;
}
@media (max-width:760px){ .case-apps{ grid-template-columns:1fr; } }
.case-app{
  background:var(--mist); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px;
}
.case-app h4{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:1.08rem; font-weight:400;
  text-transform:none; letter-spacing:0; color:var(--navy); margin:0 0 8px;
}
.case-app h4 .icon{ width:24px; height:24px; color:var(--navy-600); flex:0 0 auto; }
.case-app p{ font-size:.94rem; margin:0; }

.case-note{
  font-size:.9rem; line-height:1.55; margin-top:34px; padding:18px 22px;
  border-left:3px solid var(--accent); background:var(--mist);
}

/* ==========================================================================
   Registration badges
   ========================================================================== */

.badge-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
}
.badge{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 16px; text-align:center;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.badge:hover{ border-color:var(--navy-600); transform:translateY(-3px); }
.badge strong{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:1.14rem; color:var(--navy); margin-bottom:5px; letter-spacing:.02em;
}
.badge span{ display:block; font-size:.79rem; line-height:1.4; }
@media (max-width:900px){ .badge-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .badge-grid{ grid-template-columns:repeat(2,1fr); } }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band{
  background:var(--navy); color:rgba(255,255,255,.8);
  padding:clamp(58px,7vw,90px) 0; position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(760px 420px at 82% 10%, rgba(30,77,123,.6), transparent 64%);
}
.cta-band .container{ position:relative; z-index:1; }
.cta-band h2{ color:#fff; }
.cta-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:40px; flex-wrap:wrap;
}
.cta-inner > div{ max-width:640px; }
.cta-inner p{ margin-bottom:0; color:rgba(255,255,255,.78); }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(28px,4vw,44px); box-shadow:var(--shadow-sm);
}
.field{ margin-bottom:22px; }
.field label{
  display:block; font-size:.8rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--navy); margin-bottom:8px;
}
.field .req{ color:var(--accent); }
.field input,.field select,.field textarea{
  width:100%; font-family:var(--font-body); font-size:1rem;
  color:var(--navy); background:#fff;
  border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 15px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--navy-600);
  box-shadow:0 0 0 3px rgba(30,77,123,.13);
}
.field input::placeholder,.field textarea::placeholder{ color:#9AA7B4; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }

.form-note{
  font-size:.85rem; line-height:1.5;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
}

/* Honeypot — hidden from people, catches naive spam bots */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-status{
  margin-top:18px; padding:14px 16px; border-radius:var(--radius);
  font-size:.92rem; border:1px solid var(--line); background:var(--mist);
  color:var(--navy);
}
.form-status[hidden]{ display:none; }
.form-status--error{ border-color:var(--accent); border-left-width:3px; }
.btn[disabled]{ opacity:.6; cursor:default; transform:none; }

.contact-details{ list-style:none; margin:0; padding:0; }
.contact-details li{
  padding:20px 0; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
}
.contact-details li:first-child{ padding-top:0; }
.contact-details .icon{ width:26px; height:26px; color:var(--navy-600); margin-top:3px; }
.contact-details h4{ margin-bottom:4px; }
.contact-details p{ margin-bottom:0; font-size:.97rem; }

/* ==========================================================================
   Interior page header
   ========================================================================== */

.page-head{
  background:var(--navy); color:rgba(255,255,255,.78);
  padding:clamp(56px,7vw,90px) 0 clamp(52px,6vw,78px);
  position:relative; overflow:hidden;
}
.page-head::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(820px 460px at 85% 0%, rgba(30,77,123,.55), transparent 62%);
}
.page-head::after{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 11px);
  opacity:.55;
}
.page-head-art{
  position:absolute; right:-40px; bottom:-10px;
  width:min(42%, 430px); opacity:.13; z-index:0; pointer-events:none;
}
@media (max-width:800px){ .page-head-art{ display:none; } }
.page-head .container{ position:relative; z-index:1; max-width:900px; }
.page-head h1{ color:#fff; margin-bottom:.4em; }
/* Same orange devices as the home hero: barred eyebrow, underline highlight,
   and a ruled tagline strip. */
.page-head h1 em{
  font-style:normal; color:#fff;
  background-image:linear-gradient(transparent 68%, rgba(200,56,3,.9) 68%);
  padding-bottom:.04em;
}
.page-head .lede{ color:rgba(255,255,255,.8); max-width:680px; margin-bottom:0; }
.page-head-strip{
  font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.62);
  margin:26px 0 0; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16);
  position:relative;
}
.page-head-strip::before{
  content:""; position:absolute; top:-1px; left:0;
  width:56px; height:3px; background:var(--accent);
}

.breadcrumb{
  font-size:.75rem; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-bottom:18px;
}
.breadcrumb a{ color:rgba(255,255,255,.72); }
.breadcrumb a:hover{ color:#fff; }

/* ==========================================================================
   Prose
   ========================================================================== */

.prose h2{ margin-top:1.7em; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin-top:1.9em; }
.prose ul{ margin:0 0 1.2em; padding-left:0; list-style:none; }
.prose ul li{ position:relative; padding:6px 0 6px 24px; }
.prose ul li::before{
  content:""; position:absolute; left:0; top:1em;
  width:10px; height:1px; background:var(--accent);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{
  background:var(--navy); color:rgba(255,255,255,.62);
  padding:clamp(52px,6vw,72px) 0 32px; font-size:.93rem;
}
.footer-grid{
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:42px; border-bottom:1px solid rgba(255,255,255,.14);
}
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; gap:30px; } }

.footer-brand img{ width:54px; height:54px; margin-bottom:18px; }
.footer-brand p{ max-width:36ch; font-size:.93rem; line-height:1.6; }

.site-footer h4{
  color:#fff; font-family:var(--font-body);
  font-size:.74rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:16px;
}
.footer-links{ list-style:none; margin:0; padding:0; }
.footer-links li{ margin-bottom:10px; }
.footer-links a{ color:rgba(255,255,255,.66); }
.footer-links a:hover{ color:#fff; }

.footer-bottom a{ color:rgba(255,255,255,.7); }
.footer-bottom a:hover{ color:#fff; }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding-top:26px; font-size:.83rem; color:rgba(255,255,255,.5);
}

/* ==========================================================================
   Scroll reveal
   Content is visible by default; main.js adds .reveal-ready before animating,
   so nothing is ever hidden if JavaScript is blocked or fails to load.
   ========================================================================== */

.reveal-ready .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-ready .reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .reveal-ready .reveal{ opacity:1; transform:none; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print{
  .site-header,.cta-band,.nav-toggle,.capability-bar,
  .hero-art,.page-head-art,.divider-power{ display:none; }
  body{ color:#000; font-size:11pt; }
  .hero,.page-head,.section--navy,.site-footer,.card--navy,.section--texture{
    background:#fff !important; color:#000;
  }
  .hero h1,.page-head h1,.section--navy h2,.card--navy h3{ color:#000; }
  .card{ break-inside:avoid; }
}