/* =========================================================
   BISON TECHNOLOGIES
   FIELD OPERATIONS DESIGN SYSTEM
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

:root{

  --ink:#1B2118;
  --ink-2:#242B1F;
  --ink-3:#2E3627;

  --khaki:#D8D0B4;

  --khaki-dim:
    rgba(216,208,180,.45);

  --khaki-faint:
    rgba(216,208,180,.14);

  --paper:#E3E1D2;
  --paper-2:#D4D1BE;
  --paper-3:#F4F3EC;

  --text:#23281E;
  --graphite:#6B6C5C;

  --orange:#FF5A1F;

  --orange-dim:
    rgba(255,90,31,.16);

  --display:
    'Staatliches',
    sans-serif;

  --body:
    'Barlow',
    sans-serif;

  --mono:
    'Roboto Mono',
    monospace;
}

/* =========================================================
   RESET
   ========================================================= */

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

html{
  scroll-behavior:smooth;
}

body{
  margin:0;

  background:var(--paper);

  color:var(--text);

  font-family:var(--body);

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}

img,
svg{
  display:block;

  max-width:100%;
}

a{
  color:inherit;

  text-decoration:none;
}

ul{
  list-style:none;

  margin:0;

  padding:0;
}

p{
  margin-top:0;
}

h1,
h2,
h3,
h4{
  margin:0;

  font-family:var(--display);

  font-weight:400;

  letter-spacing:.02em;

  text-transform:uppercase;
}

:focus-visible{
  outline:
    2px solid var(--orange);

  outline-offset:3px;
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.skip-link{
  position:absolute;

  left:-999px;
  top:0;

  padding:
    10px 18px;

  background:
    var(--orange);

  color:
    var(--ink);

  font-family:
    var(--mono);

  font-size:
    13px;

  z-index:999;
}

.skip-link:focus{
  left:12px;

  top:12px;
}

/* =========================================================
   GLOBAL CONTAINER
   ========================================================= */

.wrap{
  width:80%;
  max-width:none;
  margin:0 auto;
  padding:0;
}

@media(max-width:640px){
  .wrap{
    width:90%;
  }
}

/* =========================================================
   LABEL / TAG
   ========================================================= */

.tag{
  display:flex;

  align-items:center;

  gap:10px;

  margin-bottom:
    16px;

  color:
    var(--graphite);

  font-family:
    var(--mono);

  font-size:
    11.5px;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}

.tag::before{
  content:"//";

  color:
    var(--orange);

  font-weight:
    700;
}

section.on-dark .tag{
  color:
    var(--khaki-dim);
}

/* =========================================================
   SECTION HEADING
   ========================================================= */

.section-head{
  max-width:
    680px;

  margin-bottom:
    52px;
}

.section-head h2{
  font-size:
    clamp(
      30px,
      4vw,
      48px
    );

  line-height:
    1.05;
}

.section-head p{
  max-width:
    58ch;

  margin-top:
    16px;

  color:
    var(--graphite);

  font-size:
    16px;

  line-height:
    1.7;
}

section.on-dark
.section-head h2{
  color:
    var(--paper-3);
}

section.on-dark
.section-head p{
  color:
    var(--khaki-dim);
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  padding:
    14px 24px;

  border:
    1.5px solid transparent;

  cursor:pointer;

  font-family:
    var(--mono);

  font-size:
    12.5px;

  font-weight:
    500;

  letter-spacing:
    .06em;

  text-transform:
    uppercase;

  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    color .16s ease;
}

.btn:hover{
  transform:
    translateY(-2px);
}

/* Primary */

.btn-primary{
  background:
    var(--orange);

  border-color:
    var(--orange);

  color:
    var(--ink);

  font-weight:
    700;
}

.btn-primary:hover{
  background:
    #FF7440;

  border-color:
    #FF7440;
}

/* Light outline */

.btn-outline{
  color:
    var(--text);

  border-color:
    var(--text);
}

.btn-outline:hover{
  background:
    var(--text);

  color:
    var(--paper);
}

/* Dark outline */

.btn-outline-dark{
  color:
    var(--khaki);

  border-color:
    var(--khaki-faint);
}

.btn-outline-dark:hover{
  border-color:
    var(--khaki);

  background:
    rgba(216,208,180,.06);
}

/* =========================================================
   HEADER
   ========================================================= */

.site-header{
  position:sticky;

  top:0;

  z-index:500;

  background:
    var(--ink);

  border-bottom:
    1px solid
    var(--khaki-faint);
}

.header-inner{
  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:20px;

  padding:
    14px 0;
}

/* =========================================================
   BRAND
   ========================================================= */

.brand{
  display:flex;

  align-items:center;

  gap:14px;
}

.brand-mark{
  width:40px;

  height:40px;

  flex-shrink:0;
}

.brand-text{
  display:flex;

  flex-direction:column;
}

.brand-text .name{
  color:
    var(--khaki);

  font-family:
    var(--display);

  font-size:
    22px;

  letter-spacing:
    .04em;

  line-height:1;
}

.brand-text .meta{
  margin-top:
    4px;

  color:
    var(--khaki-dim);

  font-family:
    var(--mono);

  font-size:
    9.5px;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}

/* =========================================================
   MOBILE MENU
   ========================================================= */

.menu-toggle{
  display:none;

  padding:
    8px 12px;

  background:none;

  color:
    var(--khaki);

  border:
    1px solid
    var(--khaki-faint);

  cursor:pointer;

  font-family:
    var(--mono);

  font-size:
    11px;
}

/* =========================================================
.section-foot{
  margin-top:
    44px;
}

/* =========================================================
   SERVICES
   ========================================================= */

.services{
  padding:
    100px 0;
}

.cap-list{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:1px;

  background:
    var(--paper-2);

  border:
    1px solid
    var(--paper-2);
}

.cap-item{
  display:flex;

  gap:16px;

  padding:
    24px 26px;

  background:
    var(--paper-3);
}

.cap-code{
  flex-shrink:0;

  padding-top:
    2px;

  color:
    var(--orange);

  font-family:
    var(--mono);

  font-size:
    12px;

  font-weight:
    700;
}

.cap-item h3{
  margin-bottom:
    6px;

  font-family:
    var(--body);

  font-size:
    15.5px;

  font-weight:
    700;

  letter-spacing:0;

  text-transform:none;
}

.cap-item p{
  margin:0;

  color:
    var(--graphite);

  font-size:
    14px;

  line-height:
    1.65;
}

/* =========================================================
   WHY US
   ========================================================= */

.whyus{
  padding:
    100px 0;

  background:
    var(--ink);

  color:
    var(--khaki);
}

.checklist{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--khaki-faint);
}

.check-row{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:22px 24px;
  border-top:none;
}

.check-row:nth-child(even){
  border-left:1px dashed var(--khaki-faint);
}

.check-row:nth-child(n+3){
  border-top:1px dashed var(--khaki-faint);
}

@media(max-width:760px){
  .checklist{
    grid-template-columns:1fr;
  }

  .check-row:nth-child(even){
    border-left:none;
  }

  .check-row:nth-child(n+2){
    border-top:1px dashed var(--khaki-faint);
  }
}
.checkbox{
  display:flex;

  align-items:center;

  justify-content:
    center;

  flex-shrink:0;

  width:22px;

  height:22px;

  margin-top:
    2px;

  color:
    var(--orange);

  border:
    1.5px solid
    var(--orange);

  font-family:
    var(--mono);

  font-size:
    13px;
}

.check-row h3{
  margin-bottom:
    5px;

  color:
    var(--khaki);

  font-family:
    var(--body);

  font-size:
    16px;

  font-weight:
    700;

  letter-spacing:0;

  text-transform:none;
}

.check-row p{
  max-width:
    64ch;

  margin:0;

  color:
    var(--khaki-dim);

  font-size:
    14px;

  line-height:
    1.65;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer{
  background:
    var(--ink);

  color:
    var(--khaki-dim);
}

/* Manifest */

.manifest-strip{
  display:flex;

  flex-wrap:wrap;

  border-top:
    1px solid
    var(--khaki-faint);

  border-bottom:
    1px solid
    var(--khaki-faint);
}

.manifest-cell{
  flex:
    1 1 160px;

  padding:
    16px 22px;

  border-right:
    1px solid
    var(--khaki-faint);
}

.manifest-cell:last-child{
  border-right:none;
}

.manifest-cell .k{
  display:block;

  margin-bottom:
    5px;

  font-family:
    var(--mono);

  font-size:
    9.5px;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;

  opacity:.7;
}

.manifest-cell .v{
  color:
    var(--paper-3);

  font-family:
    var(--mono);

  font-size:
    13px;
}

/* Footer grid */

.footer-grid{
  display:grid;

  grid-template-columns:
    1.4fr 1fr 1fr 1.2fr;

  gap:48px;

  padding:
    56px 0 40px;
}

.footer-brand .brand{
  margin-bottom:
    16px;
}

.footer-brand
.brand-text .name{
  color:
    var(--paper-3);
}

.footer-brand p{
  max-width:
    34ch;

  font-size:
    14px;

  line-height:
    1.7;
}

.footer-col h4{
  margin-bottom:
    18px;

  color:
    var(--paper-3);

  font-family:
    var(--mono);

  font-size:
    11px;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}

.footer-col ul li{
  margin-bottom:
    11px;
}

.footer-col ul li a{
  font-size:
    14px;

  transition:
    color .15s ease;
}

.footer-col ul li a:hover{
  color:
    var(--orange);
}

.footer-contact li{
  margin-bottom:
    16px;
}

.footer-contact .label{
  display:block;

  margin-bottom:
    3px;

  font-family:
    var(--mono);

  font-size:
    10px;

  letter-spacing:
    .1em;

  text-transform:
    uppercase;

  opacity:.7;
}

.footer-contact .value{
  color:
    var(--paper-3);

  font-size:
    14.5px;
}

.footer-bottom{
  display:flex;

  justify-content:
    space-between;

  flex-wrap:wrap;

  gap:10px;

  padding:
    22px 0 30px;

  font-family:
    var(--mono);

  font-size:
    11.5px;
}

/* =========================================================
   REVEAL
   ========================================================= */

.reveal{
  opacity:0;

  transform:
    translateY(16px);

  transition:
    opacity .6s ease,
    transform .6s ease;
}

.reveal.is-visible{
  opacity:1;

  transform:none;
}

/* =========================================================
   RESPONSIVE 860
   ========================================================= */

@media(max-width:860px){

  .footer-grid{
    grid-template-columns:
      1fr 1fr;
  }

}

/* =========================================================
   RESPONSIVE 760
   ========================================================= */

@media(max-width:760px){

  .cap-list{
    grid-template-columns:
      1fr;
  }

}

/* =========================================================
   RESPONSIVE 640
   ========================================================= */

@media(max-width:640px){
  .services,
  .whyus{
    padding:74px 0;
  }

  .section-head{
    margin-bottom:38px;
  }
}
/* =========================================================
   RESPONSIVE 520
   ========================================================= */

@media(max-width:520px){
  .footer-grid{
    grid-template-columns:1fr;
  }

  .manifest-cell{
    flex-basis:50%;
  }
}
/* =========================================================
   RESPONSIVE 400
   ========================================================= */

@media(max-width:400px){

  .hero h1{
    font-size:
      39px;
  }

  .manifest-cell{
    flex-basis:
      100%;

    border-right:none;

    border-bottom:
      1px solid
      var(--khaki-faint);
  }

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .001ms !important;
  }

  .reveal{
    opacity:1;

    transform:none;
  }

}

/* =========================================================
   SERVICES PAGE
   ========================================================= */

/* =========================================================
   SERVICES HERO
   ========================================================= */

.service-page-hero{
  position:relative;

  overflow:hidden;

  padding:
    82px 0 76px;

  background:
    var(--ink);

  color:
    var(--khaki);
}

/* Technical radar background */

.service-page-hero::before{
  content:"";

  position:absolute;

  width:760px;
  height:760px;

  right:-140px;
  top:-300px;

  border-radius:50%;

  background:
    repeating-radial-gradient(
      circle,
      transparent 0,
      transparent 48px,
      rgba(216,208,180,.065) 49px,
      transparent 50px
    );

  pointer-events:none;
}

.service-page-hero::after{
  content:"";

  position:absolute;

  width:400px;
  height:400px;

  right:7%;
  top:8%;

  background:
    radial-gradient(
      circle,
      rgba(255,90,31,.10),
      transparent 68%
    );

  pointer-events:none;
}

/* =========================================================
   HERO HEADING
   ========================================================= */

.service-page-hero-heading{
  position:relative;

  z-index:2;

  width:100%;
}

.service-page-hero-heading .tag{
  margin-bottom:20px;
}

.service-page-hero h1{
  width:100%;

  max-width:none;

  margin:0;

  color:
    var(--paper-3);

  font-size:
    clamp(
      46px,
      6.3vw,
      82px
    );

  line-height:
    .96;

  letter-spacing:
    .015em;
}

/* =========================================================
   HERO LOWER AREA
   ========================================================= */

.service-hero-lower{
  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
    .72fr 1.28fr;

  align-items:end;

  gap:70px;

  margin-top:56px;
}

.service-hero-left{
  display:flex;

  flex-direction:column;

  justify-content:
    space-between;

  gap:50px;

  min-height:100%;
}

/* =========================================================
   HERO ACTIONS
   ========================================================= */

.service-hero-actions{
  display:flex;

  flex-wrap:wrap;

  gap:14px;
}

/* Technical service list */

.service-hero-systems{
  display:flex;

  flex-wrap:wrap;

  gap:10px 18px;

  padding-top:20px;

  border-top:
    1px dashed
    var(--khaki-faint);

  color:
    var(--khaki-dim);

  font-family:
    var(--mono);

  font-size:9px;

  letter-spacing:.1em;
}

.service-hero-systems span{
  display:flex;

  align-items:center;

  gap:7px;
}

.service-hero-systems span::before{
  content:"";

  width:5px;
  height:5px;

  background:
    var(--orange);
}

/* =========================================================
   SERVICE OPERATIONS PANEL
   ========================================================= */

.service-ops-panel{
  width:100%;

  background:
    var(--ink-2);

  border:
    1px solid
    var(--khaki-faint);
}

.service-ops-head{
  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:20px;

  padding:
    14px 18px;

  color:
    var(--khaki);

  border-bottom:
    1px dashed
    var(--khaki-faint);

  font-family:
    var(--mono);

  font-size:10px;

  letter-spacing:.11em;

  text-transform:
    uppercase;
}

/* =========================================================
   OPS STATUS
   ========================================================= */

.service-ops-status{
  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:20px;

  padding:
    20px 18px;
}

.ops-status-label{
  display:block;

  margin-bottom:5px;

  color:
    var(--khaki-dim);

  font-family:
    var(--mono);

  font-size:9px;

  letter-spacing:.11em;
}

