/* ==========================================================================
   Ben Engineering — main stylesheet
   Breakpoints:  ≤1180 laptop   ≤900 tablet   ≤700 large phone   ≤430 phone
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root{
  --navy:#323E4E;
  --ink:#28313F;
  --gold:#F3BD43;
  --paper:#FAF7F0;
  --card:#FFFDF8;
  --sand:#F1EBDD;
  --muted:#5A6472;
  --line:#DED7C8;
  --rule:#CBD2DC;

  --soil-1:#E7CFA0;
  --soil-2:#D2A868;
  --soil-3:#B98B4E;
  --soil-4:#A97C46;

  --wrap:1240px;
  --gutter:clamp(20px, 4vw, 40px);

  --font-display:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --radius:5px;
  --shadow:0 2px 10px rgba(40,49,63,.07);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;}
img{height:auto;border:0;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p,figure{margin:0;}
ul{margin:0;padding:0;list-style:none;}

:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 3. Type helpers ---------- */
.display{font-family:var(--font-display);font-variation-settings:"wdth" 118;font-weight:660;}
.mono{
  font-family:var(--font-mono);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
}
.eyebrow{
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(10px, 1.05vw, 12.5px);
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);line-height:1.7;
}

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-block;
  background:var(--gold);color:var(--ink);
  font-weight:800;font-size:16px;line-height:1.2;
  padding:15px 28px;border-radius:4px;border:1.5px solid var(--gold);
  text-align:center;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover{background:#E8AE2C;border-color:#E8AE2C;}
.btn:active{transform:translateY(1px);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);}

/* ---------- 5. Header / navigation ---------- */
.site-header{border-bottom:1px solid var(--line);background:var(--paper);}
.nav{display:flex;align-items:center;gap:clamp(16px,2.5vw,40px);min-height:146px;}
.nav__logo img{display:block;height:104px;width:auto;}
.nav__links{display:flex;gap:clamp(18px,2.4vw,34px);margin-left:auto;font-weight:500;font-size:15.5px;}
.nav__links a{padding-bottom:3px;border-bottom:2px solid transparent;}
.nav__links a:hover{border-bottom-color:var(--line);}
.nav__links a[aria-current="page"]{border-bottom-color:var(--gold);}
.nav__tel{font-family:var(--font-mono);font-weight:500;font-size:14.5px;letter-spacing:.04em;white-space:nowrap;}

.nav__panel{display:none;}
.nav__toggle{
  display:none;margin-left:auto;
  width:46px;height:40px;padding:8px;
  background:none;border:0;cursor:pointer;
}
.nav__toggle span{display:block;height:2.5px;background:var(--ink);border-radius:2px;margin:5px 0;}

/* ---------- 6. Hero ---------- */
.hero__copy{padding:clamp(40px,5vw,76px) 0 clamp(28px,3.4vw,48px);text-align:center;}
.hero h1{
  font-family:var(--font-display);font-variation-settings:"wdth" 118;font-weight:680;
  font-size:clamp(28px, 4.2vw, 52px);
  line-height:1.12;margin:clamp(14px,1.6vw,20px) 0;
  text-wrap:balance;
}
.hero__lede{
  font-size:clamp(15.5px, 1.35vw, 18.5px);
  line-height:1.6;color:#414B5B;
  max-width:730px;margin:0 auto clamp(22px,2.4vw,34px);
  text-wrap:pretty;
}
.hero__cta{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  margin-bottom:clamp(18px,2vw,26px);
}
.hero__note{
  font-family:var(--font-mono);font-weight:500;text-transform:uppercase;
  font-size:clamp(9.5px,.95vw,12px);letter-spacing:.09em;
  color:var(--muted);line-height:1.7;
}

/* Illustration band */
.hero__art{line-height:0;}
.hero__art svg{display:block;width:100%;height:auto;}
.grade{position:relative;border-top:3px solid var(--ink);}
.grade__label{
  position:absolute;top:-30px;left:var(--gutter);
  background:var(--paper);padding:0 10px;
  font-family:var(--font-mono);font-weight:500;text-transform:uppercase;
  font-size:clamp(9px,.9vw,12px);letter-spacing:.08em;
}
.strata{display:block;width:100%;height:auto;}

