:root{
    --ink:#1E2420;
    --steel:#4B5049;
    --steel-light:#8A9088;
    --sand:#E7E0D2;
    --sand-deep:#D8CDB6;
    --rust:#B4501F;
    --rust-dark:#8C3A16;
    --green:#4B5D45;
    --paper:#F3EEE2;
    --line:rgba(30,36,32,0.14);
  }

  *{box-sizing:border-box;margin:0;padding:0;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,.display{
    font-family:'Oswald', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.02em;
    line-height:1.05;
    font-weight:600;
  }

  .mono{
    font-family:'IBM Plex Mono', monospace;
  }

  a{color:inherit;}

  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 24px;
  }

  /* ---------- chain link pattern ---------- */
  .chainlink{
    background-image:
      repeating-linear-gradient(60deg, transparent 0 3px, rgba(30,36,32,0.06) 3px 4px, transparent 4px 26px),
      repeating-linear-gradient(-60deg, transparent 0 3px, rgba(30,36,32,0.06) 3px 4px, transparent 4px 26px);
  }

  /* ---------- corrugated divider ---------- */
  .corrugated{
    height:14px;
    background:repeating-linear-gradient(90deg, var(--steel-light) 0 6px, var(--steel) 6px 12px);
    opacity:0.5;
  }

  /* ---------- nav ---------- */
  header{
    position:sticky;
    top:0;
    z-index:50;
    background:var(--ink);
    border-bottom:3px solid var(--rust);
  }
  nav.wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:72px;
  }
  .logo{
    color:var(--sand);
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    font-size:1.15rem;
    letter-spacing:0.06em;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .logo .tag{
    background:var(--rust);
    color:var(--paper);
    font-family:'IBM Plex Mono',monospace;
    font-size:0.65rem;
    padding:3px 6px;
    letter-spacing:0.05em;
  }
  nav ul{
    list-style:none;
    display:flex;
    gap:28px;
  }
  nav a{
    color:var(--sand);
    text-decoration:none;
    font-size:0.85rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    padding-bottom:4px;
    border-bottom:2px solid transparent;
    transition:border-color 0.2s;
  }
  nav a:hover{border-color:var(--rust);}
  .nav-toggle{display:none;background:none;border:none;color:var(--sand);font-size:1.6rem;cursor:pointer;}

  @media (max-width:760px){
    nav ul{
      position:absolute;
      top:72px; left:0; right:0;
      background:var(--ink);
      flex-direction:column;
      padding:12px 24px 20px;
      display:none;
      gap:16px;
      border-bottom:3px solid var(--rust);
    }
    nav ul.open{display:flex;}
    .nav-toggle{display:block;}
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    background:var(--ink);
    color:var(--sand);
    padding:90px 0 110px;
    overflow:hidden;
  }
  .hero .wrap{position:relative; z-index:2;}
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(60deg, transparent 0 8px, rgba(231,224,210,0.05) 8px 9px, transparent 9px 46px),
      repeating-linear-gradient(-60deg, transparent 0 8px, rgba(231,224,210,0.05) 8px 9px, transparent 9px 46px);
  }
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    color:var(--rust);
    font-size:0.8rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    display:inline-block;
    margin-bottom:18px;
    border:1px solid var(--rust);
    padding:5px 10px;
  }
  .hero h1{
    font-size:clamp(2.4rem, 6vw, 4.6rem);
    max-width:820px;
  }
  .hero h1 span{color:var(--rust);}
  .hero p.lead{
    max-width:520px;
    margin-top:22px;
    font-size:1.1rem;
    color:var(--sand-deep, #D8CDB6);
  }
  .cta-row{
    margin-top:34px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }
  .btn{
    display:inline-block;
    padding:14px 26px;
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.05em;
    font-size:0.95rem;
    text-decoration:none;
    border:2px solid transparent;
    transition:transform 0.15s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--rust); color:var(--paper);}
  .btn-ghost{border-color:var(--sand); color:var(--sand);}

  .hero-photo{
    background-image:
      linear-gradient(180deg, rgba(30,36,32,0.88) 0%, rgba(30,36,32,0.80) 55%, rgba(30,36,32,0.94) 100%),
      url('images/hero.jpg');
    background-size: cover;
    background-position: center;
  }
  .hero-photo::before{
    opacity: 0.5;
  }

  /* ---------- photo gallery ---------- */
  .gallery-section{
    padding:0 0 80px;
  }
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }
  .gallery-grid figure{
    margin:0;
    border:6px solid var(--paper);
    outline:1px solid var(--line);
    box-shadow:0 10px 24px rgba(30,36,32,0.12);
  }
  .gallery-grid img{
    display:block;
    width:100%;
    height:240px;
    object-fit:cover;
  }
  .gallery-grid figcaption{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--steel);
    text-align:center;
    padding:10px 6px 4px;
  }
  @media (max-width:800px){
    .gallery-grid{grid-template-columns:1fr;}
  }

  /* ---------- section shell ---------- */
  section{padding:80px 0;}
  .section-head{max-width:640px; margin-bottom:48px;}
  .kicker{
    font-family:'IBM Plex Mono',monospace;
    color:var(--rust);
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.12em;
    margin-bottom:10px;
    display:block;
  }
  .section-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);}
  .section-head p{margin-top:14px; color:var(--steel); max-width:520px;}

  /* ---------- features ---------- */
  .features{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .feature{
    background:var(--paper);
    padding:30px 26px;
  }
  .feature .num{
    font-family:'IBM Plex Mono',monospace;
    color:var(--rust);
    font-size:0.8rem;
    display:block;
    margin-bottom:14px;
  }
  .feature h3{
    font-size:1.05rem;
    margin-bottom:10px;
  }
  .feature p{color:var(--steel); font-size:0.92rem;}

  @media (max-width:900px){
    .features{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:560px){
    .features{grid-template-columns:1fr;}
  }

  /* ---------- directory board (signature element) ---------- */
  .board-section{
    background:var(--green);
    color:var(--sand);
    position:relative;
  }
  .board{
    background:var(--ink);
    border:6px solid var(--steel-light);
    padding:6px;
    box-shadow:0 18px 40px rgba(0,0,0,0.35);
  }
  .board-inner{
    border:2px dashed rgba(231,224,210,0.35);
    padding:34px 30px;
  }
  .board-title{
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-size:1.1rem;
    color:var(--rust);
    text-align:center;
    margin-bottom:26px;
  }
  .bolt{
    width:10px; height:10px;
    border-radius:50%;
    background:var(--steel-light);
    position:absolute;
  }
  .board{position:relative;}
  .board .bolt:nth-child(1){top:14px; left:14px;}
  table.sizes{
    width:100%;
    border-collapse:collapse;
  }
  table.sizes th{
    text-align:left;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--rust);
    padding:10px 8px;
    border-bottom:1px solid rgba(231,224,210,0.25);
  }
  table.sizes td{
    padding:14px 8px;
    border-bottom:1px solid rgba(231,224,210,0.14);
    font-family:'IBM Plex Mono',monospace;
    font-size:0.95rem;
    color:var(--sand);
  }
  table.sizes td.fit{
    font-family:'Work Sans',sans-serif;
    color:var(--sand-deep,#D8CDB6);
    font-size:0.85rem;
  }
  .board-note{
    margin-top:20px;
    font-size:0.78rem;
    color:rgba(231,224,210,0.55);
    font-family:'IBM Plex Mono',monospace;
  }

  /* ---------- access section ---------- */
  .access{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
  }
  @media (max-width:800px){
    .access{grid-template-columns:1fr;}
  }
  .keypad{
    background:var(--ink);
    padding:26px;
    max-width:280px;
    margin:0 auto;
    border:3px solid var(--steel);
  }
  .keypad .screen{
    background:var(--green);
    color:var(--sand);
    font-family:'IBM Plex Mono',monospace;
    text-align:center;
    padding:12px;
    letter-spacing:0.4em;
    font-size:1.3rem;
    margin-bottom:16px;
  }
  .keypad .grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
  }
  .keypad .key{
    background:var(--steel);
    color:var(--sand);
    text-align:center;
    padding:12px 0;
    font-family:'IBM Plex Mono',monospace;
    font-size:1rem;
    border:1px solid rgba(231,224,210,0.15);
  }
  .keypad .key.accent{background:var(--rust);}

  .access-copy ul{
    list-style:none;
    margin-top:22px;
  }
  .access-copy li{
    padding:12px 0;
    border-bottom:1px solid var(--line);
    display:flex;
    gap:12px;
  }
  .access-copy li .mark{color:var(--rust); font-family:'IBM Plex Mono',monospace;}

  /* ---------- about strip ---------- */
  .about{
    background:var(--sand-deep);
  }
  .about .wrap{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:center;
  }
  @media (max-width:800px){
    .about .wrap{grid-template-columns:1fr;}
  }
  .about p{color:var(--steel); margin-top:16px;}
  .about h2{font-size:clamp(1.8rem,3.4vw,2.4rem);}
  .stat-block{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .stat{
    background:var(--paper);
    padding:22px;
    border-left:4px solid var(--rust);
  }
  .stat .n{
    font-family:'Oswald',sans-serif;
    font-size:2rem;
    color:var(--ink);
  }
  .stat .l{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.72rem;
    text-transform:uppercase;
    color:var(--steel);
    letter-spacing:0.06em;
  }

  /* ---------- contact ---------- */
  .contact{
    background:var(--ink);
    color:var(--sand);
  }
  .contact .wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
  }
  @media (max-width:800px){
    .contact .wrap{grid-template-columns:1fr;}
  }
  .contact h2{color:var(--sand);}
  .contact-info{margin-top:24px;}
  .contact-info div{
    padding:14px 0;
    border-bottom:1px solid rgba(231,224,210,0.15);
  }
  .contact-info .l{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--rust);
    display:block;
    margin-bottom:4px;
  }
  .contact-actions{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:14px;
  }
  .contact-actions p{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:rgba(231,224,210,0.55);
    margin-bottom:2px;
  }
  .contact-actions .btn{
    width:100%;
    text-align:center;
  }

  footer{
    background:var(--ink);
    border-top:1px solid rgba(231,224,210,0.12);
    color:rgba(231,224,210,0.5);
    padding:22px 0;
    font-size:0.8rem;
    text-align:center;
  }