.service-ops-status strong{
  color:
    var(--paper-3);

  font-family:
    var(--mono);

  font-size:12px;

  font-weight:500;
}

.ops-online{
  color:
    var(--orange);

  font-family:
    var(--mono);

  font-size:10px;

  letter-spacing:.08em;
}

/* =========================================================
   OPS METRICS
   ========================================================= */

.service-ops-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  border-top:
    1px solid
    var(--khaki-faint);

  border-bottom:
    1px solid
    var(--khaki-faint);
}

.ops-metric{
  min-width:0;

  padding:
    18px 14px;

  border-right:
    1px solid
    var(--khaki-faint);
}

.ops-metric:last-child{
  border-right:none;
}

.ops-metric span{
  display:block;

  margin-bottom:7px;

  color:
    var(--khaki-dim);

  font-family:
    var(--mono);

  font-size:8px;

  letter-spacing:.08em;
}

.ops-metric strong{
  color:
    var(--paper-3);

  font-family:
    var(--mono);

  font-size:12px;

  font-weight:500;

  line-height:1.35;
}

/* =========================================================
   READINESS BARS
   ========================================================= */

.service-ops-lines{
  padding:
    22px 18px;
}

.ops-line{
  display:grid;

  grid-template-columns:
    125px 1fr 45px;

  align-items:center;

  gap:14px;

  margin-bottom:15px;

  font-family:
    var(--mono);

  font-size:8.5px;

  letter-spacing:.05em;
}

.ops-line:last-child{
  margin-bottom:0;
}

.ops-line > span{
  color:
    var(--khaki-dim);
}

.ops-line > strong{
  color:
    var(--orange);

  font-size:8px;

  text-align:right;
}

.ops-bar{
  position:relative;

  height:4px;

  overflow:hidden;

  background:
    var(--khaki-faint);
}

.ops-fill{
  position:absolute;

  left:0;
  top:0;
  bottom:0;

  background:
    var(--orange);
}

.ops-fill-92{
  width:92%;
}

.ops-fill-84{
  width:84%;
}

.ops-fill-78{
  width:78%;
}

.ops-fill-88{
  width:88%;
}

/* =========================================================
   OPS FOOTER
   ========================================================= */

.service-ops-foot{
  display:flex;

  justify-content:
    space-between;

  gap:20px;

  padding:
    13px 18px;

  color:
    var(--khaki-dim);

  border-top:
    1px dashed
    var(--khaki-faint);

  font-family:
    var(--mono);

  font-size:8.5px;

  letter-spacing:.08em;

  text-transform:
    uppercase;
}

/* =========================================================
   SERVICES INTRO
   ========================================================= */

.service-intro{
  padding:
    100px 0 52px;

  background:
    var(--paper);
}

.service-intro .wrap{
  width:80%;
}

.service-intro h2{
  width:100%;

  max-width:none;

  margin:0;

  color:
    var(--text);

  font-size:
    clamp(
      42px,
      5.6vw,
      68px
    );

  line-height:.98;
}

/* =========================================================
   SERVICE CATALOGUE
   ========================================================= */

.service-catalogue{
  padding:
    0 0 110px;

  background:
    var(--paper);
}

.service-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:1px;

  background:
    var(--paper-2);

  border:
    1px solid
    var(--paper-2);
}

/* =========================================================
   SERVICE CARD
   ========================================================= */

.service-card{
  position:relative;

  display:flex;

  flex-direction:column;

  min-width:0;

  min-height:300px;

  padding:
    28px 26px 30px;

  overflow:hidden;

  background:
    var(--paper-3);

  transition:
    background .2s ease;
}

/* Orange bottom activation line */

.service-card::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:3px;

  background:
    var(--orange);

  transform:
    scaleX(0);

  transform-origin:
    left;

  transition:
    transform .22s ease;
}

.service-card:hover{
  background:
    #EEEDE3;
}

.service-card:hover::after{
  transform:
    scaleX(1);
}

/* =========================================================
   SERVICE CARD TOP
   ========================================================= */

.service-card-top{
  display:flex;

  justify-content:
    space-between;

  align-items:flex-start;

  gap:20px;

  margin-bottom:40px;
}

.ops-code{
  flex-shrink:0;

  color:
    var(--orange);

  font-family:
    var(--mono);

  font-size:10.5px;

  font-weight:700;

  letter-spacing:.06em;
}

.service-type{
  color:
    var(--graphite);

  font-family:
    var(--mono);

  font-size:8.5px;

  letter-spacing:.08em;

  text-align:right;
}

/* =========================================================
   SERVICE CARD HEADING
   ========================================================= */

.service-card h3{
  width:100%;

  max-width:none;

  margin:
    0 0 12px;

  color:
    var(--text);

  font-family:
    var(--body);

  font-size:18px;

  font-weight:700;

  letter-spacing:0;

  line-height:1.28;

  text-transform:none;
}

/* =========================================================
   SERVICE CARD DESCRIPTION
   ========================================================= */

.service-card p{
  width:100%;

  max-width:none;

  margin:0;

  color:
    var(--graphite);

  font-size:14px;

  line-height:1.68;
}

/* =========================================================
   MAST CARD
   ========================================================= */

.service-card-expanded{
  min-height:370px;

  background:
    var(--paper-2);
}

.service-sub{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:
    7px 18px;

  margin-top:20px;
}

.service-sub li{
  display:flex;

  align-items:baseline;

  gap:8px;

  color:
    var(--text);

  font-size:12.5px;
}

.service-sub li::before{
  content:"—";

  flex-shrink:0;

  color:
    var(--orange);

  font-family:
    var(--mono);
}

/* =========================================================
   WIDE LICENSING CARD
   ========================================================= */

.service-card-wide{
  grid-column:
    span 2;

  background:
    var(--ink);

  color:
    var(--khaki);
}

.service-card-wide:hover{
  background:
    var(--ink-2);
}

.service-card-wide
.service-type{
  color:
    var(--khaki-dim);
}

.service-card-wide h3{
  width:100%;

  max-width:none;

  color:
    var(--paper-3);

  font-size:22px;
}

.service-card-wide p{
  width:100%;

  max-width:none;

  color:
    var(--khaki-dim);
}

/* =========================================================
   DEPLOYMENT PROCESS
   ========================================================= */

.service-process{
  padding:
    100px 0;

  background:
    var(--ink);

  color:
    var(--khaki);
}

.service-process h2{
  width:100%;

  max-width:none;

  margin:
    0 0 56px;

  color:
    var(--paper-3);

  font-size:
    clamp(
      42px,
      5.6vw,
      68px
    );

  line-height:.98;
}

/* =========================================================
   PROCESS GRID
   ========================================================= */

.process-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  width:100%;

  border:
    1px solid
    var(--khaki-faint);
}

.process-step{
  min-width:0;

  min-height:290px;

  padding:
    24px;

  border-right:
    1px dashed
    var(--khaki-faint);
}

.process-step:last-child{
  border-right:none;
}

.process-number{
  display:block;

  color:
    var(--orange);

  font-family:
    var(--mono);

  font-size:11px;

  font-weight:700;
}

.process-state{
  display:inline-block;

  margin:
    38px 0 42px;

  padding:
    5px 8px;

  color:
    var(--khaki-dim);

  border:
    1px solid
    var(--khaki-faint);

  font-family:
    var(--mono);

  font-size:8px;

  letter-spacing:.1em;
}

.process-step h3{
  width:100%;

  max-width:none;

  margin-bottom:10px;

  color:
    var(--paper-3);

  font-family:
    var(--body);

  font-size:17px;

  font-weight:700;

  letter-spacing:0;

  text-transform:none;
}

.process-step p{
  width:100%;

  max-width:none;

  margin:0;

  color:
    var(--khaki-dim);

  font-size:13.5px;

  line-height:1.65;
}

/* =========================================================
   CLOSING CTA
   ========================================================= */

.service-closing{
  padding:
    100px 0;

  background:
    var(--paper);
}

.service-closing-panel{
  display:grid;

  grid-template-columns:
    1fr auto;

  align-items:end;

  gap:60px;

  width:100%;

  padding:
    50px;

  background:
    var(--paper-3);

  border:
    1px solid
    var(--paper-2);
}

.service-closing-panel > div:first-child{
  min-width:0;
}

.service-closing-panel h2{
  width:100%;

  max-width:none;

  margin:0;

  color:
    var(--text);

  font-size:
    clamp(
      38px,
      5vw,
      62px
    );

  line-height:.98;
}

.service-closing-action{
  display:flex;

  flex-direction:column;

  align-items:flex-start;

  gap:13px;

  flex-shrink:0;
}

.service-closing-label{
  color:
    var(--graphite);

  font-family:
    var(--mono);

  font-size:9px;

  letter-spacing:.12em;
}

/* =========================================================
   RESPONSIVE — 1100PX
   ========================================================= */

@media(max-width:1100px){

  .service-hero-lower{
    grid-template-columns:
      .65fr 1.35fr;

    gap:45px;
  }

  .service-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .service-card-wide{
    grid-column:
      span 2;
  }

  .process-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .process-step:nth-child(2){
    border-right:none;
  }

  .process-step:nth-child(-n+2){
    border-bottom:
      1px dashed
      var(--khaki-faint);
  }

}

/* =========================================================
   RESPONSIVE — 900PX
   ========================================================= */

@media(max-width:900px){

  .service-page-hero h1{
    font-size:
      clamp(
        44px,
        8vw,
        68px
      );
  }

  .service-hero-lower{
    grid-template-columns:
      1fr;

    gap:45px;
  }

  .service-hero-left{
    gap:32px;
  }

  .service-ops-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .ops-metric:nth-child(2){
    border-right:none;
  }

  .ops-metric:nth-child(-n+2){
    border-bottom:
      1px solid
      var(--khaki-faint);
  }

  .ops-metric:nth-child(3){
    border-right:
      1px solid
      var(--khaki-faint);
  }

  .service-closing-panel{
    grid-template-columns:
      1fr;

    align-items:start;

    gap:36px;
  }

}

/* =========================================================
   RESPONSIVE — 640PX
   ========================================================= */

@media(max-width:640px){

  .service-page-hero{
    padding:
      64px 0;
  }

  .service-page-hero h1{
    font-size:
      46px;
  }

  .service-page-hero-heading .tag{
    margin-bottom:16px;
  }

  .service-hero-lower{
    margin-top:42px;
  }

  .service-hero-actions{
    flex-direction:column;
  }

  .service-hero-actions .btn{
    width:100%;
  }

  .service-hero-systems{
    display:grid;

    grid-template-columns:
      repeat(2,1fr);
  }

  .service-intro{
    padding:
      72px 0 38px;
  }

  .service-intro .wrap{
    width:90%;
  }

  .service-intro h2,
  .service-process h2{
    font-size:
      46px;
  }

  .service-catalogue{
    padding-bottom:
      72px;
  }

  .service-grid{
    grid-template-columns:
      1fr;
  }

  .service-card{
    min-height:auto;
  }

  .service-card-top{
    margin-bottom:
      32px;
  }

  .service-card-wide{
    grid-column:auto;
  }

  .service-sub{
    grid-template-columns:
      1fr;
  }

  .service-ops-status{
    flex-direction:column;

    align-items:flex-start;
  }

  .ops-line{
    grid-template-columns:
      100px 1fr;
  }

  .ops-line > strong{
    display:none;
  }

  .service-ops-foot{
    flex-direction:column;

    gap:5px;
  }

  .service-process{
    padding:
      72px 0;
  }

  .service-process h2{
    margin-bottom:
      42px;
  }

  .process-grid{
    grid-template-columns:
      1fr;
  }

  .process-step{
    min-height:auto;

    border-right:none;

    border-bottom:
      1px dashed
      var(--khaki-faint);
  }

  .process-step:nth-child(2){
    border-right:none;
  }

  .process-step:last-child{
    border-bottom:none;
  }

  .process-state{
    margin:
      28px 0;
  }

  .service-closing{
    padding:
      72px 0;
  }

  .service-closing-panel{
    padding:
      32px 26px;
  }

  .service-closing-panel h2{
    font-size:
      44px;
  }

  .service-closing-action{
    width:100%;
  }

  .service-closing-action .btn{
    width:100%;
  }

}

/* =========================================================
   RESPONSIVE — 430PX
   ========================================================= */

@media(max-width:430px){

  .service-page-hero h1{
    font-size:
      41px;
  }

  .service-hero-systems{
    grid-template-columns:
      1fr;
  }

  .service-ops-grid{
    grid-template-columns:
      1fr;
  }

  .ops-metric,
  .ops-metric:nth-child(2),
  .ops-metric:nth-child(3){
    border-right:none;

    border-bottom:
      1px solid
      var(--khaki-faint);
  }

  .ops-metric:last-child{
    border-bottom:none;
  }

  .service-intro h2,
  .service-process h2{
    font-size:
      40px;
  }

  .service-closing-panel h2{
    font-size:
      39px;
  }

}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

/* =========================================================
   ABOUT HERO
   ========================================================= */

.about-page-hero{
  position:relative;

  overflow:hidden;

  padding:
    82px 0 76px;

  background:
    var(--ink);

  color:
    var(--khaki);
}

/* Technical field grid */

.about-page-hero::before{
  content:"";

  position:absolute;

  inset:0;

  background-image:
    linear-gradient(
      rgba(216,208,180,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(216,208,180,.035) 1px,
      transparent 1px
    );

  background-size:
    55px 55px;

  pointer-events:none;
}

.about-page-hero::after{
  content:"";

  position:absolute;

  width:600px;
  height:600px;

  right:-140px;
  bottom:-320px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,90,31,.12),
      transparent 67%
    );

  pointer-events:none;
}

.about-page-hero .wrap{
  position:relative;

  z-index:2;
}

.about-page-hero h1{
  width:100%;

  max-width:none;

  margin:0;

  color:
    var(--paper-3);

  font-size:
    clamp(
      48px,
      6.5vw,
      84px
    );

  line-height:.95;
}

/* =========================================================
   ABOUT HERO LOWER
   ========================================================= */

.about-hero-lower{
  display:grid;

  grid-template-columns:
    1.15fr .85fr;

  align-items:stretch;

  gap:70px;

  margin-top:62px;
}

/* =========================================================
   COMPANY INDEX
   ========================================================= */

.about-hero-index{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  border-top:
    1px solid
    var(--khaki-faint);

  border-left:
    1px solid
    var(--khaki-faint);
}

.about-index-item{
  min-width:0;

  padding:
    22px;

  border-right:
    1px solid
    var(--khaki-faint);

  border-bottom:
    1px solid
    var(--khaki-faint);
}

.about-index-item span{
  display:block;

  margin-bottom:8px;

  color:
    var(--khaki-dim);

  font-family:
    var(--mono);

  font-size:9px;

  letter-spacing:.11em;

  text-transform:uppercase;
}

