/* ===== Base ===== */
:root{
  --bg:#f6f7fb;
  --ink:#0b1020;
  --muted:#5b6578;
  --accent:#1f9bbf;
  --accent-ink:#06232c;
  --paper:#ffffff;
  --line:#e6e9f2;
  --radius:16px;
  --shadow:0 10px 30px rgba(15,38,96,.08);
  --speed:.28s;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,textarea{font:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ===== Layout ===== */
.container{max-width:1200px;margin-inline:auto;padding-inline:20px}
.page{display:flex;flex-direction:column;gap:4rem}
.section-title{font-weight:800;letter-spacing:-.01em;font-size:clamp(1.5rem,2.8vw,2.1rem);text-align:left;margin-bottom:1rem}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(246,247,251,.7);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--line);transition:box-shadow var(--speed), background var(--speed)}
.site-header.with-shadow{box-shadow:var(--shadow)}
.header__row{display:flex;align-items:center;justify-content:space-between;padding-block:.9rem}
.logo{font-weight:800;display:inline-flex;align-items:center;gap:.6rem}
.logo__dot{width:10px;height:10px;border-radius:50%;background:var(--accent);display:inline-block;box-shadow:0 0 0 4px rgba(31,155,191,.18)}

.nav__list{display:flex;gap:1.4rem}
.nav__list a{position:relative;font-weight:600}
.nav__list a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--accent);transition:width var(--speed)}
.nav__list a:hover::after{width:100%}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;padding:.3rem .4rem}
.nav__toggle i{display:block;width:26px;height:2px;background:var(--ink);margin:6px 0;transition:transform var(--speed),opacity var(--speed)}
.nav__toggle.is-open i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav__toggle.is-open i:nth-child(2){opacity:0}
.nav__toggle.is-open i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width: 860px){
  .nav__toggle{display:block}
  .nav__list{position:fixed;inset:0 0 0 35%;background:var(--paper);border-left:1px solid var(--line);flex-direction:column;gap:1rem;padding:6rem 2rem;transform:translateX(100%);transition:transform var(--speed)}
  .nav__list.is-open{transform:translateX(0)}
  .no-scroll{overflow:hidden}
}

/* ===== Hero ===== */
.hero{padding-block:3rem;border-bottom:1px solid var(--line);background:
  radial-gradient(46rem 46rem at 10% -10%, rgba(31,155,191,.12), transparent),
  radial-gradient(36rem 36rem at 110% 10%, rgba(31,155,191,.08), transparent)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center}
.hero__copy h1{font-size:clamp(2.1rem,5vw,3.2rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.hero__copy p{color:var(--muted);max-width:58ch;margin-top:.8rem}
.u-underline{background:linear-gradient(180deg, transparent 70%, rgba(31,155,191,.28) 0) no-repeat}
.hero__media img{border-radius:20px;box-shadow:var(--shadow);border:1px solid var(--line)}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem}

.btn{display:inline-block;border-radius:999px;padding:.9rem 1.4rem;font-weight:800;letter-spacing:.01em;border:2px solid transparent;transition:transform var(--speed), background var(--speed), color var(--speed), border-color var(--speed)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{transform:translateY(-2px)}
.btn--ghost{border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}

@media (max-width: 980px){.hero__grid{grid-template-columns:1fr}}

/* ===== Work grid ===== */
.work{padding-block:2.5rem}
.work__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card__meta{padding:1rem 1rem 1.2rem}
.card__meta h3{font-size:1.06rem;margin-bottom:.2rem}
.card__meta p{color:var(--muted)}

/* ===== Case ===== */
.case{padding-block:2.8rem;border-block:1px solid var(--line);background:linear-gradient(180deg, rgba(31,155,191,.04), transparent)}
.case__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:center}
.case__text p{color:var(--muted);max-width:52ch}
.case__media img{border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow)}
@media (max-width: 980px){.case__grid{grid-template-columns:1fr}}

/* ===== Studio ===== */
.studio{padding-block:2.8rem}
.studio__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:1.6rem;align-items:start}
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.team__person{background:var(--paper);border:1px solid var(--line);border-radius:18px;text-align:center;padding:1rem;box-shadow:var(--shadow)}
.team__person img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%;border:6px solid #fff}
.team__person figcaption{display:flex;flex-direction:column;gap:.2rem;margin-top:.4rem}
.team__person span{color:var(--muted);font-size:.95rem}
@media (max-width: 980px){.studio__grid{grid-template-columns:1fr}}

/* ===== Services ===== */
.services{padding-block:2.8rem;border-top:1px solid var(--line)}
.services__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.svc{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:1.2rem;box-shadow:var(--shadow);position:relative}
.svc__num{position:absolute;top:.9rem;right:1rem;font-weight:800;opacity:.2}
.svc h3{margin-top:1.2rem}
.svc p{color:var(--muted)}

/* ===== Contact ===== */
.contact{padding-block:3rem;border-top:1px solid var(--line);background:
  radial-gradient(36rem 36rem at -10% -10%, rgba(31,155,191,.10), transparent)}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:start}
.contact__meta{margin-top:.8rem;display:grid;gap:.2rem;color:var(--muted)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form .full{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:.3rem}
.form input,.form textarea{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem;outline:none;
  transition:border-color var(--speed), box-shadow var(--speed)
}
.form input:focus,.form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,155,191,.2)}
@media (max-width: 980px){.contact__grid{grid-template-columns:1fr}.form{grid-template-columns:1fr}}

/* ===== Footer ===== */
.site-foot{padding:2.2rem 0;border-top:1px solid var(--line);background:#f3f5fb}
.foot__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot__nav{display:flex;gap:1rem;flex-wrap:wrap}