/* =========================================================================
   TIME TO COZY — Интерьерный декоратор Юлия Мечёва
   Shared stylesheet. Self-contained, no external builder dependencies.
   ========================================================================= */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@400;500;600&display=swap');

/* ---- Tokens ---- */
:root{
  --bg:            #ffffff;
  --bg-soft:       #f3f2ef;   /* warm light gray section */
  --bg-band:       #efeeea;   /* price bands */
  --ink:           #4a4641;   /* body text, warm gray */
  --ink-strong:    #2f2c28;   /* headings */
  --ink-soft:      #8a847c;   /* secondary / captions */
  --line:          #dcd9d3;
  --line-soft:     #e8e6e0;
  --dark:          #2b2926;   /* buttons */
  --dark-hover:    #423f3a;

  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Comfortaa', 'Trebuchet MS', sans-serif;

  --wrap:   1180px;
  --wrap-narrow: 720px;
  --ease:   cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset ---- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ color:var(--ink-strong); font-weight:400; margin:0; line-height:1.18; }

/* ---- Layout helpers ---- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.narrow{ max-width:var(--wrap-narrow); }
.section{ padding:78px 0; }
.section--soft{ background:var(--bg-soft); }
.center{ text-align:center; }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.scrolled{
  border-bottom-color:var(--line-soft);
  box-shadow:0 6px 24px -18px rgba(0,0,0,.35);
}
.header-inner{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:20px 28px 16px;
  transition:padding .3s var(--ease);
}
.site-header.scrolled .header-inner{ padding:12px 28px; }

/* Logo */
.logo{ display:flex; align-items:center; gap:13px; transition:transform .3s var(--ease); }
.logo__icon{ width:46px; height:36px; flex:none; color:var(--ink-strong); transition:all .3s var(--ease); }
.site-header.scrolled .logo__icon{ width:38px; height:30px; }
.logo__text{ display:flex; flex-direction:column; align-items:flex-start; line-height:1; }
.logo__name{
  font-family:var(--serif);
  font-size:30px; font-weight:500;
  letter-spacing:.16em; color:var(--ink-strong);
  white-space:nowrap;
  transition:font-size .3s var(--ease);
}
.site-header.scrolled .logo__name{ font-size:25px; }
.logo__sub{
  font-size:8.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:5px; padding-left:2px;
  white-space:nowrap;
}
.logo__text{ flex:none; }

/* Nav */
.nav{ display:flex; align-items:center; gap:34px; }
.nav a{
  position:relative;
  font-size:13px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink); padding:4px 0;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px;
  height:1px; background:var(--ink-strong);
  transition:right .3s var(--ease);
}
.nav a:hover{ color:var(--ink-strong); }
.nav a:hover::after,
.nav a.active::after{ right:0; }

