/* =========================================================
   PREMIUM WEB DESIGN STUDIO — STYLES
   Light, warm-luxe palette. Elegant serif + clean sans.
   ========================================================= */

:root{
  /* ---- Colors: warm, light, premium ---- */
  --bg:            #fbf8f4;   /* page background, warm off-white */
  --bg-alt:        #f3ece1;   /* subtle alternate block */
  --bg-accent:     #1c1a17;   /* dark accent block (used sparingly) */
  --surface:       #ffffff;   /* cards */
  --ink:           #1c1a17;   /* main text */
  --ink-soft:      #6c6358;   /* secondary text */
  --line:          #e7ded2;   /* borders */
  --primary:       #b08968;   /* clay / camel — premium accent */
  --primary-deep:  #8a5a3a;   /* darker shade */
  --primary-soft:  #e8d7c4;   /* tint */
  --gold:          #c2a14d;   /* secondary accent for eyebrows */
  --shadow:        0 24px 60px -28px rgba(28,26,23,.18);
  --shadow-sm:     0 10px 28px -18px rgba(28,26,23,.18);
  --radius:        18px;
  --radius-sm:     12px;
  --max:           1240px;

  /* ---- Type ---- */
  --serif:   "Cormorant Garamond", Georgia, serif;
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul, ol{ list-style:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, select, textarea{ font:inherit; color:inherit; }

::selection{ background:var(--primary-soft); color:var(--primary-deep); }

/* ---------- Skip Link ---------- */
.skip-link{
  position:absolute; top:-100px; left:1rem;
  background:var(--ink); color:#fff;
  padding:.7rem 1.2rem; border-radius:var(--radius-sm);
  z-index:100; font-size:.9rem; font-weight:600;
  transition:top .25s ease;
}
.skip-link:focus{ top:1rem; }

/* ---------- Shared focus-visible (keyboard only) ---------- */
:focus-visible{ outline:none; }
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.logo:focus-visible,
.skip-link:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
  border-radius:6px;
}
.btn:focus-visible{ outline-offset:4px; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{
  outline:none; /* keep custom ring below */
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(176,137,104,.28);
}

/* ---------- Layout helpers ---------- */
.container{
  width:min(100% - 2.2rem, var(--max));
  margin-inline:auto;
}

.section{ padding:clamp(64px,9vw,144px) 0; }
.section--alt{ background:var(--bg-alt); }
.section--accent{
  background:linear-gradient(180deg, var(--bg) 0%, var(--primary-soft) 100%);
}

.section__head{
  max-width:720px;
  margin:0 auto clamp(56px,6vw,88px);
  text-align:center;
}
.eyebrow{
  font-family:var(--sans);
  font-size:.76rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:1.25rem;
  font-weight:600;
}
.section__title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2rem,5.5vw,3.6rem);
  line-height:1.08;
  letter-spacing:-.01em;
  margin-bottom:1.25rem;
}
.section__lead{
  font-size:clamp(1rem,1.4vw,1.18rem);
  color:var(--ink-soft);
  max-width:60ch;
  margin-inline:auto;
}

/* ---------- Buttons ---------- */
.btn{
  --pad-y:.95em; --pad-x:1.7em;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:var(--pad-y) var(--pad-x);
  border-radius:999px;
  font-weight:500;
  font-size:.98rem;
  letter-spacing:.01em;
  transition:transform .35s cubic-bezier(.22,1,.36,1),
             background .35s, color .35s, box-shadow .35s, border-color .35s;
  will-change:transform;
}
.btn--primary{
  background:var(--ink);
  color:#fff;
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.btn--primary::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, var(--primary-deep), var(--primary));
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  z-index:0;
}
.btn--primary > *{ position:relative; z-index:1; }
.btn--primary:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.btn--primary:hover::before{ transform:scaleX(1); }
.btn--primary:active{ transform:translateY(-1px) scale(.98); }
.btn--ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
}
.btn--ghost:hover{
  border-color:var(--ink);
  transform:translateY(-3px);
  box-shadow:var(--shadow-sm);
}
.btn--ghost:active{ transform:translateY(-1px) scale(.98); }
.btn--block{ width:100%; }

