/* Daraja — site styles. No build step needed. */
:root {
  --teal: #018081;
  --teal-dark: #016667;
  --teal-ink: #015556;
  --mint: #E1F9F4;
  --mint-line: #C3E9E1;
  --ink: #0F1A1A;
  --ink-2: #172625;
  --ink-line: #263938;
  --text: #33433F;
  --text-2: #44524F;
  --muted: #5B6966;
  --line: #E6EEEC;
  --line-2: #CFDCDA;
  --soft: #F6FAF9;
  --soft-2: #F1F7F6;
  --pad-x: clamp(16px, 4vw, 40px);
  --sec-y: clamp(56px, 8vw, 112px);
  --radius: 18px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif; color: var(--ink); background: #fff; line-height: 1.5; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--teal-dark); }
a:hover { color: #014B4C; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }

/* Layout */
.container { max-width: 1240px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.narrow { max-width: 980px; }
.center { text-align: center; align-items: center; justify-content: center; }
.section { padding: var(--sec-y) 0; }
.section-tight { padding: clamp(32px, 4vw, 56px) 0; }
.pb-lg { padding-bottom: var(--sec-y); }
.page-head { padding: clamp(48px, 7vw, 88px) 0 clamp(24px, 3vw, 40px); }
.page-head.tight { padding-top: clamp(24px, 4vw, 48px); }
.stack-12, .stack-16, .stack-18, .stack-20, .stack-24, .stack-28, .stack-32, .stack-36, .stack-40 { display: flex; flex-direction: column; }
.stack-12 { gap: 12px; } .stack-16 { gap: 16px; } .stack-18 { gap: 18px; } .stack-20 { gap: 20px; } .stack-24 { gap: 24px; }
.stack-28 { gap: 28px; } .stack-32 { gap: 32px; } .stack-36 { gap: 36px; } .stack-40 { gap: 40px; }
.stack-24 > .text-link, .stack-40 > .text-link, .stack-20 > .badge, .stack-24 > .badge, .stack-18 > .badge { align-self: flex-start; }
.center.stack-20 { align-items: center; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.grid-2.align-start { gap: clamp(32px, 5vw, 72px); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(32px, 4vw, 56px); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 32px 24px; }
.grid-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }

/* Type */
.display { font-size: clamp(44px, 6.4vw, 84px); line-height: 1.02; font-weight: 600; letter-spacing: -0.03em; }
.display-2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.05; font-weight: 600; letter-spacing: -0.025em; }
.h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; max-width: 880px; }
.h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
.h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; }
.h4 { font-size: 22px; font-weight: 600; line-height: 1.3; }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--text-2); max-width: 600px; }
.center .lead { margin: 0 auto; }
.statement { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.25; font-weight: 500; letter-spacing: -0.015em; color: var(--text); }
.statement strong { color: var(--ink); font-weight: 600; }
.teal { color: var(--teal); }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--teal-dark); letter-spacing: 0.06em; text-transform: uppercase; }
.eyebrow.light { color: #7FD9C7; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.text-link { font-weight: 500; font-size: 16px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.prose { color: var(--text-2); font-size: 16px; line-height: 1.7; }
.prose.large { font-size: 18px; display: flex; flex-direction: column; gap: 18px; color: var(--text); padding-top: 8px; }
.badge { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--mint); color: var(--teal-ink); font-size: 13px; font-weight: 500; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border-radius: 12px; font: 500 16px/1 inherit; font-family: inherit; text-decoration: none; cursor: pointer; border: 0; transition: background-color .15s, border-color .15s; }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); color: #fff; }
.btn-outline { border: 1.5px solid var(--line-2); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--teal); color: var(--ink); }
.btn-white { background: #fff; color: var(--teal-ink); font-weight: 600; }
.btn-white:hover { background: var(--mint); color: var(--teal-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }

/* Header */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 12px; padding-bottom: 12px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-height: 44px; }
.logo:hover { color: var(--ink); }
.logo-word { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.logo-img { height: 34px; width: auto; }
.logo-light, .logo-light:hover { color: #fff; }
.nav { flex: 1 1 420px; min-width: 0; display: flex; gap: 2px; overflow-x: auto; justify-content: center; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--text); font-weight: 500; font-size: 15px; text-decoration: none; white-space: nowrap; }
.nav-link:hover { color: var(--teal-ink); background: var(--soft); }
.nav-link.is-active { background: var(--mint); color: var(--teal-ink); font-weight: 600; }
@media (max-width: 720px) {
  .site-header { position: static; }
  .header-row .btn { margin-left: auto; }
  .nav { order: 3; flex-basis: 100%; justify-content: flex-start; margin: 0 calc(var(--pad-x) * -1); padding: 0 var(--pad-x); }
}

/* Media placeholders / images */
.media-box { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--soft-2); }
.media-box img { width: 100%; height: 100%; object-fit: cover; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.square { aspect-ratio: 1 / 1; border-radius: 16px; }
.dark { background: var(--ink); }
.teal-bg { background: var(--teal); }
.cover { aspect-ratio: 16 / 8; min-height: 220px; border-radius: 20px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 20px; }
.gallery .media-box img { height: auto; object-fit: contain; }

/* Hero */
.hero { padding: clamp(48px, 8vw, 112px) 0 clamp(48px, 6vw, 88px); }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(40px, 5vw, 72px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; }
.hero-copy .lead { max-width: 480px; }
.hero-visual { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: end; }
.browser { grid-column: span 3; border-radius: 18px; border: 1px solid #DCE6E4; overflow: hidden; background: #fff; box-shadow: 0 24px 48px -30px rgba(1, 64, 65, .4); }
.browser-bar { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--soft); }
.browser-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.hero-main { aspect-ratio: 4 / 3.4; border-radius: 0; background: var(--mint); }
.hero-side { grid-column: span 2; display: flex; flex-direction: column; gap: 14px; }

/* Story */
.mint { background: var(--mint); }
.pill-card { background: #fff; border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.pill-card.dark { background: var(--ink); color: #fff; }
.pill-list { font-size: 17px; line-height: 1.6; }

/* Sections */
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.project-card { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink); }
.project-card:hover { color: var(--ink); }
.project-card:hover .project-title { color: var(--teal-dark); }
.project-card .media-box img { transition: transform .4s ease; }
.project-card:hover .media-box img { transform: scale(1.03); }
.project-meta { display: flex; flex-direction: column; gap: 4px; }
.tag-text { font-size: 13px; font-weight: 600; color: var(--teal-dark); }
.project-title { font-size: 19px; font-weight: 600; }

.clients { display: flex; flex-direction: column; gap: 20px; border-top: 1px solid var(--line); padding-top: 32px; }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 12px; }
.logo-tile { height: 80px; border-radius: 12px; background: var(--soft); display: flex; align-items: center; justify-content: center; padding: 14px 18px; color: var(--muted); font-size: 14px; font-weight: 500; text-align: center; }
.logo-tile img { max-height: 44px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.logo-tile:hover img { filter: none; opacity: 1; }

.dark-band { background: var(--ink); color: #fff; padding: clamp(48px, 6vw, 80px) 0; }
.products-row { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.products-intro { flex: 1 1 320px; max-width: 440px; display: flex; flex-direction: column; gap: 10px; }
.products-intro p { color: #B9C9C6; font-size: 16px; }
.products-links { flex: 1 1 520px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.product-link { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 16px; background: var(--ink-2); border: 1px solid var(--ink-line); text-decoration: none; color: #B9C9C6; font-size: 15px; }
.product-link:hover { border-color: var(--teal); color: #B9C9C6; }
.product-name { font-size: 20px; font-weight: 600; color: #fff; }
.closing { padding: clamp(64px, 9vw, 128px) 0; }
.closing .container { max-width: 820px; }

/* Services */
.group-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: 16px; }
.service-card { border: 1px solid #DCE6E4; border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; background: #fff; }
.service-card h3 { font-size: 21px; font-weight: 600; }
.service-card p { color: var(--text-2); font-size: 15px; line-height: 1.6; }
.mint-card { background: var(--mint); border-color: transparent; }
.mint-card p { color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 6px 12px; border-radius: 999px; background: var(--soft-2); color: var(--text); font-size: 13px; }
.mint-card .chip { background: #fff; }

/* Work filters */
.filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 20px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.filter { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line-2); color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.filter:hover { border-color: var(--teal); color: var(--teal-ink); }
.filter.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }
.empty { padding: 48px 24px; border-radius: 16px; background: var(--soft); text-align: center; color: var(--text-2); }

/* Project */
.meta-row { margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; }
.meta-row div, .contact-list div { display: flex; flex-direction: column; gap: 4px; }
.meta-row dt, .contact-list dt { font-size: 13px; color: var(--muted); font-weight: 500; }
.meta-row dd, .contact-list dd { margin: 0; font-size: 16px; font-weight: 600; }
.meta-row a, .contact-list a { text-decoration: none; }
.next-card { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 120px; padding: 28px; border-radius: var(--radius); border: 1px solid #DCE6E4; text-decoration: none; color: var(--ink); }
.next-card:hover { border-color: var(--teal); color: var(--ink); }
.teal-card { background: var(--teal); border-color: var(--teal); color: #fff; }
.teal-card:hover { background: var(--teal-dark); color: #fff; }
.teal-card .small { color: var(--mint); }

/* Products page */
.feature-row { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: center; }
.feature-row > * { flex: 1 1 440px; min-width: 0; }
.feature-row.reverse { flex-direction: row-reverse; }
.feature-media { aspect-ratio: 4 / 3; border-radius: 22px; }

/* About */
.pillar { border-top: 2px solid var(--teal); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.pillar p { color: var(--text-2); font-size: 15px; line-height: 1.65; }

/* CTA band */
.cta-band { background: var(--teal); color: #fff; border-radius: 24px; padding: clamp(32px, 5vw, 56px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cta-text { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.cta-text h2 { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.2; font-weight: 600; }
.cta-text p { font-size: 17px; line-height: 1.6; color: var(--mint); }

/* Contact */
.contact-row { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 72px); align-items: flex-start; }
.contact-info { flex: 1 1 340px; min-width: 0; }
.contact-list { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 20px; }
.form-card { flex: 999 1 560px; min-width: 0; background: var(--soft); border: 1px solid #DCE6E4; border-radius: 22px; padding: clamp(20px, 3vw, 40px); }
.types { border: 0; margin: 0; padding: 0; }
.types legend { font-size: 15px; font-weight: 600; padding: 0 0 12px; }
.check-chip { position: relative; display: inline-flex; }
.check-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; user-select: none; }
.check-chip input:checked + span { background: var(--teal); border-color: var(--teal); color: #fff; }
.check-chip input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 500; }
.req { color: var(--teal-dark); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--line-2); background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(1, 128, 129, .18); }
.field [aria-invalid="true"] { border-color: #B42318; }
.error { color: #B42318; font-size: 13px; }
.hp { position: absolute; left: -9999px; height: 1px; overflow: hidden; }
.form-card form > .btn { align-self: flex-start; }
.sent { align-items: flex-start; padding: 24px 0; }
.sent p { color: var(--text-2); }
.check { width: 52px; height: 52px; border-radius: 50%; background: var(--teal); display: inline-flex; align-items: center; justify-content: center; }

/* Footer */
.site-footer { background: var(--ink); color: #fff; padding: clamp(48px, 6vw, 72px) 0 32px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 32px; }
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand p { color: #B9C9C6; font-size: 15px; line-height: 1.6; max-width: 280px; }
.footer-col { display: flex; flex-direction: column; gap: 6px; }
.footer-col a, .footer-col span { color: #E1F9F4; text-decoration: none; font-size: 15px; min-height: 32px; display: inline-flex; align-items: center; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-head { font-size: 13px; font-weight: 600; color: #7FD9C7; letter-spacing: .06em; text-transform: uppercase; padding-bottom: 6px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid var(--ink-line); margin-top: 48px; padding-top: 24px; color: #9DB0AC; font-size: 14px; }

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

/* Front-end refinement pass */
/* Front-end refinement */
.site-header{background:#fff}
.header-row{min-height:76px}
.logo-word{font-weight:700;letter-spacing:-.03em}
.nav-link{transition:background-color .16s,color .16s}
.header-cta{box-shadow:0 8px 20px rgba(1,128,129,.12)}
.page-head{position:relative;border-bottom:1px solid var(--line);background:#fff}
.page-head::after{content:"";position:absolute;left:0;bottom:-1px;width:min(180px,28vw);height:3px;background:var(--teal)}
.page-head .eyebrow,.hero-copy .eyebrow{letter-spacing:.09em}
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;right:-90px;top:72px;width:320px;height:320px;border-radius:50%;background:var(--mint);z-index:-1;opacity:.7}
.hero-copy{max-width:650px}
.hero-visual{position:relative;padding:12px}
.hero-visual::before{content:"";position:absolute;inset:0;border:1px solid var(--mint-line);border-radius:28px;z-index:-1;background:#fff}
.browser{box-shadow:0 28px 60px -36px rgba(1,64,65,.45)}
.pill-card,.service-card,.form-card,.next-card,.cta-band,.feature-media{box-shadow:0 12px 32px rgba(19,46,42,.045)}
.service-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.service-card:hover{transform:translateY(-2px);border-color:var(--mint-line);box-shadow:0 16px 36px rgba(1,128,129,.08)}
.project-card .media-box{border:1px solid var(--line)}
.project-card .project-title{transition:color .16s}
.logo-tile{border:1px solid var(--line)}
.feature-row{padding-top:18px;padding-bottom:18px}
.product-placeholder{width:100%;height:100%;display:flex;align-items:flex-end;padding:30px}
.product-placeholder span{display:inline-flex;padding:8px 12px;border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.dark .product-placeholder span{background:var(--mint);color:var(--teal-ink)}
.contact-list dd{overflow-wrap:anywhere}
.form-card{background:#fbfefd}
.field input,.field textarea{transition:border-color .15s,box-shadow .15s}
.cta-band{position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-45px;bottom:-45px;width:150px;height:150px;border-radius:50%;border:26px solid rgba(225,249,244,.16)}
.footer-grid{gap:40px}
.site-footer{margin-top:0}
.mobile-dock{display:none}
.hero-actions-mobile{display:none}

@media (max-width:900px){
  .header-row{min-height:68px;flex-wrap:nowrap}
  .desktop-nav{display:none}
  .header-cta{margin-left:auto}
  .hero::before{width:220px;height:220px;right:-80px;top:120px}
}

@media (max-width:720px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{padding-bottom:78px}
  .container{width:100%;max-width:100%;padding-left:18px;padding-right:18px}
  main,section,.hero,.page-head,.section,.section-tight,.site-footer{width:100%;max-width:100%;overflow-x:hidden}

  .site-header{position:sticky;top:0;z-index:50;background:#fff}
  .header-row{min-height:60px;padding-top:10px;padding-bottom:10px;gap:10px}
  .header-cta{display:none}
  .logo{min-width:0}
  .logo-img{height:31px}
  .logo-word{font-size:19px}
  .nav{display:none}

  .mobile-dock{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1000;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    width:100%;
    margin:0;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));
    border:0;
    border-top:1px solid var(--line);
    border-radius:0;
    background:#fff;
    box-shadow:0 -6px 20px rgba(15,26,26,.08);
  }
  .mobile-dock-link{
    min-width:0;
    min-height:52px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    border-radius:13px;
    color:var(--muted);
    text-decoration:none;
    font-size:10px;
    font-weight:600;
  }
  .mobile-dock-link svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mobile-dock-link.is-active{background:var(--mint);color:var(--teal-ink)}

  .hero{padding:34px 0 48px}
  .hero::before{display:none}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
  .hero-copy{max-width:none;gap:16px}
  .hero-copy .lead{max-width:none}
  .display{font-size:clamp(38px,11.5vw,50px);line-height:1.02}
  .hero-actions-desktop{display:none}
  .hero-actions-mobile{display:flex;gap:10px;padding-top:2px;justify-content:flex-start;flex-wrap:wrap}
  .hero-actions-mobile .btn{width:auto;min-height:42px;padding:0 16px;font-size:14px;border-radius:10px;flex:0 0 auto}

  .hero-visual{display:flex;flex-direction:column;gap:10px;padding:8px;border-radius:22px;min-width:0}
  .hero-visual::before{border-radius:22px}
  .browser{width:100%;grid-column:auto;min-width:0;border-radius:16px}
  .hero-main{aspect-ratio:4/3}
  .hero-side{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;grid-column:auto;min-width:0}
  .hero-side .square{width:100%;min-width:0}

  .grid-2,.grid-3,.grid-cards,.grid-services,.form-grid,.gallery{grid-template-columns:minmax(0,1fr)!important}
  .feature-row,.products-row,.contact-row,.section-head,.footer-base{flex-direction:column;align-items:stretch}
  .feature-row>*{flex:0 0 auto;width:100%}
  .feature-row.reverse{flex-direction:column}
  .products-links{grid-template-columns:minmax(0,1fr);width:100%;flex:0 0 auto}
  .products-intro{max-width:none;flex:0 0 auto}
  .contact-info,.form-card{flex:0 0 auto;width:100%}
  .form-card{padding:20px}
  .service-card,.pill-card{padding:22px}
  .statement{font-size:clamp(24px,7.2vw,32px)}
  .h1{font-size:clamp(32px,9vw,42px)}
  .h2{font-size:clamp(28px,8vw,36px)}
  .h3{font-size:clamp(24px,7vw,30px)}
  .lead{font-size:16px;line-height:1.6}
  .section{padding:56px 0}
  .section-tight{padding:32px 0}
  .page-head{padding:38px 0 26px}
  .stack-40{gap:28px}
  .stack-36{gap:26px}
  .stack-32{gap:24px}
  .grid-cards,.grid-services{gap:18px}
  .logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-band{padding:26px 22px;border-radius:18px}
  .cta-band .btn{width:auto;align-self:flex-start;min-height:44px;padding:0 18px}
  .btn-row:not(.hero-actions-mobile){width:auto}
  .btn-row:not(.hero-actions-mobile) .btn{width:auto;flex:0 0 auto}
  .filters{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-brand{grid-column:auto}
}

@media (max-width:430px){
  .hero-side{grid-template-columns:1fr 1fr}
  .logo-grid{grid-template-columns:1fr 1fr}
}

/* Privacy policy */
.policy-content{display:flex;flex-direction:column;gap:16px}
.policy-content h2{margin-top:18px;font-size:22px;line-height:1.3}
.policy-content p{color:var(--text-2);font-size:16px;line-height:1.75}
.policy-content a{font-weight:600;text-decoration-thickness:1px;text-underline-offset:3px}