/* Kawas LLC — a small Arlington app studio. Layout: one calm column, a featured app band, then a grid of app cards. */
:root{
  --bg:#F5F7F9; --surface:#FFFFFF; --ink:#101826; --muted:#58677A; --line:#DCE3EA;
  --accent:#0B8F6A; --accent-ink:#FFFFFF; --accent-soft:#E2F4EC; --sky:#0279B8;
  --band:#0B1222; --band-ink:#E8EEF5; --band-muted:#9AA8BA;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
  --radius:16px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0A0F1A; --surface:#111A2A; --ink:#E7EDF5; --muted:#9BA9BB; --line:#223049;
  --accent:#34D399; --accent-ink:#06261C; --accent-soft:#0E2C24; --sky:#5CC4F5;
  --band:#060A13; --band-ink:#E8EEF5; --band-muted:#9AA8BA; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0A0F1A; --surface:#111A2A; --ink:#E7EDF5; --muted:#9BA9BB; --line:#223049;
  --accent:#34D399; --accent-ink:#06261C; --accent-soft:#0E2C24; --sky:#5CC4F5;
  --band:#060A13; --band-ink:#E8EEF5; --band-muted:#9AA8BA; color-scheme:dark }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--sky)}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--display);line-height:1.12;text-wrap:balance;margin:0}
h1{font-size:clamp(2.2rem,5.5vw,3.6rem);font-weight:800;letter-spacing:-.015em}
h2{font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:800}
h3{font-size:1.15rem;font-weight:700}
p{margin:0}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.inner{max-width:1080px;margin:0 auto}
.eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted)}

/* header */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .inner{display:flex;align-items:center;gap:20px;min-height:64px}
.logo{white-space:nowrap;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:800;font-size:1.15rem}
.logo i{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--ink);color:var(--bg);font-style:normal;font-size:.95rem;letter-spacing:-.02em}
.nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px;font-size:.95rem}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);background:var(--surface)}

/* sections */
main{display:flex;flex-direction:column}
.section{padding-block:72px}
.section > .inner{display:flex;flex-direction:column;gap:22px}
.lede{font-size:1.2rem;color:var(--muted);max-width:60ch}
.prose{max-width:68ch;display:flex;flex-direction:column;gap:14px}
.prose h2{margin-top:18px;font-size:1.45rem}
.prose h3{margin-top:8px}
.prose ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}

.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;border-radius:12px;padding:12px 18px;border:1.5px solid transparent}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* featured band (dark) */
.band{background:var(--band);color:var(--band-ink)}
.band .lede{color:var(--band-muted)}
.band .eyebrow{color:#34D399}
.section > .inner.feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.feature > div:first-child{min-width:0;display:flex;flex-direction:column;gap:18px}
.feature > .phones{min-width:0}
.points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.points li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start}
.points li::before{content:"";width:12px;height:12px;margin-top:7px;border-radius:50%;background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.25)}
.phones{display:flex;gap:16px;justify-content:center;align-items:flex-start}
.phones img{width:46%;max-width:230px;border-radius:22px;border:6px solid #050912;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.phones img:nth-child(2){margin-top:48px}
.band .btn.ghost{background:transparent;color:var(--band-ink);border-color:#2A3A5C}
.band .btn.primary{background:#10B981;color:#06261C}

/* app grid */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.app{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:10px}
.app header{display:flex;align-items:center;gap:12px}
.mono{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;font:800 1rem/1 var(--display);flex:none}
.app p{color:var(--muted);font-size:.95rem}
.tag{align-self:flex-start;font-size:.75rem;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.tag.test{background:color-mix(in srgb,var(--sky) 14%,transparent);color:var(--sky)}
.app .links{margin-top:auto;display:flex;gap:14px;font-size:.9rem}

.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:8px}
.card p{color:var(--muted)}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.shots figure{margin:0;display:flex;flex-direction:column;gap:8px}
.shots img{border-radius:18px;border:5px solid #050912}
figure.wide{margin:0;display:flex;flex-direction:column;gap:8px}
figure.wide img{width:100%;border-radius:16px;border:5px solid #050912}
figure.wide figcaption{font-size:.85rem;color:var(--muted)}
.shots figcaption{font-size:.85rem;color:var(--muted)}
.contact{font-size:1.2rem;font-weight:700;user-select:all}

footer.site{border-top:1px solid var(--line);padding-block:28px 40px;color:var(--muted);font-size:.9rem}
footer.site .inner{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
footer.site a{color:var(--muted)}

@media (max-width:820px){
  .section > .inner.feature{grid-template-columns:minmax(0,1fr)}
  .top .inner{flex-wrap:wrap;gap:4px 12px;padding-block:8px}
  .nav{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto}
  .section{padding-block:52px}
  .nav a{padding:6px 8px;font-size:.9rem}
}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }