/* =========================================================
   pulpo. — shared site styles
   Linked from every page AFTER the page's own <style> block.
   The nav lives here and only here: change it once, it changes everywhere.
   Colours are written as hex (not variables) because the pages
   don't all use the same variable names.
     Ink #0C1E21 · Petrol #10474E · Current #23848A · Coral #F2694C
     Sand #F3EDE2 · Mist #9FD3D6
   ========================================================= */

/* Anchor jumps land below the sticky header, on every page */
html{scroll-padding-top:100px}

/* ---------- nav ---------- */
.sitenav{background:#10474E;position:sticky;top:0;z-index:50;
  border-bottom:1px solid rgba(243,237,226,.12)}
.sitenav .navin{max-width:920px;margin:0 auto;padding:18px 22px;display:flex;flex-wrap:wrap;
  align-items:center;column-gap:16px;row-gap:6px}

/* Row 1 (desktop): logo · links · let's talk */
.sitenav .brand{order:1;margin-right:auto;line-height:1.2;font-family:'Sora',sans-serif;
  font-weight:800;font-size:32px;letter-spacing:-.025em;color:#F3EDE2;text-decoration:none}
.sitenav .brand span{color:#F2694C}
.sitenav .navlinks{order:2;display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.sitenav .navjump{line-height:1;font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:#9FD3D6;text-decoration:none;padding:4px 0;
  border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
.sitenav .navjump:hover{color:#F3EDE2;border-bottom-color:#F2694C}
.sitenav .navjump[aria-current]{color:#F3EDE2;border-bottom-color:#23848A}
/* the 1.5px border exists purely so the button matches sizes — keep it */
.sitenav .navcta{order:3;line-height:1;font-family:'IBM Plex Mono',monospace;font-size:12px;
  background:#F2694C;color:#0C1E21;text-decoration:none;border:1.5px solid #F2694C;
  border-radius:999px;padding:8px 18px;white-space:nowrap;
  transition:background .25s,border-color .25s}
.sitenav .navcta:hover{background:#FF7E60;border-color:#FF7E60}

/* Row 2: address under the logo · phone under the button */
.sitenav .navloc,.sitenav .navtel{order:4;line-height:1;font-family:'IBM Plex Mono',monospace;
  font-size:14px;letter-spacing:.04em;color:#F3EDE2;white-space:nowrap}
/* Basis = whole row minus room for the phone number: always too wide to share
   row 1, so it starts row 2, and the phone number sits beside it */
.sitenav .navloc{flex:1 0 calc(100% - 140px)}
.sitenav .navtel{order:5;font-weight:500;text-decoration:none;transition:color .2s}
.sitenav .navtel:hover{color:#9FD3D6}

/* ---------- phone / narrow (≤720px): logo + button / address + phone / links ----------
   720 not 640: below ~670px the bigger logo, links and button no longer fit on one row */
@media(max-width:720px){
  html{scroll-padding-top:130px}
  .sitenav .navin{padding:12px 22px 10px;gap:10px}
  .sitenav .brand{font-size:28px}
  .sitenav .navcta{order:2}
  .sitenav .navloc,.sitenav .navtel{order:3;font-size:12.5px}
  .sitenav .navloc{flex:1 0 calc(100% - 125px)}
  .sitenav .navlinks{order:4;flex:0 0 100%;gap:8px 16px;padding-top:10px;
    border-top:1px solid rgba(243,237,226,.12)}
  .sitenav .navjump{font-size:11px;letter-spacing:.04em}
}
/* smallest phones (≤360px): tighten so each row still fits on one line */
@media(max-width:360px){
  .sitenav .navloc,.sitenav .navtel{font-size:11.5px;letter-spacing:.02em}
  .sitenav .navloc{flex-basis:calc(100% - 110px)}
  .sitenav .navlinks{gap:8px 10px}
  .sitenav .navjump{font-size:10.5px;letter-spacing:0}
}

@media print{.sitenav{display:none}}