/* Bentham Acoustics — site styles
   Palette and type follow the brand spec: black, brand red, cyan for data,
   grey and light grey. Square corners, no shadows. */

:root{
  --ink:#121416;
  --dark:#121416;   /* dark surfaces */
  --body:#2E3338;
  --muted:#5F666D;
  --accent:#237D32;--accent-lift:#2E9440;
  --accent-dk:#1A6126;
  --data:#1AA3DA;
  --panel:#EEF0F2;
  --panel-rule:#D5D9DD;
  --panel-ink:#4A5057;
  --rule:#DDE0E3;
  --grid:#F1F2F4;
  --paper:#FFFFFF;
  --mid:#5F666D;

  --f-head:Archivo,"Helvetica Neue",Arial,sans-serif;
  --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-word:Montserrat,"Helvetica Neue",Arial,sans-serif;

  --wrap:1100px;
  --gutter:44px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--f-body);font-size:16px;line-height:1.7;
}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--ink);margin:0;text-wrap:balance}
p{margin:0 0 16px}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--dark);color:#fff;padding:10px 16px;z-index:50}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}

/* ---------- Banner ---------- */
.banner{background:var(--dark);display:flex;align-items:center;gap:24px;padding:18px 0 18px var(--gutter);position:sticky;top:0;z-index:100}
.lockup{display:block;flex-shrink:0;text-decoration:none}
.lockup svg{width:219px;height:52.6px;display:block;color:#fff;
  --lk-sub:#fff;--lk-bar:#fff;--lk-accent:var(--accent-lift)}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px;padding-right:36px;
  font-family:var(--f-mono,var(--f-body));font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.nav a{color:#fff;text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--accent)}
.nav a.cta{background:var(--accent);color:#fff;padding:10px 16px;border:0;font-weight:600;font-size:13.5px;letter-spacing:.01em;text-transform:none}
.nav a.cta:hover{background:var(--accent-dk)}
.burger{display:none;margin-left:auto;margin-right:24px;width:44px;height:44px;border:1px solid #3A4148;background:transparent;cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:#fff;margin:4px auto}

/* ---------- Buttons and links ---------- */
.btn{display:inline-block;padding:14px 24px;background:var(--accent);color:#fff;font-weight:600;font-size:15px;text-decoration:none;border:0;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--accent-dk)}
.quiet{font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:3px}
.on-dark .quiet,.quiet.on-dark{color:#fff}
.kick{font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dk);margin-bottom:12px}
.kick.light{color:var(--panel)}

/* ---------- Photo blocks ---------- */
.photo{position:relative;overflow:hidden;background:var(--dark)}
.photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo>.veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,20,22,.86),rgba(18,20,22,.6) 55%,rgba(18,20,22,.45))}
.photo .wrap{position:relative;z-index:2}

/* ---------- Hero ---------- */
.hero{min-height:470px;display:flex;align-items:center}
.hero .wrap{padding-block:72px;width:100%}
.hero .eyebrow{font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--panel);margin-bottom:18px}
/* The hero headline is two sentences with a hard break between them. At 56px
   the longer one measures 914px, so 17em (952px) is what holds each on a
   single line; the wrap gives 1012px of inner width. Below about 1100px there
   is no longer room for 56px, so the size tracks the viewport instead of
   stepping at a breakpoint: 5.1vw is the largest slope that still fits the
   long sentence all the way down to roughly 620px, where it wraps on phones
   and text-wrap:balance takes over. Balance is off above that because it
   fights the hard break and re-splits the sentences. */
.hero h1{color:#fff;font-size:clamp(34px,5.1vw,56px);letter-spacing:-.045em;line-height:1.04;max-width:17em;text-wrap:initial}
.hero p{color:#E9ECEF;font-size:18px;line-height:1.65;max-width:30em;margin-top:22px}
.actions{display:flex;flex-wrap:wrap;gap:24px;align-items:center;margin-top:32px}

/* ---------- Value strip ---------- */
.value{background:#F6F7F8;border-bottom:1px solid var(--rule)}
.value ul{list-style:none;margin:0 auto;padding:20px var(--gutter);max-width:var(--wrap);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 28px;font-size:14.5px;font-weight:500;line-height:1.35;color:var(--ink)}
.value li{display:flex;align-items:center;gap:12px}
.value svg{width:34px;height:34px;flex-shrink:0;fill:none;stroke:var(--accent);stroke-width:1.6}

/* ---------- Sections ---------- */
.section{padding-block:88px}
.section.tight{padding-top:0}
.centered{text-align:center;margin-bottom:40px}
.centered h2{font-size:34px;letter-spacing:-.035em;line-height:1.12}
.centered p{color:var(--muted);margin:12px auto 0;max-width:34em}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:stretch}
.split h2{font-size:32px;letter-spacing:-.035em;line-height:1.12;margin-bottom:20px}
.split p{max-width:34em}
.split .photo{min-height:360px}

/* ---------- Industry tiles ---------- */
.group+.group{margin-top:56px}
.group-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:2px solid var(--ink);padding-top:14px;margin-bottom:18px}
.group-head h3{font-size:24px;letter-spacing:-.035em}
.group-head p{color:var(--muted);font-size:15px;margin:0}
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.tiles.seven{grid-template-columns:repeat(7,minmax(0,1fr))}
/* one continuous set of tiles, seven to a row, with a short last row centred */
.tiles.flow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.tiles.flow>.tile{flex:0 0 calc((100% - 63px)/7);min-width:0;padding-left:8px;padding-right:8px}
.tile{aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  text-decoration:none;text-align:center;padding:14px;color:#fff;background:var(--dark);transition:background .15s}
.tile svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1.5}
.tile span{font-family:var(--f-head);font-weight:600;font-size:17px;letter-spacing:-.02em;line-height:1.2}
.tile:hover,.tile:focus-visible{background:var(--accent)}

/* ---------- Full-width band ---------- */
.band{min-height:280px;display:flex;align-items:center}
.band .wrap{width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-block:64px}
.band h2{color:#fff;font-size:34px;letter-spacing:-.035em;line-height:1.1;max-width:13em}
.band p{color:#E9ECEF;margin-top:12px;max-width:30em}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:56px}
.contact h2{font-size:34px;letter-spacing:-.035em;line-height:1.1}
.direct{margin-top:28px;font-size:15px;line-height:1.9}
.direct .label{display:block;font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.direct a{text-decoration:none;border-bottom:1px solid var(--rule)}
.direct a:hover{border-color:var(--accent)}
form.enquiry{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form.enquiry .full{grid-column:1/-1}
form.enquiry label{display:block;font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
form.enquiry input,form.enquiry textarea{width:100%;border:1px solid #C9CED3;background:#fff;padding:12px;font:inherit;font-size:15px;color:var(--body);border-radius:0}
form.enquiry textarea{min-height:120px;resize:vertical}
/* Honeypot: off screen, never focusable, invisible to real people */
form.enquiry .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form.enquiry .form-error{grid-column:1/-1;margin:0;padding:12px 14px;background:#F7EEEF;
  border-left:3px solid var(--accent);font-size:14.5px;color:var(--ink)}
form.enquiry .note{grid-column:1/-1;font-size:13.5px;color:var(--muted);margin:0}

/* ---------- Footer ---------- */
.footer{background:var(--dark);color:#fff;border-top:4px solid var(--accent);padding:56px 0 36px}
.footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr .8fr;gap:32px}
.footer .lockup svg{width:198px;height:47.6px}
.footer h4{font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--panel);margin-bottom:12px;font-family:var(--f-body)}
.footer ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:2;color:#DDE1E5}
/* The industries are one flat list under a single heading, laid out across
   two of the grid's columns so the column widths stay as they were. */
.footer .ind{grid-column:span 2}
.footer .ind ul{columns:2;column-gap:32px}
.footer .ind li{break-inside:avoid}
.footer a{text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer address{font-style:normal;font-size:14px;line-height:1.8;color:#DDE1E5;margin-top:16px}
.footer .base{grid-column:1/-1;border-top:1px solid #2A2F34;padding-top:18px;margin-top:12px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8C939A}

/* ---------- Interior pages ---------- */
.page-title{min-height:250px;display:flex;align-items:flex-end}
.page-title .wrap{padding-block:40px;width:100%}
.page-title .eyebrow{font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--panel);margin-bottom:12px}
.page-title h1{color:#fff;font-size:46px;letter-spacing:-.04em;line-height:1.08;max-width:14em}
.page-title.plain{background:var(--dark)}
/* Industry title blocks carry a photograph. Taller than the plain version,
   with a veil heavy enough that white type holds over any of the thirteen. */
.page-title.photo{min-height:340px}
.page-title.photo>.veil{background:linear-gradient(90deg,rgba(18,20,22,.84),rgba(18,20,22,.62) 55%,rgba(18,20,22,.42))}
.page-title.photo .wrap{position:relative;z-index:2}

.meta{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:14px;
  font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--rule)}
.meta .a{color:var(--accent-dk)}
.meta .m{color:var(--muted)}

.cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;padding-block:56px 88px}
.lede{font-size:21px;line-height:1.55;color:var(--ink);max-width:30em}
.h2{display:flex;align-items:baseline;gap:14px;font-family:var(--f-head);font-weight:700;font-size:26px;
  letter-spacing:-.035em;color:var(--ink);border-top:2px solid var(--ink);padding-top:14px;margin:48px 0 16px}
.h2 small{font-weight:600;font-size:12px;letter-spacing:.1em;color:var(--muted);font-family:var(--f-body)}
.main p{max-width:34em}
/* Whose experience the section describes. A quiet note, not another paragraph
   of the argument, so it is smaller and set in the muted grey above a hairline. */
.main p.attrib{margin-top:26px;padding-top:16px;border-top:1px solid var(--rule);
  font-size:14px;line-height:1.6;color:var(--muted)}
.main p.attrib+p{margin-top:12px}
.items{border-top:1px solid var(--rule)}
.items>div{padding:16px 0;border-bottom:1px solid var(--rule)}
.items h4{margin:0 0 4px;font-weight:600;font-size:18px;letter-spacing:-.025em}
.items p{margin:0;font-size:15.5px}
.bios>.bio{display:grid;grid-template-columns:190px minmax(0,1fr);gap:28px;
  align-items:start;padding:28px 0}
.bios>.bio img{width:100%;height:auto;display:block;filter:grayscale(.15);margin-top:26px}
.bios>.bio p+p{margin-top:10px}
@media(max-width:720px){
  .bios>.bio{grid-template-columns:1fr;gap:16px}
  .bios>.bio img{max-width:190px}
}
.aside{display:flex;flex-direction:column;gap:24px}
/* On a long page the panels used to end a third of the way down and leave the
   rest of the column empty. They now travel with the reader. The banner is
   sticky at 88px, so the offset clears it. The height query is the guard: the
   tallest stack is about 680px, and pinning it on a viewport that cannot hold
   it would put the last panel permanently off screen, so on a short window it
   stays where it was. */
.aside.stick{align-self:start}
@media (min-width:981px) and (min-height:830px){
  .aside.stick{position:sticky;top:112px}
}
.cols.tall{padding-bottom:64px}

/* The closing band of links to the other industries, full width under the two
   columns, where the "more in this group" panel used to sit in the aside. */
.more{border-top:1px solid var(--rule)}
.more .wrap{padding-block:34px 88px}
.more .label{font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
/* Multi-column rather than a grid: the count of industries does not divide
   evenly, and columns balance the remainder down the columns instead of
   leaving one lonely item on a last row. */
.morelist{list-style:none;padding:0;margin:0;columns:4;column-gap:40px}
.morelist li{border-bottom:1px solid var(--rule);break-inside:avoid}
.morelist a{display:flex;justify-content:space-between;gap:10px;padding:11px 0;
  font-size:14.5px;color:var(--ink);text-decoration:none}
.morelist a::after{content:"\2192";color:var(--accent-dk)}
.morelist a:hover{color:var(--accent-dk)}
.panel{background:var(--panel);color:var(--panel-ink);padding:24px}
.panel h3{font-size:20px;letter-spacing:-.025em;margin:0 0 10px}
.panel .label{font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--panel-ink);margin-bottom:8px}
.panel ul{list-style:none;padding:0;margin:0;font-size:14.5px;line-height:1.5}
.panel li{padding:10px 0;border-top:1px solid var(--panel-rule)}
.panel li:first-child{border-top:0}
.panel b{color:var(--ink)}
.linklist{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink)}
.linklist li{border-bottom:1px solid var(--rule)}
.linklist a{display:flex;justify-content:space-between;gap:10px;padding:10px 0;font-size:14.5px;color:var(--ink);text-decoration:none}
.linklist a::after{content:"\2192";color:var(--accent-dk)}
.linklist a:hover{color:var(--accent-dk)}
.request{font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:3px}

/* ---------- Services directory ---------- */
.svc-group{margin-top:48px}
.svc-group h2{font-size:26px;letter-spacing:-.035em;border-top:2px solid var(--ink);padding-top:14px;margin-bottom:8px}
.svc{border-bottom:1px solid var(--rule);padding:16px 0;max-width:46em}
.svc h3{font-weight:600;font-size:18px;letter-spacing:-.025em;margin-bottom:4px}
.svc p{margin:0;font-size:15.5px}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .tiles,.tiles.seven{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tiles.flow>.tile{flex:0 0 calc((100% - 20px)/3)}
  .cols{grid-template-columns:1fr;gap:32px}
  .morelist{columns:2;column-gap:32px}
  .footer .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  :root{--gutter:20px}
  html{scroll-padding-top:72px}
  .banner{padding:14px 0 18px 20px;gap:12px}
  .lockup svg{width:159px;height:38.2px}
  .nav{display:none}
  .burger{display:block}
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--dark);flex-direction:column;
    align-items:flex-start;gap:18px;padding:20px;margin:0;z-index:30}
  .hero{min-height:0}
  .hero .wrap{padding-block:56px}
  .hero h1{text-wrap:balance}
  .hero p{font-size:16px}
  .value ul{padding:16px 20px;grid-template-columns:1fr 1fr;gap:14px 16px;font-size:13.5px}
  .value svg{width:28px;height:28px}
  .section{padding-block:56px}
  .centered h2,.band h2,.contact h2{font-size:26px}
  .split{grid-template-columns:1fr;gap:28px}
  .split h2{font-size:26px}
  .split .photo{min-height:220px}
  .tiles,.tiles.seven{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles.flow>.tile{flex:0 0 calc((100% - 10px)/2)}
  .tile span{font-size:15px}
  .tile svg{width:38px;height:38px}
  .morelist{columns:1}
  .more .wrap{padding-block:28px 56px}
  .contact{grid-template-columns:1fr;gap:32px}
  form.enquiry{grid-template-columns:1fr}
  .footer .wrap{grid-template-columns:1fr}
  .footer .ind{grid-column:span 1}
  .footer .ind ul{columns:1}
  .page-title h1{font-size:30px}
  .page-title.photo{min-height:260px}
  .lede{font-size:18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}