/* Sahai Multimedia calm redesign */
/* Layout: calm single-column flow, wide airy sections, soft blue-tinted surfaces, products as quiet tiles with line illustrations. */
:root{
  --bg:#f3fafd;          /* sea mist */
  --surface:#ffffff;     /* paper */
  --tint:#e3f4fa;        /* aqua tile ground */
  --tint-2:#cfeaf5;      /* sky end of tile gradient */
  --ink:#0f3a52;         /* deep ocean navy */
  --muted:#4f6b7a;
  --line:#d3e6ee;
  --brand:#1b85ae;       /* site blue */
  --brand-deep:#126a8d;
  --brand-ink:#ffffff;
  --accent:#ea5a0f;      /* site orange, tiny marks only */
  --mint:#7fd1c7;
  --shadow:0 14px 34px -18px rgba(15,58,82,.28);
  --art-1:#1b85ae; --art-2:#7fd1c7; --art-3:#cfeaf5; --art-line:#0f3a52;
  --f-display:'Outfit','Segoe UI',system-ui,sans-serif;
  --f-body:'Nunito Sans','Segoe UI',system-ui,sans-serif;
  --r:20px;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--f-body);margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);line-height:1.15;margin:0;text-wrap:balance}
.eyebrow{font:600 12px/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--brand);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--accent);border-radius:2px}

/* preview banner */

/* top bar */
.top{border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:8px 20px;flex-wrap:wrap;padding-block:10px}
.top .soc,.top .con{display:flex;gap:6px 18px;flex-wrap:wrap}
.top a{text-decoration:none}.top a:hover{color:var(--brand)}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{font:700 24px/1 var(--f-display);color:var(--brand);text-decoration:none;letter-spacing:-.01em}
.nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.nav ul a{display:block;padding:8px 16px;border-radius:99px;text-decoration:none;font-weight:600;font-size:15px}
.nav ul a:hover{background:var(--tint)}

/* hero */
.hero{padding-block:clamp(40px,7vw,88px)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h2{font-size:clamp(42px,7vw,76px);font-weight:600;letter-spacing:-.025em;margin:18px 0 16px}
.hero h2 em{font-style:normal;color:var(--brand)}
.hero p.lead{font-size:clamp(18px,2.2vw,21px);color:var(--muted);max-width:30em;margin:0 0 28px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:var(--brand-ink);font:600 15px/1 var(--f-display);padding:14px 22px;border-radius:99px;text-decoration:none;border:0;cursor:pointer;transition:transform .2s,background .2s}
.btn:hover{background:var(--brand-deep);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--brand-deep);box-shadow:inset 0 0 0 1.5px var(--brand)}
.btn.ghost:hover{background:var(--tint);transform:none}
.hero-art{background:var(--tint);border-radius:36px;aspect-ratio:5/4;display:grid;place-items:center;padding:6%;max-width:100%;position:relative;overflow:hidden}
.hero-art svg{width:100%;height:auto}
.hero-art::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:var(--art-3);opacity:.7}

/* sections */
section{padding-block:clamp(48px,7vw,84px)}
.head{display:grid;gap:12px;max-width:34em;margin-bottom:40px}
.head h2{font-size:clamp(30px,4.4vw,44px);font-weight:600;letter-spacing:-.015em}
.alt{background:var(--surface);border-block:1px solid var(--line)}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:24px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px -18px rgba(20,95,126,.35)}
.art{background:var(--tint);aspect-ratio:4/3;display:grid;place-items:center;padding:8%}
.art svg{width:78%;height:auto;max-height:100%}
.card .body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font-size:21px;font-weight:600}
.card p{margin:0;color:var(--muted);font-size:15px}
.card .btn{margin-top:auto;align-self:flex-start}
.card .body p{margin-bottom:10px}

/* featured rows */
.rows{display:grid;gap:28px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;background:var(--bg);border-radius:28px;padding:clamp(16px,3vw,32px)}
.row:nth-child(even) .art{order:2}
.row .art{border-radius:20px;aspect-ratio:5/4}
.row .art svg{width:70%}
.row .txt{display:grid;gap:14px;min-width:0}
.row .n{font:600 14px/1 var(--f-display);color:var(--accent);letter-spacing:.1em}
.row h3{font-size:clamp(24px,3vw,32px);font-weight:600}
.row p{margin:0;color:var(--muted);white-space:pre-line}
.quote{display:inline-flex;align-self:flex-start;font:600 13px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--brand-deep);background:var(--tint);padding:8px 14px;border-radius:99px}

/* about */
.about{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,5vw,64px);align-items:center}
.about .photo{border-radius:28px;overflow:hidden;background:var(--tint);aspect-ratio:4/3;display:grid;place-items:center;padding:8%}
.about .photo svg{width:80%}
.about h2{font-size:clamp(30px,4.4vw,44px);font-weight:600;margin:12px 0 16px}
.about p{color:var(--muted)}
.contact{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-top:20px;font-style:normal;color:var(--ink);overflow-wrap:anywhere}
.contact b{display:block;font:600 12px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:10px}

/* locations */
.locs{display:flex;flex-wrap:wrap;gap:8px}
.locs a{font-size:14px;text-decoration:none;padding:7px 14px;border-radius:99px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.locs a:hover{border-color:var(--brand);color:var(--brand)}

footer{border-top:1px solid var(--line);padding-block:36px;text-align:center;color:var(--muted);font-size:14px}
footer a{color:var(--ink)}

/* design notes */

@media (max-width:820px){
  .hero .wrap,.about,.row{grid-template-columns:1fr}
  .row:nth-child(even) .art{order:0}
  .nav ul{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* palette refinements */
.hero{background:linear-gradient(180deg,var(--tint) 0%,var(--bg) 100%)}
.hero-art,.art,.about .photo{background:linear-gradient(145deg,var(--tint),var(--tint-2))}
.hero h2,.head h2,.row h3,.card h3,.about h2{color:var(--ink)}
.logo{color:var(--brand-deep)}
.card,.contact{box-shadow:var(--shadow)}
.row{background:var(--bg)}
.alt{background:linear-gradient(180deg,var(--surface),var(--tint))}
footer{background:var(--ink);color:#bfdbe8;border-top:0}
footer a{color:#fff}
.top{background:var(--surface)}

/* image tiles */
.art,.hero-art,.about .photo{padding:0;overflow:hidden;display:block}
.art img,.hero-art img,.about .photo img{display:block;width:100%;height:auto;aspect-ratio:1/1}
.card .art{aspect-ratio:auto}
.row .art{aspect-ratio:auto;max-width:100%}
.hero-art{aspect-ratio:auto;border-radius:36px}
.hero-art::after{display:none}
.about .photo{aspect-ratio:auto;border-radius:28px}

/* logo */
.logo{display:block;line-height:0}
.logo img{display:block;height:44px;width:auto}
.foot-logo{display:block;margin:0 auto 18px;height:48px;width:auto}

/* product page */
.detail{background:var(--surface);border:1px solid var(--line)}
.detail .art{border-radius:20px}
.detail .actions{display:flex;gap:12px;flex-wrap:wrap}
.card h3 a,.row h3 a{text-decoration:none}
.card h3 a:hover,.row h3 a:hover{color:var(--brand)}