/* ==========================================================================
   Vastukala — Interior Design Studio
   One stylesheet for all ten pages.

   1.  Tokens
   2.  Reset & base
   3.  Utilities / layout
   4.  Buttons, headings, eyebrow
   5.  Preloader, back-to-top, cursor bits
   6.  Header (topbar, plate nav, info band, drawer, search)
   7.  Hero slider (home)
   8.  Page banner (inner pages)
   9.  Home sections: about, services, stats, works, awards, process,
       team, partners, testimonials, blog, newsletter
   10. Inner-page components: cards, sidebar, accordion, pagination,
       article prose, forms, gallery, map, filter
   11. Footer
   12. Responsive
   13. Motion / print
   ========================================================================== */

/* ============================ 1. TOKENS ================================= */
:root{
  --ink:        #14110f;   /* headings, dark surfaces */
  --ink-soft:   #241f1b;
  --body:       #6b645c;   /* body copy */
  --muted:      #918980;
  --cream:      #f6f2ec;   /* section wash */
  --cream-deep: #ece5da;
  --white:      #ffffff;
  --line:       #e5ded3;
  --line-dark:  rgba(255,255,255,.14);

  --accent:      #e3242b;  /* the red from the brief */
  --accent-dark: #bd1a20;
  --accent-soft: rgba(227,36,43,.10);

  --sand:  #b9a284;        /* secondary warm tone */
  --olive: #3f4438;

  --font: "Albert Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --container: 1400px;
  --plate: 1080px;         /* width of the white nav plate */
  --gutter: 20px;

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 20px;
  --r-full: 999px;

  --shadow-sm: 0 4px 18px rgba(20,17,15,.06);
  --shadow-md: 0 18px 48px rgba(20,17,15,.10);
  --shadow-lg: 0 30px 80px rgba(20,17,15,.16);

  --ease: cubic-bezier(.22,.61,.36,1);
  --t: .35s var(--ease);

  --header-h: 210px;       /* topbar + plate + info band */
}

/* ========================= 2. RESET & BASE ============================= */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.62;
  color:var(--body);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body.is-locked{ overflow:hidden; }

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

h1,h2,h3,h4,h5,h6{
  margin:0 0 .5em;
  color:var(--ink);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.02em;
}
h1{ font-size:clamp(2.6rem,6vw,4.6rem); }
h2{ font-size:clamp(2rem,3.6vw,3.1rem); }
h3{ font-size:clamp(1.4rem,2vw,1.85rem); }
h4{ font-size:1.3rem; }
h5{ font-size:1.1rem; }
h6{ font-size:1rem; font-weight:600; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--accent); color:#fff; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ===================== 3. UTILITIES / LAYOUT =========================== */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{ max-width:980px; }
.container--plate{ max-width:calc(var(--plate) + var(--gutter)*2); }

.section{ padding:88px 0; }
.section--tight{ padding:64px 0; }
.section--cream{ background:var(--cream); }
.section--dark{ background:var(--ink); color:rgba(255,255,255,.72); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{ color:#fff; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.grid{ display:grid; gap:26px; }

.lede{ font-size:1.06rem; }

.center{ text-align:center; }

/* section head ---------------------------------------------------------- */
.head{ max-width:760px; margin-bottom:48px; }
.head--center{ margin-inline:auto; text-align:center; }
.head p{ color:var(--body); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:16px;
  font-size:.76rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--accent); flex:none;
}
.head--center .eyebrow::after{
  content:""; width:26px; height:2px; background:var(--accent); flex:none;
}
.section--dark .eyebrow{ color:var(--accent); }

/* reveal on scroll ------------------------------------------------------ */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.09s; }
.reveal[data-delay="2"]{ transition-delay:.18s; }
.reveal[data-delay="3"]{ transition-delay:.27s; }
.reveal[data-delay="4"]{ transition-delay:.36s; }

/* ======================= 4. BUTTONS & BITS ============================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:17px 32px;
  font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  border-radius:var(--r-sm);
  background:var(--accent); color:#fff;
  transition:background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.btn:hover{ background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 12px 26px rgba(227,36,43,.28); }
.btn svg{ width:20px; height:12px; }
.btn svg path{ stroke:currentColor; stroke-width:1.6; fill:none; }

.btn--dark{ background:var(--ink); }
.btn--dark:hover{ background:#000; box-shadow:0 12px 26px rgba(20,17,15,.28); }

.btn--ghost{
  background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--ink);
}
.btn--ghost:hover{ background:var(--ink); color:#fff; box-shadow:none; }

.btn--light{ background:#fff; color:var(--ink); }
.btn--light:hover{ background:var(--accent); color:#fff; }

.btn--block{ width:100%; }

/* underlined text link with arrow */
.link{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink);
  padding-bottom:4px;
  border-bottom:2px solid currentColor;
  transition:color var(--t), gap var(--t);
}
.link:hover{ color:var(--accent); gap:16px; }
.link svg{ width:18px; height:10px; }
.link svg path{ stroke:currentColor; stroke-width:1.8; fill:none; }