/* ---------- Header ---------- */
.header{
  position:fixed; top:0; left:0; right:0;
  z-index:60;
  background:rgba(251,248,244,.72);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .45s cubic-bezier(.22,1,.36,1),
             border-color .45s cubic-bezier(.22,1,.36,1),
             box-shadow .45s cubic-bezier(.22,1,.36,1),
             height .45s cubic-bezier(.22,1,.36,1);
}
.header.scrolled{
  background:rgba(251,248,244,.92);
  border-color:var(--line);
  box-shadow:0 10px 30px -22px rgba(28,26,23,.25);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:80px;
  transition:height .45s cubic-bezier(.22,1,.36,1);
}
.header.scrolled .header__inner{ height:72px; }
.header.scrolled .logo__img{ height:34px; width:34px; }
.logo{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink);
  line-height:1;
}
.logo__img{
  height:40px; width:40px;
  object-fit:cover;
  display:block;
  border-radius:50%;
  aspect-ratio:1/1;
  transition:height .45s cubic-bezier(.22,1,.36,1),
             box-shadow .45s cubic-bezier(.22,1,.36,1);
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.footer .logo__img{
  height:46px; width:46px;
}
.nav{
  display:flex; gap:clamp(1rem,2vw,2rem);
}
.nav a{
  font-size:.94rem;
  color:var(--ink-soft);
  position:relative;
  padding:.3em 0;
  transition:color .25s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--primary); transition:width .35s cubic-bezier(.22,1,.36,1);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ width:100%; }
.nav a.is-active{ color:var(--ink); font-weight:600; }
.nav a.is-active::after{ width:100%; }

.header__right{ display:flex; align-items:center; gap:1.2rem; }

.lang{ display:flex; gap:.15rem; }
.lang__btn{
  padding:.5em .6em;
  font-size:.74rem; font-weight:600; letter-spacing:.08em;
  color:var(--ink-soft);
  border-radius:6px;
  min-height:28px;
  transition:all .25s;
}
.lang__btn:hover{ color:var(--ink); background:var(--bg-alt); }
.lang__btn[aria-pressed="true"]{
  background:var(--ink); color:#fff;
}

.burger{ display:none; flex-direction:column; gap:5px; padding:10px; min-width:44px; min-height:44px; align-items:center; justify-content:center; }
.burger span{
  width:24px; height:1.5px; background:var(--ink);
  transition:transform .3s, opacity .3s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:144px 0 96px;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background:url("images/hero-digital.jpg") center/cover no-repeat;
  z-index:-1;
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
}
.hero__inner{ position:relative; max-width:880px; }
.eyebrow{ animation:fadeUp .9s .05s both; }
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:.75rem;
  margin-bottom:2rem;
  color:var(--gold);
}
.hero .eyebrow::before{
  content:""; width:32px; height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
}
.hero__title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.6rem, 7.5vw, 5.8rem);
  line-height:1.04;
  letter-spacing:-.02em;
  margin-bottom:2rem;
  color:#fff;
  max-width:16ch;
  animation:fadeUp .9s .12s both;
}
.hero__title-accent{
  font-style:italic;
  color:var(--gold);
  display:inline-block;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.hero__title-accent:hover{ transform:translateY(-2px) rotate(-1deg); }
.hero__subtitle{
  font-size:clamp(1.05rem,1.6vw,1.32rem);
  color:rgba(255,255,255,.82);
  max-width:54ch;
  margin-top:-1rem;
  margin-bottom:3rem;
  animation:fadeUp .9s .18s both;
}
.hero__cta{
  display:flex; gap:1rem; flex-wrap:wrap;
  margin-bottom:clamp(72px,9vw,112px);
  animation:fadeUp .9s .24s both;
}
.hero__cta .btn--ghost{
  color:#fff;
  border-color:rgba(255,255,255,.45);
}
.hero__cta .btn--ghost:hover{
  border-color:#fff;
  background:rgba(255,255,255,.10);
  box-shadow:none;
}

.hero__stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  padding-top:2.5rem;
  border-top:1px solid rgba(255,255,255,.22);
  animation:fadeUp .9s .3s both;
}
.stat{ display:flex; flex-direction:column; gap:.5rem; position:relative; }
.stat:not(:last-child)::after{
  content:""; position:absolute; right:-.5rem; top:8%; bottom:8%;
  width:1px; background:rgba(255,255,255,.20);
}
.stat__num{
  font-family:var(--sans);
  font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:600;
  color:#fff;
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.stat__label{
  font-size:.86rem; color:rgba(255,255,255,.72);
  letter-spacing:.01em;
}

.scroll-cue{
  position:absolute; left:50%; bottom:34px;
  transform:translateX(-50%);
  width:26px; height:42px;
  border:1.5px solid rgba(255,255,255,.65);
  border-radius:14px;
  display:flex; justify-content:center; padding-top:10px;
  opacity:.6; transition:opacity .3s;
}
.scroll-cue:hover{ opacity:1; }
.scroll-cue span{
  width:3px; height:8px; border-radius:2px; background:rgba(255,255,255,.75);
  animation:scrollPulse 1.6s infinite;
}

/* ---------- About ---------- */
.about__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(40px,6vw,90px);
  align-items:center;
}
.about__text .eyebrow{ color:var(--primary); }
.ticks{ margin-top:1.5rem; display:flex; flex-direction:column; gap:.7rem; }
.ticks li{
  position:relative; padding-left:1.8rem; color:var(--ink);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:10px; height:10px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--gold));
}