.about-index-item strong{
  color:
    var(--paper-3);

  font-family:
    var(--mono);

  font-size:13px;

  font-weight:500;

  line-height:1.4;
}

/* =========================================================
   HERO SIGNAL MARK
   ========================================================= */

.about-hero-mark{
  display:flex;

  align-items:center;

  justify-content:center;

  min-height:280px;

  background:
    var(--ink-2);

  border:
    1px solid
    var(--khaki-faint);
}

.about-hero-mark-inner{
  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  width:100%;

  padding:26px;
}

.mark-code,
.mark-status{
  color:
    var(--khaki-dim);

  font-family:
    var(--mono);

  font-size:8.5px;

  letter-spacing:.11em;

  text-transform:uppercase;
}

.signal-target{
  position:relative;

  width:150px;
  height:150px;

  margin:
    26px 0;

  display:flex;

  align-items:center;

  justify-content:center;
}

.signal-ring{
  position:absolute;

  border:
    1px solid
    var(--khaki-faint);

  border-radius:50%;
}

.ring-one{
  width:150px;
  height:150px;
}

.ring-two{
  width:100px;
  height:100px;
}

.ring-three{
  width:52px;
  height:52px;

  border-color:
    rgba(255,90,31,.5);
}

.signal-core{
  width:9px;
  height:9px;

  background:
    var(--orange);

  border-radius:50%;
}

/* =========================================================
   STORY
   ========================================================= */

.about-story{
  padding:
    100px 0;
}

.about-story h2{
  width:100%;

  max-width:none;

  margin:0;

  font-size:
    clamp(
      42px,
      5.6vw,
      68px
    );

  line-height:.98;
}

.about-story-grid{
  display:grid;

  grid-template-columns:
    1fr .78fr;

  align-items:start;

  gap:80px;

  margin-top:60px;
}

/* =========================================================
   STORY COPY
   ========================================================= */

.about-story-copy{
  width:100%;
}

.about-story-copy p{
  width:100%;

  margin:
    0 0 21px;

  color:
    var(--graphite);

  font-size:16px;

  line-height:1.82;
}

.about-story-copy .story-lead{
  color:
    var(--text);

  font-size:20px;

  font-weight:500;

  line-height:1.6;
}

/* =========================================================
   COMPANY FIELD RECORD
   ========================================================= */

.company-file{
  background:
    var(--paper-3);

  border:
    1px solid
    var(--paper-2);
}

.company-file-head{
  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:20px;

  padding:
    14px 18px;

  background:
    var(--ink);

  color:
    var(--khaki);

  font-family:
    var(--mono);

  font-size:9.5px;

  letter-spacing:.11em;

  text-transform:uppercase;
}

.company-file-row{
  display:grid;

  grid-template-columns:
    .85fr 1.15fr;

  gap:20px;

  padding:
    16px 18px;

  border-top:
    1px dashed
    var(--paper-2);
}

.company-file-row span{
  color:
    var(--graphite);

  font-family:
    var(--mono);

  font-size:9px;

  letter-spacing:.08em;

  text-transform:uppercase;
}

.company-file-row strong{
  color:
    var(--text);

  font-size:13.5px;

  font-weight:600;
}

.company-file-row
.company-active{
  color:
    var(--orange);

  font-family:
    var(--mono);

  font-size:10px;

  letter-spacing:.05em;
}

/* =========================================================
   VALUES
   ========================================================= */

.about-values{
  padding:
    100px 0;

  background:
    var(--paper-2);
}

.about-values h2{
  width:100%;

  max-width:none;

  margin:
    0 0 54px;

  font-size:
    clamp(
      42px,
      5.6vw,
      68px
    );

  line-height:.98;
}

.values-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:1px;

  background:
    rgba(35,40,30,.14);

  border:
    1px solid
    rgba(35,40,30,.14);
}

.value-card{
  position:relative;

  min-width:0;

  min-height:260px;

  padding:
    26px;

  background:
    var(--paper-3);

  transition:
    background .2s ease;
}

.value-card:hover{
  background:
    #EEEDE3;
}

.value-card::after{
  content:"";

  position:absolute;

  left:0;
  bottom:0;

  width:0;
  height:3px;

  background:
    var(--orange);

  transition:
    width .22s ease;
}

.value-card:hover::after{
  width:100%;
}

.value-card-top{
  display:flex;

  justify-content:
    space-between;

  gap:16px;

  margin-bottom:52px;
}

.value-code{
  color:
    var(--orange);

  font-family:
    var(--mono);

  font-size:10px;

  font-weight:700;
}

.value-status{
  color:
    var(--graphite);

  font-family:
    var(--mono);

  font-size:8px;

  letter-spacing:.08em;
}

.value-card h3{
  width:100%;

  margin-bottom:10px;

  color:
    var(--text);

  font-family:
    var(--body);

  font-size:19px;

  font-weight:700;

  letter-spacing:0;

  text-transform:none;
}

.value-card p{
  width:100%;

  margin:0;

  color:
    var(--graphite);

  font-size:14px;

  line-height:1.7;
}

/* =========================================================
   WHO WE SERVE
   ========================================================= */

.about-sectors{
  padding:
    100px 0;

  background:
    var(--ink);

  color:
    var(--khaki);
}

.about-sectors h2{
  width:100%;

  max-width:none;

  margin:
    0 0 56px;

  color:
    var(--paper-3);

  font-size:
    clamp(
      42px,
      5.6vw,
      68px
    );

  line-height:.98;
}

.sector-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  border-top:
    1px solid
    var(--khaki-faint);

  border-left:
    1px solid
    var(--khaki-faint);
}

.about-sector{
  min-width:0;

  min-height:255px;

  padding:25px;

  border-right:
    1px solid
    var(--khaki-faint);

  border-bottom:
    1px solid
    var(--khaki-faint);

  transition:
    background .2s ease;
}

.about-sector:hover{
  background:
    var(--ink-2);
}

.sector-number{
  display:block;

  color:
    var(--orange);

  font-family:
    var(--mono);

  font-size:9px;

  letter-spacing:.08em;
}

.sector-icon{
  width:42px;
  height:42px;

  margin:
    58px 0 24px;

  color:
    var(--khaki);
}

.about-sector h3{
  width:100%;

  color:
    var(--paper-3);

  font-family:
    var(--body);

  font-size:18px;

  font-weight:600;

  line-height:1.3;

  letter-spacing:0;

  text-transform:none;
}

/* =========================================================
   ABOUT APPROACH
   ========================================================= */

.about-approach{
  padding:
    100px 0;
}

.about-approach h2{
  width:100%;

  max-width:none;

  margin:
    0 0 56px;

  font-size:
    clamp(
      42px,
      5.6vw,
      68px
    );

  line-height:.98;
}

.about-process-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  border-top:
    1px solid
    var(--paper-2);

  border-left:
    1px solid
    var(--paper-2);
}

.about-process-step{
  min-width:0;

  min-height:290px;

  padding:25px;

  background:
    var(--paper-3);

  border-right:
    1px solid
    var(--paper-2);

  border-bottom:
    1px solid
    var(--paper-2);
}

.about-process-head{
  display:flex;

  justify-content:
    space-between;

  gap:20px;

  margin-bottom:70px;

  font-family:
    var(--mono);

  font-size:9px;

  letter-spacing:.08em;
}

.about-process-head
span:first-child{
  color:
    var(--orange);

  font-weight:700;
}

.about-process-head
span:last-child{
  color:
    var(--graphite);
}

.about-process-step h3{
  width:100%;

  margin-bottom:10px;

  color:
    var(--text);

  font-family:
    var(--body);

  font-size:19px;

  font-weight:700;

  letter-spacing:0;

  text-transform:none;
}

.about-process-step p{
  width:100%;

  margin:0;

  color:
    var(--graphite);

  font-size:13.5px;

  line-height:1.68;
}

/* =========================================================
   COMMITMENT CTA
   ========================================================= */

.about-commitment{
  padding:
    0 0 100px;

  background:
    var(--paper);
}

.about-commitment-panel{
  display:grid;

  grid-template-columns:
    1fr auto;

  align-items:end;

  gap:60px;

  padding:
    52px;

  background:
    var(--ink);

  color:
    var(--khaki);

  border:
    1px solid
    var(--khaki-faint);
}

.about-commitment-panel h2{
  width:100%;

  max-width:none;

  margin:0;

  color:
    var(--paper-3);

  font-size:
    clamp(
      40px,
      5.4vw,
      66px
    );

  line-height:.96;
}

.about-commitment-action{
  display:flex;

  flex-direction:column;

  align-items:flex-start;

  gap:13px;
}

.about-commitment-action > span{
  color:
    var(--khaki-dim);

  font-family:
    var(--mono);

  font-size:8.5px;

  letter-spacing:.12em;
}

/* =========================================================
   ABOUT RESPONSIVE 1000
   ========================================================= */

@media(max-width:1000px){

  .about-hero-lower{
    grid-template-columns:
      1fr;
  }

  .about-story-grid{
    grid-template-columns:
      1fr 1fr;

    gap:50px;
  }

  .values-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .sector-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .about-process-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}

/* =========================================================
   ABOUT RESPONSIVE 800
   ========================================================= */

@media(max-width:800px){

  .about-story-grid{
    grid-template-columns:
      1fr;
  }

  .about-commitment-panel{
    grid-template-columns:
      1fr;

    gap:38px;
  }

}

/* =========================================================
   ABOUT RESPONSIVE 640
   ========================================================= */

@media(max-width:640px){

  .about-page-hero{
    padding:
      64px 0;
  }

  .about-page-hero h1{
    font-size:
      47px;
  }

  .about-hero-lower{
    margin-top:
      44px;

    gap:36px;
  }

  .about-hero-index{
    grid-template-columns:
      1fr;
  }

  .about-story,
  .about-values,
  .about-sectors,
  .about-approach{
    padding:
      72px 0;
  }

  .about-story h2,
  .about-values h2,
  .about-sectors h2,
  .about-approach h2{
    font-size:
      44px;
  }

  .about-story-grid{
    margin-top:
      40px;
  }

  .values-grid{
    grid-template-columns:
      1fr;
  }

  .value-card{
    min-height:auto;
  }

  .value-card-top{
    margin-bottom:
      38px;
  }

  .sector-grid{
    grid-template-columns:
      1fr;
  }

  .about-sector{
    min-height:auto;
  }

  .sector-icon{
    margin:
      42px 0 20px;
  }

  .about-process-grid{
    grid-template-columns:
      1fr;
  }

  .about-process-step{
    min-height:auto;
  }

  .about-process-head{
    margin-bottom:
      40px;
  }

  .about-commitment{
    padding-bottom:
      72px;
  }

  .about-commitment-panel{
    padding:
      34px 26px;
  }

  .about-commitment-panel h2{
    font-size:
      43px;
  }

  .about-commitment-action{
    width:100%;
  }

  .about-commitment-action .btn{
    width:100%;
  }

}

/* =========================================================
   ABOUT RESPONSIVE 420
   ========================================================= */

@media(max-width:420px){

  .about-page-hero h1{
    font-size:
      41px;
  }

  .about-story h2,
  .about-values h2,
  .about-sectors h2,
  .about-approach h2{
    font-size:
      39px;
  }

  .company-file-row{
    grid-template-columns:
      1fr;

    gap:6px;
  }

  .about-commitment-panel h2{
    font-size:
      38px;
  }

}

/* =========================================================
   WORDPRESS PRIMARY MENU FIX
   ========================================================= */

.primary-nav{
  display:flex;
  align-items:center;
  gap:10px;
}

.primary-menu{
  display:flex;
  align-items:center;
  gap:2px;
  margin:0;
  padding:0;
  list-style:none;
}

.primary-menu li{
  display:block;
  margin:0;
  padding:0;
}

.primary-menu li a{
  display:block;

  padding:10px 15px;

  color:var(--khaki-dim);

  border-bottom:2px solid transparent;

  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;

  transition:
    color .15s ease,
    border-color .15s ease;
}

.primary-menu li a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a{
  color:var(--khaki);
  border-color:var(--orange);
}

/* Shop button */

.primary-nav .nav-shop{
  display:block;

  margin-left:10px;
  padding:9px 18px;

  color:var(--ink);
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;

  border-bottom:none;

  background:
    repeating-linear-gradient(
      135deg,
      var(--orange),
      var(--orange) 10px,
      #F2A422 10px,
      #F2A422 20px
    );
}

/* =========================================================
   MOBILE MENU
   ========================================================= */

@media(max-width:900px){

  .primary-nav{
    position:absolute;

    top:100%;
    left:0;
    right:0;

    display:none;

    flex-direction:column;
    align-items:stretch;

    padding:8px 10% 20px;

    background:var(--ink);

    border-bottom:1px solid var(--khaki-faint);
  }

  .primary-nav.open{
    display:flex;
  }

  .primary-menu{
    display:flex;
    flex-direction:column;
    align-items:stretch;

    width:100%;
  }

  .primary-menu li{
    width:100%;
  }

  .primary-menu li a{
    width:100%;
    padding:13px 6px;
  }

  .primary-nav .nav-shop{
    margin:8px 0 0;
    text-align:center;
  }

}

/* =========================================================
   CONTACT FORM — CURRENTLY DISABLED IN TEMPLATE
   ========================================================= */

.contact-form-wrap{
  background:var(--paper-3);
  border:1px solid var(--paper-2);
}

.contact-form-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:14px 18px;
  background:var(--ink);
  color:var(--khaki);
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.contact-form{
  padding:28px;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}