.link--light{ color:#fff; }
.link--light:hover{ color:#fff; opacity:.8; }

/* small round icon buttons */
.round{
  width:42px; height:42px; border-radius:var(--r-full);
  display:grid; place-items:center;
  background:var(--cream); color:var(--ink);
  transition:background var(--t), color var(--t), transform var(--t);
}
.round:hover{ background:var(--accent); color:#fff; transform:translateY(-3px); }
.round svg{ width:16px; height:16px; }

.socials{ display:flex; gap:10px; }

/* =============== 5. PRELOADER / BACK TO TOP ============================ */
.preloader{
  position:fixed; inset:0; z-index:2000;
  display:grid; place-items:center; gap:22px; align-content:center;
  background:var(--ink);
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__mark{
  font-size:2.2rem; font-weight:700; letter-spacing:.3em; color:#fff;
  padding-left:.3em;
}
.preloader__bar{ width:170px; height:2px; background:rgba(255,255,255,.18); overflow:hidden; }
.preloader__bar span{
  display:block; height:100%; width:40%; background:var(--accent);
  animation:load 1.1s var(--ease) infinite;
}
@keyframes load{ 0%{ transform:translateX(-110%);} 100%{ transform:translateX(360%);} }

.to-top{
  position:fixed; right:22px; bottom:22px; z-index:900;
  width:48px; height:48px; border-radius:var(--r-full);
  display:grid; place-items:center;
  background:var(--accent); color:#fff;
  box-shadow:0 10px 26px rgba(227,36,43,.34);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:all var(--t);
}
.to-top.is-on{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--ink); }
.to-top svg{ width:16px; height:16px; }
.to-top svg path{ stroke:currentColor; stroke-width:2; fill:none; }

/* ========================== 6. HEADER ================================== */
/* The dark topbar colour is carried by the header itself, so it runs unbroken
   from the very top down to the end of the info band, behind the white plate
   and the strips either side of it. */
.header{
  position:absolute; inset:0 0 auto; z-index:800;
  background:var(--ink);
}
.header.is-inner{ position:relative; }

/* -- announcement topbar -- */
.topbar{
  color:rgba(255,255,255,.66);
  font-size:.85rem;
  padding:12px 0;
  text-align:center;
}
.topbar strong{ color:#fff; font-weight:600; }
.topbar a{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.topbar a:hover{ color:var(--accent); }

/* -- white plate holding logo + nav -- */
.plate-wrap{ position:relative; z-index:3; }
.plate{
  max-width:var(--plate);
  margin-inline:auto;
  background:#fff;
  box-shadow:var(--shadow-sm);
  padding:0 34px;
  display:flex; align-items:center; gap:26px;
  height:78px;
}

.logo{ display:flex; align-items:center; gap:12px; flex:none; }
.logo__mark{ width:40px; height:40px; flex:none; color:var(--accent); }
.logo__mark svg{ width:100%; height:100%; }
.logo__text{ line-height:1; }
.logo__name{
  display:block; font-size:1.62rem; font-weight:800; color:var(--ink); letter-spacing:-.03em;
}
.logo__tag{
  display:block; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-top:3px;
}
.logo--light .logo__name{ color:#fff; }
.logo--light .logo__tag{ color:rgba(255,255,255,.55); }

.nav{ margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:22px; }
.nav__link{
  position:relative;
  white-space:nowrap;      /* keep "About Us" on one line */
  font-size:.79rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink);
  padding:8px 0;
  transition:color var(--t);
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:2px; width:0; height:2px;
  background:var(--accent); transition:width var(--t);
}
.nav__link:hover,.nav__link.is-active{ color:var(--accent); }
.nav__link.is-active::after,.nav__link:hover::after{ width:100%; }

.nav__foot{ display:none; }

.header__actions{ display:flex; align-items:center; gap:8px; flex:none; }
.icon-btn{
  width:38px; height:38px; display:grid; place-items:center;
  color:var(--ink); border-radius:var(--r-full);
  transition:color var(--t), background var(--t);
}
.icon-btn:hover{ color:var(--accent); background:var(--cream); }
.icon-btn svg{ width:19px; height:19px; }
.icon-btn svg circle,.icon-btn svg path{ stroke:currentColor; stroke-width:1.7; fill:none; }

.cart{ position:relative; padding-left:14px; margin-left:6px; }
.cart::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:24px; background:var(--line);
}
.cart__count{
  font-size:.78rem; font-weight:700; color:var(--accent); margin-left:2px;
}

.burger{ display:none; width:38px; height:38px; place-items:center; }
.burger span{
  display:block; width:20px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform var(--t), opacity var(--t);
}
.burger span + span{ margin-top:5px; }
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav__close{ display:none; }

/* -- info band beneath the plate -- */
.header__info{
  background:#fff;           /* white band, flush with the white plate above */
  margin-top:0;              /* band butts straight up against the plate */
  padding:18px 0 16px;
  position:relative; z-index:2;
}

.info-row{
  max-width:var(--plate);
  margin-inline:auto;
  display:flex; align-items:center; gap:0;
}
.info{
  display:flex; align-items:center; gap:14px;
  padding:6px 26px;
  flex:1 1 0;
  border-right:1px solid rgba(20,17,15,.10);
}
.info:first-child{ padding-left:0; }
.info__icon{ width:34px; height:34px; color:var(--accent); flex:none; }
.info__icon svg{ width:100%; height:100%; }
.info__icon svg *{ stroke:currentColor; stroke-width:1.3; fill:none; }
.info__title{
  display:block; font-size:.98rem; font-weight:700; color:var(--ink); line-height:1.2;
}
.info__sub{ display:block; font-size:.82rem; color:var(--muted); margin-top:3px; }

.info-row .socials{ padding-left:26px; flex:none; }
.info-row .round{
  width:38px; height:38px; background:var(--cream); color:var(--ink); box-shadow:none;
}
.info-row .round:hover{ background:var(--accent); color:#fff; }

/* -- sticky clone state -- */
.header.is-stuck{
  position:fixed; top:0; left:0; right:0;
  animation:drop .45s var(--ease);
  background:transparent;
}
.header.is-stuck .topbar,
.header.is-stuck .header__info{ display:none; }
.header.is-stuck .plate{
  max-width:var(--container); box-shadow:var(--shadow-md);
}
@keyframes drop{ from{ transform:translateY(-100%);} to{ transform:none;} }

/* -- inline search -- */
.header__search{
  position:absolute; inset:0 34px; z-index:5;
  display:flex; align-items:center; gap:12px;
  background:#fff;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:all var(--t);
}
.header__search.is-open{ opacity:1; visibility:visible; transform:none; }
.header__search input{
  flex:1; border:0; background:none; font-size:1.05rem; padding:10px 0;
}
.header__search input::placeholder{ color:var(--muted); }
.header__search button{ color:var(--ink); }
.header__search button svg{ width:20px; height:20px; }
.header__search button svg path{ stroke:currentColor; stroke-width:1.7; fill:none; }

.nav-backdrop{
  position:fixed; inset:0; z-index:790;
  background:rgba(20,17,15,.55);
  opacity:0; visibility:hidden; transition:all var(--t);
}
.nav-backdrop.is-on{ opacity:1; visibility:visible; }

/* ========================== 7. HERO ==================================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  background:var(--ink);
  overflow:hidden;
  padding:calc(var(--header-h) + 40px) 0 150px;
}

.hero__media{ position:absolute; inset:0; }
.hero__img{
  position:absolute; inset:0;
  opacity:0; transition:opacity 1.1s var(--ease);
}
.hero__img.is-active{ opacity:1; }
.hero__img img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06);
  transition:transform 7s linear;
}
.hero__img.is-active img{ transform:scale(1); }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(10,9,8,.72) 0%,rgba(10,9,8,.45) 45%,rgba(10,9,8,.55) 100%);
}

.hero__inner{ position:relative; z-index:2; width:100%; }

/* copy sits in the right half, exactly as the reference */
.hero__copy{
  max-width:560px;
  margin-left:auto;
  margin-right:6%;
  color:rgba(255,255,255,.82);
}
.hero__slide{
  display:none;
}
.hero__slide.is-active{ display:block; }
.hero__slide h1{
  color:#fff;
  font-size:clamp(3rem,7vw,5.6rem);
  font-weight:800;
  letter-spacing:-.035em;
  margin-bottom:.32em;
}
.hero__slide h1 span{ color:var(--accent); }
.hero__slide p{
  font-size:1.08rem;
  max-width:470px;
  margin-bottom:2.2em;
}
.hero__cta{ display:flex; align-items:center; gap:34px; flex-wrap:wrap; }

/* staggered entrance for the active slide */
.hero__slide.is-active h1{ animation:heroUp .8s var(--ease) both; }
.hero__slide.is-active p{ animation:heroUp .8s .13s var(--ease) both; }
.hero__slide.is-active .hero__cta{ animation:heroUp .8s .26s var(--ease) both; }
@keyframes heroUp{ from{ opacity:0; transform:translateY(28px);} to{ opacity:1; transform:none;} }

/* edge arrows */
.hero__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:34px; height:56px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.10);
  color:#fff;
  transition:background var(--t), color var(--t);
}
.hero__arrow:hover{ background:var(--accent); }
.hero__arrow--prev{ left:0; }
.hero__arrow--next{ right:0; }
.hero__arrow svg{ width:16px; height:16px; }
.hero__arrow svg path{ stroke:currentColor; stroke-width:1.8; fill:none; }

/* circular slide thumbs peeking off the bottom edge */
.hero__thumbs{
  position:absolute; left:50%; bottom:-64px; transform:translateX(-50%); z-index:5;
  display:flex; gap:56px;
}
.hero__thumb{
  width:128px; height:128px; border-radius:var(--r-full);
  overflow:hidden;
  box-shadow:0 0 0 6px #fff;
  transition:box-shadow var(--t), transform var(--t);
}
.hero__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.hero__thumb:hover img{ transform:scale(1.08); }
.hero__thumb.is-active{ box-shadow:0 0 0 6px var(--accent); }

.hero__scroll{
  position:absolute; left:40px; bottom:46px; z-index:4;
  writing-mode:vertical-rl;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
  display:flex; align-items:center; gap:14px;
}
.hero__scroll::after{
  content:""; width:1px; height:56px; background:rgba(255,255,255,.35);
  animation:pulse 2s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* ======================= 8. PAGE BANNER ================================ */
.page-banner{
  position:relative;
  padding:96px 0 100px;
  background:var(--ink);
  overflow:hidden;
  text-align:center;
}
.page-banner__bg{ position:absolute; inset:0; opacity:.28; }
.page-banner__bg img{ width:100%; height:100%; object-fit:cover; }
.page-banner .container{ position:relative; z-index:2; }
.page-banner h1{ color:#fff; font-size:clamp(2.4rem,5vw,3.7rem); margin-bottom:.35em; }

.crumbs{
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
  font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.crumbs a:hover{ color:var(--accent); }
.crumbs li:not(:last-child)::after{ content:"/"; margin-left:10px; color:rgba(255,255,255,.35); }
.crumbs li{ display:flex; gap:10px; }
.crumbs [aria-current]{ color:var(--accent); }

/* ==================== 9. HOME / SHARED SECTIONS ======================== */

/* --- about split ------------------------------------------------------- */
.about{ display:grid; gap:52px; align-items:center; }
.about__media{ position:relative; display:grid; gap:18px; grid-template-columns:1fr 1fr; }
.about__media img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r-md); }
.about__media figure:first-child{ grid-row:span 2; }
.about__media figure:first-child img{ height:100%; min-height:420px; }
.about__media figure:nth-child(2) img{ height:240px; }
.about__media figure:nth-child(3) img{ height:240px; }

.about__badge{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:118px; height:118px; border-radius:var(--r-full);
  background:var(--accent); color:#fff;
  display:grid; place-content:center; text-align:center;
  box-shadow:0 18px 40px rgba(227,36,43,.35);
}
.about__badge b{ display:block; font-size:2rem; line-height:1; }
.about__badge span{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; }

.play{
  position:absolute; right:-22px; bottom:34px;
  width:78px; height:78px; border-radius:var(--r-full);
  background:#fff; color:var(--accent);
  display:grid; place-items:center;
  box-shadow:var(--shadow-md);
  transition:transform var(--t), background var(--t), color var(--t);
}
.play:hover{ background:var(--accent); color:#fff; transform:scale(1.06); }
.play svg{ width:22px; height:22px; margin-left:3px; }
.play svg path{ fill:currentColor; }
.play::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:1px solid var(--accent);
  animation:ring 2.2s var(--ease) infinite;
}
@keyframes ring{ 0%{ transform:scale(1); opacity:.7;} 100%{ transform:scale(1.5); opacity:0;} }

.ticks{ margin:26px 0 32px; display:grid; gap:12px; }
.ticks li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink); font-weight:600; }
.ticks svg{ width:20px; height:20px; flex:none; color:var(--accent); margin-top:3px; }
.ticks svg path{ stroke:currentColor; stroke-width:2; fill:none; }

.about__foot{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid var(--line);
}
.signature{ line-height:1.3; }
.signature b{ display:block; color:var(--ink); }
.signature span{ font-size:.85rem; }

/* --- service cards ----------------------------------------------------- */
.services{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

.service{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:38px 32px 34px;
  overflow:hidden;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.service::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t);
}
.service:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.service:hover::before{ transform:scaleX(1); }
.service__num{
  position:absolute; right:26px; top:22px;
  font-size:2.6rem; font-weight:800; color:var(--cream-deep); line-height:1;
}
.service__icon{
  width:62px; height:62px; border-radius:var(--r-md);
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent);
  margin-bottom:22px;
  transition:background var(--t), color var(--t);
}
.service:hover .service__icon{ background:var(--accent); color:#fff; }
.service__icon svg{ width:28px; height:28px; }
.service__icon svg *{ stroke:currentColor; stroke-width:1.4; fill:none; }
.service h3{ font-size:1.24rem; margin-bottom:.5em; }
.service p{ font-size:.96rem; margin-bottom:1.2em; }
.service .link{ font-size:.74rem; border-bottom-width:1.5px; }

/* --- stats -------------------------------------------------------------
   Four columns split by hairlines. The label sits at one end of the cell and
   the figure at the other, and every second column flips so the labels
   zig-zag down the row. The 1px grid gap over a line-coloured background is
   what draws the dividers, so no cell needs its own border.               */
.stats{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;
  background:var(--line);
  text-align:left;
}
.stat{
  display:flex; flex-direction:column; justify-content:space-between; gap:40px;
  min-height:330px;
  padding:36px 34px;
  background:var(--white);
}
.stat:nth-child(even){ flex-direction:column-reverse; }
.section--cream .stat{ background:#faf8f5; }
.section--dark .stat{ background:#211d1a; }

.stat__label{
  display:flex; align-items:center; gap:11px;
  font-size:.84rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink);
}
.stat__label::before{
  content:""; flex:none;
  width:9px; height:9px; background:var(--accent);
}
.section--dark .stat__label{ color:#fff; }

.stat b{
  display:block; margin-bottom:16px;
  font-size:clamp(2.8rem,4.6vw,3.9rem); font-weight:800; color:var(--ink);
  line-height:.95; letter-spacing:-.045em;
}
.section--dark .stat b{ color:#fff; }
.stat b i{ font-style:normal; }
.stat p{ font-size:.97rem; max-width:32ch; }

/* --- recent works (numbered rows) -------------------------------------- */
.works{ border-top:1px solid var(--line); }
.work{
  position:relative;
  display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center;
  padding:30px 0;
  border-bottom:1px solid var(--line);
  transition:padding var(--t);
}
.work__num{
  font-size:.9rem; font-weight:700; color:var(--muted); letter-spacing:.1em;
  width:44px;
}
.work h3{ margin:0; transition:color var(--t); }
.work__meta{ display:block; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
.work__go{
  width:52px; height:52px; border-radius:var(--r-full);
  display:grid; place-items:center;
  background:var(--cream); color:var(--ink);
  transition:background var(--t), color var(--t), transform var(--t);
}
.work__go svg{ width:18px; height:12px; }
.work__go svg path{ stroke:currentColor; stroke-width:1.8; fill:none; }
.work:hover h3{ color:var(--accent); }
.work:hover .work__go{ background:var(--accent); color:#fff; transform:rotate(-45deg); }

/* floating preview that follows the cursor */
.work__peek{
  position:absolute; right:16%; top:50%; z-index:5;
  width:280px; height:190px; border-radius:var(--r-md); overflow:hidden;
  pointer-events:none;
  opacity:0; transform:translateY(-40%) scale(.9);
  transition:opacity var(--t), transform var(--t);
  box-shadow:var(--shadow-lg);
}
.work:hover .work__peek{ opacity:1; transform:translateY(-50%) scale(1); }
.work__peek img{ width:100%; height:100%; object-fit:cover; }

/* --- awards ------------------------------------------------------------ */
.awards{ display:grid; gap:0; }
.award{
  display:grid; grid-template-columns:110px 1fr auto; gap:22px; align-items:center;
  padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.10);
  transition:padding-left var(--t);
}
.award:hover{ padding-left:14px; }
.award__year{ font-weight:700; color:var(--accent); letter-spacing:.06em; }
.award h4{ margin:0; font-size:1.12rem; }
.award span{ font-size:.9rem; color:rgba(255,255,255,.55); }

/* --- process ----------------------------------------------------------- */
.process{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); position:relative; }
.step{ text-align:center; position:relative; }
.step__badge{
  position:relative;
  width:96px; height:96px; margin:0 auto 24px;
  border-radius:var(--r-full);
  display:grid; place-items:center;
  background:#fff; color:var(--accent);
  box-shadow:var(--shadow-sm);
  transition:background var(--t), color var(--t);
}
.step:hover .step__badge{ background:var(--accent); color:#fff; }
.step__badge svg{ width:38px; height:38px; }
.step__badge svg *{ stroke:currentColor; stroke-width:1.3; fill:none; }
.step__badge b{
  position:absolute; right:-6px; top:-6px;
  width:32px; height:32px; border-radius:var(--r-full);
  background:var(--ink); color:#fff;
  display:grid; place-items:center; font-size:.78rem;
}
.step h3{ font-size:1.16rem; }
.step p{ font-size:.95rem; }
/* connector line */
.process .step::after{
  content:""; position:absolute; top:48px; left:calc(50% + 62px); right:calc(-50% + 62px);
  height:1px; background:var(--line);
}
.process .step:last-child::after{ display:none; }

/* --- team -------------------------------------------------------------- */
.team{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.member{ position:relative; overflow:hidden; border-radius:var(--r-md); }
.member img{ width:100%; aspect-ratio:3/3.7; object-fit:cover; transition:transform .7s var(--ease); filter:grayscale(1); }
.member:hover img{ transform:scale(1.06); filter:grayscale(0); }
.member__body{
  position:absolute; left:16px; right:16px; bottom:16px;
  background:#fff; border-radius:var(--r-sm);
  padding:18px 20px;
  transition:transform var(--t);
}
.member__body h3{ font-size:1.1rem; margin-bottom:2px; }
.member__body span{ font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.member__socials{
  position:absolute; right:16px; top:16px;
  display:grid; gap:8px;
  opacity:0; transform:translateX(14px);
  transition:all var(--t);
}
.member:hover .member__socials{ opacity:1; transform:none; }
.member__socials a{
  width:36px; height:36px; border-radius:var(--r-full);
  display:grid; place-items:center; background:#fff; color:var(--ink);
}
.member__socials a:hover{ background:var(--accent); color:#fff; }
.member__socials svg{ width:15px; height:15px; }

/* --- partners ---------------------------------------------------------- */
.partners{
  display:flex; align-items:center; gap:34px; flex-wrap:wrap; justify-content:center;
}
.partners__count{
  font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); padding-right:34px; border-right:1px solid var(--line);
}
.partners__count b{ color:var(--accent); }
.partner{
  font-size:1.15rem; font-weight:700; letter-spacing:.02em; color:var(--muted);
  opacity:.75; transition:color var(--t), opacity var(--t);
}
.partner:hover{ color:var(--ink); opacity:1; }

/* --- testimonials ------------------------------------------------------ */
.quotes{ position:relative; }
.quotes__track{ display:grid; }
.quote{
  grid-area:1/1;
  opacity:0; visibility:hidden; transform:translateY(16px);
  transition:all .5s var(--ease);
}
.quote.is-active{ opacity:1; visibility:visible; transform:none; position:relative; }
.quote__stars{ display:flex; gap:5px; justify-content:center; color:var(--accent); margin-bottom:22px; }
.quote__stars svg{ width:18px; height:18px; }
.quote__stars svg path{ fill:currentColor; }
.quote blockquote{
  margin:0 0 30px;
  font-size:clamp(1.15rem,2.1vw,1.55rem);
  line-height:1.55; color:var(--ink); font-weight:500;
  max-width:860px; margin-inline:auto;
}
.quote__by{ display:flex; align-items:center; gap:14px; justify-content:center; }
.quote__by img{ width:56px; height:56px; border-radius:var(--r-full); object-fit:cover; }
.quote__by b{ display:block; color:var(--ink); }
.quote__by span{ font-size:.85rem; }

.quotes__dots{ display:flex; gap:10px; justify-content:center; margin-top:34px; }
.quotes__dots button{
  width:10px; height:10px; border-radius:var(--r-full);
  background:var(--line); transition:all var(--t);
}
.quotes__dots button.is-active{ background:var(--accent); width:30px; }

/* --- blog cards -------------------------------------------------------- */
.posts{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.post{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform var(--t), box-shadow var(--t);
}
.post:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.post__media{ position:relative; overflow:hidden; }
.post__media img{ width:100%; aspect-ratio:16/11; object-fit:cover; transition:transform .7s var(--ease); }
.post:hover .post__media img{ transform:scale(1.06); }
.post__date{
  position:absolute; left:16px; top:16px;
  background:var(--accent); color:#fff;
  border-radius:var(--r-sm);
  padding:8px 12px; text-align:center; line-height:1.1;
}
.post__date b{ display:block; font-size:1.15rem; }
.post__date span{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; }
.post__body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.post__meta{
  display:flex; gap:16px; flex-wrap:wrap;
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  margin-bottom:14px;
}
.post__body h3{ font-size:1.16rem; line-height:1.35; }
.post__body h3 a:hover{ color:var(--accent); }
.post__body p{ font-size:.95rem; }
.post__body .link{ margin-top:auto; padding-top:18px; font-size:.74rem; align-self:flex-start; }

/* --- newsletter / CTA banner ------------------------------------------- */
.cta{
  position:relative; overflow:hidden;
  padding:96px 0;
  background:var(--ink);
  text-align:center;
}
.cta__bg{ position:absolute; inset:0; opacity:.22; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; }
.cta .container{ position:relative; z-index:2; }
.cta h2{ color:#fff; max-width:760px; margin-inline:auto; }
.cta p{ color:rgba(255,255,255,.7); max-width:600px; margin-inline:auto auto; margin-bottom:32px; }

.subscribe{
  display:flex; gap:10px; max-width:560px; margin:0 auto; flex-wrap:wrap;
}
.subscribe input{
  flex:1 1 240px; min-width:0;
  padding:17px 20px; border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff;
}
.subscribe input::placeholder{ color:rgba(255,255,255,.45); }
.subscribe input:focus{ outline:none; border-color:var(--accent); }
.form-note{ margin-top:16px; font-size:.85rem; min-height:1.2em; }
.form-note.is-ok{ color:#8fd694; }
.form-note.is-bad{ color:#ff9a9a; }

/* ================= 10. INNER-PAGE COMPONENTS =========================== */

/* --- two column page layout -------------------------------------------- */
.layout{ display:grid; gap:46px; align-items:start; }

/* --- sidebar widgets ---------------------------------------------------- */
.widget{
  background:var(--cream); border-radius:var(--r-md);
  padding:28px; margin-bottom:26px;
}
.widget h3{ font-size:1.1rem; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.widget__search{ display:flex; }
.widget__search input{
  flex:1; min-width:0; padding:13px 16px; border:1px solid var(--line);
  border-right:0; border-radius:var(--r-sm) 0 0 var(--r-sm); background:#fff;
}
.widget__search button{
  padding:0 18px; background:var(--accent); color:#fff; border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.widget__search button svg{ width:17px; height:17px; }
.widget__search button svg *{ stroke:currentColor; stroke-width:1.8; fill:none; }

.widget__list li + li{ margin-top:2px; }
.widget__list a{
  display:flex; justify-content:space-between; gap:12px;
  padding:11px 14px; border-radius:var(--r-sm);
  font-weight:600; color:var(--ink); font-size:.95rem;
  transition:background var(--t), color var(--t);
}
.widget__list a:hover,.widget__list a.is-active{ background:var(--accent); color:#fff; }
.widget__list a span{ opacity:.6; }

.mini{ display:flex; gap:14px; }
.mini + .mini{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.mini img{ width:80px; height:70px; object-fit:cover; border-radius:var(--r-sm); flex:none; }
.mini h4{ font-size:.98rem; line-height:1.35; margin-bottom:4px; }
.mini h4 a:hover{ color:var(--accent); }
.mini span{ font-size:.8rem; color:var(--muted); }

.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tags a{
  padding:8px 14px; border-radius:var(--r-full);
  background:#fff; font-size:.8rem; font-weight:600; color:var(--ink);
  transition:background var(--t), color var(--t);
}
.tags a:hover{ background:var(--accent); color:#fff; }

.widget--cta{
  background:var(--ink); color:rgba(255,255,255,.72); text-align:center;
}
.widget--cta h3{ color:#fff; border-color:rgba(255,255,255,.14); }
.widget--cta p{ font-size:.95rem; margin-bottom:22px; }

.facts li{
  display:flex; justify-content:space-between; gap:14px;
  padding:12px 0; border-bottom:1px dashed var(--line);
  font-size:.95rem;
}
.facts li:last-child{ border-bottom:0; }
.facts b{ color:var(--ink); }

/* --- accordion ---------------------------------------------------------- */
.acc{ display:grid; gap:14px; }
.acc__item{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.acc__item.is-open{ border-color:var(--accent); }
.acc__btn{
  width:100%; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 26px;
  font-size:1.05rem; font-weight:700; color:var(--ink);
  transition:color var(--t);
}
.acc__item.is-open .acc__btn{ color:var(--accent); }
.acc__btn i{
  flex:none; width:26px; height:26px; position:relative;
}
.acc__btn i::before,.acc__btn i::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
  transform:translate(-50%,-50%); transition:transform var(--t), opacity var(--t);
}
.acc__btn i::before{ width:14px; height:2px; }
.acc__btn i::after{ width:2px; height:14px; }
.acc__item.is-open .acc__btn i::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.acc__panel{ display:none; padding:0 26px 24px; }
.acc__item.is-open .acc__panel{ display:block; animation:heroUp .4s var(--ease) both; }

/* --- filter bar --------------------------------------------------------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:42px; }
.filters button{
  padding:11px 22px; border-radius:var(--r-full);
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--cream); color:var(--ink);
  transition:background var(--t), color var(--t);
}
.filters button:hover{ background:var(--cream-deep); }
.filters button.is-active{ background:var(--accent); color:#fff; }

/* --- project card ------------------------------------------------------- */
.projects{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.project{
  position:relative; overflow:hidden; border-radius:var(--r-md);
  display:block;
}
.project.is-hidden{ display:none; }
.project img{ width:100%; aspect-ratio:4/3.4; object-fit:cover; transition:transform .8s var(--ease); }
.project:hover img{ transform:scale(1.07); }
.project::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(12,10,9,.85) 100%);
}
.project__body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:28px;
  transform:translateY(14px); opacity:.92;
  transition:transform var(--t), opacity var(--t);
}
.project:hover .project__body{ transform:none; opacity:1; }
.project__body span{
  display:block; font-size:.76rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:8px;
}
.project__body h3{ color:#fff; font-size:1.28rem; margin:0; }

/* --- pagination --------------------------------------------------------- */
.pager{ display:flex; gap:8px; justify-content:center; margin-top:52px; }
.pager a,.pager span{
  min-width:46px; height:46px; padding:0 14px;
  display:grid; place-items:center;
  border-radius:var(--r-sm);
  background:var(--cream); color:var(--ink); font-weight:700; font-size:.92rem;
  transition:background var(--t), color var(--t);
}
.pager a:hover{ background:var(--ink); color:#fff; }
.pager .is-current{ background:var(--accent); color:#fff; }

/* --- article prose ------------------------------------------------------ */
.prose{ font-size:1.03rem; }
.prose h2{ font-size:1.7rem; margin-top:1.6em; }
.prose h3{ font-size:1.32rem; margin-top:1.5em; }
.prose img{ border-radius:var(--r-md); margin:1.6em 0; }
.prose ul{ margin:0 0 1.4em; display:grid; gap:10px; }
.prose ul li{ position:relative; padding-left:26px; }
.prose ul li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:8px; height:8px; border-radius:var(--r-full); background:var(--accent);
}
.prose blockquote{
  margin:1.8em 0; padding:30px 34px;
  background:var(--cream); border-left:3px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:1.14rem; color:var(--ink); font-weight:500; font-style:italic;
}
.prose blockquote cite{ display:block; margin-top:14px; font-size:.88rem; font-style:normal; color:var(--muted); }

.share{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:44px; padding-top:26px; border-top:1px solid var(--line);
}
.share b{ color:var(--ink); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; }

.prevnext{
  display:grid; gap:20px; margin-top:44px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.prevnext a{
  display:flex; gap:16px; align-items:center;
  padding:20px; border:1px solid var(--line); border-radius:var(--r-md);
  transition:border-color var(--t), background var(--t);
}
.prevnext a:hover{ border-color:var(--accent); background:var(--cream); }
.prevnext img{ width:74px; height:64px; object-fit:cover; border-radius:var(--r-sm); flex:none; }
.prevnext span{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.prevnext b{ display:block; color:var(--ink); font-size:.98rem; line-height:1.35; margin-top:5px; }
.prevnext .is-next{ text-align:right; flex-direction:row-reverse; }

/* --- comments ----------------------------------------------------------- */
.comment{ display:flex; gap:18px; padding:24px 0; border-bottom:1px solid var(--line); }
.comment img{ width:62px; height:62px; border-radius:var(--r-full); object-fit:cover; flex:none; }
.comment__head{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; margin-bottom:8px; }
.comment__head b{ color:var(--ink); }
.comment__head span{ font-size:.82rem; color:var(--muted); }
.comment__reply{ font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.comment--nested{ margin-left:56px; }

/* --- forms -------------------------------------------------------------- */
.form{ display:grid; gap:16px; }
.form__row{ display:grid; gap:16px; }
.field label{
  display:block; margin-bottom:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
}
.field input,.field textarea,.field select{
  width:100%; padding:15px 18px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; transition:border-color var(--t), box-shadow var(--t);
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.field.has-error input,.field.has-error textarea{ border-color:var(--accent); }
.field__error{ display:block; margin-top:6px; font-size:.82rem; color:var(--accent); }

/* --- contact / office cards --------------------------------------------- */
.offices{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.office{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:32px 28px;
  transition:transform var(--t), box-shadow var(--t);
}
.office:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.office__icon{
  width:54px; height:54px; border-radius:var(--r-full);
  background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; margin-bottom:20px;
}
.office__icon svg{ width:24px; height:24px; }
.office__icon svg *{ stroke:currentColor; stroke-width:1.4; fill:none; }
.office h3{ font-size:1.12rem; }
.office a:hover{ color:var(--accent); }

.map{ border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); }
.map iframe{ width:100%; height:440px; border:0; display:block; filter:grayscale(.35); }

/* --- gallery ------------------------------------------------------------ */
.gallery{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-md); }

/* --- values / mosaic ---------------------------------------------------- */
.values{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.value{
  padding:32px 28px; border-radius:var(--r-md); background:#fff;
  border:1px solid var(--line);
}
.value b{
  display:block; font-size:.78rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin-bottom:12px;
}
.value h3{ font-size:1.18rem; }
.value p{ font-size:.96rem; }

/* --- price / package cards ---------------------------------------------- */
.plans{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.plan{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:36px 30px;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.plan:hover,.plan.is-featured{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.plan.is-featured{ background:var(--ink); color:rgba(255,255,255,.72); }
.plan.is-featured h3,.plan.is-featured .plan__price{ color:#fff; }
.plan__price{ font-size:2.2rem; font-weight:800; color:var(--ink); letter-spacing:-.03em; }
.plan__price small{ font-size:.86rem; font-weight:600; color:var(--muted); letter-spacing:0; }
.plan ul{ display:grid; gap:11px; margin:24px 0 28px; }
.plan li{ display:flex; gap:10px; font-size:.95rem; }
.plan li svg{ width:18px; height:18px; flex:none; color:var(--accent); margin-top:4px; }
.plan li svg path{ stroke:currentColor; stroke-width:2; fill:none; }

/* ========================== 11. FOOTER ================================= */
.footer{ background:var(--ink); color:rgba(255,255,255,.62); padding-top:80px; }
.footer h4{
  color:#fff; font-size:1.02rem; letter-spacing:.02em; margin-bottom:24px;
}
.footer__grid{
  display:grid; gap:44px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  padding-bottom:60px;
}
.footer__brand{ max-width:340px; }
.footer__brand p{ font-size:.96rem; margin:22px 0; }
.footer__grid .logo{ margin-bottom:4px; }

.footer__links li + li{ margin-top:12px; }
.footer__links a{ font-size:.96rem; transition:color var(--t), padding-left var(--t); }
.footer__links a:hover{ color:var(--accent); padding-left:6px; }

.footer__contact li{ display:flex; gap:12px; margin-bottom:16px; font-size:.96rem; }
.footer__contact svg{ width:19px; height:19px; flex:none; color:var(--accent); margin-top:4px; }
.footer__contact svg *{ stroke:currentColor; stroke-width:1.5; fill:none; }
.footer__contact a:hover{ color:#fff; }

.footer .round{ background:rgba(255,255,255,.08); color:#fff; }
.footer .round:hover{ background:var(--accent); }

.footer__bar{
  border-top:1px solid rgba(255,255,255,.10);
  padding:24px 0;
  display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  font-size:.88rem;
}
.footer__bar nav{ display:flex; gap:22px; flex-wrap:wrap; }
.footer__bar a:hover{ color:var(--accent); }

/* ======================== 12. RESPONSIVE =============================== */

/* --- up to 1200px: nav gets tight, plate goes full width ---------------- */
@media (max-width:1240px){
  :root{ --plate:100%; }
  .plate{ margin-inline:20px; }
  .info-row{ max-width:none; padding-inline:20px; }
  .hero__copy{ margin-right:4%; }
}

/* --- tablet / mobile nav ------------------------------------------------ */
@media (max-width:1023px){
  :root{ --header-h:170px; }

  .burger{ display:grid; }

  .nav{
    position:fixed; top:0; right:0; bottom:0; z-index:850;
    width:min(340px,88vw);
    background:#fff;
    padding:88px 30px 40px;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .4s var(--ease);
    box-shadow:var(--shadow-lg);
    margin-left:0;
  }
  .nav.is-open{ transform:none; }
  .nav__list{ display:block; }
  .nav__list li + li{ border-top:1px solid var(--line); }
  .nav__link{ display:block; padding:16px 0; font-size:.88rem; }
  .nav__link::after{ display:none; }
  .nav__close{
    display:grid; place-items:center;
    position:absolute; right:22px; top:22px;
    width:40px; height:40px; border-radius:var(--r-full);
    background:var(--cream); color:var(--ink);
  }
  .nav__close svg{ width:18px; height:18px; }
  .nav__close svg path{ stroke:currentColor; stroke-width:1.8; fill:none; }
  .nav__foot{
    display:grid; gap:8px; margin-top:32px; padding-top:24px;
    border-top:1px solid var(--line);
    font-weight:600; color:var(--ink);
  }
  .nav__foot a:hover{ color:var(--accent); }

  .header__actions{ margin-left:auto; }

  .info-row{ flex-wrap:wrap; gap:14px; justify-content:center; }
  .info{ flex:1 1 220px; border-right:0; padding:6px 0; }
  .info-row .socials{ padding-left:0; width:100%; justify-content:center; }

  .hero{ padding-top:calc(var(--header-h) + 20px); }
  .hero__copy{ margin-inline:auto; text-align:center; max-width:640px; }
  .hero__slide p{ margin-inline:auto; }
  .hero__cta{ justify-content:center; }
  .hero__scroll{ display:none; }

  .layout{ grid-template-columns:1fr !important; }
  .process .step::after{ display:none; }
}

/* --- small tablets ------------------------------------------------------ */
@media (max-width:767px){
  body{ font-size:16px; }
  .section{ padding:64px 0; }
  .plate{ height:70px; padding:0 20px; }
  .logo__name{ font-size:1.4rem; }
  .header__info{ padding:16px 0 14px; margin-top:0; }

  .hero{ min-height:auto; padding-bottom:120px; }
  .hero__thumbs{ gap:20px; bottom:-46px; }
  .hero__thumb{ width:92px; height:92px; box-shadow:0 0 0 4px #fff; }
  .hero__thumb.is-active{ box-shadow:0 0 0 4px var(--accent); }
  .hero__arrow{ width:28px; height:48px; }

  .about__media{ grid-template-columns:1fr; }
  .about__media figure:first-child{ grid-row:auto; }
  .about__media figure:first-child img{ min-height:280px; }
  .about__badge{ display:none; }
  .play{ right:20px; }

  /* stacked stats read better in a consistent order than zig-zagged */
  .stat,.stat:nth-child(even){ flex-direction:column; }
  .stat{ min-height:0; gap:22px; padding:30px 26px; }

  .work{ grid-template-columns:auto 1fr; }
  .work__go{ display:none; }
  .work__peek{ display:none; }
  .award{ grid-template-columns:80px 1fr; }
  .award span{ grid-column:2; }

  .comment--nested{ margin-left:20px; }
  .comment{ flex-direction:column; }

  .prevnext .is-next{ text-align:left; flex-direction:row; }
}

@media (max-width:479px){
  .topbar{ font-size:.76rem; }
  .info{ flex:1 1 100%; justify-content:center; }
  .hero__cta{ flex-direction:column; align-items:stretch; gap:16px; }
  .hero__cta .btn{ justify-content:center; }
  .hero__cta .link{ justify-content:center; }
  .filters button{ padding:9px 16px; font-size:.72rem; }
}

/* --- wider screens ------------------------------------------------------ */
@media (min-width:640px){
  .form__row{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1024px){
  .about{ grid-template-columns:1fr 1fr; gap:70px; }
  .layout{ grid-template-columns:1fr 340px; }
  .layout--flip{ grid-template-columns:340px 1fr; }
  .section{ padding:110px 0; }
}
@media (min-width:1440px){
  body{ font-size:18px; }
}

/* landscape phones */
@media (max-height:560px) and (orientation:landscape){
  .hero{ min-height:auto; padding:180px 0 110px; }
}

/* ======================= 13. MOTION / PRINT ============================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .header,.footer,.to-top,.preloader,.hero__arrow,.hero__thumbs,.cta{ display:none !important; }
  body{ color:#000; font-size:12pt; }
  .section{ padding:18pt 0; }
  a::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
}