.about__media{ position:relative; }
.about__img{
  aspect-ratio:4/5;
  border-radius:var(--radius);
  background:
    linear-gradient(135deg, var(--primary-soft), #fff);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.about__img img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:2;
}
.about__img .ph-label{
  position:relative; z-index:1;
  text-align:center; color:var(--ink-soft); font-weight:500; font-size:.85rem;
}
.ph-label small{ color:var(--ink-soft); opacity:.7; font-weight:400; }
.about__media figcaption{
  margin-top:1rem; text-align:center;
  font-family:var(--serif); font-style:italic; color:var(--ink-soft);
}

/* ---------- Cards (Services) ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2.5rem 2rem 2.25rem;
  transition:transform .45s cubic-bezier(.22,1,.36,1),
             box-shadow .45s, border-color .45s, background .45s;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--primary), var(--gold));
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 56px -32px rgba(176,137,104,.32);
  border-color:transparent;
}
.card:hover::before{ transform:scaleX(1); }
.card__icon{
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:var(--primary);
  background:var(--primary-soft);
  border-radius:14px;
  margin-bottom:1.5rem;
  transition:transform .5s cubic-bezier(.22,1,.36,1), background .5s;
}
.card:hover .card__icon{ transform:rotate(-8deg) scale(1.08); background:color-mix(in srgb, var(--primary) 18%, #fff); }
.card h3{
  font-family:var(--serif); font-weight:600;
  font-size:1.6rem; margin-bottom:.75rem; line-height:1.15;
}
.card p{ color:var(--ink-soft); font-size:.98rem; }

/* ---------- Process ---------- */
.process{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1.5rem;
  counter-reset:step;
}
.step{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2.25rem 1.75rem;
  position:relative;
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s, border-color .45s;
}
.step:hover{ transform:translateY(-6px); box-shadow:var(--shadow-sm); border-color:transparent; }
.step::before{
  content:""; position:absolute; left:0; top:0; width:32px; height:2px;
  background:linear-gradient(90deg, var(--primary), var(--gold));
  border-radius:0 0 2px 0;
  opacity:0; transition:opacity .4s, width .4s;
}
.step:hover::before{ opacity:1; width:48px; }
.step__num{
  font-family:var(--sans); font-weight:600;
  font-size:2rem; color:var(--primary);
  display:block; margin-bottom:1rem;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.step h3{ font-family:var(--serif); font-weight:600; font-size:1.25rem; margin-bottom:.5rem; line-height:1.2; }
.step p{ color:var(--ink-soft); font-size:.92rem; }

/* ---------- Portfolio ---------- */
.portfolio{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.75rem;
}
.case{
  display:block;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s, border-color .5s;
}
.case:hover{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:transparent; }
.case__img{
  aspect-ratio:16/10;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--tint, #b08968) 30%, #fff),
      color-mix(in srgb, var(--tint, #b08968) 12%, #fff));
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.case__img img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:2;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.case:hover .case__img img{ transform:scale(1.06); }
.case__img::before{
  content:""; position:absolute; inset:0; z-index:3;
  background:linear-gradient(180deg, transparent 55%, rgba(28,26,23,.45) 100%);
  opacity:0; transition:opacity .5s;
}
.case:hover .case__img::before{ opacity:1; }
.case__img::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.7), transparent 50%);
}
.case__img .ph-label{
  position:relative; z-index:1;
  color:var(--ink-soft); font-weight:500; font-size:.9rem; text-align:center;
  transition:opacity .3s;
  pointer-events:none;
}
.case__img img.is-loaded ~ .ph-label,
.about__img img.is-loaded ~ .ph-label{ opacity:0; }
.case__img img.is-error,
.about__img img.is-error{ display:none; }
.case:nth-child(2) .case__img,
.case:nth-child(4) .case__img{ margin-top:2.4rem; } /* staggered masonry-like layout */

.case__meta{ padding:2rem 1.75rem 2.25rem; }
.case__tag{
  display:inline-block;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--primary); font-weight:600; margin-bottom:.75rem;
}
.case__meta h3{ font-family:var(--serif); font-weight:600; font-size:1.45rem; margin-bottom:.5rem; line-height:1.2; }
.case__meta p{ color:var(--ink-soft); font-size:.94rem; margin-bottom:1rem; }
.case__link{
  display:inline-flex; align-items:center; gap:.3em;
  font-size:.82rem; font-weight:600; letter-spacing:.04em;
  color:var(--primary); text-transform:uppercase;
  transition:gap .3s, color .3s;
}
.case:hover .case__link{ gap:.6em; color:var(--primary-deep); }

.portfolio__cta{ text-align:center; margin-top:3rem; }

/* ---------- Testimonials ---------- */
.testimonials{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.quote{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2.5rem 2.25rem 2.25rem;
  position:relative;
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s, border-color .45s;
}
.quote::before{
  content:"\201C"; position:absolute; top:.5rem; right:1.5rem;
  font-family:var(--serif); font-size:5rem; line-height:1;
  color:var(--primary-soft); pointer-events:none;
}
.quote:hover{ transform:translateY(-6px); box-shadow:var(--shadow-sm); border-color:transparent; }
.quote p{
  font-family:var(--serif);
  font-size:1.25rem; line-height:1.5; font-style:italic;
  margin-bottom:1.5rem; color:var(--ink); position:relative;
}
.quote footer{ display:flex; align-items:center; gap:.9rem; }
.quote__chip{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--gold));
  color:#fff; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif);
  flex-shrink:0;
}
.quote strong{ display:block; font-weight:600; font-size:.95rem; }
.quote small{ color:var(--ink-soft); font-size:.86rem; }