.form-field{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.form-field-full{
  grid-column:1 / -1;
}

.form-field label{
  margin-bottom:8px;
  color:var(--graphite);
  font-family:var(--mono);
  font-size:9px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  min-width:0;
  padding:14px;
  background:var(--paper);
  color:var(--text);
  border:1px solid var(--paper-2);
  border-radius:0;
  outline:none;
  font-family:var(--body);
  font-size:15px;
  transition:background .15s ease,border-color .15s ease;
}

.form-field textarea{
  min-height:160px;
  resize:vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder{
  color:#929381;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  background:var(--paper-3);
  border-color:var(--orange);
}

.form-submit-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-top:26px;
  padding-top:24px;
  border-top:1px dashed var(--paper-2);
}

.form-note{
  color:var(--graphite);
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.05em;
}

@media(max-width:640px){
  .form-grid{
    grid-template-columns:1fr;
  }

  .form-field-full{
    grid-column:auto;
  }

  .contact-form{
    padding:22px;
  }

  .form-submit-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .form-submit-row .btn{
    width:100%;
  }
}
/* =========================================================
   CONTACT PAGE
   ========================================================= */

/* =========================================================
   CONTACT HERO
   ========================================================= */

.contact-hero{
	position:relative;

	overflow:hidden;

	padding:
		82px 0 76px;

	background:
		var(--ink);

	color:
		var(--khaki);
}

/* Background grid */

.contact-hero::before{
	content:"";

	position:absolute;

	inset:0;

	background-image:
		linear-gradient(
			rgba(216,208,180,.035) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(216,208,180,.035) 1px,
			transparent 1px
		);

	background-size:
		55px 55px;

	pointer-events:none;
}

.contact-hero::after{
	content:"";

	position:absolute;

	width:650px;
	height:650px;

	right:-170px;
	top:-300px;

	border-radius:50%;

	background:
		radial-gradient(
			circle,
			rgba(255,90,31,.12),
			transparent 68%
		);

	pointer-events:none;
}

.contact-hero .wrap{
	position:relative;

	z-index:2;
}

.contact-hero h1{
	width:100%;

	max-width:none;

	margin:0;

	color:
		var(--paper-3);

	font-size:
		clamp(
			48px,
			6.5vw,
			84px
		);

	line-height:.95;
}

/* =========================================================
   HERO CONTACT AREA
   ========================================================= */

.contact-hero-grid{
	width:100%;

	margin-top:60px;
}

/* =========================================================
   CONTACT CHANNELS
   ========================================================= */

.contact-channels{
	display:flex;

	flex-direction:column;

	width:100%;

	border-top:
		1px solid
		var(--khaki-faint);
}

.contact-channel{
	position:relative;

	display:grid;

	grid-template-columns:
		90px
		150px
		1fr
		auto;

	align-items:center;

	gap:24px;

	width:100%;

	min-width:0;

	padding:
		24px 0;

	border-bottom:
		1px solid
		var(--khaki-faint);

	transition:
		padding-left .18s ease,
		background .18s ease;
}

a.contact-channel:hover{
	padding-left:12px;

	background:
		rgba(216,208,180,.025);
}

.channel-code{
	color:
		var(--orange);

	font-family:
		var(--mono);

	font-size:9.5px;

	font-weight:700;

	letter-spacing:.08em;
}

.channel-label{
	color:
		var(--khaki-dim);

	font-family:
		var(--mono);

	font-size:8.5px;

	letter-spacing:.1em;
}

.contact-channel strong{
	min-width:0;

	color:
		var(--paper-3);

	font-family:
		var(--body);

	font-size:
		clamp(
			15px,
			1.4vw,
			18px
		);

	font-weight:600;

	overflow-wrap:anywhere;
}

.channel-arrow{
	color:
		var(--orange);

	font-family:
		var(--mono);

	font-size:19px;
}

.channel-status{
	padding:
		5px 8px;

	color:
		var(--khaki-dim);

	border:
		1px solid
		var(--khaki-faint);

	font-family:
		var(--mono);

	font-size:8px;

	letter-spacing:.1em;
}

/* =========================================================
   DIRECT CONTACT SECTION
   ========================================================= */

.contact-enquiry{
	padding:
		100px 0;

	background:
		var(--paper);
}

.contact-enquiry h2{
	width:100%;

	max-width:none;

	margin:
		0 0 56px;

	color:
		var(--text);

	font-size:
		clamp(
			42px,
			5.6vw,
			68px
		);

	line-height:.98;
}

/* =========================================================
   FULL WIDTH CONTACT DIRECTORY
   ========================================================= */

.contact-directory{
	width:100%;

	background:
		var(--paper-3);

	border:
		1px solid
		var(--paper-2);
}

.contact-directory-wide{
	width:100%;
}

.directory-head{
	display:flex;

	align-items:center;

	justify-content:
		space-between;

	gap:20px;

	padding:
		15px 20px;

	background:
		var(--ink);

	color:
		var(--khaki);

	font-family:
		var(--mono);

	font-size:9px;

	letter-spacing:.1em;

	text-transform:uppercase;
}

.directory-head-status{
	color:
		var(--orange);
}

/* Directory cells */

.contact-directory-body{
	display:grid;

	grid-template-columns:
		repeat(2,1fr);

	width:100%;
}

.contact-directory-body
.directory-row{
	min-width:0;

	border-top:
		1px dashed
		var(--paper-2);

	border-right:
		1px solid
		var(--paper-2);
}

.contact-directory-body
.directory-row:nth-child(2n){
	border-right:none;
}

.directory-row{
	display:grid;

	grid-template-columns:
		.7fr 1.3fr;

	align-items:center;

	gap:20px;

	padding:
		22px 20px;
}

.directory-row > span{
	color:
		var(--graphite);

	font-family:
		var(--mono);

	font-size:8.5px;

	letter-spacing:.08em;

	text-transform:uppercase;
}

.directory-row strong,
.directory-row a{
	min-width:0;

	color:
		var(--text);

	font-size:14px;

	font-weight:600;

	line-height:1.45;

	overflow-wrap:anywhere;
}

.directory-row a{
	transition:
		color .15s ease;
}

.directory-row a:hover{
	color:
		var(--orange);
}

/* Directory bottom strip */

.contact-directory-foot{
	display:flex;

	align-items:center;

	justify-content:
		space-between;

	flex-wrap:wrap;

	gap:12px;

	padding:
		14px 20px;

	color:
		var(--graphite);

	border-top:
		1px dashed
		var(--paper-2);

	font-family:
		var(--mono);

	font-size:8px;

	letter-spacing:.07em;

	text-transform:uppercase;
}

/* =========================================================
   OFFICE / LOCATION
   ========================================================= */

.contact-location{
	padding:
		100px 0;

	background:
		var(--ink);

	color:
		var(--khaki);
}

.contact-location h2{
	width:100%;

	max-width:none;

	margin:
		0 0 56px;

	color:
		var(--paper-3);

	font-size:
		clamp(
			42px,
			5.6vw,
			68px
		);

	line-height:.98;
}

.contact-location-grid{
	display:grid;

	grid-template-columns:
		.68fr 1.32fr;

	align-items:stretch;

	gap:50px;
}

/* =========================================================
   LOCATION DETAILS
   ========================================================= */

.location-coordinates{
	border-top:
		1px solid
		var(--khaki-faint);
}

.coordinate-line{
	display:grid;

	grid-template-columns:
		.85fr 1.15fr;

	align-items:center;

	gap:20px;

	padding:
		19px 0;

	border-bottom:
		1px solid
		var(--khaki-faint);
}

.coordinate-line span{
	color:
		var(--khaki-dim);

	font-family:
		var(--mono);

	font-size:8.5px;

	letter-spacing:.09em;
}

.coordinate-line strong{
	color:
		var(--paper-3);

	font-family:
		var(--mono);

	font-size:11px;

	font-weight:500;

	line-height:1.5;
}

.coordinate-line
.location-active{
	color:
		var(--orange);
}

/* =========================================================
   GOOGLE MAP
   ========================================================= */

.contact-google-map{
	position:relative;

	width:100%;

	min-height:450px;

	overflow:hidden;

	background:
		var(--ink-2);

	border:
		1px solid
		var(--khaki-faint);
}

.contact-google-map iframe{
	display:block;

	width:100%;

	height:100%;

	min-height:450px;

	border:0;
}

/* =========================================================
   FINAL CTA
   ========================================================= */

.contact-final{
	padding:
		100px 0;

	background:
		var(--paper);
}

.contact-final-panel{
	display:grid;

	grid-template-columns:
		1fr auto;

	align-items:end;

	gap:60px;

	width:100%;

	padding:
		50px;

	background:
		var(--paper-3);

	border:
		1px solid
		var(--paper-2);
}

.contact-final-panel > div:first-child{
	min-width:0;
}

.contact-final-panel h2{
	width:100%;

	max-width:none;

	margin:0;

	color:
		var(--text);

	font-size:
		clamp(
			40px,
			5.4vw,
			66px
		);

	line-height:.96;
}

.contact-final-actions{
	display:flex;

	align-items:center;

	justify-content:flex-end;

	flex-wrap:wrap;

	gap:12px;
}

/* =========================================================
   RESPONSIVE — 1000PX
   ========================================================= */

@media(max-width:1000px){

	.contact-location-grid{
		grid-template-columns:
			1fr;

		gap:40px;
	}

	.contact-google-map{
		min-height:420px;
	}

	.contact-google-map iframe{
		min-height:420px;
	}

}

/* =========================================================
   RESPONSIVE — 800PX
   ========================================================= */

@media(max-width:800px){

	.contact-channel{
		grid-template-columns:
			68px
			115px
			1fr
			auto;

		gap:16px;
	}

	.contact-directory-body{
		grid-template-columns:
			1fr;
	}

	.contact-directory-body
	.directory-row{
		border-right:none;
	}

	.contact-final-panel{
		grid-template-columns:
			1fr;

		align-items:start;

		gap:35px;
	}

	.contact-final-actions{
		justify-content:flex-start;
	}

}

/* =========================================================
   RESPONSIVE — 640PX
   ========================================================= */

@media(max-width:640px){

	.contact-hero{
		padding:
			64px 0;
	}

	.contact-hero h1{
		font-size:
			46px;
	}

	.contact-hero-grid{
		margin-top:
			44px;
	}

	.contact-channel{
		grid-template-columns:
			60px
			1fr
			auto;

		gap:12px;

		padding:
			21px 0;
	}

	.channel-label{
		display:none;
	}

	.contact-enquiry,
	.contact-location,
	.contact-final{
		padding:
			72px 0;
	}

	.contact-enquiry h2,
	.contact-location h2{
		margin-bottom:
			42px;

		font-size:
			44px;
	}

	.directory-row{
		grid-template-columns:
			1fr;

		gap:7px;

		padding:
			20px 18px;
	}

	.contact-directory-foot{
		align-items:flex-start;

		flex-direction:column;

		padding:
			14px 18px;
	}

	.coordinate-line{
		grid-template-columns:
			.8fr 1.2fr;
	}

	.contact-google-map{
		min-height:350px;
	}

	.contact-google-map iframe{
		min-height:350px;
	}

	.contact-final-panel{
		padding:
			32px 26px;
	}

	.contact-final-panel h2{
		font-size:
			43px;
	}

	.contact-final-actions{
		width:100%;

		flex-direction:column;
	}

	.contact-final-actions .btn{
		width:100%;
	}

}

/* =========================================================
   RESPONSIVE — 420PX
   ========================================================= */

@media(max-width:420px){

	.contact-hero h1{
		font-size:
			40px;
	}

	.contact-channel{
		grid-template-columns:
			50px 1fr;
	}

	.channel-arrow,
	.channel-status{
		display:none;
	}

	.contact-enquiry h2,
	.contact-location h2{
		font-size:
			39px;
	}

	.coordinate-line{
		grid-template-columns:
			1fr;

		gap:6px;
	}

	.contact-google-map{
		min-height:300px;
	}

	.contact-google-map iframe{
		min-height:300px;
	}

	.contact-final-panel h2{
		font-size:
			38px;
	}

}

 /* =========================================================
   CLIENTS SECTION
   ========================================================= */

.clients-section{
	width:100%;

	margin:0;

	padding:
		90px 0;

	background:
		#FFFFFF;
}

/* =========================================================
   CLIENTS HEADING
   ========================================================= */

.clients-heading{
	width:100%;

	margin-bottom:38px;
}

.clients-heading .tag{
	margin-bottom:14px;
}

.clients-heading h2{
	width:100%;

	max-width:none;

	margin:0;

	color:
		var(--text);

	font-size:
		clamp(
			40px,
			5vw,
			64px
		);

	line-height:.98;
}

/* =========================================================
   CLIENT LOGO WALL
   ========================================================= */

.client-wall{
	display:grid;

	grid-template-columns:
		repeat(6, minmax(0, 1fr));

	width:100%;

	gap:1px;

	background:
		#E9E9E2;

	border:
		1px solid
		#E9E9E2;
}

/* =========================================================
   CLIENT LOGO
   ========================================================= */

.client-logo{
	position:relative;

	display:flex;

	align-items:center;

	justify-content:center;

	min-width:0;

	min-height:150px;

	padding:
		26px 22px;

	overflow:hidden;

	background:
		#FFFFFF;

	transition:
		background .2s ease;
}

.client-logo::after{
	content:"";

	position:absolute;

	left:0;
	right:0;
	bottom:0;

	height:2px;

	background:
		var(--orange);

	transform:
		scaleX(0);

	transform-origin:left;

	transition:
		transform .2s ease;
}

.client-logo:hover{
	background:
		#F7F7F3;
}

.client-logo:hover::after{
	transform:
		scaleX(1);
}

.client-logo img{
	display:block;

	width:auto;
	height:auto;

	max-width:100%;
	max-height:75px;

	object-fit:contain;

	filter:
		grayscale(100%);

	opacity:.75;

	transition:
		filter .2s ease,
		opacity .2s ease,
		transform .2s ease;
}

.client-logo:hover img{
	filter:
		grayscale(0);

	opacity:1;

	transform:
		scale(1.04);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

	.client-wall{
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}

}

@media(max-width:700px){

	.clients-section{
		padding:
			70px 0;
	}

	.clients-heading{
		margin-bottom:28px;
	}

	.clients-heading h2{
		font-size:44px;
	}

	.client-wall{
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.client-logo{
		min-height:125px;

		padding:
			22px 18px;
	}

	.client-logo img{
		max-height:64px;
	}

}

@media(max-width:420px){

	.clients-heading h2{
		font-size:39px;
	}

	.client-logo{
		min-height:110px;

		padding:
			18px 14px;
	}

	.client-logo img{
		max-height:55px;
	}

}

/* =========================================================
   PRODUCTS — PHOTOGRAPHIC SHOWCASE
   ========================================================= */

section.products-visual{
  padding:110px 0;
  background:#fff;
  color:var(--text);
}

section.products-visual .section-head h2{
  color:var(--ink);
}

section.products-visual .section-head p{
  color:var(--graphite);
}

section.products-visual > .wrap > .tag{
  color:var(--orange);
}

/* =========================================================
   PRODUCT GRID
   ========================================================= */

.product-showcase-grid{
	display:grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap:18px;

	margin-top:46px;
}

/* =========================================================
   PRODUCT CARD
   ========================================================= */

.product-showcase-card{
	position:relative;

	display:flex;

	flex-direction:column;

	justify-content:space-between;

	min-height:390px;

	overflow:hidden;

	padding:
		24px;

	background:
		var(--ink-2);

	border:
		1px solid rgba(216,208,180,.12);

	isolation:isolate;

	transition:
		transform .35s ease,
		border-color .35s ease,
		box-shadow .35s ease;
}

/* large first card */

.product-showcase-card-featured{
	grid-column:
		span 2;

	min-height:500px;
}

/* =========================================================
   IMAGE
   ========================================================= */

.product-showcase-image{
	position:absolute;

	inset:0;

	z-index:-4;

	width:100%;

	height:100%;

	object-fit:cover;

	transform:
		scale(1.015);

	filter:
		saturate(.85);

	transition:
		transform .75s cubic-bezier(.2,.7,.2,1),
		filter .4s ease;
}

/* =========================================================
   DARK OVERLAY
   ========================================================= */

.product-showcase-overlay{
	position:absolute;

	inset:0;

	z-index:-3;

	background:
		linear-gradient(
			180deg,
			rgba(27,33,24,.22) 0%,
			rgba(27,33,24,.32) 35%,
			rgba(27,33,24,.94) 100%
		);

	transition:
		background .4s ease;
}

/* subtle technical orange wash */

.product-showcase-card::before{
	content:"";

	position:absolute;

	inset:0;

	z-index:-2;

	background:
		linear-gradient(
			135deg,
			rgba(255,90,31,.10),
			transparent 42%
		);

	pointer-events:none;
}

/* animated orange line */

.product-showcase-card::after{
	content:"";

	position:absolute;

	left:0;

	bottom:0;

	z-index:3;

	width:0;

	height:4px;

	background:
		var(--orange);

	transition:
		width .4s ease;
}

/* =========================================================
   CARD TOP
   ========================================================= */

.product-showcase-top{
	display:flex;

	align-items:center;

	justify-content:space-between;

	gap:20px;
}

.product-showcase-number{
	color:
		rgba(255,255,255,.68);

	font-family:
		var(--mono);

	font-size:8.5px;

	font-weight:500;

	letter-spacing:.12em;

	text-transform:uppercase;
}

.product-showcase-status{
	display:inline-flex;

	align-items:center;

	padding:
		7px 9px;

	background:
		var(--orange);

	color:
		#fff;

	font-family:
		var(--mono);

	font-size:8px;

	font-weight:600;

	letter-spacing:.1em;
}

/* =========================================================
   CARD CONTENT
   ========================================================= */

.product-showcase-content{
	margin-top:auto;

	padding-top:
		120px;
}

.product-showcase-category{
	display:block;

	margin-bottom:9px;

	color:
		var(--orange);

	font-family:
		var(--mono);

	font-size:9px;

	font-weight:600;

	letter-spacing:.11em;

	text-transform:uppercase;
}

.product-showcase-card h3{
	max-width:
		92%;

	margin:
		0 0 12px;

	color:
		#fff;

	font-family:
		var(--display);

	font-size:
		clamp(29px, 3vw, 40px);

	font-weight:400;

	line-height:
		1;

	letter-spacing:
		.01em;

	text-transform:
		uppercase;
}

.product-showcase-card-featured h3{
	font-size:
		clamp(38px, 4.2vw, 58px);
}

.product-showcase-card p{
	max-width:
		42ch;

	margin:0;

	color:
		rgba(255,255,255,.72);

	font-size:
		13px;

	line-height:
		1.65;
}

/* =========================================================
   CORNER ARROW
   ========================================================= */

.product-showcase-arrow{
	position:absolute;

	right:22px;

	bottom:22px;

	display:flex;

	align-items:center;

	justify-content:center;

	width:34px;

	height:34px;

	color:
		var(--orange);

	font-family:
		var(--mono);

	font-size:
		19px;

	opacity:0;

	transform:
		translate(-8px,8px);

	transition:
		opacity .3s ease,
		transform .3s ease;
}

/* =========================================================
   HOVER
   ========================================================= */

.product-showcase-card:hover{
	transform:
		translateY(-5px);

	border-color:
		rgba(255,90,31,.65);

	box-shadow:
		0 24px 50px rgba(0,0,0,.22);
}

.product-showcase-card:hover .product-showcase-image{
	transform:
		scale(1.075);

	filter:
		saturate(1);
}

.product-showcase-card:hover .product-showcase-overlay{
	background:
		linear-gradient(
			180deg,
			rgba(27,33,24,.13) 0%,
			rgba(27,33,24,.25) 35%,
			rgba(27,33,24,.96) 100%
		);
}

.product-showcase-card:hover::after{
	width:100%;
}

.product-showcase-card:hover .product-showcase-arrow{
	opacity:1;

	transform:
		translate(0,0);
}

/* =========================================================
   MANUFACTURERS
   ========================================================= */

.product-brand-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-top:24px;
  padding:20px 22px;
  background:var(--paper-3);
  border:1px solid rgba(27,33,24,.14);
}
.product-brand-line span{
	flex-shrink:0;

	color:
		var(--orange);

	font-family:
		var(--mono);

	font-size:8.5px;

	font-weight:600;

	letter-spacing:.12em;
}

.product-brand-line p{
  margin:0;
  color:var(--graphite);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.04em;
  text-align:right;
}
/* =========================================================
   ACTIONS
   ========================================================= */

.product-showcase-actions{
	display:flex;

	align-items:center;

	gap:12px;

	flex-wrap:wrap;

	margin-top:26px;
}

.product-showcase-actions .btn-outline{
  color:var(--ink);
  background:transparent;
  border-color:rgba(27,33,24,.30);
}

.product-showcase-actions .btn-outline:hover{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}

/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1000px){

	.product-showcase-grid{
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.product-showcase-card-featured{
		grid-column:
			span 2;
	}

}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:640px){

	.products-visual{
		padding:
			80px 0;
	}

	.product-showcase-grid{
		grid-template-columns:
			1fr;

		gap:14px;

		margin-top:32px;
	}

	.product-showcase-card,
	.product-showcase-card-featured{
		grid-column:auto;

		min-height:390px;

		padding:
			21px;
	}

	.product-showcase-card-featured{
		min-height:430px;
	}

	.product-showcase-content{
		padding-top:
			100px;
	}

	.product-showcase-card h3,
	.product-showcase-card-featured h3{
		font-size:
			36px;
	}

	.product-brand-line{
		align-items:flex-start;

		flex-direction:column;

		gap:10px;
	}

	.product-brand-line p{
		text-align:left;

		line-height:1.7;
	}

	.product-showcase-arrow{
		display:none;
	}

}