/* ---------- 7. Credentials strip ---------- */
.creds{background:var(--ink);color:#EDF2EE;}
.creds__grid{display:grid;grid-template-columns:repeat(4,1fr);}
.creds__item{padding:clamp(22px,2.4vw,34px) clamp(18px,2vw,36px) clamp(20px,2.2vw,30px);border-left:1px solid #46536A;}
.creds__item:first-child{border-left:0;padding-left:0;}
.creds__item b{
  font-family:var(--font-display);font-variation-settings:"wdth" 120;font-weight:650;
  font-size:clamp(18px,1.8vw,24px);display:block;margin-bottom:4px;
}
.creds__item span{display:block;font-size:clamp(12px,1.05vw,13.5px);color:#A9B3C4;line-height:1.45;}

/* ---------- 8. Services ---------- */
.services{padding:clamp(52px,6vw,88px) 0 clamp(46px,5.6vw,84px);}
.section-head{max-width:760px;margin:0 auto clamp(32px,3.8vw,56px);text-align:center;}
.section-head h2{
  font-family:var(--font-display);font-variation-settings:"wdth" 118;font-weight:660;
  font-size:clamp(19px,2.9vw,37px);line-height:1.16;margin-top:14px;
}
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,3.6vw,48px);}
.track__head{border-bottom:3px solid var(--ink);padding-bottom:14px;margin-bottom:6px;}
.track__head h3{
  font-family:var(--font-display);font-variation-settings:"wdth" 120;font-weight:650;
  font-size:clamp(19px,1.9vw,24px);
}
.service{
  display:grid;grid-template-columns:24px 1fr;gap:5px 15px;
  align-items:start;
  padding:18px 0 16px;border-bottom:1px solid var(--line);
}
.service__icon{grid-row:1 / span 2;width:24px;height:24px;margin-top:2px;flex:none;}
.service__name{font-weight:700;font-size:clamp(15.5px,1.35vw,17px);}
.service p{grid-column:2;font-size:clamp(13.5px,1.15vw,14.5px);color:var(--muted);line-height:1.5;}

/* ---------- 9. Sample reports ---------- */
.reports{padding:clamp(52px,6vw,86px) 0 clamp(48px,5.6vw,84px);border-top:1px solid var(--line);}
.reports__head{
  display:grid;grid-template-columns:1fr 420px;gap:clamp(18px,4vw,60px);
  align-items:end;margin-bottom:clamp(30px,3vw,44px);
}
.reports__head h2{
  font-family:var(--font-display);font-variation-settings:"wdth" 118;font-weight:660;
  font-size:clamp(24px,2.9vw,38px);line-height:1.12;margin-top:14px;
}
.reports__head p{font-size:clamp(15.5px,1.3vw,16.5px);color:var(--muted);line-height:1.6;}
.reports__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.6vw,32px);}
.report{display:flex;flex-direction:column;}
.report__cover{
  display:block;width:100%;aspect-ratio:17/22;
  border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow);
  margin-bottom:18px;overflow:hidden;background:var(--card);
}
.report h3{
  font-family:var(--font-display);font-variation-settings:"wdth" 120;font-weight:650;
  font-size:clamp(17px,1.5vw,19px);line-height:1.25;margin-bottom:7px;
}
.report p{font-size:clamp(13.5px,1.2vw,14.5px);color:var(--muted);line-height:1.5;margin-bottom:14px;}
.report__dl{
  margin-top:auto;border-top:1px solid var(--line);padding-top:14px;
  font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.report__dl:hover{color:var(--navy);}
.report__dl svg{flex:none;}
.report__size{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.06em;color:var(--muted);}

/* ---------- 10. Fieldwork ---------- */
.field{background:var(--sand);padding:clamp(52px,5.6vw,80px) 0;}
.field h2{
  font-family:var(--font-display);font-variation-settings:"wdth" 118;font-weight:660;
  font-size:clamp(22px,2.6vw,34px);line-height:1.15;margin:12px 0 8px;
}
.field__sub{font-size:clamp(15px,1.3vw,16px);color:var(--muted);margin-bottom:clamp(26px,2.8vw,40px);max-width:620px;}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.2vw,26px);}
.shot figure{margin:0;}
.shot svg{
  display:block;width:100%;aspect-ratio:3/2;height:auto;
  border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;
}
.shot h3{font-weight:700;font-size:clamp(15px,1.35vw,16px);margin-bottom:4px;}
.shot p{font-size:clamp(13.5px,1.2vw,14px);color:var(--muted);line-height:1.5;}