/* ---------- FAQ ---------- */
.faq__grid{
  display:grid;
  grid-template-columns:.7fr 1.4fr;
  gap:clamp(30px,5vw,80px);
  align-items:start;
}
.faq__item{
  border-bottom:1px solid var(--line);
  padding:1.4rem 0;
  cursor:pointer;
}
.faq__item summary{
  font-weight:500;
  font-size:1.08rem;
  list-style:none;
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem;
  transition:color .3s;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+";
  font-size:1.4rem; font-weight:300; color:var(--primary);
  transition:transform .35s;
}
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item summary:hover{ color:var(--primary); }
.faq__item p{ color:var(--ink-soft); margin-top:.8rem; font-size:.98rem; }

/* ---------- Contact ---------- */
.contact__grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(40px,6vw,90px);
  align-items:start;
}
.contact__list{ margin-top:2rem; display:flex; flex-direction:column; gap:1rem; }
.contact__list li{ display:flex; align-items:center; gap:.9rem; font-size:1.05rem; }
.contact__icon{
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.6);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary); font-size:1.05rem;
  flex-shrink:0;
}
.contact__list a{ transition:color .3s; }
.contact__list a:hover{ color:var(--primary); }

/* ---------- Form ---------- */
.form{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(2rem,3vw,2.75rem);
  box-shadow:var(--shadow-sm);
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.5rem; }
.field span{ font-size:.84rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.field input,
.field select,
.field textarea{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:1rem 1.125rem;
  transition:border-color .3s, box-shadow .3s, background .3s;
  width:100%;
  font-family:var(--sans);
}
.field input::placeholder,
.field textarea::placeholder{ color:color-mix(in srgb, var(--ink-soft) 70%, transparent); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(176,137,104,.18);
}
.field textarea{ resize:vertical; min-height:140px; }
.field--error input,
.field--error select,
.field--error textarea{
  border-color:#c0392b;
  background:rgba(192,57,43,.05);
}
.field--error input:focus,
.field--error select:focus,
.field--error textarea:focus{
  box-shadow:0 0 0 3px rgba(192,57,43,.18);
}
.field__error{
  font-size:.8rem; color:#c0392b; font-weight:500;
  display:none; align-items:center; gap:.4em;
  margin-top:.25rem;
}
.field--error .field__error{ display:flex; }
.form__note{
  font-size:.82rem; color:var(--ink-soft); text-align:center;
  margin-top:1rem;
}
.form__success{
  margin-top:1.5rem; padding:1.25rem 1.5rem; border-radius:var(--radius-sm);
  background:rgba(80,160,90,.14); color:#2e6a36; font-weight:500;
  display:flex; align-items:center; gap:.5rem;
  border:1px solid rgba(80,160,90,.3);
}
.form__success[hidden]{ display:none; }
.btn[disabled],
.btn.is-loading{
  opacity:.7; pointer-events:none;
}
.btn.is-loading::after{
  content:""; display:inline-block; width:14px; height:14px;
  border:2px solid currentColor; border-top-color:transparent;
  border-radius:50%; margin-left:.5em;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Footer ---------- */
.footer{
  background:var(--bg-accent);
  color:#e7ded2;
  padding:clamp(60px,7vw,90px) 0 32px;
}
.footer__inner{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:2.5rem;
  align-items:start;
}
.footer .logo{ color:#fff; }
.footer__brand p{ margin-top:1rem; color:#a89c8d; max-width:38ch; font-size:.96rem; }
.footer__nav, .footer__legal{ display:flex; flex-direction:column; gap:.85rem; }
.footer__nav a, .footer__legal a{ color:#c9bfb1; transition:color .3s, transform .3s; display:inline-block; }
.footer__nav a:hover, .footer__legal a:hover{ color:#fff; transform:translateX(3px); }
.footer__legal a{ font-size:.9rem; color:#9a8f80; }

.social-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:.65rem;
}
.social-row a{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#c9bfb1;
  border:1px solid rgba(255,255,255,.14);
  transition:color .35s, border-color .35s, transform .35s, background .35s;
}
.social-row a:hover{
  color:var(--gold);
  border-color:var(--gold);
  transform:translateY(-3px);
  background:rgba(194,161,77,.08);
}

.footer__credit{
  grid-column:1/-1; margin-top:2.4rem; padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; align-items:center;
  gap:1.5rem; flex-wrap:wrap;
  color:#9a8f80; font-size:.86rem;
}
.footer__credit sup{ font-size:.7em; vertical-align:super; }
.footer__designer{
  display:inline-flex; align-items:center; gap:.5rem;
}
.footer__designer .designer-logo{
  font-family:var(--serif); font-style:italic;
  color:var(--gold); letter-spacing:.02em;
}

/* ---------- Animations ---------- */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(24px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes scrollPulse{
  0%{ transform:translateY(0); opacity:1; }
  100%{ transform:translateY(14px); opacity:0; }
}

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* Stagger via IntersectionObserver-added class + CSS var */
.cards .card.reveal.in,
.process .step.reveal.in,
.testimonials .quote.reveal.in,
.portfolio .case.reveal.in,
.faq .faq__item.reveal.in{
  transition-delay:calc(var(--i, 0) * 90ms);
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .reveal.in{ transition-delay:0 !important; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1280px){
  :root{ --max:1180px; }
  .process{ grid-template-columns:repeat(5,1fr); gap:1rem; }
  .step{ padding:2rem 1.5rem; }
}

@media (max-width:1024px){
  .nav{ display:none; }
  .header__right .btn{ display:none; }
  .burger{ display:flex; }

  .hero__stats{ grid-template-columns:repeat(2,1fr); gap:1.6rem 2rem; }
  .about__grid,
  .contact__grid,
  .faq__grid{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .process{ grid-template-columns:repeat(2,1fr); }
  .testimonials{ grid-template-columns:1fr; }
  .portfolio{ grid-template-columns:1fr; }
  .case:nth-child(2) .case__img,
  .case:nth-child(4) .case__img{ margin-top:0; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1/-1; }
  .footer__legal{ grid-column:1/-1; flex-direction:row; flex-wrap:wrap; gap:1.5rem; }
}

@media (max-width:640px){
  .lang{ flex-wrap:wrap; gap:.25rem; }
  .form__row{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .process{ grid-template-columns:1fr; }
  .case:nth-child(2) .case__img,
  .case:nth-child(4) .case__img{ margin-top:0; }
  .footer__inner{ grid-template-columns:1fr; text-align:center; }
  .footer__nav, .footer__legal{ align-items:center; }
  .footer__legal{ flex-direction:row; justify-content:center; flex-wrap:wrap; gap:1.25rem; }
  .footer__credit{ flex-direction:column; text-align:center; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; min-height:48px; }
  .hero__stats{ gap:1.25rem; }
  .stat:not(:last-child)::after{ display:none; }
  .section__title{ font-size:2rem; }
  .hero__title{ font-size:clamp(2.4rem, 9vw, 4.2rem); }
}

/* ---------- Mobile nav drawer ---------- */
@media (max-width:1024px){
  .nav.is-open{
    display:flex; flex-direction:column;
    position:fixed; top:78px; left:0; right:0;
    background:rgba(251,248,244,.98);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    padding:1.6rem; gap:1.2rem;
    box-shadow:var(--shadow);
  }
  .nav.is-open a{ font-size:1.15rem; padding:.5em 0; min-height:44px; display:flex; align-items:center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}