/*
  SYRINO — shared system for Priorities, Business Relations, Careers and Contact.
  Same tokens, header and footer language as /expertise and /projects.
  Palette per brief: navy #0B4F6C, cyan #00A8E8, canvas #F8FAFC, ink #0F172A.
  Grid: 1440 frame · 12 cols · 64 margins · 24 gutters · 87.33 cols.
*/
:root{
  --navy:#0B4F6C; --navy-700:#083D54; --cyan:#00A8E8; --cyan-soft:#7DD3F5; --cyan-ink:#0077A8;
  --ink:#0F172A; --muted:#475569; --line:#E2E8F0; --mist:#F8FAFC; --white:#FFFFFF;
  --display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1); --edit:cubic-bezier(.65,0,.35,1);
  --grid:linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px);
  color-scheme:only light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;background:var(--white)}
body{margin:0;background:var(--white);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,h4,ul,ol,figure,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.frame{position:relative;width:1440px;margin:0 auto;padding:0 64px}
.tag{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-ink)}
.on-navy .tag,.tag.soft{color:var(--cyan-soft)}
.h2{margin-top:12px;font-family:var(--display);font-weight:500;font-size:40px;line-height:1.1;letter-spacing:-.01em}
.mono{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.crop{position:absolute;inset:-12px;pointer-events:none}
.crop i{position:absolute;width:16px;height:16px;border-color:var(--cyan-soft);border-style:solid;border-width:0}
.crop i:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.crop i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.crop i:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.crop i:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.cap-bar{position:absolute;left:0;bottom:0;z-index:2;padding:11px 16px;background:rgba(15,23,42,.86);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff}

/* Header */
.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.hdr .frame{height:80px;display:flex;align-items:center;gap:32px}
.hdr .logo img{height:42px;width:auto}
.hdr nav{margin-left:auto;display:flex;gap:28px;font-size:14.5px;font-weight:500;color:var(--muted)}
.hdr nav a{position:relative;padding:8px 0;white-space:nowrap;transition:color .2s}
.hdr nav a:hover{color:var(--ink)}
.hdr nav a[aria-current]{color:var(--cyan-ink)}
.hdr nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--cyan)}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 24px;border-radius:999px;background:var(--navy);color:#fff;font-size:14px;font-weight:700;border:0;transition:background .2s;white-space:nowrap}
.pill:hover{background:var(--navy-700)}
.pill .ic{transition:transform .2s var(--ease)}
.pill:hover .ic{transform:translateX(3px)}
.pill.ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1px var(--line)}
.pill.ghost:hover{box-shadow:inset 0 0 0 1px var(--navy);background:transparent}
.pill.white{background:#fff;color:var(--navy)}
.pill.white:hover{background:var(--mist)}
.linkbtn{border:0;background:none;padding:0;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-ink);text-underline-offset:4px}
.linkbtn:hover{text-decoration:underline}

/* Navy hero */
.hero{position:relative;overflow:clip;background-color:var(--navy);background-image:var(--grid);background-size:48px 48px;color:#fff}
.hero h1{font-family:var(--display);font-weight:600;font-size:64px;line-height:1.04;letter-spacing:-.02em;animation:rise .8s var(--ease) both}
.hero .sub{margin-top:24px;max-width:540px;font-size:18px;line-height:1.6;color:rgba(255,255,255,.8);animation:fade .8s .15s var(--ease) both}
.reg{display:grid;gap:24px;animation:fade .8s .25s var(--ease) both}
.reg>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px;padding-top:12px;border-top:1px solid rgba(125,211,245,.6)}
.reg dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.reg dd{font-family:var(--display);font-weight:500;font-size:36px;line-height:1.1}

