/* Hallmark · v2.0.0 · mode: redesign · full · fast · genre: modern-minimal · theme: Cobalt (3/3) · draw: 6c0c69 · shape: Letter · hero: Corridor · nav: floating pill · footer: colophon · signature: server aisle in graphite blue */
/* Hallmark critique · A close server aisle gives the first screen a concrete subject. A ruled list gives buyers direct routes to each service. */
@import url("https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
@import "./tokens.css";

* { box-sizing: border-box }
html, body { overflow-x: clip }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.55 var(--body) }
h1,h2,h3,p { margin: 0 }
h1,h2,h3 { font-family: var(--display); font-weight: 600; line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; overflow-wrap: break-word; min-width: 0 }
h1 { font-size: clamp(2.9rem, 6vw, 6rem) }
h2 { font-size: clamp(2rem, 4vw, 3.4rem) }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem) }
a { color: var(--accent); text-underline-offset: .22em }
a:hover { color: var(--accent-strong) }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px }
.wrap { width: min(1160px, calc(100% - 72px)); margin-inline: auto }
.skip { position:absolute; left:1rem; top:-6rem; z-index:3; padding:12px; background:var(--nav-surface) }
.skip:focus { top:1rem }
header { padding-block: 20px }
.nav { min-height: 68px; padding: 8px 16px 8px 20px; background: var(--nav-surface); border: 1px solid var(--rule); border-radius: 40px }
.nav,.foot,.band { display:flex; justify-content:space-between; align-items:center; gap:20px }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font:700 1.1rem/1 var(--display) }
.brand { flex-shrink:0 }
/* Display the supplied artwork intact; the window removes only its white margins. */
.logo-window { display:block; position:relative; width:150px; height:64px; overflow:hidden; background:#fff }
.logo-window img { display:block; position:absolute; width:150px; height:150px; max-width:none; top:-36px; left:0 }
nav,.actions { display:flex; align-items:center; gap:24px }
nav a { display:inline-flex; align-items:center; min-height:44px; color:var(--ink); text-decoration:none; font-weight:600 }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 16px; border-radius:5px; border-bottom:3px solid var(--button-hover); background:var(--button-bg); color:var(--white); text-decoration:none; font-weight:600 }
.button:hover,.button:active { background:var(--button-hover); color:var(--white) }
.button.small { min-height:44px }
.hero-content { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(24px,5vw,72px); padding-block:clamp(32px,5vw,72px) }
.hero-copy { margin:24px 0 24px; max-width:33ch; font-size:1.13rem; color:var(--muted) }
.hero-photo { display:block; width:100%; height:clamp(310px,39vw,490px); object-fit:cover; object-position:center; background:var(--photo-base); color:var(--white); filter:saturate(.66); clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px)) }
.secondary { font-weight:600 }
.platforms { border-block:1px solid var(--rule); background:var(--surface); padding-block:24px }
.platforms .wrap,.platforms ul { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap }
.platforms p { color:var(--muted) }
.platforms ul { list-style:none; margin:0; padding:0; gap:clamp(16px,4vw,56px); font-weight:600 }
.section { padding-block:clamp(40px,6vw,80px) }
.cards { margin-top:28px; border-top:1px solid var(--rule) }
.card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:20px; align-items:center; padding:20px 12px; border-bottom:1px solid var(--rule); text-decoration:none }
.service-title { display:flex; align-items:center; gap:16px; min-width:0 }
.service-icon { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0; color:var(--accent); background:var(--icon-surface); border:1px solid var(--icon-rule); border-radius:12px }
.service-icon svg { display:block; width:26px; height:26px }
.card:hover .service-icon,.card:focus-visible .service-icon { background:var(--button-bg); border-color:var(--button-bg); color:var(--white) }
.card:hover { background:var(--surface) }
.card p,.detail p,.project p,.contact p { color:var(--muted) }
.detail p,.contact p { margin-top:12px; max-width:62ch }
.project,.contact { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px }
.project { border-top:1px solid var(--rule) }
.project a,.detail>a:not(.button),aside a { display:inline-block; margin-top:16px; font-weight:600 }
.band { padding:clamp(24px,4vw,48px); margin-bottom:48px; background:var(--surface); border:1px solid var(--rule) }
.band p { color:var(--muted); margin-top:8px }
.band .button { flex-shrink:0 }
.intro { background:var(--navy); color:var(--white); padding-block:clamp(48px,8vw,100px) }
.intro p { margin-top:16px; color:var(--on-dark); max-width:48ch; font-size:1.12rem }
.detail h2 { margin-top:20px }
.detail li { margin:8px 0 }
.contact .button { margin-top:20px }
.contact aside { align-self:start; border:1px solid var(--rule); padding:24px; background:var(--surface) }
.contact aside h2 { font-size:1.6rem }
.muted,.foot p { font-size:.9rem }
footer { border-top:1px solid var(--rule); padding:32px 0 96px }

