/* Herion Digital: approved artwork, direct contact and responsive sizing. */
.contact-grid>*{min-width:0}
.contact-direct{padding:clamp(24px,3.5vw,44px)}
.contact-direct>.eyebrow{font-size:12px;letter-spacing:.13em;color:var(--brand-royal)}
.contact-direct h3{font-size:clamp(26px,2.6vw,36px);line-height:1.2;letter-spacing:-.04em;margin:18px 0 14px}
.contact-direct>p{font-size:16px;line-height:1.8;color:var(--muted);margin:0}
.contact-channels{display:grid;gap:14px;margin-top:30px}
.contact-channel{display:flex;align-items:center;gap:16px;min-height:112px;padding:20px;border:1px solid #dbe5f4;border-radius:12px;background:#f8fbff;transition:background .2s,border-color .2s,transform .2s}
.contact-channel:hover{background:#e8f1ff;border-color:#93c5fd;transform:translateY(-2px)}
.contact-channel:focus-visible{outline:3px solid #2563eb;outline-offset:4px}
.channel-icon{width:46px;height:46px;display:grid;place-items:center;flex-shrink:0;border-radius:12px;background:#e8f1ff;color:#2563eb}
.channel-icon svg{width:25px;height:25px}
.channel-content{display:flex;flex-direction:column;gap:5px;min-width:0}
.channel-label{font-size:12px;letter-spacing:.06em;color:var(--muted)}
.channel-content strong{font-size:clamp(15px,1.6vw,21px);line-height:1.4;letter-spacing:-.025em;font-weight:600;overflow-wrap:anywhere}
.channel-action{font-size:13px;line-height:1.5;color:#2563eb}
.channel-arrow{font-size:25px;color:#2563eb;margin-left:auto;flex-shrink:0}
.contact-direct>.contact-detail{font-size:13px;line-height:1.7;margin-top:24px}
@media(max-width:600px){.contact-channel{padding:16px 12px;gap:12px}.channel-icon{width:36px;height:36px;border-radius:9px}.channel-icon svg{width:22px;height:22px}.channel-content strong{font-size:15px}.channel-arrow{font-size:20px}.contact-direct>p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.contact-channel{transition:none}.contact-channel:hover{transform:none}}

/* One horizontal logo, one explicit SVG viewport, readable at every breakpoint. */
.header .brand,.footer .brand{width:auto;gap:0;flex-shrink:0;line-height:0;letter-spacing:0}
.brand .brand-lockup{display:block;width:244px;height:auto;aspect-ratio:270/52;object-fit:contain;mix-blend-mode:multiply}
.footer .brand .brand-lockup{width:280px}
@media(max-width:1150px){.header .brand .brand-lockup{width:218px}}
@media(max-width:900px){.header .brand .brand-lockup{width:200px}}
@media(max-width:760px){.header .brand .brand-lockup{width:198px}.footer .brand .brand-lockup{width:260px}}
@media(max-width:600px){.header .brand .brand-lockup{width:176px}}
@media(max-width:370px){.header .brand .brand-lockup{width:154px}}

/* A quieter hierarchy: one hero visual and simpler service rows. */
.hero{column-gap:32px;padding-bottom:64px}
.hero-description{max-width:470px}
.hero .hero-art{width:100%;height:auto;min-height:0;max-width:600px;aspect-ratio:1466/1073;margin:0;justify-self:center;background:none}
.hero .hero-laptop-stage{inset:0;width:100%;height:100%;animation:none}
.hero .hero-laptop{height:100%;object-position:center;filter:drop-shadow(0 18px 24px #0a1f4412)}
.service-row{grid-template-columns:56px minmax(0,.9fr) minmax(0,1.1fr) 38px;gap:24px;--service-padding-x:24px;--service-padding-y:36px;padding:var(--service-padding-y) var(--service-padding-x);transition:background .2s}
.service-row:hover{padding-inline:var(--service-padding-x)}
.service-description{grid-column:auto;grid-row:auto;margin-top:0}
.service-row>.round-arrow{grid-column:4;grid-row:auto}
.service-name{align-self:center;padding-top:0}
.projects-intro .demo-note{margin-top:18px}
.project-grid{margin-top:32px}
.contact-channel{min-height:96px}
@media(max-width:1150px){.hero{column-gap:20px}.service-row{grid-template-columns:48px minmax(0,.9fr) minmax(0,1.1fr) 32px;gap:20px}}
@media(max-width:1000px){.hero .hero-art{width:min(100%,590px);margin:32px auto 0}}
@media(max-width:760px){.hero{padding-bottom:44px}.hero .hero-art{width:min(100%,480px);max-width:480px;margin:36px auto 0}.service-row{grid-template-columns:40px minmax(0,1fr) 32px;gap:14px;--service-padding-x:16px;--service-padding-y:28px;padding:var(--service-padding-y) var(--service-padding-x)}.service-row>.round-arrow{grid-column:3;grid-row:1}.service-description{grid-column:2 / -1;grid-row:2;margin-top:0}.service-name{align-self:center}.project-grid{margin-top:26px}}
@media(max-width:370px){.hero .hero-art{margin-top:28px}.service-row{grid-template-columns:34px minmax(0,1fr) 28px;gap:12px;--service-padding-x:12px;--service-padding-y:26px}}

/* Subtle one-time scroll reveals; the page remains visible without JavaScript. */
.scroll-origin{position:absolute;top:16px;left:0;width:1px;height:1px;pointer-events:none;opacity:0}
.header{transition:box-shadow 320ms ease,background-color 320ms ease}
.header.is-scrolled{background:#fffffff5;box-shadow:0 6px 24px #0a1f4408}
.js-motion .reveal{opacity:0;transform:translateY(18px);transition:opacity 640ms cubic-bezier(.22,1,.36,1),transform 640ms cubic-bezier(.22,1,.36,1);transition-delay:var(--reveal-delay,0ms)}
.js-motion .reveal.visible{opacity:1;transform:translateY(0)}
.js-motion .reveal:focus-within{opacity:1;transform:none;transition:none}
@media(max-width:760px){.js-motion .reveal{transform:translateY(14px);transition-duration:560ms}.js-motion .reveal.visible{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.js-motion .reveal,.js-motion .reveal.visible{opacity:1;transform:none;transition:none}.header{transition:none}}
@media print{.js-motion .reveal{opacity:1!important;transform:none!important;transition:none!important}.scroll-origin{display:none}}

/* Restore mobile and code illustrations around the laptop. */
.hero .hero-art{aspect-ratio:1.08;max-width:600px}
.hero .hero-laptop-stage{inset:0 0 auto;width:100%;height:83%}
.hero .code-card{width:42%;max-width:244px;left:12px;bottom:12px;z-index:2;transform:rotate(-5deg);box-shadow:0 18px 32px #0a1f441a}
.hero .phone-preview{width:138px;height:270px;right:18px;bottom:10px;z-index:3;transform:rotate(8deg);box-shadow:8px 18px 28px #0a1f4420}
.hero .code-card:hover{transform:rotate(-2deg) translateY(-4px)}
.hero .phone-preview:hover{transform:rotate(4deg) translateY(-4px)}
@media(max-width:1150px){.hero .code-card{left:6px;bottom:10px}.hero .phone-preview{width:122px;height:246px;right:12px;bottom:8px}}
@media(max-width:1000px){.hero .hero-art{max-width:590px}.hero .phone-preview{width:138px;height:270px;right:18px}.hero .code-card{left:12px}}
@media(max-width:760px){.hero .hero-art{max-width:480px;aspect-ratio:1.02}.hero .hero-laptop-stage{height:83%}.hero .code-card{width:50%;max-width:216px;left:6px;bottom:14px}.hero .phone-preview{width:116px;height:236px;right:14px;bottom:10px}}
@media(max-width:400px){.hero .hero-art{aspect-ratio:1}.hero .code-card{width:54%;left:2px;bottom:12px}.hero .code-body{font-size:8px;padding:12px}.hero .phone-preview{width:101px;height:218px;right:10px;bottom:8px;padding:9px 7px;border-width:4px;border-radius:22px}.hero .phone-greeting strong{font-size:10px}.hero .phone-heading{font-size:14px}}
@media(prefers-reduced-motion:reduce){.hero .code-card:hover{transform:rotate(-5deg)}.hero .phone-preview:hover{transform:rotate(8deg)}}