/* ================================================================
   Woodstock Industrial Supplies — design system
   Palette from the existing brand: logo navy + brochure yellow.
   Signature: engineering-drawing title block framing key sections.
   ================================================================ */

:root{
  --navy:      #1E2A5E;   /* logo navy */
  --navy-deep: #141C40;
  --ink:       #1B1E27;
  --steel:     #59617A;
  --zinc:      #F1F2F6;   /* light section background */
  --line:      #D8DBE6;
  --yellow:    #F5B800;   /* brand accent — use sparingly */
  --white:     #FFFFFF;

  --display: "Archivo", sans-serif;
  --body:    "Source Sans 3", sans-serif;
  --mono:    "Archivo", sans-serif;

  --wrap: 1160px;
  --r: 3px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  font-family:var(--body);
  font-size:1.06rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
}

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

.skip{position:absolute;left:-999px;top:0;background:var(--yellow);color:var(--ink);padding:.5rem 1rem;z-index:99}
.skip:focus{left:0}

a{color:var(--navy)}
a:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;font-weight:600;text-transform:uppercase}

/* ---------------------------------------------------- header */
.site-head{border-bottom:1px solid var(--line);background:var(--white);position:sticky;top:0;z-index:50}
.head-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:14px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--navy)}
.brand-logo{height:104px;width:auto;display:block}
@media (max-width:640px){
  .brand-logo{height:72px}
  .head-top{padding-top:10px;padding-bottom:6px}
}
.head-contact{display:flex;align-items:center;gap:1.1rem}
.head-tel{font-family:var(--display);font-weight:700;font-size:1.05rem;text-decoration:none}
.main-nav{display:flex;flex-wrap:wrap;gap:.2rem;padding-bottom:0}
.main-nav a{
  text-decoration:none;color:var(--ink);font-weight:600;font-size:.94rem;
  padding:.55rem .8rem;border-bottom:3px solid transparent;
}
.main-nav a:hover{border-bottom-color:var(--yellow);color:var(--navy)}