/* Pills bar (shared with Projects) */
.bar{position:sticky;top:80px;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.bar .frame{height:88px;display:flex;align-items:center;gap:24px}
.chips{position:relative;display:flex;gap:6px}
.chipfill{position:absolute;top:0;left:0;height:40px;border-radius:999px;background:var(--navy);transition:left .38s var(--ease),width .38s var(--ease)}
.chip{position:relative;z-index:1;height:40px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:none;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:color .25s,border-color .25s}
.chip:hover{border-color:var(--navy)}
.chip[aria-checked="true"]{color:#fff;border-color:var(--navy)}
.chip b{margin-left:7px;font-weight:500;color:var(--cyan-ink);transition:color .25s}
.chip[aria-checked="true"] b{color:var(--cyan-soft)}

/* Forms */
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld>label,.fld>.fl{font-size:13.5px;font-weight:500}
.fld .opt-l{color:var(--muted);font-weight:400}
.fld input:not([type=checkbox]):not([type=file]),.fld select,.fld textarea{width:100%;height:46px;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:var(--mist);transition:border-color .15s,box-shadow .15s,background .15s}
.fld textarea{height:88px;padding:10px 12px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;background:#fff;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,168,232,.18)}
.fld.err input,.fld.err select,.fld.err .drop{border-color:#DC2626}
.em{font-size:12.5px;color:#B91C1C}
.hint{font-size:12.5px;color:var(--muted)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted)}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--navy)}
.tog{display:flex;flex-wrap:wrap;gap:8px}
.tog button{height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:none;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;transition:all .15s}
.tog button:hover{border-color:var(--navy)}
.tog button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.done{padding:8px 0}
.done .tick{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(0,168,232,.12);color:var(--navy)}
.done .tick .ic{width:26px;height:26px}
.done h3{margin-top:16px;font-family:var(--display);font-weight:500;font-size:24px}
.done p{margin-top:8px;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.send-err{color:#B91C1C!important}
.ref{display:inline-block;margin-top:12px;padding:8px 12px;border-radius:6px;background:var(--mist);font-family:var(--mono);font-size:14px;color:var(--navy)}

/* Footer */
.ftr{background:var(--ink);color:rgba(255,255,255,.78);border-top:1px solid rgba(255,255,255,.12)}
.ftr .frame{display:grid;grid-template-columns:420px 1fr 1fr 1.2fr;gap:48px;padding-top:72px;padding-bottom:64px}
.ftr .brand img{height:44px;width:auto;background:#fff;padding:6px 10px;border-radius:6px}
.ftr .brand p{margin-top:20px;max-width:32ch;font-size:14.5px;color:rgba(255,255,255,.65)}
.ftr h2{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-soft)}
.ftr ul{margin-top:16px;display:grid;gap:9px;font-size:14.5px}
.ftr a,.ftr button{color:rgba(255,255,255,.78);transition:color .15s}
.ftr a:hover,.ftr button:hover{color:#fff}
.ftr button{border:0;background:none;padding:0;text-align:left;font-size:14.5px}
.ftr-bar{border-top:1px solid rgba(255,255,255,.12);background:var(--ink);color:rgba(255,255,255,.55)}
.ftr-bar .frame{display:flex;justify-content:space-between;padding:20px 64px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.ftr-bar a:hover{color:#fff}

/* Dialog */
dialog{border:0;padding:0;border-radius:12px;width:min(680px,calc(100% - 32px));max-height:calc(100% - 32px)}
dialog::backdrop{background:rgba(15,23,42,.8)}
dialog[open]{animation:rise .3s var(--ease)}
.dlg-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 10px 18px;font-size:14px;font-weight:600}
.dlg-bar button{width:36px;height:36px;border:0;border-radius:6px;background:none;display:grid;place-items:center}
.dlg-bar button:hover{background:var(--mist)}
dialog img{width:100%;height:auto;max-height:calc(100vh - 120px);object-fit:contain;background:var(--mist)}

@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@keyframes fade{from{opacity:0}}
@keyframes wipe{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- Responsive: fluid below 1440, stacked on tablets, single column on phones ---------- */
@media (max-width:1439px){ .frame{width:auto;max-width:1440px} }
@media (max-width:1024px){
  .frame{padding:0 32px}
  .hero h1{font-size:48px}
  .h2{font-size:32px}
  .bar .frame{height:auto;padding-top:12px;padding-bottom:12px}
  .chips{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .reg dd{font-size:30px}
}
@media (max-width:640px){
  .frame{padding:0 20px}
  .hero h1{font-size:36px}
  .hero .sub{font-size:16px}
  .h2{font-size:28px}
  .row2{grid-template-columns:1fr}
  .reg dd{font-size:26px}
  .pill{padding:0 20px}
}