:root{
    --charcoal:#111111;
    --charcoal-2:#1A1A1A;
    --blueprint:#1A1A1A;
    --blueprint-2:#222222;
    --paper:#F5F2EE;
    --paper-2:#E8E4DD;
    --ink:#111111;
    --steel:#8A8F96;
    --steel-light:#8A8F96;
    --safety:#4CAF62;
    --safety-dim:#3D8F4F;
    --line:#D8D3C8;
    --line-dark:rgba(76,175,98,0.3);
    --ok:#F5F2EE;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  h1,h2,h3{font-family:'Big Shoulders Display',sans-serif;font-weight:800;letter-spacing:0.01em;margin:0;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--safety);
    display:flex;align-items:center;gap:10px;
  }
  .eyebrow::before{content:"";width:22px;height:1px;background:var(--safety);display:inline-block;}

  /* blueprint grid background */
  .grid-bg{
    background-image:
      linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size:34px 34px;
  }
  .crop{position:absolute;width:16px;height:16px;pointer-events:none;}
  .crop.tl{top:-1px;left:-1px;border-top:2px solid currentColor;border-left:2px solid currentColor;}
  .crop.tr{top:-1px;right:-1px;border-top:2px solid currentColor;border-right:2px solid currentColor;}
  .crop.bl{bottom:-1px;left:-1px;border-bottom:2px solid currentColor;border-left:2px solid currentColor;}
  .crop.br{bottom:-1px;right:-1px;border-bottom:2px solid currentColor;border-right:2px solid currentColor;}

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:100;
    background:rgba(20,24,27,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line-dark);
  }
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 0;
  }
  .brand{display:flex;align-items:center;gap:12px;}
  .logo-ring{position:relative;width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
  .logo-ring::before{content:"";position:absolute;inset:-9px;border:1px solid rgba(76,175,98,0.45);transform:rotate(45deg);animation:rotateDiamond 16s linear infinite;}
  .logo-ring::after{content:"";position:absolute;inset:-17px;border:1px solid rgba(76,175,98,0.18);transform:rotate(45deg);animation:rotateDiamond 24s linear infinite reverse;}
  .logo-ring img{position:relative;z-index:2;}
  @keyframes rotateDiamond{from{transform:rotate(45deg);}to{transform:rotate(405deg);}}
  .foot-logo-ring{position:relative;width:65px;height:65px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;}
  .foot-logo-ring::before{content:"";position:absolute;inset:-14px;border:1px solid rgba(76,175,98,0.4);transform:rotate(45deg);animation:rotateDiamond 16s linear infinite;}
  .foot-logo-ring::after{content:"";position:absolute;inset:-26px;border:1px solid rgba(76,175,98,0.16);transform:rotate(45deg);animation:rotateDiamond 24s linear infinite reverse;}
  .foot-logo-ring img{position:relative;z-index:2;margin-bottom:0 !important;}
  @media (prefers-reduced-motion: reduce){.logo-ring::before,.logo-ring::after,.foot-logo-ring::before,.foot-logo-ring::after{animation:none;}}
  .brand svg{width:34px;height:34px;}
  .brand .word{color:var(--paper);font-family:'Big Shoulders Display';font-weight:800;font-size:19px;letter-spacing:0.03em;line-height:1;}
  .brand .word span{display:block;font-family:'IBM Plex Mono';font-weight:400;font-size:9.5px;letter-spacing:0.18em;color:var(--steel-light);margin-top:3px;text-transform:uppercase;}
  nav.links{display:flex;gap:30px;}
  nav.links a{
    color:var(--paper);
    font-size:13.5px;
    letter-spacing:0.03em;
    opacity:0.82;
    padding:6px 0;
    border-bottom:1px solid transparent;
    transition:opacity .15s, border-color .15s;
  }
  nav.links a:hover{opacity:1;border-color:var(--safety);}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'IBM Plex Mono';font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase;
    padding:11px 18px;
    border:1px solid var(--safety);
    color:var(--safety);
    transition:background .15s, color .15s;
    white-space:nowrap;
  }
  .btn:hover{background:var(--safety);color:var(--charcoal);}
  .btn.solid{background:var(--safety);color:var(--charcoal);}
  .btn.solid:hover{background:var(--safety-dim);border-color:var(--safety-dim);}
  .btn.light{border-color:var(--paper);color:var(--paper);}
  .btn.light:hover{background:var(--paper);color:var(--charcoal);}
  .menu-toggle{display:none;background:none;border:1px solid var(--line-dark);color:var(--paper);padding:8px 12px;font-family:'IBM Plex Mono';font-size:12px;}

  .hero-diamond{
    position:relative;
    width:260px;height:260px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    justify-self:end;
    order:2;
  }
  .hero-diamond::before{content:"";position:absolute;inset:-30px;border:1px solid rgba(76,175,98,0.35);transform:rotate(45deg);animation:rotateDiamond 20s linear infinite;}
  .hero-diamond::after{content:"";position:absolute;inset:-60px;border:1px solid rgba(76,175,98,0.12);transform:rotate(45deg);animation:rotateDiamond 30s linear infinite reverse;}
  @keyframes rotateDiamond{from{transform:rotate(45deg);}to{transform:rotate(405deg);}}
  .hero-diamond img{width:66%;height:auto;position:relative;z-index:2;}
  @media (max-width:1000px){.hero-diamond{display:none;}}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    background:var(--charcoal);
    color:var(--paper);
    padding:100px 0 70px;
    overflow:hidden;
  }
  .hero::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(ellipse at 78% 15%, rgba(76,175,98,0.10), transparent 55%);
    pointer-events:none;
  }
  .hero-row{
    display:grid;grid-template-columns:1fr auto;
    align-items:center;gap:40px;
    position:relative;z-index:1;
  }
  .hero-inner{max-width:640px;order:1;}
  .hero h1{font-size:clamp(46px,7vw,84px);line-height:0.96;color:var(--paper);}
  .hero h1 em{font-style:normal;color:var(--safety);}
  .hero p.lead{
    font-size:17px;line-height:1.65;color:var(--steel-light);
    max-width:520px;margin:26px 0 36px;
  }
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:58px;}
  .stamps{
    display:flex;flex-wrap:wrap;gap:10px;
  }
  .stamp{
    font-family:'IBM Plex Mono';font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
    border:1px solid var(--line-dark);color:var(--steel-light);
    padding:7px 12px;display:flex;align-items:center;gap:7px;
  }
  .stamp::before{content:"";width:6px;height:6px;background:var(--ok);border-radius:50%;flex-shrink:0;}

  .hero-stats{
    position:relative;z-index:1;
    display:grid;grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line-dark);
    margin-top:56px;
  }
  .hero-stats div{padding:22px 0 0;border-right:1px solid var(--line-dark);}
  .hero-stats div:last-child{border-right:none;}
  .hero-stats .num{font-family:'Big Shoulders Display';font-weight:800;font-size:38px;color:var(--paper);}
  .hero-stats .lbl{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--steel-light);margin-top:4px;}

  /* ---------- section shell ---------- */
  section{padding:96px 0;}
  .section-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    gap:24px;margin-bottom:52px;flex-wrap:wrap;
  }
  .section-head h2{font-size:clamp(32px,4vw,48px);line-height:1;color:var(--ink);}
  .section-head h2 em{font-style:normal;color:var(--safety-dim);}
  .section-head .desc{max-width:340px;font-size:14.5px;color:var(--steel);line-height:1.6;}

  /* ---------- services ---------- */
  .services{background:var(--paper);}
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
  .svc{background:var(--paper);padding:34px 30px 30px;position:relative;}
  .svc .code{font-family:'IBM Plex Mono';font-size:12px;color:var(--safety-dim);letter-spacing:0.06em;}
  .svc h3{font-size:26px;margin:14px 0 12px;color:var(--ink);}
  .svc p{font-size:14px;line-height:1.65;color:var(--steel);margin:0;}

  /* ---------- projects (drawing sheets) ---------- */
  .projects{background:var(--blueprint);color:var(--paper);position:relative;}
  .projects .section-head h2{color:var(--paper);}
  .projects .section-head h2 em{color:var(--safety);}
  .projects .section-head .desc{color:#9FB0C4;}
  .proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
  .sheet{
    position:relative;
    background:var(--blueprint-2);
    border:1px solid rgba(255,255,255,0.16);
    color:var(--paper);
  }
  .sheet .crop{color:rgba(255,255,255,0.5);}
  .sheet-body{padding:20px 22px 0;}
  .sheet-body h3{font-size:20px;line-height:1.15;color:var(--paper);margin-bottom:8px;}
  .sheet-body p{font-size:13px;line-height:1.6;color:#B7C4D3;margin:0 0 18px;}
  .titleblock{
    border-top:1px solid rgba(255,255,255,0.16);
    display:grid;grid-template-columns:repeat(4,1fr);
    font-family:'IBM Plex Mono';
  }
  .titleblock div{padding:12px 14px;border-right:1px solid rgba(255,255,255,0.16);}
  .titleblock div:last-child{border-right:none;}
  .titleblock .k{font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:#7C8FA6;margin-bottom:5px;}
  .titleblock .v{font-size:12.5px;color:var(--paper);}
  .status-live .v{color:var(--safety);}
  .thumb-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:-6px 0 18px;}
  .thumb-strip img{width:100%;height:64px;object-fit:cover;border:1px solid rgba(255,255,255,0.16);}

  /* ---------- about / difference ---------- */
  .about{background:var(--paper);}
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
  .about-copy p{font-size:15.5px;line-height:1.75;color:var(--steel);margin:0 0 18px;}
  .about-copy p strong{color:var(--ink);}
  .diff-list{display:flex;flex-direction:column;gap:0;}
  .diff-item{padding:22px 0;border-top:1px solid var(--line);display:flex;gap:18px;}
  .diff-item:last-child{border-bottom:1px solid var(--line);}
  .diff-item .tag{font-family:'IBM Plex Mono';font-size:11px;color:var(--safety-dim);letter-spacing:0.06em;padding-top:3px;width:74px;flex-shrink:0;}
  .diff-item h4{font-family:'IBM Plex Sans';font-weight:700;font-size:15.5px;margin:0 0 6px;color:var(--ink);}
  .diff-item p{font-size:13.5px;line-height:1.6;color:var(--steel);margin:0;}

  /* ---------- principal ---------- */
  .principal{background:var(--charcoal);color:var(--paper);}
  .principal .section-head h2{color:var(--paper);}
  .principal .section-head h2 em{color:var(--safety);}
  .principal .section-head .desc{color:var(--steel-light);}
  .p-card{
    display:grid;grid-template-columns:220px 1fr;gap:44px;
    border:1px solid var(--line-dark);padding:38px;position:relative;
  }
  .p-card .crop{color:var(--line-dark);}
  .p-portrait{
    width:100%;aspect-ratio:1/1.15;
    background:linear-gradient(150deg, #23292D, #14181B);
    border:1px solid var(--line-dark);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
  .p-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 20%;}
  .p-portrait svg{width:58%;height:58%;opacity:0.9;}
  .p-name{font-size:28px;color:var(--paper);margin-bottom:2px;}
  .p-title{font-family:'IBM Plex Mono';font-size:12px;color:var(--safety);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:20px;}
  .p-bio p{font-size:14.5px;line-height:1.7;color:var(--steel-light);margin:0 0 14px;}
  .p-creds{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;}
  .p-creds span{
    font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:0.05em;text-transform:uppercase;
    border:1px solid var(--line-dark);color:var(--steel-light);padding:6px 10px;
  }

  /* ---------- trusted by ---------- */
  .trusted{background:var(--paper-2);padding:56px 0;}
  .trusted .lbl{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--steel);white-space:nowrap;margin-bottom:22px;}
  .trusted .logos{display:flex;gap:16px 40px;flex-wrap:wrap;align-items:center;padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:18px;}
  .trusted .logos span{font-family:'Big Shoulders Display';font-weight:800;font-size:19px;color:var(--steel);letter-spacing:0.02em;opacity:0.8;white-space:nowrap;}

  /* ---------- process ---------- */
  .process{background:var(--paper);}
  .proc-line{position:relative;}
  .proc-line::before{
    content:"";position:absolute;left:0;right:0;top:19px;height:1px;background:var(--line);
  }
  .proc-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative;}
  .proc-step .dot{
    width:38px;height:38px;border-radius:50%;background:var(--paper);
    border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;
    font-family:'IBM Plex Mono';font-size:12px;margin-bottom:20px;position:relative;z-index:1;
  }
  .proc-step h4{font-family:'IBM Plex Sans';font-weight:700;font-size:15px;margin:0 0 8px;color:var(--ink);}
  .proc-step p{font-size:13px;line-height:1.6;color:var(--steel);margin:0;}

  /* ---------- contact ---------- */
  .contact{background:var(--charcoal);color:var(--paper);}
  .contact .section-head h2{color:var(--paper);}
  .contact .section-head h2 em{color:var(--safety);}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;}
  .c-info h3{font-size:15px;color:var(--paper);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:20px;font-family:'IBM Plex Sans';font-weight:700;}
  .c-row{display:flex;justify-content:space-between;padding:14px 0;border-top:1px solid var(--line-dark);font-size:14px;}
  .c-row:last-of-type{border-bottom:1px solid var(--line-dark);}
  .c-row .k{color:var(--steel-light);}
  .c-row .v a:hover{color:var(--safety);}
  form{display:flex;flex-direction:column;gap:16px;}
  form label{font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--steel-light);margin-bottom:7px;display:block;}
  form input, form textarea{
    width:100%;background:transparent;border:1px solid var(--line-dark);
    color:var(--paper);padding:12px 14px;font-family:'IBM Plex Sans';font-size:14px;
  }
  form input:focus, form textarea:focus{outline:none;border-color:var(--safety);}
  form textarea{resize:vertical;min-height:96px;}
  form button{margin-top:6px;align-self:flex-start;cursor:pointer;font:inherit;}

  /* ---------- footer ---------- */
  footer{background:var(--charcoal);border-top:1px solid var(--line-dark);padding:44px 0 26px;color:var(--steel-light);}
  .foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;margin-bottom:36px;}
  .foot-brand .brand{margin-bottom:14px;}
  .foot-brand p{font-size:13px;max-width:280px;line-height:1.6;color:var(--steel-light);}
  .foot-cols{display:flex;gap:60px;flex-wrap:wrap;}
  .foot-col h5{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--paper);margin:0 0 14px;}
  .foot-col a, .foot-col span{display:block;font-size:13px;color:var(--steel-light);margin-bottom:9px;}
  .foot-bottom{
    border-top:1px solid var(--line-dark);padding-top:20px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
    font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:0.04em;color:var(--steel);
  }

  @media (max-width: 900px){
    nav.links{display:none;}
    .menu-toggle{display:block;}
    .hero-stats{grid-template-columns:1fr;}
    .hero-stats div{border-right:none;border-top:1px solid var(--line-dark);padding-top:16px;margin-top:16px;}
    .hero-stats div:first-child{border-top:none;margin-top:0;}
    .svc-grid{grid-template-columns:1fr;}
    .proj-grid{grid-template-columns:1fr;}
    .about-grid{grid-template-columns:1fr;}
    .p-card{grid-template-columns:1fr;}
    .p-portrait{max-width:200px;}
    .proc-steps{grid-template-columns:1fr 1fr;}
    .proc-line::before{display:none;}
    .contact-grid{grid-template-columns:1fr;}
    .titleblock{grid-template-columns:1fr 1fr;}
    .titleblock div:nth-child(2){border-right:none;}
  }
  @media (max-width: 520px){
    .proc-steps{grid-template-columns:1fr;}
    .sheet-imgs{grid-template-columns:1fr;height:auto;}
    .sheet-imgs .side{grid-template-columns:1fr 1fr;grid-template-rows:none;}
  }

/* ===============================
   PROJECT GALLERY
================================= */

.sheet-imgs {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2px;
    align-items: stretch;
}

.sheet-imgs > a {
    display: block;
    overflow: hidden;
    border-radius: 6px;
}

.sheet-imgs .side {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: 0px;
}

.sheet-imgs .side a {
    display: block;
    overflow: hidden;
    border-radius: 6px;
}

.sheet-imgs img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    transition: transform .35s ease;
}

.sheet-imgs a:hover img {
    transform: scale(1.05);
}
.sheet-imgs a,
.sheet-imgs .side a,
.sheet-imgs img,
.sheet-imgs .side img {
    border-radius: 0 !important;
    border: none;
}