/* ---------------------------------------------------- buttons */
.btn{
  display:inline-block;font-family:var(--display);font-weight:700;
  padding:.72rem 1.4rem;border-radius:var(--r);text-decoration:none;
  border:2px solid transparent;font-size:.98rem;cursor:pointer;
}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-yellow:hover{background:#E0A800}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-navy:hover{background:var(--navy-deep)}
.btn-ghost{border-color:var(--white);color:var(--white)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-outline{border-color:var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:var(--white)}

/* ------------------------------------------- hero / title block */
.hero{background:var(--navy);color:var(--white);position:relative;overflow:hidden}
.hero::before{ /* faint hex-nut grid, texture not wallpaper */
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48.5' height='84'%3E%3Cpath d='M0 14L24.25 0 48.5 14M0 14v28l24.25 14L48.5 42M24.25 56v28' fill='none' stroke='rgba(255,255,255,0.05)'/%3E%3C/svg%3E");
  background-size:48.5px 84px;
  pointer-events:none;
}
.hero-inner{position:relative;padding:4.6rem 24px 0;max-width:var(--wrap);margin:0 auto}
.hero h1{
  font-family:var(--display);font-weight:900;font-stretch:106%;
  font-size:clamp(2.1rem, 4.6vw, 3.6rem);line-height:1.05;
  letter-spacing:-.015em;max-width:17ch;
}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero .lede{margin-top:1.2rem;max-width:52ch;font-size:1.15rem;color:#C9CFE4}
.hero-ctas{margin-top:1.8rem;display:flex;gap:.8rem;flex-wrap:wrap}

/* the signature: drawing title block along the hero base */
.titleblock{
  position:relative;margin-top:3.4rem;
  border:1px solid rgba(255,255,255,.35);border-bottom:none;
  display:grid;grid-template-columns:repeat(4,1fr);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;
  font-weight:600;text-transform:uppercase;
}
.titleblock div{
  padding:.55rem .8rem;border-right:1px solid rgba(255,255,255,.35);
  color:#C9CFE4;
}
.titleblock div:last-child{border-right:none}
.titleblock b{display:block;color:var(--white);font-weight:700;margin-top:.15rem;font-size:.8rem}
.titleblock .tb-yellow b{color:var(--yellow)}

/* ---------------------------------------------------- sections */
section{padding:4.2rem 0}
.section-zinc{background:var(--zinc)}
.section-navy{background:var(--navy);color:var(--white)}
.kicker{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);display:block;margin-bottom:.7rem;
}
.section-navy .kicker{color:#9AA5CC}
h2{
  font-family:var(--display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.15;max-width:26ch;
}
h3{font-family:var(--display);font-weight:700;font-size:1.15rem;margin-bottom:.4rem}
.lead{max-width:62ch;margin-top:1rem;color:var(--steel);font-size:1.1rem}
.section-navy .lead{color:#C9CFE4}

/* ---------------------------------------------------- grids/cards */
.grid{display:grid;gap:1.2rem;margin-top:2.4rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem;display:block;text-decoration:none;color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
}
a.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(20,28,64,.10);border-color:var(--navy)}
.card .mono{color:var(--steel)}
.card p{color:var(--steel);font-size:.97rem;margin-top:.4rem}
.card .card-go{margin-top:.9rem;font-weight:700;color:var(--navy);font-size:.94rem}
a.card:hover .card-go{color:var(--yellow)}

.sector-card{border-top:4px solid var(--navy)}
a.sector-card:hover{border-top-color:var(--yellow)}

/* accreditation strip */
.accred{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.1rem 0;background:var(--white)}
.accred .wrap{display:flex;gap:2.4rem;flex-wrap:wrap;align-items:center;justify-content:center}
.accred span{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;color:var(--steel);font-weight:600;text-transform:uppercase}
.accred b{color:var(--navy);font-weight:500}

/* spec chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.chip{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;
  font-weight:600;text-transform:uppercase;
  border:1px solid var(--line);border-radius:var(--r);
  padding:.3rem .6rem;color:var(--steel);background:var(--white);
}

/* numbers band */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.2rem}
.numbers div{border-left:3px solid var(--yellow);padding-left:1rem}
.numbers strong{font-family:var(--display);font-weight:900;font-size:1.9rem;display:block;line-height:1.1}
.numbers span{color:var(--steel);font-size:.92rem}
.section-navy .numbers span{color:#C9CFE4}

/* two-column feature */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;margin-top:2rem}
.split .panel{
  background:var(--navy);color:var(--white);border-radius:var(--r);
  padding:2rem;border-bottom:6px solid var(--yellow);
}
.split .panel .mono{color:#9AA5CC}
.split .panel h3{color:var(--white);font-size:1.4rem}
.split .panel p{color:#C9CFE4;margin-top:.6rem}
.checklist{list-style:none;margin-top:1rem}
.checklist li{padding-left:1.7rem;position:relative;margin-bottom:.55rem}
.checklist li::before{
  content:"";position:absolute;left:0;top:.42em;width:12px;height:12px;
  background:var(--yellow);clip-path:polygon(14% 44%, 0 62%, 40% 100%, 100% 16%, 82% 0, 40% 66%);
}

/* CTA band */
.cta-band{background:var(--navy);color:var(--white)}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta-band h2{color:var(--white)}
.cta-band p{color:#C9CFE4;margin-top:.5rem;max-width:52ch}

/* ---------------------------------------------------- forms */
form.enquiry{display:grid;gap:1rem;max-width:640px;margin-top:2rem}
form.enquiry .row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{font-weight:600;font-size:.92rem;display:block;margin-bottom:.3rem}
input,textarea{
  width:100%;padding:.7rem .8rem;border:1px solid var(--line);
  border-radius:var(--r);font:inherit;background:var(--white);
}
input:focus,textarea:focus{outline:3px solid var(--yellow);border-color:var(--navy)}
.flash{padding:1rem 1.2rem;border-radius:var(--r);margin:1.4rem 0 0;font-weight:600}
.flash-ok{background:#E7F5EA;border:1px solid #9CD3A8}
.flash-error{background:#FBECEC;border:1px solid #E4A3A3}

/* ---------------------------------------------------- footer */
.site-foot{background:var(--navy-deep);color:#C9CFE4;margin-top:4rem}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2.4rem;padding:3.2rem 24px}
.site-foot a{color:#E7EAF6;text-decoration:none;display:block;padding:.18rem 0;font-size:.95rem}
.site-foot a:hover{color:var(--yellow)}
.foot-brand{font-family:var(--display);font-weight:800;color:var(--white);font-size:1.1rem}
.foot-mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:#8F9AC4;margin:.5rem 0 1rem}
.foot-h{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8F9AC4;margin-bottom:.6rem}
.site-foot address{font-style:normal;margin-bottom:.8rem}
.foot-base{border-top:1px solid rgba(255,255,255,.14);padding:1.2rem 24px;font-size:.85rem;color:#8F9AC4}

/* ---------------------------------------------------- page hero (inner pages) */
.page-hero{background:var(--navy);color:var(--white);padding:3.4rem 0 0;position:relative;overflow:hidden}
.page-hero::before{ /* same faint hex grid as the home hero */
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48.5' height='84'%3E%3Cpath d='M0 14L24.25 0 48.5 14M0 14v28l24.25 14L48.5 42M24.25 56v28' fill='none' stroke='rgba(255,255,255,0.05)'/%3E%3C/svg%3E");
  background-size:48.5px 84px;
  pointer-events:none;
}
.page-hero > .wrap{position:relative}
.page-hero h1{
  font-family:var(--display);font-weight:900;font-stretch:106%;
  font-size:clamp(1.9rem,3.8vw,2.9rem);letter-spacing:-.015em;line-height:1.08;max-width:22ch;
}
.page-hero .lede{margin-top:1rem;max-width:58ch;color:#C9CFE4;font-size:1.12rem}
.page-hero .titleblock{margin-top:2.6rem}

/* ---------------------------------------------------- parts gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.4rem}
.gallery figure{margin:0}
.gallery img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:var(--r);border:1px solid var(--line);
}
.gallery figcaption{font-size:.75rem;color:var(--steel);margin-top:.45rem;line-height:1.35}
.gallery-sm{grid-template-columns:repeat(3,1fr);max-width:760px;margin-top:1.8rem}

/* prose blocks */
.prose{max-width:68ch}
.prose p{margin-bottom:1rem}
.prose h2{margin:2.2rem 0 .8rem}

/* ---------------------------------------------------- spec pages */
.crumbs{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#9AA5CC;margin-bottom:1.1rem}
.crumbs a{color:#C9CFE4;text-decoration:none}
.crumbs a:hover{color:var(--yellow)}
.crumbs span{color:var(--white)}

.badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.badge{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;font-weight:600;
  text-transform:uppercase;border:1px solid rgba(255,255,255,.4);
  border-radius:var(--r);padding:.28rem .6rem;color:#E7EAF6;
}
.badge-yellow{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}

.spec-cols{
  display:grid;grid-template-columns:1.55fr .85fr;gap:3rem;align-items:start;
  grid-template-areas:"main img";
}
.spec-main{grid-area:main;min-width:0}
.spec-img{grid-area:img;margin:0}
.spec-img img{width:100%;display:block;border:1px solid var(--line);border-radius:var(--r)}
.spec-img figcaption{font-size:.72rem;color:var(--steel);margin-top:.5rem}
.also-known{color:var(--steel);font-size:.95rem;margin-top:1rem;max-width:62ch}
.spec-main h2{margin:2.4rem 0 0}

/* engineering-drawing table */
.table-scroll{overflow-x:auto;margin-top:1.2rem;-webkit-overflow-scrolling:touch}
.spec-table{border-collapse:collapse;width:100%;min-width:540px;font-size:.95rem;border:1px solid var(--navy)}
.spec-table th{
  background:var(--navy);color:var(--white);font-family:var(--mono);
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  padding:.55rem .8rem;text-align:left;border-right:1px solid rgba(255,255,255,.25);
}
.spec-table td{padding:.45rem .8rem;border:1px solid var(--line);white-space:nowrap}
.spec-table tbody tr:nth-child(even){background:var(--zinc)}
.spec-table td:first-child{font-family:var(--display);font-weight:700}
.spec-table sup{color:var(--navy);font-weight:700;margin-left:.15rem}
.table-notes{margin-top:.7rem;padding-left:1.2rem;color:var(--steel);font-size:.88rem}

.faqs{max-width:68ch}
.faqs h3{margin-top:1.6rem}
.faqs p{color:var(--steel)}
.chip-link{color:var(--navy);border-color:var(--navy);text-decoration:none}
.chip-link:hover{background:var(--navy);color:var(--white)}

/* type-page browse tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:1.2rem}
.tile{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem;text-decoration:none;color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
}
.tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(20,28,64,.10);border-color:var(--navy)}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border:1px solid var(--line);border-radius:var(--r);margin-bottom:.7rem}
.tile b{display:block;font-family:var(--display);font-weight:700;line-height:1.25}
.tile .mono{display:block;color:var(--steel);margin-top:.2rem}

/* ---------------------------------------------------- site search */
.site-search{position:relative;flex:1;max-width:320px;margin-left:auto}
.site-search .search-input{padding:.55rem .8rem;font-size:.95rem}
.search-lg{max-width:520px;margin:1.8rem 0 0}
.search-lg .search-input{padding:.7rem .9rem;font-size:1rem}
.search-results{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 12px 28px rgba(20,28,64,.14);max-height:22rem;overflow-y:auto;
}
.search-results a{
  display:flex;align-items:baseline;gap:.6rem;padding:.55rem .8rem;
  text-decoration:none;color:var(--ink);font-size:.93rem;
}
.search-results a:hover,.search-results a.active{background:var(--zinc)}
.search-results b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-results .sr-spec{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--navy);font-weight:700;white-space:nowrap}
.search-results .sr-cat{margin-left:auto;font-size:.78rem;color:var(--steel);white-space:nowrap}

/* ---------------------------------------------------- responsive */
@media (max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .numbers{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:2rem}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery-sm{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .titleblock{grid-template-columns:repeat(2,1fr)}
  .titleblock div:nth-child(2){border-right:none}
  .spec-cols{grid-template-columns:1fr;grid-template-areas:"img" "main";gap:2rem}
  .spec-img{max-width:420px}
  .tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .head-cta{display:none}
  .head-top{flex-wrap:wrap}
  .site-search{order:3;flex-basis:100%;max-width:none;margin:0 0 8px}
  .main-nav{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .main-nav a{white-space:nowrap}
  form.enquiry .row2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .numbers{grid-template-columns:1fr 1fr}
}