/* Square One Foundry — shared stylesheet
   Layout and colour live in inline styles on each element (unchanged from design).
   This file carries only what an inline style cannot express: resets, states,
   and the responsive breakpoints. */

*{box-sizing:border-box}
body{margin:0;background:#faf6f2;color:#1c1815;font-family:Space Grotesk,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:#a84413;text-decoration:none}
a:hover{color:#cb5a1e}
a,button,input,textarea,img{transition:background-color .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid #cb5a1e;outline-offset:2px}
::selection{background:#f0d5c2;color:#1c1815}

/* hover states (were style-hover in the design source) */
.brand:hover{color:#1c1815}
.burger:hover{background:#f3e9e1}
.navcta:hover{background:#8d380e}
.herocta-ink:hover{background:#a84413}
.herocta-out:hover{background:#f3e9e1}
.railbtn:hover{background:#f3e9e1}
.projcard:hover{background:#f3e9e1}
.cap-row:hover{background:#f3e9e1}
.jumprow:hover{color:#a84413}
.tagchip:hover{background:#f3e9e1;color:#8d380e}
.bigcta:hover{background:#a84413}
.submit:hover{background:#8d380e}
.drawercta:hover{background:#8d380e}
.drawerlink:hover{background:#262119}
.drawerclose:hover{background:#262119}
.stagehead:hover{color:#a84413}
.footlinks a:hover{color:#a84413}
.maillink:hover{color:#a84413}
input:focus,textarea:focus{outline:2px solid #cb5a1e;outline-offset:1px}

/* horizontal project rail */
.rail{scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}

/* drawer: hidden on desktop, shown under 820px */
.burger{display:none}

input[type=file]::file-selector-button{background:#443c34;color:#faf6f2;border:0;font:500 10.5px IBM Plex Mono,monospace;letter-spacing:.06em;padding:7px 11px;margin-right:11px;cursor:pointer}
input[type=file]:hover::file-selector-button{background:#a84413}

/* accordion */
.stagehead{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;padding:14px 0;cursor:pointer;font:inherit;color:inherit}
.stagebody{display:none}
.stagerow.open .stagebody{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 0 20px 39px}
.stagerow.open{background:#f3e9e1}
.stagerow.open .stagesign{background:#cb5a1e;color:#faf6f2;border-color:#cb5a1e}

@media (max-width:820px){
  .burger{display:flex !important}
  .navlinks{display:none !important}

  .hero-split{grid-template-columns:1fr !important}
  .hero-split>div:first-child{border-right:0 !important;border-bottom:1px solid #1c1815}
  .hero-img{min-height:240px}
  .statband{flex-direction:column !important}
  .statband>div+div{border-left:0 !important;border-top:1px solid #443c34}
  .models{grid-template-columns:1fr !important}
  .models>div:first-child{border-right:0 !important;border-bottom:1px solid #1c1815}
  .cap-row{grid-template-columns:1fr !important;gap:6px !important}
  .contact{grid-template-columns:1fr !important}
  .intro{grid-template-columns:1fr !important}
  .intro>div:first-child{border-right:0 !important;border-bottom:1px solid #1c1815}
  .capgrid{grid-template-columns:1fr !important}
  .capgrid>div{border-right:0 !important}
  .proj{grid-template-columns:1fr !important}
  .proj-media{border-right:0 !important;border-bottom:1px solid #1c1815;min-height:260px}
  .spec{grid-template-columns:1fr !important}
  .spec>div{border-right:0 !important}
  .step{grid-template-columns:1fr !important;gap:10px !important}
  .practical{grid-template-columns:1fr !important}
  .practical>div{border-right:0 !important}
  .bench{grid-template-columns:1fr !important}
  .bench>div{border-right:0 !important}
  .where{grid-template-columns:1fr !important}
  .where>div:first-child{border-right:0 !important;border-bottom:1px solid #1c1815}
  .stagerow.open .stagebody{grid-template-columns:1fr !important;padding-left:0 !important}
  .stagehead{flex-wrap:wrap}

  /* tap targets — 44px minimum */
  .jumprow{min-height:46px !important;align-items:center !important}
  .tagchip{min-height:44px !important;display:inline-flex !important;align-items:center !important;padding:0 13px !important}
  .footlinks a{min-height:44px !important;display:inline-flex !important;align-items:center !important}
  .brand{min-height:44px !important;align-items:center !important}
  .maillink{min-height:44px !important;display:inline-flex !important;align-items:center !important}
  .submit,.bigcta,.herocta-ink,.herocta-out{padding-top:15px !important;padding-bottom:15px !important}
  .textlink{min-height:44px !important;display:inline-flex !important;align-items:center !important}
  .railbtn{width:44px !important;height:44px !important}
  .field input{padding-top:13px !important;padding-bottom:13px !important}
  .drawercta{padding-top:16px !important;padding-bottom:16px !important}
}

@media (max-width:560px){
  .h1{font-size:28px !important;letter-spacing:-.03em !important}
  h2{font-size:21px !important}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto !important}
}