.footer-links { display:flex; flex-direction:column; align-items:flex-end; gap:20px }
.footer-nav { display:flex; gap:20px; flex-wrap:wrap }
.social-links { display:flex; gap:10px }
.social-links a { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--rule); border-radius:50%; color:var(--ink); background:var(--nav-surface) }
.social-links a:hover { color:var(--white); background:var(--button-bg); border-color:var(--button-bg) }
.social-links svg { width:21px; height:21px }
.theme-toggle { position:fixed; z-index:50; right:max(20px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:center; width:52px; height:52px; padding:0; border:1px solid var(--rule); border-radius:50%; background:var(--nav-surface); color:var(--ink); box-shadow:0 4px 20px #0003; cursor:pointer; touch-action:manipulation }
.theme-toggle[hidden] { display:none }
.theme-toggle:hover { background:var(--surface); color:var(--accent) }
.theme-toggle:focus-visible { outline:3px solid var(--accent); outline-offset:4px }
.theme-toggle svg { width:24px; height:24px }
.theme-sun { display:none }
[data-theme="dark"] .theme-sun { display:block }
[data-theme="dark"] .theme-moon { display:none }
[data-theme="dark"] .logo-window { background:transparent }
[data-theme="dark"] .logo-window img { filter:invert(1); mix-blend-mode:screen }
.foot .brand { width:fit-content; margin-bottom:12px }
.story { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(28px,6vw,80px) }
.eyebrow { color:var(--accent); font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px }
.story-copy { max-width:64ch; color:var(--muted); font-size:1.06rem; line-height:1.75 }
.story-copy p+p { margin-top:20px }
.story-copy a { display:inline-block; margin-top:22px; font-weight:600 }
.experience { background:var(--surface); border-block:1px solid var(--rule) }
.purpose { background:var(--navy); color:var(--white); margin-bottom:64px }
.purpose-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,80px) }
.purpose .eyebrow { color:var(--on-dark) }
.purpose h2+p { margin-top:24px; color:var(--on-dark); line-height:1.75 }
.purpose article+article { padding-left:40px; border-left:1px solid #ffffff33 }
@media(max-width:760px) {
  .wrap { width:calc(100% - 36px) }
  .hero-content,.project,.contact { grid-template-columns:minmax(0,1fr) }
  .hero-photo { height:clamp(230px,56vw,385px) }
  .hero-text { max-width:34rem }
  .story,.purpose-grid { grid-template-columns:minmax(0,1fr) }
  .purpose article+article { padding:32px 0 0; border-left:0; border-top:1px solid #ffffff33 }
  .foot { align-items:flex-start; flex-wrap:wrap }
  .footer-links { align-items:flex-start }
}
@media(max-width:490px) {
  .nav { gap:8px; padding-inline:12px }
  .brand { gap:4px; font-size:.98rem }
  .nav .logo-window { width:104px; height:45px }
  .nav .logo-window img { width:104px; height:104px; top:-25px }
  nav { gap:10px; font-size:.82rem }
  .button.small { padding-inline:8px }
  .actions,.band,.foot { align-items:flex-start; flex-wrap:wrap }
  .card { grid-template-columns:minmax(0,1fr); gap:8px; padding-inline:4px }
}
@media(max-width:360px) {
  .nav { flex-wrap:wrap; justify-content:center; border-radius:24px }
  nav { width:100%; justify-content:space-around }
}