/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media(max-width:420px){

	.product-showcase-card,
	.product-showcase-card-featured{
		min-height:360px;
	}

	.product-showcase-card h3,
	.product-showcase-card-featured h3{
		font-size:
			32px;
	}

	.product-showcase-actions{
		align-items:stretch;

		flex-direction:column;
	}

	.product-showcase-actions .btn{
		width:100%;

		justify-content:center;
	}

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

	.product-showcase-card,
	.product-showcase-image,
	.product-showcase-arrow{
		transition:none;
	}

}

/* =========================================================
   BISON HERO — FULL SCREEN IMAGE SLIDER
   ========================================================= */

.bison-hero-slider{
	position:relative;

	width:100%;

	height:
		clamp(650px, calc(100vh - 82px), 920px);

	min-height:650px;

	overflow:hidden;

	background:
		var(--ink);

	isolation:isolate;
}

.bison-hero-slides{
	position:absolute;

	inset:0;
}

/* =========================================================
   SLIDE
   ========================================================= */

.bison-hero-slide{
	position:absolute;

	inset:0;

	display:flex;

	align-items:flex-end;

	opacity:0;

	visibility:hidden;

	background-position:center;

	background-repeat:no-repeat;

	background-size:cover;

	transform:
		scale(1.035);

	transition:
		opacity 1s ease,
		visibility 1s ease,
		transform 7.5s ease;

	z-index:0;
}

.bison-hero-slide.is-active{
	opacity:1;

	visibility:visible;

	transform:
		scale(1);

	z-index:1;
}

/* =========================================================
   DARK CINEMATIC OVERLAY
   ========================================================= */

.bison-hero-shade{
	position:absolute;

	inset:0;

	background:
		linear-gradient(
			90deg,
			rgba(20,25,18,.94) 0%,
			rgba(20,25,18,.80) 30%,
			rgba(20,25,18,.34) 67%,
			rgba(20,25,18,.13) 100%
		),
		linear-gradient(
			0deg,
			rgba(20,25,18,.42) 0%,
			transparent 52%
		);

	pointer-events:none;
}

/* technical pattern */

.bison-hero-slide::before{
	content:"";

	position:absolute;

	inset:0;

	background-image:
		linear-gradient(
			rgba(255,255,255,.035) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255,255,255,.035) 1px,
			transparent 1px
		);

	background-size:
		90px 90px;

	opacity:.35;

	pointer-events:none;

	z-index:1;
}

/* orange light accent */

.bison-hero-slide::after{
	content:"";

	position:absolute;

	left:-160px;

	bottom:-280px;

	width:650px;

	height:650px;

	border-radius:50%;

	background:
		radial-gradient(
			circle,
			rgba(255,90,31,.20) 0%,
			rgba(255,90,31,.07) 36%,
			transparent 70%
		);

	filter:
		blur(5px);

	pointer-events:none;

	z-index:1;
}

/* =========================================================
   CONTENT
   ========================================================= */

.bison-hero-slide-inner{
	position:relative;

	z-index:3;

	width:80%;

	max-width:none;

	margin:
		0 auto;

	padding:
		0 0 110px;
}

/* only headline + CTA */

.bison-hero-slide h1,
.bison-hero-slide h2{
	max-width:
		1020px;

	margin:
		0 0 36px;

	color:#fff;

	font-family:
		var(--display);

	font-size:
		clamp(58px, 7.6vw, 118px);

	font-weight:400;

	line-height:.88;

	letter-spacing:
		-.015em;

	text-transform:uppercase;

	text-wrap:balance;

	opacity:0;

	transform:
		translateY(40px);

	transition:
		opacity .75s ease .24s,
		transform .75s cubic-bezier(.2,.7,.2,1) .24s;
}

.bison-hero-slide.is-active h1,
.bison-hero-slide.is-active h2{
	opacity:1;

	transform:
		translateY(0);
}

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

.bison-hero-cta{
	position:relative;

	display:inline-flex;

	align-items:center;

	justify-content:space-between;

	gap:36px;

	min-width:240px;

	padding:
		16px 18px 16px 20px;

	overflow:hidden;

	background:
		var(--orange);

	color:#fff;

	border:
		1px solid var(--orange);

	font-family:
		var(--mono);

	font-size:10px;

	font-weight:600;

	letter-spacing:.09em;

	text-transform:uppercase;

	opacity:0;

	transform:
		translateY(25px);

	transition:
		opacity .7s ease .42s,
		transform .7s ease .42s,
		background .25s ease,
		color .25s ease,
		border-color .25s ease;
}

.bison-hero-slide.is-active .bison-hero-cta{
	opacity:1;

	transform:
		translateY(0);
}

.bison-hero-cta span{
	position:relative;

	z-index:2;

	display:flex;

	align-items:center;

	justify-content:center;

	width:28px;

	height:28px;

	border:
		1px solid rgba(255,255,255,.38);

	font-size:15px;

	transition:
		transform .25s ease,
		border-color .25s ease;
}

.bison-hero-cta:hover{
	background:#fff;

	color:
		var(--ink);

	border-color:#fff;
}

.bison-hero-cta:hover span{
	transform:
		rotate(45deg);

	border-color:
		rgba(27,33,24,.25);
}

/* =========================================================
   DOT NAVIGATION
   ========================================================= */

.bison-hero-dots{
	position:absolute;

	z-index:10;

	left:10%;

	bottom:42px;

	display:flex;

	align-items:center;

	gap:11px;
}

.bison-hero-dot{
	position:relative;

	display:block;

	width:7px;

	height:7px;

	margin:0;

	padding:0;

	background:
		rgba(255,255,255,.42);

	border:0;

	border-radius:50%;

	cursor:pointer;

	transition:
		width .3s ease,
		background .3s ease,
		border-radius .3s ease,
		transform .3s ease;
}

.bison-hero-dot:hover{
	background:
		rgba(255,255,255,.85);

	transform:
		scale(1.15);
}

.bison-hero-dot.is-active{
	width:34px;

	background:
		var(--orange);

	border-radius:10px;

	transform:none;
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media(max-width:900px){

	.bison-hero-slider{
		height:
			clamp(620px, calc(100vh - 74px), 820px);

		min-height:620px;
	}

	.bison-hero-slide-inner{
		width:90%;

		padding-bottom:
			100px;
	}

	.bison-hero-dots{
		left:5%;

		bottom:34px;
	}

	.bison-hero-slide h1,
	.bison-hero-slide h2{
		max-width:
			850px;

		font-size:
			clamp(54px, 10vw, 88px);
	}

}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media(max-width:640px){

	.bison-hero-slider{
		height:
			calc(100svh - 70px);

		min-height:580px;

		max-height:760px;
	}

	.bison-hero-slide{
		background-position:
			center center;
	}

	.bison-hero-shade{
		background:
			linear-gradient(
				0deg,
				rgba(20,25,18,.94) 0%,
				rgba(20,25,18,.63) 57%,
				rgba(20,25,18,.23) 100%
			);
	}

	.bison-hero-slide::before{
		background-size:
			60px 60px;
	}

	.bison-hero-slide-inner{
		width:90%;

		padding-bottom:
			95px;
	}

	.bison-hero-slide h1,
	.bison-hero-slide h2{
		max-width:none;

		margin-bottom:27px;

		font-size:
			clamp(48px, 15vw, 70px);

		line-height:.91;
	}

	.bison-hero-cta{
		min-width:220px;

		padding:
			14px 15px 14px 17px;
	}

	.bison-hero-dots{
		left:5%;

		bottom:30px;
	}

}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:420px){

	.bison-hero-slider{
		min-height:560px;
	}

	.bison-hero-slide h1,
	.bison-hero-slide h2{
		font-size:
			clamp(43px, 14vw, 59px);
	}

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

	.bison-hero-slide,
	.bison-hero-slide h1,
	.bison-hero-slide h2,
	.bison-hero-cta,
	.bison-hero-dot{
		transition:none;
	}

}

/* =========================================================
   ALTERNATIVE HEADER — WHITE
   ========================================================= */

.site-header-light{
	position:sticky;

	top:0;

	z-index:1000;

	width:100%;

	background:
		rgba(255,255,255,.97);

	border-bottom:
		1px solid rgba(27,33,24,.11);

	color:
		var(--ink);

	backdrop-filter:
		blur(14px);

	-webkit-backdrop-filter:
		blur(14px);

	box-shadow:
		0 1px 0 rgba(27,33,24,.03);
}

/* =========================================================
   HEADER INNER
   ========================================================= */

.site-header-light .header-inner{
	display:flex;

	align-items:center;

	justify-content:space-between;

	min-height:82px;

	gap:32px;
}

/* =========================================================
   LOGO
   ========================================================= */

.site-header-light .brand{
	display:flex;

	align-items:center;

	flex-shrink:0;
}