/* Dropdown */
.has-drop{ position:relative; }
.has-drop > a .caret{ display:inline-block; margin-left:5px; transition:transform .3s var(--ease); font-size:10px; }
.has-drop:hover > a .caret{ transform:rotate(180deg); }
.drop{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  min-width:210px; padding:10px 0;
  background:#fff; border:1px solid var(--line-soft); border-radius:14px;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.has-drop:hover .drop{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(4px); }
.drop a{
  display:block; text-transform:none; letter-spacing:.02em; font-size:13.5px;
  padding:8px 22px; color:var(--ink);
}
.drop a::after{ display:none; }
.drop a:hover{ background:var(--bg-soft); color:var(--ink-strong); }

/* Mobile menu button */
.burger{
  display:none; position:absolute; right:22px; top:22px;
  width:34px; height:26px; background:none; border:none; padding:0;
}
.burger span{ display:block; height:2px; background:var(--ink-strong); margin:6px 0; transition:.3s var(--ease); border-radius:2px; }
.burger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* =========================================================================
   TYPOGRAPHY BLOCKS
   ========================================================================= */
.eyebrow{
  font-size:13px; letter-spacing:.04em; color:var(--ink-soft);
  margin-bottom:14px;
}
.h-hero{ font-size:clamp(38px,5vw,62px); font-weight:300; letter-spacing:.01em; }
.h-section{ font-size:clamp(30px,3.4vw,42px); font-weight:300; }
.h-block{ font-size:clamp(26px,2.6vw,34px); font-weight:400; }
.lead{ font-size:17px; color:var(--ink); }
.muted{ color:var(--ink-soft); }
p{ margin:0 0 1em; text-wrap:pretty; }

/* lists */
.tick{ list-style:none; padding:0; margin:0; }
.tick li{ position:relative; padding-left:20px; margin:9px 0; }
.tick li::before{
  content:""; position:absolute; left:2px; top:12px;
  width:6px; height:6px; border-radius:50%; background:var(--ink-soft);
}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:13px; letter-spacing:.13em; text-transform:uppercase;
  padding:17px 40px; border-radius:40px; border:1px solid transparent;
  transition:background .3s var(--ease), color .3s var(--ease), transform .25s var(--ease), border-color .3s var(--ease);
}
.btn--dark{ background:var(--dark); color:#fff; }
.btn--dark:hover{ background:var(--dark-hover); transform:translateY(-2px); }
.btn--ghost{
  background:transparent; color:var(--ink-strong);
  border-color:var(--line); width:100%; max-width:680px; padding:19px 30px;
}
.btn--ghost:hover{ border-color:var(--ink-strong); background:#fff; transform:translateY(-2px); }
.btn .ic{ width:18px; height:18px; flex:none; }

/* =========================================================================
   IMAGE SLOTS / PLACEHOLDERS
   ========================================================================= */
image-slot{
  --slot-bg:#efece6;
  display:block; width:100%; height:100%;
  background:
    repeating-linear-gradient(135deg, #efece6 0 14px, #eae6df 14px 28px);
  color:#a89f93;
}
image-slot::part(placeholder){ font-family:var(--sans); font-size:12px; letter-spacing:.04em; }
.media{ overflow:hidden; }
.media image-slot{ transition:transform .9s var(--ease); }
.media:hover image-slot{ transform:scale(1.04); }

/* =========================================================================
   HERO (full-bleed banner image)
   ========================================================================= */
.hero{ width:100%; }
.hero image-slot{ height:clamp(360px,46vw,560px); }

/* =========================================================================
   INTRO / CONTACTS shared centered column
   ========================================================================= */
.intro{ text-align:center; }
.intro .h-hero{ margin-bottom:8px; }
.intro__name{ font-size:clamp(22px,2.2vw,28px); color:var(--ink-strong); font-weight:400; margin-bottom:26px; }
.intro__body{ max-width:560px; margin:0 auto; }
.intro__body .tick{ display:inline-block; text-align:left; margin:6px 0; }

/* =========================================================================
   THREE LINK COLUMNS
   ========================================================================= */
.tri{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; text-align:center; }
.tri__item .eyebrow{ margin-bottom:10px; }
.tri__item h3{ font-size:clamp(24px,2.4vw,32px); font-weight:300; margin-bottom:14px; }
.link-more{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; color:var(--ink-strong); border-bottom:1px solid var(--line);
  padding-bottom:3px; transition:.3s var(--ease);
}
.link-more .arr{ transition:transform .3s var(--ease); }
.link-more:hover{ border-color:var(--ink-strong); }
.link-more:hover .arr{ transform:translateX(5px); }

/* =========================================================================
   GALLERY GRID (home + portfolio)
   ========================================================================= */
.gallery{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.gallery .cell{ position:relative; cursor:pointer; }
.gallery .cell .media{ width:100%; }
.gallery .span2{ grid-column:1 / -1; }
.ar-43{ aspect-ratio:4/3; }
.ar-pan{ aspect-ratio:16/6.4; }

/* Portfolio masonry */
.masonry{ columns:3; column-gap:18px; }
.masonry .cell{ break-inside:avoid; margin:0 0 18px; position:relative; cursor:pointer; border-radius:2px; overflow:hidden; }
.masonry image-slot{ display:block; }

/* Portfolio filters */
.filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:0 0 44px; }
.filters button{
  font-family:var(--sans); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  background:none; border:1px solid var(--line); color:var(--ink-soft);
  padding:10px 22px; border-radius:30px; transition:.3s var(--ease);
}
.filters button:hover{ color:var(--ink-strong); border-color:var(--ink-soft); }
.filters button.active{ background:var(--dark); color:#fff; border-color:var(--dark); }

/* =========================================================================
   SERVICES
   ========================================================================= */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.split .media{ aspect-ratio:4/3.1; }
.price-big{ font-size:clamp(34px,4vw,48px); font-weight:300; color:var(--ink-strong); }

.cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.card .media{ aspect-ratio:3/2.3; margin-bottom:20px; }
.card .tag{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.card h3{ font-size:clamp(24px,2.4vw,30px); font-weight:300; margin:6px 0 16px; }
.card .tick li{ font-size:15px; }

/* price band */
.band{ background:var(--bg-band); }
.band .row3{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:center; }
.band .row3 .num{ font-size:clamp(30px,3.4vw,40px); font-weight:300; color:var(--ink-strong); }
.band .row3 .note{ font-size:13px; color:var(--ink-soft); margin-top:8px; max-width:280px; margin-left:auto; margin-right:auto; }

/* CTA block */
.cta{ text-align:center; }
.cta h2{ margin-bottom:16px; }
.cta p{ max-width:560px; margin:0 auto 30px; color:var(--ink-soft); font-size:15px; }

/* =========================================================================
   REVIEWS
   ========================================================================= */
.reviews{ display:flex; flex-direction:column; gap:88px; }
.review{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.review .media{ aspect-ratio:4/3.4; }
.review.flip .r-media{ order:2; }
.review.flip .r-text{ order:1; }
.r-text{ text-align:center; padding:0 10px; }
.r-name{ font-size:clamp(22px,2.2vw,28px); font-weight:400; color:var(--ink-strong); }
.r-source{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; word-break:break-all; }
.r-divider{ width:1px; height:42px; background:var(--line); margin:16px auto 20px; }
.r-body{ font-size:15px; }
.review-top{ text-align:center; margin-bottom:60px; }
.ghost-link{ display:inline-flex; align-items:center; gap:9px; color:var(--ink-soft); font-size:14px; transition:.3s var(--ease); }
.ghost-link:hover{ color:var(--ink-strong); }

/* =========================================================================
   CONTACTS
   ========================================================================= */
.portrait{ width:min(420px,80vw); aspect-ratio:1/1.12; margin:0 auto 8px; }
.phone{ font-size:clamp(30px,3.6vw,42px); font-weight:300; color:var(--ink-strong); letter-spacing:.02em; }
.contact-actions{ display:flex; flex-direction:column; gap:18px; align-items:center; max-width:680px; margin:40px auto 0; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{ padding:60px 0 50px; border-top:1px solid var(--line-soft); }
.socials{ display:flex; justify-content:center; gap:18px; margin-bottom:34px; }
.socials a{
  width:42px; height:42px; border-radius:50%; background:var(--dark); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.socials a:hover{ transform:translateY(-3px); background:var(--dark-hover); }
.socials .ic{ width:19px; height:19px; }
.copyright{ max-width:920px; margin:0 auto; text-align:center; font-size:12.5px; color:var(--ink-soft); line-height:1.7; }
.copyright a{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
.policy{ text-align:center; margin-top:24px; }
.policy a{ font-size:13px; color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; }

/* =========================================================================
   LIGHTBOX
   ========================================================================= */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(28,26,24,.94); align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s var(--ease);
}
.lightbox.open{ display:flex; opacity:1; }
.lightbox img{ max-width:88vw; max-height:86vh; border-radius:4px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lightbox .lb-close{ position:absolute; top:26px; right:32px; color:#fff; font-size:34px; background:none; border:none; line-height:1; }
.lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); color:#fff; background:rgba(255,255,255,.08); border:none; width:54px; height:54px; border-radius:50%; font-size:24px; transition:.25s var(--ease); }
.lightbox .lb-nav:hover{ background:rgba(255,255,255,.2); }
.lightbox .lb-prev{ left:26px; } .lightbox .lb-next{ right:26px; }

/* =========================================================================
   SCROLL REVEAL
   ========================================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
  .section{ padding:56px 0; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,82vw);
    flex-direction:column; align-items:flex-start; gap:6px;
    background:#fff; padding:96px 30px 30px; transform:translateX(105%);
    transition:transform .4s var(--ease); box-shadow:-20px 0 60px -30px rgba(0,0,0,.5); z-index:55;
  }
  .nav.open{ transform:none; }
  .nav a{ font-size:15px; padding:12px 0; width:100%; }
  .drop{ position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
         box-shadow:none; border:none; padding:0 0 0 14px; min-width:0; }
  .has-drop:hover .drop{ transform:none; }
  .burger{ display:block; }
  .tri, .cards3, .band .row3{ grid-template-columns:1fr; gap:34px; }
  .split, .review, .review.flip .r-media, .review.flip .r-text{ grid-template-columns:1fr; gap:30px; order:0; }
  .review .r-media{ order:0; }
  .gallery{ gap:12px; }
  .masonry{ columns:2; }
}
@media (max-width:560px){
  .masonry{ columns:1; }
  .gallery{ grid-template-columns:1fr; }
  .cell.tall{ grid-row:span 1; }
  .logo__name{ font-size:24px; }
  .btn{ padding:15px 28px; }
}