/* ==========================================================================
   Azaria Digital — rare by nature
   Dark editorial agency aesthetic
   ========================================================================== */

 :root {
   --bg: #0c0b09;
   --bg-soft: #14120e;
   --bg-card: #1a1712;
   --ink: #f4efe6;
   --ink-dim: #a89f90;
   --ink-faint: #6f6759;
   --gold: #d9a441;
   --gold-soft: #e8c37c;
   --line: rgba(244, 239, 230, 0.12);
   --font: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
   --ease: cubic-bezier(0.22, 1, 0.36, 1);
   --nav-h: 76px;
 }

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

 html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

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

 ::selection { background: var(--gold); color: #17130a; }

 .container {
   width: min(1200px, calc(100% - 48px));
   margin-inline: auto;
 }

 img { display: block; max-width: 100%; }

 a { color: inherit; text-decoration: none; }

 /* ---- Reveal on scroll --------------------------------------------- */
 .reveal {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
 }
 .reveal.is-visible { opacity: 1; transform: none; }

 /* ---- Skip link ----------------------------------------------------- */
 .skip-link {
   position: absolute;
   left: 8px;
   top: -60px;
   z-index: 200;
   padding: 10px 18px;
   background: var(--gold);
   color: #17130a;
   border-radius: 999px;
   font-size: 0.85rem;
   transition: top 0.3s ease;
 }
 .skip-link:focus { top: 12px; }

 /* ==========================================================================
    NAV
    ========================================================================== */
 .nav {
   position: fixed;
   inset: 0 0 auto 0;
   z-index: 100;
   height: var(--nav-h);
   transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
   border-bottom: 1px solid transparent;
 }
 .nav.is-scrolled {
   background: rgba(12, 11, 9, 0.82);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   border-bottom-color: var(--line);
 }
 .nav__inner {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
 }
 .nav__logo {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: var(--font);
   font-size: 1.25rem;
   font-weight: 600;
   letter-spacing: 0.01em;
 }
 .nav__logo-mark {
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: radial-gradient(circle at 32% 30%, var(--gold-soft), var(--gold) 55%, #9a6d1f);
   box-shadow: 0 0 18px rgba(217, 164, 65, 0.55);
 }
 .nav__logo-thin { font-weight: 400; opacity: 0.6; color: var(--ink-dim); }

 .nav__links {
   display: flex;
   align-items: center;
   gap: 32px;
 }
 .nav__links a {
   font-size: 0.85rem;
   font-weight: 500;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--ink-dim);
   transition: color 0.25s ease;
   position: relative;
 }
 .nav__links a:hover { color: var(--gold-soft); }
 .nav__links a.is-active { color: var(--gold-soft); }
 .nav__links a:not(.nav__cta)::after {
   content: "";
   position: absolute;
   left: 0; bottom: -8px;
   width: 100%;
   height: 1px;
   background: var(--gold);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.3s var(--ease);
 }
 .nav__links a:not(.nav__cta):hover::after,
 .nav__links a.is-active::after { transform: scaleX(1); }

 .nav__cta {
   padding: 10px 20px;
   border: 1px solid var(--gold);
   border-radius: 999px;
   color: var(--gold-soft) !important;
   transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
 }
 .nav__cta:hover { background: var(--gold); color: #17130a !important; transform: translateY(-1px); }

 .nav__burger {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 6px;
   width: 42px;
   height: 42px;
   background: none;
   border: 0;
   cursor: pointer;
 }
 .nav__burger span {
   display: block;
   width: 22px;
   height: 2px;
   margin-inline: auto;
   background: var(--ink);
   transition: transform 0.3s var(--ease), opacity 0.3s ease;
 }
 .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
 .nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

 /* ==========================================================================
    HERO
    ========================================================================== */
 .hero {
   position: relative;
   min-height: 100svh;
   display: flex;
   align-items: center;
   overflow: hidden;
 }
 .hero__bg {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .hero__bg img {
   width: min(110%, 1500px);
   height: auto;
   opacity: 0.5;
   filter: saturate(0.9);
   transform: translateX(12%);
   animation: heroFloat 14s ease-in-out infinite alternate;
 }
 @keyframes heroFloat {
   from { transform: translateX(12%) scale(1); }
   to   { transform: translateX(6%) scale(1.06); }
 }
 .hero__scrim {
   position: absolute;
   inset: 0;
   background:
     linear-gradient(90deg, var(--bg) 0%, rgba(12,11,9,0.72) 38%, rgba(12,11,9,0.15) 75%),
     linear-gradient(0deg, var(--bg) 2%, transparent 30%),
     linear-gradient(180deg, rgba(12,11,9,0.55) 0%, transparent 22%);
 }
 .hero__content { position: relative; z-index: 2; padding-block: 140px 100px; }

 .hero__kicker {
   font-size: 0.85rem;
   font-weight: 500;
   letter-spacing: 0.42em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 28px;
 }
 .hero__title {
   font-family: var(--font);
   font-weight: 400;
   font-size: clamp(4rem, 12vw, 10.5rem);
   line-height: 0.98;
   letter-spacing: -0.015em;
 }
 .hero__line { display: block; }
 .hero__line--thin {
   font-style: normal; letter-spacing: 0.12em; opacity: 0.7;
   font-weight: 400;
   color: var(--gold-soft);
   margin-left: clamp(2rem, 12vw, 12rem);
 }
 .hero__sub {
   max-width: 460px;
   margin-top: 36px;
   font-size: 1.05rem;
   font-weight: 400;
   color: var(--ink-dim);
 }
 .hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 44px; }

 .hero__scroll {
   position: absolute;
   left: 50%;
   bottom: 30px;
   z-index: 2;
   width: 26px;
   height: 42px;
   border: 1px solid var(--line);
   border-radius: 999px;
 }
 .hero__scroll span {
   position: absolute;
   left: 50%;
   top: 8px;
   width: 3px;
   height: 8px;
   margin-left: -1.5px;
   border-radius: 2px;
   background: var(--gold);
   animation: scrollDot 1.8s var(--ease) infinite;
 }
 @keyframes scrollDot {
   0%   { transform: translateY(0); opacity: 1; }
   70%  { transform: translateY(16px); opacity: 0; }
   100% { transform: translateY(0); opacity: 0; }
 }

 /* ---- Buttons ---------------------------------------------------------- */
 .btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 30px;
   border-radius: 999px;
   font-size: 0.9rem;
   font-weight: 500;
   letter-spacing: 0.04em;
   transition: transform 0.25s var(--ease), background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
 }
 .btn:hover { transform: translateY(-2px); }
 .btn--primary {
   background: var(--gold);
   color: #17130a;
 }
 .btn--primary:hover { background: var(--gold-soft); }
 .btn--ghost {
   border: 1px solid var(--line);
   color: var(--ink);
 }
 .btn--ghost:hover { border-color: var(--gold); color: var(--gold-soft); }

 /* ==========================================================================
    MARQUEE
    ========================================================================== */
 .marquee {
   border-block: 1px solid var(--line);
   overflow: hidden;
   padding-block: 22px;
   background: var(--bg);
 }
 .marquee__track {
   display: flex;
   gap: 64px;
   width: max-content;
   animation: marquee 32s linear infinite;
 }
 .marquee:hover .marquee__track { animation-play-state: paused; }
 .marquee__track span {
   font-size: 0.85rem;
   letter-spacing: 0.28em;
   text-transform: uppercase;
   color: var(--ink-faint);
   white-space: nowrap;
   display: inline-flex;
   align-items: center;
   gap: 64px;
 }
 .marquee__track span::after {
   content: "◆";
   color: var(--gold);
   font-size: 0.6rem;
 }
 @keyframes marquee {
   from { transform: translateX(0); }
   to   { transform: translateX(-50%); }
 }

 /* ==========================================================================
    SECTIONS (shared)
    ========================================================================== */
 .section { padding-block: 130px; position: relative; }
 .section--soft { background: var(--bg-soft); border-block: 1px solid var(--line); }

 .index {
   display: inline-block;
   font-family: var(--font);
   font-style: normal; letter-spacing: 0.12em; opacity: 0.7;
   font-size: 0.95rem;
   color: var(--gold);
   letter-spacing: 0.1em;
   margin-bottom: 20px;
 }
 .index--light { color: var(--gold-soft); }

 .section-title {
   font-family: var(--font);
   font-weight: 400;
   font-size: clamp(2rem, 4.6vw, 3.4rem);
   line-height: 1.15;
   letter-spacing: -0.01em;
 }
 .section-sub {
   margin-top: 18px;
   max-width: 520px;
   color: var(--ink-dim);
   font-weight: 400;
 }
 .section-head { margin-bottom: 72px; }
 .section-head--center { text-align: center; }
 .section-head--center .section-sub { margin-inline: auto; }

 /* ==========================================================================
    ABOUT
    ========================================================================== */
 .about__grid {
   display: grid;
   grid-template-columns: 1fr 1.1fr;
   gap: 72px;
   align-items: start;
 }
 .about__body .lead {
   font-family: var(--font);
   font-size: clamp(1.25rem, 2.2vw, 1.55rem);
   font-weight: 400;
   line-height: 1.5;
   margin-bottom: 24px;
 }
 .about__body .lead strong { font-weight: 500; color: var(--gold-soft); }
 .about__body p { color: var(--ink-dim); font-weight: 400; }
 .about__body p + p { margin-top: 18px; }

 .stats {
   list-style: none;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-top: 48px;
 }
 .stat {
   padding: 22px 18px;
   border: 1px solid var(--line);
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.015);
   transition: border-color 0.3s ease, transform 0.3s var(--ease);
 }
 .stat:hover { border-color: rgba(217, 164, 65, 0.5); transform: translateY(-3px); }
 .stat__num {
   display: block;
   font-family: var(--font);
   font-size: 2.6rem;
   font-weight: 400;
   color: var(--gold);
   line-height: 1;
 }
 .stat__label {
   display: block;
   margin-top: 8px;
   font-size: 0.78rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--ink-faint);
 }

 .tags {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 72px;
   padding-top: 48px;
   border-top: 1px solid var(--line);
 }
 .tags li {
   padding: 8px 18px;
   border: 1px solid var(--line);
   border-radius: 999px;
   font-size: 0.82rem;
   letter-spacing: 0.04em;
   color: var(--ink-dim);
   transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
 }
 .tags li:hover {
   border-color: var(--gold);
   color: var(--gold-soft);
   background: rgba(217, 164, 65, 0.06);
 }

 /* ---- Split feature rows --------------------------------------------- */
 .split {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: center;
 }
 .split + .split { margin-top: 96px; }
 .split__media {
   position: relative;
   border-radius: 18px;
   overflow: hidden;
   border: 1px solid var(--line);
   aspect-ratio: 4 / 3;
   background: var(--bg-card);
 }
 .split__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); }
 .split__media .badge {
   position: absolute;
   left: 20px; bottom: 20px;
   padding: 8px 16px;
   border-radius: 999px;
   background: rgba(12,11,9,0.7);
   backdrop-filter: blur(8px);
   border: 1px solid var(--line);
   font-size: 0.75rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--gold-soft);
 }
 .split__body h3 {
   font-family: var(--font);
   font-weight: 400;
   font-size: clamp(1.6rem, 3vw, 2.4rem);
   line-height: 1.2;
   margin-bottom: 18px;
 }
 .split__body p { color: var(--ink-dim); margin-bottom: 16px; }
 .split__body ul {
   list-style: none;
   margin-top: 20px;
   display: grid;
   gap: 12px;
 }
 .split__body ul li {
   color: var(--ink-dim);
   padding-left: 22px;
   position: relative;
   font-size: 0.95rem;
 }
 .split__body ul li::before {
   content: "◆";
   position: absolute;
   left: 0;
   color: var(--gold);
   font-size: 0.6rem;
   top: 0.55em;
 }
 .split--flip .split__media { order: 2; }

 /* ==========================================================================
    SERVICES
    ========================================================================== */
 .services__list {
   border-top: 1px solid var(--line);
 }
 .service {
   display: grid;
   grid-template-columns: 90px 1fr minmax(240px, 34%);
   gap: 32px;
   align-items: center;
   padding: 44px 0;
   border-bottom: 1px solid var(--line);
   position: relative;
   transition: background 0.35s ease;
 }
 .service::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(217,164,65,0.05), transparent 65%);
   opacity: 0;
   transition: opacity 0.35s ease;
   pointer-events: none;
 }
 .service:hover::before { opacity: 1; }

 .service__num {
   font-family: var(--font);
   font-style: normal; letter-spacing: 0.12em; opacity: 0.7;
   font-size: 1.1rem;
   color: var(--ink-faint);
   transition: color 0.3s ease;
 }
 .service:hover .service__num { color: var(--gold); }

 .service__title {
   font-family: var(--font);
   font-weight: 400;
   font-size: clamp(1.5rem, 2.8vw, 2.1rem);
   letter-spacing: -0.01em;
   transition: transform 0.35s var(--ease), color 0.3s ease;
   display: inline-flex;
   align-items: center;
   gap: 12px;
 }
 .service__title .arrow {
   font-size: 1.2rem;
   color: var(--gold);
   opacity: 0;
   transform: translateX(-6px);
   transition: opacity 0.3s ease, transform 0.3s var(--ease);
 }
 .service:hover .service__title { transform: translateX(10px); color: var(--gold-soft); }
 .service:hover .service__title .arrow { opacity: 1; transform: none; }
 .service__desc {
   margin-top: 8px;
   color: var(--ink-dim);
   font-weight: 400;
 }
 .service__items {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   gap: 8px 20px;
   margin-top: 16px;
 }
 .service__items li {
   font-size: 0.85rem;
   color: var(--ink-faint);
   letter-spacing: 0.02em;
   position: relative;
   padding-left: 16px;
 }
 .service__items li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0.6em;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--gold);
   opacity: 0.6;
 }
 .service__what {
   margin-top: 14px;
   font-size: 0.9rem;
   line-height: 1.55;
   color: var(--ink-dim);
   border-left: 2px solid var(--gold);
   padding-left: 14px;
   font-style: italic;
 }
 .service__quote {
   font-family: var(--font);
   font-style: normal; letter-spacing: 0.12em; opacity: 0.7;
   font-weight: 400;
   font-size: 1.02rem;
   line-height: 1.5;
   color: var(--ink-dim);
   border-left: 1px solid var(--gold);
   padding-left: 22px;
 }

 /* ==========================================================================
    WORK / PORTFOLIO
    ========================================================================== */
 .filter {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 44px;
 }
 .filter__btn {
   padding: 9px 20px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: none;
   color: var(--ink-dim);
   font-family: var(--font);
   font-size: 0.82rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   cursor: pointer;
   transition: all 0.25s ease;
 }
 .filter__btn:hover { border-color: var(--gold); color: var(--gold-soft); }
 .filter__btn.is-active { background: var(--gold); color: #17130a; border-color: var(--gold); }

 .work-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 28px;
 }
 .work-item {
   position: relative;
   display: block;
   border-radius: 18px;
   overflow: hidden;
   border: 1px solid var(--line);
   background: var(--bg-card);
   transition: opacity 0.4s ease, transform 0.4s var(--ease);
 }
 .work-item.is-hidden { display: none; }
 .work-item__media {
   position: relative;
   aspect-ratio: 16 / 10;
   overflow: hidden;
 }
 .work-item__media img {
   width: 100%; height: 100%;
   object-fit: cover;
   transition: transform 0.7s var(--ease), filter 0.5s ease;
   filter: saturate(0.85);
 }
 .work-item:hover .work-item__media img { transform: scale(1.06); filter: saturate(1); }
 .work-item__overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 30%, rgba(12,11,9,0.92) 100%);
   opacity: 0.65;
   transition: opacity 0.4s ease;
 }
 .work-item:hover .work-item__overlay { opacity: 0.95; }
 .work-item__meta {
   position: absolute;
   inset: auto 0 0 0;
   padding: 28px;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 16px;
 }
 .work-item__cat {
   font-size: 0.72rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 8px;
 }
 .work-item__title {
   font-family: var(--font);
   font-weight: 400;
   font-size: 1.5rem;
   line-height: 1.15;
 }
 .work-item__view {
   flex-shrink: 0;
   width: 44px; height: 44px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   border: 1px solid var(--line);
   background: rgba(12,11,9,0.5);
   backdrop-filter: blur(6px);
   color: var(--gold-soft);
   opacity: 0;
   transform: translateY(6px);
   transition: opacity 0.35s ease, transform 0.35s var(--ease), background 0.3s ease, color 0.3s ease;
 }
 .work-item:hover .work-item__view { opacity: 1; transform: none; background: var(--gold); color: #17130a; }
 .work-item__featured { grid-column: 1 / -1; }
 .work-item__featured .work-item__media { aspect-ratio: 21 / 9; }
 .work-item__featured .work-item__title { font-size: clamp(1.6rem, 3vw, 2.4rem); }

 /* ==========================================================================
    PROCESS
    ========================================================================== */
 .process {
   border-top: 1px solid var(--line);
 }
 .process__step {
   position: relative;
   display: grid;
   grid-template-columns: 120px 1fr;
   gap: 40px;
   padding: 48px 0;
   border-bottom: 1px solid var(--line);
   transition: padding-left 0.35s var(--ease);
 }
 .process__step:hover { padding-left: 16px; }
 .process__num {
   font-size: 1rem;
   color: var(--gold);
   letter-spacing: 0.1em;
   padding-top: 6px;
 }
 .process__step .ghost {
   position: absolute;
   right: 0;
   top: 30px;
   font-size: 4.4rem;
   font-weight: 400;
   color: rgba(217,164,65,0.08);
   letter-spacing: -0.03em;
   pointer-events: none;
 }
 .process__title {
   font-family: var(--font);
   font-weight: 400;
   font-size: clamp(1.5rem, 3vw, 2.1rem);
   margin-bottom: 12px;
 }
 .process__step:hover .process__title { color: var(--gold-soft); }
 .process__desc { color: var(--ink-dim); max-width: 620px; }
 .process__points {
   list-style: none;
   margin-top: 18px;
   display: flex;
   flex-wrap: wrap;
   gap: 8px 22px;
 }
 .process__points li {
   font-size: 0.85rem;
   color: var(--ink-faint);
   padding-left: 16px;
   position: relative;
 }
 .process__points li::before {
   content: "";
   position: absolute;
   left: 0; top: 0.6em;
   width: 6px; height: 6px;
   border-radius: 50%;
   background: var(--gold);
   opacity: 0.6;
 }

 /* ==========================================================================
    MANIFESTO
    ========================================================================== */
 .manifesto {
   background:
     radial-gradient(60% 80% at 50% 0%, rgba(217, 164, 65, 0.09) 0%, transparent 70%),
     var(--bg-soft);
   border-block: 1px solid var(--line);
   text-align: center;
 }
 .manifesto__inner { max-width: 860px; margin-inline: auto; }
 .manifesto__quote {
   font-family: var(--font);
   font-weight: 400;
   font-size: clamp(1.7rem, 4.2vw, 3rem);
   line-height: 1.35;
   letter-spacing: -0.01em;
 }
 .manifesto__quote em { color: var(--gold-soft); }
 .manifesto__sign {
   margin-top: 36px;
   font-size: 0.85rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--ink-faint);
 }

 /* ==========================================================================
    TESTIMONIALS
    ========================================================================== */
 .quotes {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 24px;
 }
 .quote {
   padding: 40px 36px;
   border: 1px solid var(--line);
   border-radius: 18px;
   background: var(--bg-card);
   position: relative;
   transition: transform 0.35s var(--ease), border-color 0.3s ease;
 }
 .quote:hover { transform: translateY(-4px); border-color: rgba(217,164,65,0.5); }
 .quote__mark {
   font-size: 3rem;
   line-height: 1;
   color: var(--gold);
   opacity: 0.4;
   font-family: Georgia, serif;
 }
 .quote__text {
   font-family: var(--font);
   font-weight: 400;
   font-size: 1.15rem;
   line-height: 1.55;
   margin: 12px 0 24px;
 }
 .quote__by {
   display: flex;
   align-items: center;
   gap: 14px;
   padding-top: 20px;
   border-top: 1px solid var(--line);
 }
 .quote__avatar {
   width: 44px; height: 44px;
   border-radius: 50%;
   background: linear-gradient(135deg, #2a2318, #14120e);
   display: grid;
   place-items: center;
   font-weight: 500;
   color: var(--gold-soft);
   font-size: 0.95rem;
 }
 .quote__name { font-size: 0.95rem; font-weight: 500; }
 .quote__role { font-size: 0.8rem; color: var(--ink-faint); }
 .quote__stars { color: var(--gold); letter-spacing: 2px; font-size: 0.85rem; margin-bottom: 12px; }

 /* ==========================================================================
    BLOG
    ========================================================================== */
 .blog-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
 }
 .post {
   display: block;
   border: 1px solid var(--line);
   border-radius: 18px;
   overflow: hidden;
   background: var(--bg-card);
   transition: transform 0.35s var(--ease), border-color 0.3s ease;
 }
 .post:hover { transform: translateY(-5px); border-color: rgba(217,164,65,0.5); }
 .post__media {
   aspect-ratio: 16 / 9;
   overflow: hidden;
   background: var(--bg-card);
 }
 .post__media img {
   width: 100%; height: 100%;
   object-fit: cover;
   filter: saturate(0.85);
   transition: transform 0.7s var(--ease);
 }
 .post:hover .post__media img { transform: scale(1.05); }
 .post__body { padding: 24px; }
 .post__meta {
   display: flex;
   gap: 14px;
   align-items: center;
   font-size: 0.75rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--ink-faint);
   margin-bottom: 12px;
 }
 .post__meta .cat { color: var(--gold); }
 .post__title {
   font-family: var(--font);
   font-weight: 500;
   font-size: 1.2rem;
   line-height: 1.3;
   margin-bottom: 12px;
 }
 .post:hover .post__title { color: var(--gold-soft); }
 .post__excerpt { font-size: 0.92rem; color: var(--ink-dim); margin-bottom: 16px; }
 .post__read {
   font-size: 0.82rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--gold);
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }
 .post__read .arrow { transition: transform 0.3s var(--ease); }
 .post:hover .post__read .arrow { transform: translateX(4px); }

 /* ==========================================================================
    FAQ
    ========================================================================== */
 .faq {
   max-width: 860px;
   margin-inline: auto;
 }
 .faq__item {
   border-bottom: 1px solid var(--line);
 }
 .faq__item:first-child { border-top: 1px solid var(--line); }
 .faq__q {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   padding: 26px 0;
   background: none;
   border: 0;
   cursor: pointer;
   text-align: left;
   color: var(--ink);
   font-family: var(--font);
   font-size: 1.05rem;
   font-weight: 400;
   transition: color 0.25s ease;
 }
 .faq__q:hover { color: var(--gold-soft); }
 .faq__q .icon {
   flex-shrink: 0;
   width: 28px; height: 28px;
   border-radius: 50%;
   border: 1px solid var(--line);
   display: grid;
   place-items: center;
   font-size: 1rem;
   color: var(--gold);
   transition: transform 0.3s var(--ease), background 0.3s ease, color 0.3s ease;
 }
 .faq__item.is-open .faq__q { color: var(--gold-soft); }
 .faq__item.is-open .faq__q .icon { background: var(--gold); color: #17130a; transform: rotate(45deg); }
 .faq__a {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.4s var(--ease);
 }
 .faq__a p {
   padding-bottom: 26px;
   color: var(--ink-dim);
   max-width: 720px;
 }
 .faq__item.is-open .faq__a { max-height: 420px; }

 /* ==========================================================================
    CONTACT
    ========================================================================== */
 .contact__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
   max-width: 900px;
   margin-inline: auto;
 }
 .contact__card {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding: 36px 32px;
   border: 1px solid var(--line);
   border-radius: 18px;
   background: var(--bg-card);
   overflow: hidden;
   transition: transform 0.3s var(--ease), border-color 0.3s ease;
 }
 .contact__card:hover { transform: translateY(-4px); border-color: var(--gold); }
 .contact__label {
   font-size: 0.75rem;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--ink-faint);
 }
 .contact__value {
   font-family: var(--font);
   font-size: clamp(1.15rem, 2.2vw, 1.5rem);
   font-weight: 400;
   word-break: break-all;
 }
 .contact__card:hover .contact__value { color: var(--gold-soft); }
 .contact__arrow {
   position: absolute;
   right: 28px;
   bottom: 24px;
   font-size: 1.4rem;
   color: var(--gold);
   transform: translateX(-8px);
   opacity: 0;
   transition: transform 0.3s var(--ease), opacity 0.3s ease;
 }
 .contact__card:hover .contact__arrow { transform: none; opacity: 1; }

 .form {
   display: grid;
   gap: 20px;
   margin-top: 56px;
   max-width: 900px;
   margin-inline: auto;
 }
 .form__row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
 }
 .field {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 .field label {
   font-size: 0.78rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--ink-dim);
 }
 .field label .req { color: var(--gold); }
 .field input,
 .field select,
 .field textarea {
   background: var(--bg-card);
   border: 1px solid var(--line);
   border-radius: 12px;
   padding: 14px 16px;
   color: var(--ink);
   font-family: var(--font);
   font-size: 0.98rem;
   transition: border-color 0.25s ease, background 0.25s ease;
   width: 100%;
 }
 .field textarea { resize: vertical; min-height: 130px; }
 .field input:focus,
 .field select:focus,
 .field textarea:focus {
   outline: none;
   border-color: var(--gold);
   background: rgba(217,164,65,0.04);
 }
 .field select {
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a89f90' stroke-width='1.5'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 18px center;
   padding-right: 44px;
 }
 .form__note {
   font-size: 0.82rem;
   color: var(--ink-faint);
 }
 .form__success {
   display: none;
   padding: 20px 24px;
   border: 1px solid rgba(217,164,65,0.4);
   border-radius: 14px;
   background: rgba(217,164,65,0.06);
   color: var(--gold-soft);
   font-size: 0.95rem;
 }
 .form.is-sent .form__success { display: block; }

 /* ==========================================================================
    FOOTER
    ========================================================================== */
 .footer {
   border-top: 1px solid var(--line);
   padding: 72px 0 40px;
   background: var(--bg);
 }
 .footer__top {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1fr;
   gap: 48px;
   padding-bottom: 48px;
   border-bottom: 1px solid var(--line);
 }
 .footer__brand {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: var(--font);
   font-size: 1.25rem;
   font-weight: 600;
 }
 .footer__blurb {
   margin-top: 18px;
   color: var(--ink-dim);
   font-size: 0.92rem;
   max-width: 320px;
 }
 .footer__col h4 {
   font-size: 0.78rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--ink-faint);
   margin-bottom: 18px;
 }
 .footer__col ul { list-style: none; display: grid; gap: 12px; }
 .footer__col a {
   font-size: 0.92rem;
   color: var(--ink-dim);
   transition: color 0.2s ease;
 }
 .footer__col a:hover { color: var(--gold-soft); }
 .footer__bottom {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding-top: 32px;
   font-size: 0.8rem;
   color: var(--ink-faint);
 }
 .footer__socials { display: flex; gap: 20px; }
 .footer__socials a {
   font-size: 0.8rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--ink-faint);
   transition: color 0.2s ease;
 }
 .footer__socials a:hover { color: var(--gold-soft); }

 /* ---- Back to top ---------------------------------------------------- */
 .to-top {
   position: fixed;
   right: 24px;
   bottom: 24px;
   z-index: 90;
   width: 46px; height: 46px;
   border-radius: 50%;
   border: 1px solid var(--line);
   background: rgba(20,18,14,0.85);
   backdrop-filter: blur(10px);
   color: var(--gold);
   display: grid;
   place-items: center;
   cursor: pointer;
   opacity: 0;
   pointer-events: none;
   transform: translateY(12px);
   transition: opacity 0.35s ease, transform 0.35s var(--ease), background 0.25s ease, color 0.25s ease;
 }
 .to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
 .to-top:hover { background: var(--gold); color: #17130a; }

 /* ---- Brand guide (brand.html) --------------------------------------- */
 .swatches {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 20px;
 }
 .swatch {
   border: 1px solid var(--line);
   border-radius: 16px;
   overflow: hidden;
   background: var(--bg-card);
 }
 .swatch__chip {
   height: 110px;
 }
 .swatch__meta { padding: 16px 18px; }
 .swatch__name { font-size: 0.95rem; font-weight: 500; }
 .swatch__hex {
   font-size: 0.8rem;
   color: var(--ink-faint);
   letter-spacing: 0.08em;
   margin-top: 4px;
 }
 .type-specimen {
   display: grid;
   gap: 32px;
   padding: 40px;
   border: 1px solid var(--line);
   border-radius: 18px;
   background: var(--bg-card);
 }
 .type-specimen h3 {
   font-family: var(--font);
   font-weight: 400;
   font-size: clamp(2rem, 5vw, 3.6rem);
   line-height: 1.1;
 }
 .type-specimen .sample {
   font-size: 1.05rem;
   color: var(--ink-dim);
   max-width: 640px;
 }
 .spec-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
 }
 .spec-table { width: 100%; border-collapse: collapse; }
 .spec-table th, .spec-table td {
   text-align: left;
   padding: 14px 0;
   border-bottom: 1px solid var(--line);
   font-size: 0.92rem;
   vertical-align: top;
 }
 .spec-table th {
   color: var(--ink-faint);
   font-weight: 400;
   font-size: 0.78rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   width: 40%;
 }
 .tone-word {
   padding: 10px 20px;
   border: 1px solid var(--line);
   border-radius: 999px;
   font-size: 0.88rem;
   color: var(--ink-dim);
   transition: border-color 0.25s ease, color 0.25s ease;
 }
 .tone-word:hover { border-color: var(--gold); color: var(--gold-soft); }
 .tone-words { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

 /* ==========================================================================
    RESPONSIVE
    ========================================================================== */
 @media (max-width: 1024px) {
   .blog-grid { grid-template-columns: repeat(2, 1fr); }
   .footer__top { grid-template-columns: 1fr 1fr; }
   .spec-grid { grid-template-columns: 1fr; }
 }

 @media (max-width: 960px) {
   .about__grid { grid-template-columns: 1fr; gap: 48px; }
   .service { grid-template-columns: 60px 1fr; }
   .service__quote { grid-column: 2; margin-top: 20px; }
   .split { grid-template-columns: 1fr; gap: 40px; }
   .split--flip .split__media { order: 0; }
   .quotes { grid-template-columns: 1fr; }
   .work-grid { grid-template-columns: 1fr; }
   .work-item__featured .work-item__media { aspect-ratio: 16 / 10; }
 }

 @media (max-width: 760px) {
   :root { --nav-h: 64px; }
   .section { padding-block: 88px; }

   .nav__links {
     position: fixed;
     inset: 0;
     z-index: -1;
     flex-direction: column;
     justify-content: center;
     gap: 36px;
     background: rgba(12, 11, 9, 0.97);
     backdrop-filter: blur(18px);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.35s ease;
   }
   .nav__links.is-open { opacity: 1; pointer-events: auto; }
   .nav__links a { font-size: 1.05rem; }
   .nav__burger { display: flex; z-index: 2; position: relative; }

   .hero__content { padding-block: 120px 80px; }
   .hero__bg img { opacity: 0.3; transform: translateX(0) scale(1.15); }
   .hero__line--thin { margin-left: 3rem; }

   .contact__grid { grid-template-columns: 1fr; }
   .stats { grid-template-columns: 1fr 1fr; }
   .stats .stat:last-child { grid-column: 1 / -1; }
   .blog-grid { grid-template-columns: 1fr; }
   .form__row { grid-template-columns: 1fr; }
   .process__step { grid-template-columns: 1fr; gap: 12px; padding: 36px 0; }
   .process__step .ghost { position: static; font-size: 2.4rem; display: block; margin-bottom: 8px; }
   .footer__top { grid-template-columns: 1fr; gap: 36px; }
   .footer__bottom { flex-direction: column; text-align: center; }
 }

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