.site-header-light .brand-logo{
	display:block;

	width:auto;

	width:100px;



	object-fit:contain;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.site-header-light .primary-nav{
	display:flex;

	align-items:center;

	gap:28px;
}

.site-header-light .primary-menu{
	display:flex;

	align-items:center;

	gap:28px;

	margin:0;

	padding:0;

	list-style:none;
}

.site-header-light .primary-menu li{
	margin:0;

	padding:0;
}

.site-header-light .primary-menu li a{
	position:relative;
  border-bottom:none;

	display:inline-flex;

	align-items:center;

	min-height:42px;

	padding:0;

	color:
		var(--ink);

	font-family:
		var(--mono);

	font-size:11px;

	font-weight:700;

	letter-spacing:.065em;

	text-decoration:none;

	text-transform:uppercase;

	transition:
		color .2s ease;
}

.site-header-light .primary-menu li a::after{
	content:"";

	position:absolute;

	left:0;

	bottom:5px;

	width:0;

	height:2px;

	background:
		var(--orange);

	transition:
		width .25s ease;
}

.site-header-light .primary-menu li a:hover{
	color:
		var(--orange);
}

.site-header-light .primary-menu li a:hover::after{
	width:100%;
}

/* active WordPress page */

.site-header-light
.primary-menu
.current-menu-item > a,

.site-header-light
.primary-menu
.current_page_item > a{
	color:
		var(--orange);
}

.site-header-light
.primary-menu
.current-menu-item > a::after,

.site-header-light
.primary-menu
.current_page_item > a::after{
	width:100%;
}

/* =========================================================
   SHOP BUTTON
   ========================================================= */

.site-header-light .nav-shop{
	position:relative;

	display:inline-flex;

	align-items:center;

	justify-content:center;

	gap:8px;

	min-height:42px;

	padding:
		0 19px;

	overflow:hidden;

	background:
		var(--orange);

	color:#fff;

	border:
		1px solid var(--orange);

	font-family:
		var(--mono);

	font-size:9.5px;

	font-weight:600;

	letter-spacing:.1em;

	text-transform:uppercase;

	transition:
		transform .2s ease,
		background .2s ease,
		color .2s ease,
		box-shadow .2s ease;
}

/* ecommerce icon */

.site-header-light .nav-shop i{
	position:relative;

	z-index:2;

	font-size:12px;

	color:currentColor;

	transition:
		transform .2s ease;
}



.site-header-light .nav-shop:hover{
	color:#fff;

	transform:
		translateY(-2px);

	filter:
		brightness(.92);

	box-shadow:
		0 9px 24px rgba(255,90,31,.25);
}




.site-header-light .nav-shop:hover i{
	transform:
		translateX(2px) scale(1.08);
}



/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.site-header-light .menu-toggle{
	color:
		var(--ink);

	border-color:
		rgba(27,33,24,.22);

	background:
		transparent;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px){

	.site-header-light .header-inner{
		min-height:72px;
	}

	.site-header-light .brand-logo{
		height:42px;
	}

	.site-header-light .primary-nav{
		background:#fff;

		color:
			var(--ink);

		border-top:
			1px solid rgba(27,33,24,.1);

		box-shadow:
			0 18px 30px rgba(27,33,24,.08);
	}

	.site-header-light .primary-menu{
		width:100%;

		gap:0;
	}

	.site-header-light .primary-menu li{
		width:100%;
	}

	.site-header-light .primary-menu li a{
		width:100%;

		color:
			var(--ink);

		border-bottom:
			1px solid rgba(27,33,24,.08);
	}

	.site-header-light .nav-shop{
		width:100%;

		margin-top:10px;

		min-height:48px;
	}

}

/* =========================================================
   PARTNERS / SECTORS — IMAGE CARDS
   ========================================================= */

.partners{
	padding:
		110px 0;

	background:
		var(--paper-3);
}

/* =========================================================
   CARD GRID
   ========================================================= */

.sector-card-grid{
	display:grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap:18px;

	margin-top:42px;
}

/* =========================================================
   CARD
   ========================================================= */

.sector-card{
	position:relative;

	display:flex;

	flex-direction:column;

	justify-content:space-between;

	min-height:430px;

	overflow:hidden;

	padding:
		24px;

	background:
		var(--ink);

	border:
		1px solid rgba(27,33,24,.12);

	isolation:isolate;

	transition:
		transform .35s ease,
		box-shadow .35s ease;
}

/* =========================================================
   IMAGE
   ========================================================= */

.sector-card-image{
	position:absolute;

	inset:0;

	z-index:-3;

	width:100%;

	height:100%;

	object-fit:cover;

	transform:
		scale(1.01);

	transition:
		transform .7s cubic-bezier(.2,.7,.2,1),
		filter .5s ease;
}

/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.sector-card-overlay{
	position:absolute;

	inset:0;

	z-index:-2;

	background:
		linear-gradient(
			180deg,
			rgba(27,33,24,.20) 0%,
			rgba(27,33,24,.32) 36%,
			rgba(27,33,24,.92) 100%
		);

	transition:
		background .35s ease;
}

/* subtle technical tint */

.sector-card::before{
	content:"";

	position:absolute;

	inset:0;

	z-index:-1;

	pointer-events:none;

	background:
		linear-gradient(
			135deg,
			rgba(255,90,31,.08),
			transparent 38%
		);
}

/* orange bottom line */

.sector-card::after{
	content:"";

	position:absolute;

	left:0;

	bottom:0;

	width:0;

	height:4px;

	background:
		var(--orange);

	transition:
		width .4s ease;
}

/* =========================================================
   CARD TOP
   ========================================================= */

.sector-card-top{
	display:flex;

	align-items:flex-start;

	justify-content:space-between;

	gap:20px;
}

.sector-card-number{
	color:
		rgba(255,255,255,.70);

	font-family:
		var(--mono);

	font-size:9px;

	font-weight:500;

	letter-spacing:.11em;

	text-transform:uppercase;
}

/* =========================================================
   ICON
   ========================================================= */

.sector-card-icon{
	display:flex;

	align-items:center;

	justify-content:center;

	width:46px;

	height:46px;

	flex-shrink:0;

	background:
		var(--orange);

	color:
		#fff;

	font-size:18px;

	box-shadow:
		0 8px 24px rgba(0,0,0,.15);

	transition:
		transform .35s ease,
		background .35s ease,
		color .35s ease;
}

/* =========================================================
   CONTENT
   ========================================================= */

.sector-card-content{
	margin-top:auto;

	padding-top:
		130px;
}

.sector-card-label{
	display:block;

	margin-bottom:9px;

	color:
		var(--orange);

	font-family:
		var(--mono);

	font-size:9px;

	font-weight:600;

	letter-spacing:.11em;

	text-transform:uppercase;
}

.sector-card h3{
	max-width:
		90%;

	margin:
		0 0 12px;

	color:
		#fff;

	font-family:
		var(--display);

	font-size:
		clamp(30px, 3vw, 42px);

	font-weight:400;

	line-height:.98;

	letter-spacing:.01em;

	text-transform:uppercase;
}

.sector-card p{
	max-width:
		40ch;

	margin:0;

	color:
		rgba(255,255,255,.72);

	font-size:13px;

	line-height:1.6;
}

/* =========================================================
   ARROW
   ========================================================= */

.sector-card-arrow{
	position:absolute;

	right:24px;

	bottom:25px;

	display:flex;

	align-items:center;

	justify-content:center;

	width:30px;

	height:30px;

	color:
		var(--orange);

	font-family:
		var(--mono);

	font-size:18px;

	opacity:0;

	transform:
		translate(-8px,8px);

	transition:
		opacity .3s ease,
		transform .3s ease;
}

/* =========================================================
   HOVER
   ========================================================= */

.sector-card:hover{
	transform:
		translateY(-6px);

	box-shadow:
		0 22px 50px rgba(27,33,24,.16);
}

.sector-card:hover .sector-card-image{
	transform:
		scale(1.08);
}

.sector-card:hover .sector-card-overlay{
	background:
		linear-gradient(
			180deg,
			rgba(27,33,24,.10) 0%,
			rgba(27,33,24,.26) 34%,
			rgba(27,33,24,.96) 100%
		);
}

.sector-card:hover::after{
	width:100%;
}

.sector-card:hover .sector-card-icon{
	transform:
		rotate(-4deg) scale(1.08);

	background:
		#fff;

	color:
		var(--orange);
}

.sector-card:hover .sector-card-arrow{
	opacity:1;

	transform:
		translate(0,0);
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media(max-width:1000px){

	.sector-card-grid{
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.sector-card{
		min-height:400px;
	}

}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media(max-width:640px){

	.partners{
		padding:
			80px 0;
	}

	.sector-card-grid{
		grid-template-columns:
			1fr;

		gap:14px;

		margin-top:30px;
	}

	.sector-card{
		min-height:380px;

		padding:
			22px;
	}

	.sector-card-content{
		padding-top:
			100px;
	}

	.sector-card h3{
		font-size:36px;
	}

	.sector-card-arrow{
		display:none;
	}

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

	.sector-card,
	.sector-card-image,
	.sector-card-icon,
	.sector-card-arrow{
		transition:none;
	}

}





/* =========================================================
   SHOP BUTTON — STATIC STRIPES + SUBTLE ANIMATION
   ========================================================= */

.site-header-light .nav-shop{
	position:relative;

	display:inline-flex;

	align-items:center;
	justify-content:center;

	gap:7px;

	min-height:38px;

	margin-left:4px;

	padding:
		0 14px;

	overflow:hidden;

	color:
		var(--ink);

	border:
		1px solid rgba(27,33,24,.12);

	background:
		repeating-linear-gradient(
			135deg,
			var(--orange) 0,
			var(--orange) 10px,
			#F2A422 10px,
			#F2A422 20px
		);

	font-family:
		var(--mono);

	font-size:
		10px;

	font-weight:
		700;

	letter-spacing:
		.08em;

	text-transform:
		uppercase;

	box-shadow:
		0 0 0 0 rgba(255,90,31,.30);

	animation:
		shopButtonPulse 2.8s ease-in-out infinite;

	transition:
		transform .2s ease,
		box-shadow .2s ease,
		filter .2s ease;
}


/* light sweep */

.site-header-light .nav-shop::before{
	content:"";

	position:absolute;

	top:-60%;
	left:-45%;

	width:30%;
	height:220%;

	background:
		rgba(255,255,255,.33);

	transform:
		rotate(20deg);

	pointer-events:none;

	animation:
		shopButtonSweep 3.5s ease-in-out infinite;
}


/* arrow */

/* ecommerce icon */

.site-header-light .nav-shop i{
	position:relative;

	z-index:2;

	font-size:12px;

	color:currentColor;

	transition:
		transform .2s ease;
}


/* hover */

.site-header-light .nav-shop:hover{
	color:
		var(--ink);

	transform:
		translateY(-2px);

	filter:
		brightness(1.06);

	box-shadow:
		0 9px 24px rgba(255,90,31,.25);
}


.site-header-light .nav-shop:hover::after{
	transform:
		translate(2px,-2px);
}


/* gentle pulse */

@keyframes shopButtonPulse{

	0%,
	100%{
		box-shadow:
			0 0 0 0 rgba(255,90,31,.28);
	}

	50%{
		box-shadow:
			0 0 0 6px rgba(255,90,31,0);
	}

}


/* occasional shine */

@keyframes shopButtonSweep{

	0%,
	60%{
		left:-45%;
	}

	80%{
		left:125%;
	}

	100%{
		left:125%;
	}

}


/* accessibility */

@media(prefers-reduced-motion:reduce){

	.site-header-light .nav-shop,
	.site-header-light .nav-shop::before{
		animation:none;
	}

}






/* =========================================================
   ABOUT PAGE — VISUAL / PHOTOGRAPHIC VERSION
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.about-visual-hero{
	position:relative;

	display:flex;
	align-items:flex-end;

	min-height:
		clamp(580px, 72vh, 800px);

	overflow:hidden;

	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;

	color:#fff;
}


.about-visual-hero-overlay{
	position:absolute;

	inset:0;

	background:
		linear-gradient(
			90deg,
			rgba(27,33,24,.92) 0%,
			rgba(27,33,24,.67) 42%,
			rgba(27,33,24,.20) 100%
		),
		linear-gradient(
			0deg,
			rgba(27,33,24,.50),
			transparent 60%
		);
}


.about-visual-hero-inner{
	position:relative;

	z-index:2;

	padding:
		0 0 90px;
}


.about-visual-hero .tag{
	color:
		rgba(255,255,255,.65);
}


.about-visual-hero h1{
	max-width:
		1000px;

	color:#fff;

	font-size:
		clamp(58px, 7.4vw, 108px);

	line-height:.9;

	letter-spacing:
		-.01em;
}


/* =========================================================
   STORY
   ========================================================= */

.about-visual-story{
	padding:
		110px 0;

	background:#fff;
}


.about-visual-story-grid{
	display:grid;

	grid-template-columns:
		.9fr 1.1fr;

	align-items:stretch;

	gap:70px;
}


.about-visual-story-copy{
	padding:
		20px 0;
}


.about-visual-story-copy h2{
	margin-bottom:
		34px;

	font-size:
		clamp(40px, 5vw, 66px);

	line-height:.98;
}


.about-visual-story-copy p{
	max-width:
		62ch;

	margin:
		0 0 20px;

	color:
		var(--graphite);

	font-size:15.5px;

	line-height:1.8;
}


.about-visual-story-copy .about-story-lead{
	color:
		var(--ink);

	font-size:19px;

	font-weight:500;

	line-height:1.6;
}


/* story image */

.about-story-image{
	position:relative;

	min-height:640px;

	overflow:hidden;

	background:
		var(--ink);
}


.about-story-image img{
	position:absolute;

	inset:0;

	width:100%;
	height:100%;

	object-fit:cover;

	transition:
		transform .7s ease;
}


.about-story-image:hover img{
	transform:
		scale(1.04);
}


.about-story-image-overlay{
	position:absolute;

	inset:0;

	background:
		linear-gradient(
			0deg,
			rgba(27,33,24,.90) 0%,
			rgba(27,33,24,.18) 62%
		);
}


.about-story-facts{
	position:absolute;

	left:0;
	right:0;
	bottom:0;

	display:grid;

	grid-template-columns:
		repeat(2, 1fr);

	z-index:2;
}


.about-story-facts > div{
	padding:
		20px 22px;

	border-top:
		1px solid rgba(255,255,255,.18);

	border-right:
		1px solid rgba(255,255,255,.18);
}


.about-story-facts > div:nth-child(2n){
	border-right:none;
}


.about-story-facts span{
	display:block;

	margin-bottom:6px;

	color:
		rgba(255,255,255,.55);

	font-family:
		var(--mono);

	font-size:8px;

	letter-spacing:.1em;

	text-transform:uppercase;
}


.about-story-facts strong{
	color:#fff;

	font-size:13px;

	font-weight:600;
}


/* =========================================================
   VALUES
   ========================================================= */

.about-visual-values{
	padding:
		110px 0;

	background:
		var(--paper-3);
}


.about-value-grid{
	display:grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap:18px;
}


.about-value-card{
	position:relative;

	display:flex;

	flex-direction:column;

	justify-content:space-between;

	min-height:390px;

	overflow:hidden;

	padding:
		24px;

	background:
		var(--ink);

	isolation:isolate;

	transition:
		transform .35s ease,
		box-shadow .35s ease;
}


.about-value-image{
	position:absolute;

	inset:0;

	z-index:-3;

	width:100%;
	height:100%;

	object-fit:cover;

	transform:
		scale(1.01);

	transition:
		transform .7s ease;
}


.about-value-overlay{
	position:absolute;

	inset:0;

	z-index:-2;

	background:
		linear-gradient(
			180deg,
			rgba(27,33,24,.15) 0%,
			rgba(27,33,24,.32) 40%,
			rgba(27,33,24,.95) 100%
		);
}


.about-value-top{
	color:
		rgba(255,255,255,.65);

	font-family:
		var(--mono);

	font-size:9px;

	letter-spacing:.1em;
}


.about-value-content{
	margin-top:auto;
}


.about-value-card h3{
	margin-bottom:12px;

	color:#fff;

	font-size:
		clamp(30px, 3vw, 42px);

	line-height:1;
}


.about-value-card p{
	max-width:38ch;

	margin:0;

	color:
		rgba(255,255,255,.72);

	font-size:13px;

	line-height:1.65;
}


.about-value-card:hover{
	transform:
		translateY(-5px);

	box-shadow:
		0 22px 45px rgba(27,33,24,.14);
}


.about-value-card:hover .about-value-image{
	transform:
		scale(1.08);
}


/* =========================================================
   SECTORS
   ========================================================= */

.about-visual-sectors{
	padding:
		110px 0;

	background:#fff;
}


.about-sector-photo-grid{
	display:grid;

	grid-template-columns:
		repeat(3, minmax(0,1fr));

	gap:18px;
}


.about-sector-photo-card{
	position:relative;

	min-height:420px;

	overflow:hidden;

	background:
		var(--ink);

	isolation:isolate;

	transition:
		transform .35s ease;
}


.about-sector-photo{
	position:absolute;

	inset:0;

	z-index:-3;

	width:100%;
	height:100%;

	object-fit:cover;

	transition:
		transform .7s ease;
}


.about-sector-photo-overlay{
	position:absolute;

	inset:0;

	z-index:-2;

	background:
		linear-gradient(
			180deg,
			rgba(27,33,24,.12),
			rgba(27,33,24,.30) 45%,
			rgba(27,33,24,.94)
		);
}


.about-sector-photo-top{
	position:absolute;

	top:22px;
	left:22px;

	color:
		rgba(255,255,255,.65);

	font-family:
		var(--mono);

	font-size:9px;

	letter-spacing:.1em;
}


.about-sector-photo-content{
	position:absolute;

	left:22px;
	right:22px;
	bottom:24px;
}


.about-sector-photo-content > span{
	display:block;

	margin-bottom:9px;

	color:
		var(--orange);

	font-family:
		var(--mono);

	font-size:9px;

	font-weight:600;

	letter-spacing:.11em;

	text-transform:uppercase;
}


.about-sector-photo-card h3{
	max-width:90%;

	color:#fff;

	font-size:
		clamp(30px, 3vw, 44px);

	line-height:.98;
}


.about-sector-photo-card:hover{
	transform:
		translateY(-5px);
}


.about-sector-photo-card:hover .about-sector-photo{
	transform:
		scale(1.08);
}


/* =========================================================
   APPROACH
   ========================================================= */

.about-visual-approach{
	padding:
		110px 0;

	background:
		var(--ink);

	color:
		var(--khaki);
}


.about-approach-layout{
	display:grid;

	grid-template-columns:
		.8fr 1.2fr;

	align-items:stretch;

	gap:60px;

	margin-bottom:55px;
}


.about-approach-heading{
	display:flex;

	flex-direction:column;

	justify-content:flex-end;
}


.about-approach-heading h2{
	color:#fff;

	font-size:
		clamp(48px, 6vw, 78px);

	line-height:.9;
}


.about-approach-image{
	min-height:500px;

	overflow:hidden;
}


.about-approach-image img{
	width:100%;
	height:100%;

	object-fit:cover;
}


.about-approach-grid{
	display:grid;

	grid-template-columns:
		repeat(4, 1fr);

	border:
		1px solid var(--khaki-faint);
}


.about-approach-step{
	min-height:280px;

	padding:
		24px;

	border-right:
		1px dashed var(--khaki-faint);
}


.about-approach-step:last-child{
	border-right:none;
}


.about-approach-step-top{
	display:flex;

	justify-content:space-between;

	gap:20px;

	margin-bottom:70px;

	font-family:
		var(--mono);

	font-size:8.5px;
}


.about-approach-step-top span:first-child{
	color:
		var(--orange);
}


.about-approach-step-top span:last-child{
	color:
		var(--khaki-dim);
}


.about-approach-step h3{
	margin-bottom:10px;

	color:#fff;

	font-family:
		var(--body);

	font-size:18px;

	font-weight:700;

	letter-spacing:0;

	text-transform:none;
}


.about-approach-step p{
	margin:0;

	color:
		var(--khaki-dim);

	font-size:13.5px;

	line-height:1.65;
}


/* =========================================================
   COMMITMENT
   ========================================================= */

.about-visual-commitment{
	position:relative;

	display:flex;

	align-items:center;

	min-height:570px;

	overflow:hidden;

	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;

	color:#fff;
}


.about-visual-commitment-overlay{
	position:absolute;

	inset:0;

	background:
		linear-gradient(
			90deg,
			rgba(27,33,24,.94),
			rgba(27,33,24,.58) 55%,
			rgba(27,33,24,.25)
		);
}


.about-visual-commitment-inner{
	position:relative;

	z-index:2;

	display:flex;

	align-items:flex-end;

	justify-content:space-between;

	gap:60px;
}


.about-visual-commitment .tag{
	color:
		rgba(255,255,255,.60);
}


.about-visual-commitment h2{
	max-width:850px;

	color:#fff;

	font-size:
		clamp(52px, 6.5vw, 88px);

	line-height:.9;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1000px){

	.about-visual-story-grid,
	.about-approach-layout{
		grid-template-columns:
			1fr;
	}


	.about-story-image{
		min-height:560px;
	}


	.about-value-grid,
	.about-sector-photo-grid{
		grid-template-columns:
			repeat(2, minmax(0,1fr));
	}


	.about-approach-grid{
		grid-template-columns:
			repeat(2,1fr);
	}


	.about-approach-step:nth-child(2){
		border-right:none;
	}


	.about-approach-step:nth-child(-n+2){
		border-bottom:
			1px dashed var(--khaki-faint);
	}


	.about-visual-commitment-inner{
		align-items:flex-start;

		flex-direction:column;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:640px){

	.about-visual-hero{
		min-height:620px;
	}


	.about-visual-hero-inner{
		padding-bottom:60px;
	}


	.about-visual-hero h1{
		font-size:
			clamp(50px, 15vw, 68px);
	}


	.about-visual-story,
	.about-visual-values,
	.about-visual-sectors,
	.about-visual-approach{
		padding:
			78px 0;
	}


	.about-story-image{
		min-height:500px;
	}


	.about-story-facts{
		grid-template-columns:
			1fr;
	}


	.about-story-facts > div{
		border-right:none;
	}


	.about-value-grid,
	.about-sector-photo-grid,
	.about-approach-grid{
		grid-template-columns:
			1fr;
	}


	.about-value-card,
	.about-sector-photo-card{
		min-height:380px;
	}


	.about-approach-image{
		min-height:360px;
	}


	.about-approach-step{
		min-height:auto;

		border-right:none;

		border-bottom:
			1px dashed var(--khaki-faint);
	}


	.about-approach-step:last-child{
		border-bottom:none;
	}


	.about-approach-step-top{
		margin-bottom:40px;
	}


	.about-visual-commitment{
		min-height:520px;
	}


	.about-visual-commitment h2{
		font-size:
			clamp(46px, 14vw, 66px);
	}


	.about-visual-commitment-inner .btn{
		width:100%;
	}

}




/* =========================================================
   SERVICES PAGE — PHOTOGRAPHIC VERSION
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.services-visual-hero{
	position:relative;

	display:flex;
	align-items:flex-end;

	min-height:
		clamp(620px, 78vh, 850px);

	overflow:hidden;

	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;

	color:#fff;
}


.services-visual-hero-overlay{
	position:absolute;

	inset:0;

	background:
		linear-gradient(
			90deg,
			rgba(27,33,24,.94) 0%,
			rgba(27,33,24,.70) 40%,
			rgba(27,33,24,.20) 100%
		),
		linear-gradient(
			0deg,
			rgba(27,33,24,.55) 0%,
			transparent 58%
		);
}


.services-visual-hero-inner{
	position:relative;

	z-index:2;

	padding:
		0 0 90px;
}


.services-visual-hero .tag{
	color:
		rgba(255,255,255,.62);
}


.services-visual-hero h1{
	max-width:
		1080px;

	margin:0;

	color:#fff;

	font-size:
		clamp(58px, 7.5vw, 110px);

	line-height:.89;

	letter-spacing:
		-.01em;
}


/* HERO ACTIONS */

.services-visual-hero-actions{
	display:flex;

	align-items:center;

	flex-wrap:wrap;

	gap:25px;

	margin-top:36px;
}


.services-hero-contact{
	position:relative;

	color:#fff;

	font-family:
		var(--mono);

	font-size:10.5px;

	font-weight:600;

	letter-spacing:.08em;

	text-transform:uppercase;
}


.services-hero-contact::after{
	content:"";

	position:absolute;

	left:0;
	bottom:-6px;

	width:100%;
	height:1px;

	background:
		rgba(255,255,255,.55);

	transition:
		background .2s ease;
}


.services-hero-contact:hover::after{
	background:
		var(--orange);
}


/* =========================================================
   INTRO
   ========================================================= */

.services-visual-intro{
	padding:
		110px 0 65px;

	background:#fff;
}


.services-intro-grid{
	display:grid;

	grid-template-columns:
		1fr .8fr;

	align-items:end;

	gap:80px;
}


.services-intro-heading h2{
	max-width:750px;

	font-size:
		clamp(44px, 5.6vw, 72px);

	line-height:.96;
}


.services-intro-copy p{
	max-width:55ch;

	margin:
		0 0 30px;

	color:
		var(--graphite);

	font-size:16px;

	line-height:1.8;
}


.services-intro-meta{
	display:flex;

	flex-wrap:wrap;

	gap:10px;
}


.services-intro-meta span{
	padding:
		7px 9px;

	color:
		var(--graphite);

	border:
		1px solid rgba(27,33,24,.13);

	font-family:
		var(--mono);

	font-size:8px;

	letter-spacing:.1em;
}


/* =========================================================
   SERVICE CATALOGUE
   ========================================================= */

.services-visual-catalogue{
	padding:
		35px 0 110px;

	background:#fff;
}


.services-photo-grid{
	display:grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap:18px;
}


/* =========================================================
   SERVICE CARD
   ========================================================= */

.services-photo-card{
	position:relative;

	display:flex;

	flex-direction:column;

	justify-content:space-between;

	min-height:420px;

	overflow:hidden;

	padding:
		24px;

	background:
		var(--ink);

	border:
		1px solid rgba(27,33,24,.10);

	isolation:isolate;

	transition:
		transform .35s ease,
		box-shadow .35s ease;
}


/* FEATURED */

.services-photo-card-featured{
	grid-column:
		span 2;

	min-height:540px;
}


/* IMAGE */

.services-photo-image{
	position:absolute;

	inset:0;

	z-index:-3;

	width:100%;
	height:100%;

	object-fit:cover;

	transform:
		scale(1.01);

	transition:
		transform .75s cubic-bezier(.2,.7,.2,1);
}


/* OVERLAY */

.services-photo-overlay{
	position:absolute;

	inset:0;

	z-index:-2;

	background:
		linear-gradient(
			180deg,
			rgba(27,33,24,.17) 0%,
			rgba(27,33,24,.30) 40%,
			rgba(27,33,24,.96) 100%
		);

	transition:
		background .35s ease;
}


/* ORANGE ACCENT */

.services-photo-card::after{
	content:"";

	position:absolute;

	left:0;
	bottom:0;

	width:0;
	height:4px;

	background:
		var(--orange);

	transition:
		width .4s ease;
}


/* TOP */

.services-photo-top{
	display:flex;

	align-items:center;

	justify-content:space-between;

	gap:20px;

	color:
		rgba(255,255,255,.65);

	font-family:
		var(--mono);

	font-size:8.5px;

	letter-spacing:.1em;

	text-transform:uppercase;
}


/* CONTENT */

.services-photo-content{
	margin-top:auto;

	padding-top:
		120px;
}


.services-photo-card h3{
	max-width:92%;

	margin:
		0 0 13px;

	color:#fff;

	font-size:
		clamp(30px, 3vw, 43px);

	line-height:.98;
}


.services-photo-card-featured h3{
	font-size:
		clamp(42px, 5vw, 66px);
}


.services-photo-card p{
	max-width:
		44ch;

	margin:0;

	color:
		rgba(255,255,255,.72);

	font-size:13px;

	line-height:1.65;
}


/* ARROW */

.services-photo-arrow{
	position:absolute;

	right:22px;
	bottom:22px;

	display:flex;

	align-items:center;
	justify-content:center;

	width:34px;
	height:34px;

	color:
		var(--orange);

	font-family:
		var(--mono);

	font-size:18px;

	opacity:0;

	transform:
		translate(-8px,8px);

	transition:
		opacity .3s ease,
		transform .3s ease;
}


/* HOVER */

.services-photo-card:hover{
	transform:
		translateY(-5px);

	box-shadow:
		0 24px 50px rgba(27,33,24,.16);
}


.services-photo-card:hover .services-photo-image{
	transform:
		scale(1.075);
}


.services-photo-card:hover .services-photo-overlay{
	background:
		linear-gradient(
			180deg,
			rgba(27,33,24,.08) 0%,
			rgba(27,33,24,.24) 37%,
			rgba(27,33,24,.97) 100%
		);
}


.services-photo-card:hover::after{
	width:100%;
}


.services-photo-card:hover .services-photo-arrow{
	opacity:1;

	transform:
		translate(0,0);
}


/* =========================================================
   PROCESS
   ========================================================= */

.services-visual-process{
	padding:
		110px 0;

	background:
		var(--ink);

	color:
		var(--khaki);
}


.services-process-layout{
	display:grid;

	grid-template-columns:
		1.15fr .85fr;

	align-items:stretch;

	gap:60px;

	margin-bottom:55px;
}


/* PROCESS IMAGE */

.services-process-image{
	min-height:520px;

	overflow:hidden;
}


.services-process-image img{
	width:100%;
	height:100%;

	object-fit:cover;

	transition:
		transform .7s ease;
}


.services-process-image:hover img{
	transform:
		scale(1.04);
}


/* PROCESS HEADING */

.services-process-heading{
	display:flex;

	flex-direction:column;

	justify-content:flex-end;
}


.services-process-heading h2{
	max-width:680px;

	margin-bottom:24px;

	color:#fff;

	font-size:
		clamp(44px, 5.6vw, 72px);

	line-height:.95;
}


.services-process-heading > p:last-child{
	max-width:50ch;

	margin:0;

	color:
		var(--khaki-dim);

	font-size:15px;

	line-height:1.75;
}


/* PROCESS STEPS */

.services-process-grid{
	display:grid;

	grid-template-columns:
		repeat(4, 1fr);

	border:
		1px solid var(--khaki-faint);
}


.services-process-step{
	min-height:280px;

	padding:
		24px;

	border-right:
		1px dashed var(--khaki-faint);
}


.services-process-step:last-child{
	border-right:none;
}


.services-process-step-top{
	display:flex;

	align-items:center;

	justify-content:space-between;

	gap:20px;

	margin-bottom:70px;

	font-family:
		var(--mono);

	font-size:8.5px;

	letter-spacing:.08em;
}


.services-process-step-top span:first-child{
	color:
		var(--orange);

	font-weight:700;
}


.services-process-step-top span:last-child{
	color:
		var(--khaki-dim);
}


.services-process-step h3{
	margin-bottom:10px;

	color:#fff;

	font-family:
		var(--body);

	font-size:18px;

	font-weight:700;

	letter-spacing:0;

	text-transform:none;
}


.services-process-step p{
	margin:0;

	color:
		var(--khaki-dim);

	font-size:13.5px;

	line-height:1.65;
}


/* =========================================================
   CLOSING CTA
   ========================================================= */

.services-visual-closing{
	position:relative;

	display:flex;

	align-items:center;

	min-height:570px;

	overflow:hidden;

	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;

	color:#fff;
}


.services-visual-closing-overlay{
	position:absolute;

	inset:0;

	background:
		linear-gradient(
			90deg,
			rgba(27,33,24,.94) 0%,
			rgba(27,33,24,.62) 55%,
			rgba(27,33,24,.24) 100%
		);
}


.services-visual-closing-inner{
	position:relative;

	z-index:2;

	display:flex;

	align-items:flex-end;

	justify-content:space-between;

	gap:60px;
}


.services-visual-closing .tag{
	color:
		rgba(255,255,255,.62);
}


.services-visual-closing h2{
	color:#fff;

	font-size:
		clamp(54px, 7vw, 92px);

	line-height:.9;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1000px){

	.services-intro-grid{
		grid-template-columns:
			1fr;
	}


	.services-photo-grid{
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	.services-photo-card-featured{
		grid-column:
			span 2;
	}


	.services-process-layout{
		grid-template-columns:
			1fr;
	}


	.services-process-grid{
		grid-template-columns:
			repeat(2,1fr);
	}


	.services-process-step:nth-child(2){
		border-right:none;
	}


	.services-process-step:nth-child(-n+2){
		border-bottom:
			1px dashed var(--khaki-faint);
	}


	.services-visual-closing-inner{
		align-items:flex-start;

		flex-direction:column;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:640px){

	.services-visual-hero{
		min-height:640px;
	}


	.services-visual-hero-inner{
		padding-bottom:
			62px;
	}


	.services-visual-hero h1{
		font-size:
			clamp(48px, 14vw, 68px);
	}


	.services-visual-hero-actions{
		align-items:stretch;

		flex-direction:column;
	}


	.services-visual-hero-actions .btn{
		width:100%;
	}


	.services-hero-contact{
		display:inline-block;

		width:max-content;
	}


	.services-visual-intro{
		padding:
			78px 0 45px;
	}


	.services-visual-catalogue{
		padding:
			20px 0 78px;
	}


	.services-photo-grid{
		grid-template-columns:
			1fr;

		gap:14px;
	}


	.services-photo-card,
	.services-photo-card-featured{
		grid-column:auto;

		min-height:400px;

		padding:
			21px;
	}


	.services-photo-card-featured{
		min-height:440px;
	}


	.services-photo-card h3,
	.services-photo-card-featured h3{
		font-size:
			36px;
	}


	.services-photo-arrow{
		display:none;
	}


	.services-visual-process{
		padding:
			78px 0;
	}


	.services-process-image{
		min-height:360px;
	}


	.services-process-grid{
		grid-template-columns:
			1fr;
	}


	.services-process-step{
		min-height:auto;

		border-right:none;

		border-bottom:
			1px dashed var(--khaki-faint);
	}


	.services-process-step:last-child{
		border-bottom:none;
	}


	.services-process-step-top{
		margin-bottom:40px;
	}


	.services-visual-closing{
		min-height:520px;
	}


	.services-visual-closing h2{
		font-size:
			clamp(48px, 14vw, 68px);
	}


	.services-visual-closing-inner .btn{
		width:100%;
	}

}









/* =========================================================
   SECTORS WE SERVE — TECHNICAL MATRIX
   ========================================================= */

.sector-matrix{
	padding:
		110px 0;

	background:
		#fff;
}


/* =========================================================
   HEADING
   ========================================================= */

.sector-matrix-head{
	display:grid;

	grid-template-columns:
		1fr .65fr;

	align-items:end;

	gap:70px;

	margin-bottom:
		55px;
}


.sector-matrix-head h2{
	margin:0;

	color:
		var(--ink);

	font-size:
		clamp(46px, 5.8vw, 76px);

	line-height:
		.94;
}


.sector-matrix-intro{
	max-width:
		52ch;

	margin:
		0;

	color:
		var(--graphite);

	font-size:
		15px;

	line-height:
		1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.sector-matrix-grid{
	display:grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	border-top:
		1px solid rgba(27,33,24,.15);

	border-left:
		1px solid rgba(27,33,24,.15);
}


/* =========================================================
   CARD
   ========================================================= */

.sector-matrix-card{
	position:relative;

	display:flex;

	flex-direction:column;

	justify-content:space-between;

	min-height:
		390px;

	padding:
		26px;

	overflow:hidden;

	background:
		var(--paper-3);

	border-right:
		1px solid rgba(27,33,24,.15);

	border-bottom:
		1px solid rgba(27,33,24,.15);

	transition:
		background .32s ease,
		color .32s ease,
		transform .32s ease;
}


/* orange activation line */

.sector-matrix-card::before{
	content:"";

	position:absolute;

	left:0;
	bottom:0;

	width:100%;
	height:4px;

	background:
		var(--orange);

	transform:
		scaleX(0);

	transform-origin:
		left;

	transition:
		transform .32s ease;
}


/* subtle technical grid */

.sector-matrix-card::after{
	content:"";

	position:absolute;

	inset:0;

	background-image:
		linear-gradient(
			rgba(27,33,24,.025) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(27,33,24,.025) 1px,
			transparent 1px
		);

	background-size:
		42px 42px;

	pointer-events:none;
}


/* =========================================================
   TOP
   ========================================================= */

.sector-matrix-top{
	position:relative;

	z-index:2;

	display:flex;

	align-items:flex-start;

	justify-content:space-between;

	gap:20px;
}


.sector-matrix-number{
	color:
		var(--orange);

	font-family:
		var(--mono);

	font-size:
		11px;

	font-weight:
		700;

	letter-spacing:
		.08em;
}


/* icon */

.sector-matrix-icon{
	display:flex;

	align-items:center;

	justify-content:center;

	width:
		46px;

	height:
		46px;

	color:
		var(--orange);

	border:
		1px solid rgba(27,33,24,.15);

	font-size:
		18px;

	transition:
		background .3s ease,
		color .3s ease,
		border-color .3s ease,
		transform .3s ease;
}


/* =========================================================
   CONTENT
   ========================================================= */

.sector-matrix-content{
	position:relative;

	z-index:2;

	margin-top:auto;

	padding-top:
		85px;
}


.sector-matrix-label{
	display:block;

	margin-bottom:
		10px;

	color:
		var(--orange);

	font-family:
		var(--mono);

	font-size:
		8.5px;

	font-weight:
		600;

	letter-spacing:
		.12em;

	text-transform:
		uppercase;
}


.sector-matrix-card h3{
	max-width:
		90%;

	margin:
		0 0 13px;

	color:
		var(--ink);

	font-size:
		clamp(31px, 3vw, 43px);

	line-height:
		.98;

	transition:
		color .3s ease;
}


.sector-matrix-card p{
	max-width:
		40ch;

	margin:0;

	color:
		var(--graphite);

	font-size:
		13.5px;

	line-height:
		1.65;

	transition:
		color .3s ease;
}


/* =========================================================
   ARROW
   ========================================================= */

.sector-matrix-arrow{
	position:absolute;

	z-index:3;

	right:24px;
	bottom:24px;

	color:
		var(--orange);

	font-family:
		var(--mono);

	font-size:
		18px;

	opacity:0;

	transform:
		translate(-8px,8px);

	transition:
		opacity .3s ease,
		transform .3s ease;
}


/* =========================================================
   DARK FEATURED CARD
   ========================================================= */

.sector-matrix-card-dark{
	background:
		var(--ink);
}


.sector-matrix-card-dark h3{
	color:
		#fff;
}


.sector-matrix-card-dark p{
	color:
		var(--khaki-dim);
}


.sector-matrix-card-dark .sector-matrix-icon{
	border-color:
		var(--khaki-faint);
}


/* =========================================================
   ACCENT CARD
   ========================================================= */

.sector-matrix-card-accent{
	background:
		var(--paper-2);
}


/* =========================================================
   HOVER
   ========================================================= */

.sector-matrix-card:hover{
	z-index:4;

	background:
		var(--ink);

	transform:
		translateY(-5px);
}


.sector-matrix-card:hover::before{
	transform:
		scaleX(1);
}


.sector-matrix-card:hover h3{
	color:
		#fff;
}


.sector-matrix-card:hover p{
	color:
		var(--khaki-dim);
}


.sector-matrix-card:hover .sector-matrix-icon{
	background:
		var(--orange);

	color:
		#fff;

	border-color:
		var(--orange);

	transform:
		rotate(-4deg);
}


.sector-matrix-card:hover .sector-matrix-arrow{
	opacity:1;

	transform:
		translate(0,0);
}


/* =========================================================
   FOOT
   ========================================================= */

.sector-matrix-foot{
	display:flex;

	align-items:center;

	justify-content:space-between;

	gap:30px;

	margin-top:
		24px;

	padding-top:
		18px;

	border-top:
		1px dashed rgba(27,33,24,.18);

	color:
		var(--graphite);

	font-family:
		var(--mono);

	font-size:
		8.5px;

	letter-spacing:
		.1em;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1000px){

	.sector-matrix-head{
		grid-template-columns:
			1fr;

		gap:25px;
	}


	.sector-matrix-grid{
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:640px){

	.sector-matrix{
		padding:
			78px 0;
	}


	.sector-matrix-head{
		margin-bottom:
			38px;
	}


	.sector-matrix-head h2{
		font-size:
			48px;
	}


	.sector-matrix-grid{
		grid-template-columns:
			1fr;
	}


	.sector-matrix-card{
		min-height:
			330px;

		padding:
			22px;
	}


	.sector-matrix-content{
		padding-top:
			65px;
	}


	.sector-matrix-card h3{
		font-size:
			35px;
	}


	.sector-matrix-arrow{
		display:none;
	}


	.sector-matrix-foot{
		align-items:flex-start;

		flex-direction:column;

		gap:8px;
	}

}





/* =========================================================
   CLIENT LOGOS — FULL COLOUR
   ========================================================= */

.client-logo img{
	display:block;

	width:auto;
	height:auto;

	max-width:100%;
	max-height:75px;

	object-fit:contain;

	filter:none;

	opacity:1;

	transition:
		transform .2s ease;
}


.client-logo:hover img{
	filter:none;

	opacity:1;

	transform:
		scale(1.04);
}




/* =========================================================
   OUR SERVICES — 3 COLUMN GRID
   ========================================================= */

.cap-list{
	display:grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap:1px;

	background:
		var(--paper-2);

	border:
		1px solid var(--paper-2);
}






/* TABLET */

@media(max-width:900px){

	.cap-list{
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


/* MOBILE */

@media(max-width:640px){

	.cap-list{
		grid-template-columns:
			1fr;
	}

}






/* =========================================================
   WHITE HEADER — MOBILE
   ========================================================= */

@media(max-width:900px){

	.site-header-light .header-inner{
		position:relative;

		min-height:72px;
	}


	.site-header-light .brand-logo{
		height:42px;
	}


	/* SHOW HAMBURGER */

	.site-header-light .menu-toggle{
		display:inline-flex;

		align-items:center;
		justify-content:center;

		flex-shrink:0;

		color:var(--ink);

		border:
			1px solid rgba(27,33,24,.22);

		background:
			transparent;

		cursor:pointer;
	}


	/* HIDE MENU BY DEFAULT */

	.site-header-light .primary-nav{
		position:absolute;

		top:100%;
		left:0;
		right:0;

		display:none;

		flex-direction:column;
		align-items:stretch;

		gap:0;

		width:100%;

		padding:
			10px 10% 20px;

		background:#fff;

		color:
			var(--ink);

		border-top:
			1px solid rgba(27,33,24,.1);

		border-bottom:
			1px solid rgba(27,33,24,.1);

		box-shadow:
			0 18px 30px rgba(27,33,24,.08);
	}


	/* OPEN ONLY AFTER HAMBURGER CLICK */

	.site-header-light .primary-nav.open{
		display:flex;
	}


	/* MENU ITEMS */

	.site-header-light .primary-menu{
		display:flex;

		flex-direction:column;
		align-items:stretch;

		width:100%;

		gap:0;

		margin:0;
		padding:0;
	}


	.site-header-light .primary-menu li{
		width:100%;
	}


	.site-header-light .primary-menu li a{
		display:flex;

		width:100%;

		min-height:auto;

		padding:
			14px 4px;

		color:
			var(--ink);

		border-bottom:
			1px solid rgba(27,33,24,.08);
	}


	/* REMOVE DESKTOP UNDERLINE ANIMATION */

	.site-header-light .primary-menu li a::after{
		display:none;
	}


	/* SHOP */

	.site-header-light .nav-shop{
		width:100%;

		margin:
			12px 0 0;

		min-height:42px;
	}

}