/* ---------- 11. Service areas ---------- */
.areas{background:var(--sand);padding:clamp(52px,5.6vw,80px) 0;border-top:1px solid rgba(0,0,0,.06);}
.areas__grid{display:grid;grid-template-columns:1fr 620px;gap:clamp(30px,4.4vw,64px);}
.areas h2{
  font-family:var(--font-display);font-variation-settings:"wdth" 118;font-weight:660;
  font-size:clamp(24px,2.9vw,38px);line-height:1.15;margin:12px 0 22px;
}
.areas__list{margin-bottom:26px;}
.areas__list b{display:block;font-weight:700;font-size:15px;margin-bottom:6px;}
.areas__list span{font-size:14px;color:var(--muted);line-height:1.65;}
.offices{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.office{
  background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:clamp(20px,2vw,26px);
  font-style:normal;
}
.office__tag{
  display:block;margin-bottom:10px;color:var(--navy);
  font-family:var(--font-mono);font-weight:500;text-transform:uppercase;
  font-size:11px;letter-spacing:.08em;
}
.office h3{
  font-family:var(--font-display);font-variation-settings:"wdth" 120;font-weight:650;
  font-size:clamp(18px,1.6vw,20px);margin-bottom:8px;
}
.office p{font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:12px;}
.office__tel{font-family:var(--font-mono);font-weight:500;font-size:14px;color:var(--ink);}
.office--wide{grid-column:1 / -1;display:grid;grid-template-columns:1.1fr 1.5fr .9fr;align-items:center;gap:16px;}
.office--wide h3,.office--wide p{margin-bottom:0;}
.office--wide .office__tel{text-align:right;}

/* ---------- 12. Closing CTA ---------- */
.cta{background:var(--navy);color:#fff;padding:clamp(46px,5vw,74px) 0;}
.cta__grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(26px,4vw,60px);}
.cta h2{
  font-family:var(--font-display);font-variation-settings:"wdth" 118;font-weight:660;
  font-size:clamp(26px,3.2vw,42px);line-height:1.12;margin-bottom:12px;
}
.cta p{font-size:clamp(15.5px,1.35vw,17px);color:#C4CDDB;max-width:540px;}
.cta__tel{
  display:block;margin-top:16px;text-align:center;color:#C4CDDB;
  font-family:var(--font-mono);font-weight:500;text-transform:uppercase;
  font-size:13px;letter-spacing:.08em;
}

/* ---------- 13. Footer ---------- */
.site-footer{background:var(--ink);color:#97A2B2;padding:clamp(28px,3vw,36px) 0;}
.site-footer .wrap{display:flex;align-items:center;gap:40px;font-size:13.5px;flex-wrap:wrap;}
.footer__mark{
  font-family:var(--font-display);font-variation-settings:"wdth" 125;font-weight:750;
  font-size:16px;letter-spacing:.06em;color:#fff;
}
.footer__mark span{font-weight:600;letter-spacing:.22em;color:var(--gold);}
.footer__links{margin-left:auto;display:flex;gap:28px;flex-wrap:wrap;}
.footer__links a:hover{color:#fff;}

/* ==========================================================================
   14. Responsive — laptop, tablet, phone
   ========================================================================== */

/* Laptop / small desktop */
@media (max-width:1180px){
  .nav{min-height:120px;}
  .nav__logo img{height:88px;}
  .areas__grid{grid-template-columns:1fr 520px;}
  .reports__head{grid-template-columns:1fr 360px;}
}

/* Tablet */
@media (max-width:900px){
  .nav{min-height:auto;padding:16px 0;gap:14px;}
  .nav__logo img{height:64px;}
  .nav__links,.nav__tel,.nav .btn{display:none;}
  .nav__toggle{display:block;}

  /* slide-down menu */
  .nav__panel{padding:6px 0 22px;border-top:1px solid var(--line);}
  .nav__panel.is-open{display:block;}
  .nav__panel a{display:block;padding:13px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:17px;}
  .nav__panel .btn{display:block;margin-top:18px;}
  .nav__panel .nav__tel{display:block;margin-top:16px;text-align:center;}

  .creds__grid{grid-template-columns:1fr 1fr;}
  .creds__item{border-left:none;padding-left:0;}
  .creds__item:nth-child(even){padding-left:20px;border-left:1px solid #46536A;}
  .creds__item:nth-child(n+3){border-top:1px solid #46536A;}

  .tracks{grid-template-columns:1fr;gap:38px;}
  .reports__head{grid-template-columns:1fr;gap:16px;}
  .reports__head h2 br{display:none;}
  .reports__grid{grid-template-columns:repeat(2,1fr);}
  .shots{grid-template-columns:repeat(2,1fr);}
  .areas__grid{grid-template-columns:1fr;gap:34px;}
  .areas h2 br{display:none;}
  .offices{grid-template-columns:1fr 1fr;}
  .cta__grid{grid-template-columns:1fr;}
  .grade__label{left:auto;right:var(--gutter);}
  .cta__action{display:flex;flex-direction:column;align-items:flex-start;}
  .cta__tel{text-align:left;}
}

/* Large phone */
@media (max-width:700px){
  .hero h1 br{display:none;}
  .hero__cta{flex-direction:column;align-items:stretch;gap:11px;}
  .hero__cta .btn{width:100%;}
  .grade__label{display:none;}

  .reports__grid{grid-template-columns:1fr;gap:36px;}
  .report__cover{max-width:300px;}
  .shots{grid-template-columns:1fr;gap:30px;}
  .offices{grid-template-columns:1fr;}
  .office--wide{grid-template-columns:1fr;gap:10px;}
  .office--wide .office__tel{text-align:left;}
  .office--wide h3{margin-bottom:8px;}
  .office--wide p{margin-bottom:12px;}

  .site-footer .wrap{flex-direction:column;align-items:flex-start;gap:16px;}
  .footer__links{margin-left:0;gap:14px 20px;font-size:12.5px;}
}

/* Small phone */
@media (max-width:430px){
  .creds__grid{grid-template-columns:1fr;}
  .creds__item{padding:20px 0;border-left:none;border-top:1px solid #46536A;}
  .creds__item:first-child{border-top:none;}
  .creds__item:nth-child(even){padding-left:0;border-left:none;}
  .service{grid-template-columns:22px 1fr;gap:4px 12px;}
  .service__icon{width:22px;height:22px;}
}

/* ---------- 15. Print & motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}
@media print{
  .nav__toggle,.hero__cta,.cta{display:none;}
  body{background:#fff;}
}