:root {
      --bg: #0c0c0e;
      --surface: #141416;
      --surface2: #1a1a1e;
      --border: rgba(255,255,255,0.07);
      --border2: rgba(255,255,255,0.12);
      --gold: #c9a84c;
      --gold-light: #e8c97a;
      --gold-dim: rgba(201,168,76,0.15);
      --text: #f0ede8;
      --text2: #a09d97;
      --text3: #5a5855;
      --white: #faf9f7;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      overflow-x: hidden;
      min-height: 100vh;
    }

    /* ─── PAGE SYSTEM ─── */
    .page { display: none; min-height: 100vh; }
    .page.active { display: block; animation: pageIn 0.5s ease forwards; }
    @keyframes pageIn {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ─── CUSTOM CURSOR ─── */
    .cur { width:8px; height:8px; background:var(--gold); border-radius:50%; position:fixed; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:transform .1s; }
    .cur-r { width:32px; height:32px; border:1px solid rgba(201,168,76,.4); border-radius:50%; position:fixed; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:all .18s ease; }
    body.cursor-hover .cur { transform:translate(-50%,-50%) scale(3); background:transparent; border:1px solid var(--gold); }
    body.cursor-hover .cur-r { transform:translate(-50%,-50%) scale(1.6); border-color:rgba(201,168,76,.7); }
    @media (pointer:coarse) { .cur,.cur-r { display:none; } body { cursor:auto; } }
    body { cursor: none; }

    /* ─── NAV ─── */
    nav {
      position: fixed; top:0; left:0; right:0; z-index:800;
      padding: 1.6rem 3rem;
      display: flex; align-items:center; justify-content:space-between;
      transition: background .4s, border-color .4s, padding .3s;
      border-bottom: 1px solid transparent;
    }
    nav.scrolled {
      background: rgba(12,12,14,.88);
      border-color: var(--border);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      padding-top: 1rem; padding-bottom: 1rem;
    }

    /* SVG LOGO */
    .logo-wrap { display:flex; align-items:center; gap:.7rem; cursor:none; text-decoration:none; }
    .logo-svg { width:38px; height:38px; flex-shrink:0; }
    .logo-text-wrap { display:flex; flex-direction:column; line-height:1; }
    .logo-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.3rem;
      font-weight: 400;
      letter-spacing: .18em;
      color: var(--white);
      text-transform: uppercase;
    }
    .logo-name .lum { color: var(--gold); }
    .logo-sub {
      font-family: 'Syne', sans-serif;
      font-size: .52rem;
      letter-spacing: .4em;
      text-transform: uppercase;
      color: var(--text3);
      margin-top: .15rem;
    }

    .nav-links { display:flex; gap:2.2rem; list-style:none; }
    .nav-links a {
      font-family:'Syne', sans-serif;
      font-size:.72rem; letter-spacing:.15em;
      text-transform:uppercase; color:var(--text2);
      text-decoration:none; cursor:none;
      transition:color .2s;
      position:relative;
      padding-bottom:.2rem;
    }
    .nav-links a::after {
      content:''; position:absolute; bottom:0; left:0;
      width:0; height:1px; background:var(--gold);
      transition:width .25s;
    }
    .nav-links a:hover, .nav-links a.active { color:var(--text); }
    .nav-links a:hover::after, .nav-links a.active::after { width:100%; }

    .nav-btn {
      font-family:'Syne',sans-serif; font-size:.68rem;
      letter-spacing:.18em; text-transform:uppercase;
      background:transparent; border:1px solid var(--gold);
      color:var(--gold); padding:.6rem 1.6rem;
      cursor:none; transition:background .2s, color .2s;
    }
    .nav-btn:hover { background:var(--gold); color:var(--bg); }

    /* ─── HAMBURGER (mobile) ─── */
    .hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:none; padding:.2rem; }
    .hamburger span { display:block; width:24px; height:1px; background:var(--text); transition:all .3s; }
    .hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(4px,4px); }
    .hamburger.open span:nth-child(2) { opacity:0; }
    .hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(4px,-4px); }

    .mobile-menu {
      display:none; position:fixed; inset:0; z-index:700;
      background:rgba(12,12,14,.97); backdrop-filter:blur(20px);
      flex-direction:column; align-items:center; justify-content:center; gap:2.5rem;
    }
    .mobile-menu.open { display:flex; animation:pageIn .3s ease; }
    .mobile-menu a {
      font-family:'Cormorant Garamond',serif; font-size:3rem; font-weight:300;
      color:var(--text); text-decoration:none; letter-spacing:.08em; cursor:none;
      transition:color .2s;
    }
    .mobile-menu a:hover { color:var(--gold); }

    /* ─── SECTIONS SHARED ─── */
    .sec { padding: 7rem 0; }
    .sec-sm { padding: 4rem 0; }
    .lbl {
      font-family:'Syne',sans-serif; font-size:.65rem; letter-spacing:.3em;
      text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem;
      display:flex; align-items:center; gap:.8rem;
    }
    .lbl::before { content:''; width:24px; height:1px; background:var(--gold); flex-shrink:0; }
    .display-title {
      font-family:'Cormorant Garamond',serif;
      font-size: clamp(3rem,7vw,6rem);
      font-weight:300; line-height:1.05;
      color:var(--white);
    }
    .display-title em { font-style:italic; color:var(--gold-light); }
    .body-text { font-size:.95rem; line-height:1.9; color:var(--text2); font-weight:300; }
    .divider { width:100%; height:1px; background:var(--border); }

    /* Reveal */
    .rv { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
    .rv.vis { opacity:1; transform:translateY(0); }
    .rv-d1 { transition-delay:.1s; }
    .rv-d2 { transition-delay:.2s; }
    .rv-d3 { transition-delay:.3s; }
    .rv-d4 { transition-delay:.4s; }

    /* ─── HOME PAGE ─── */

    /* Hero */
    .hero {
      min-height: 100vh;
      display:flex; align-items:center;
      position:relative; overflow:hidden;
      padding: 7rem 3rem 4rem;
    }
    .hero-bg {
      position:absolute; inset:0;
      background:
        radial-gradient(ellipse 70% 60% at 70% 50%, rgba(201,168,76,.055) 0%, transparent 70%),
        radial-gradient(ellipse 50% 80% at 10% 80%, rgba(201,168,76,.03) 0%, transparent 60%);
    }
    /* Subtle dot grid */
    .hero-dots {
      position:absolute; inset:0;
      background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 36px 36px;
      mask-image: radial-gradient(ellipse 80% 70% at 60% 50%, black 20%, transparent 80%);
    }
    .hero-content { position:relative; z-index:2; max-width:700px; }
    .hero-eyebrow {
      font-family:'Syne',sans-serif; font-size:.65rem; letter-spacing:.35em;
      text-transform:uppercase; color:var(--gold);
      margin-bottom:2.2rem;
      display:flex; align-items:center; gap:1rem;
      opacity:0; animation:fadeU .8s .2s forwards;
    }
    .hero-eyebrow::before { content:''; width:36px; height:1px; background:var(--gold); }
    .hero-h1 {
      font-family:'Cormorant Garamond',serif;
      font-size: clamp(3.8rem, 9vw, 7.5rem);
      font-weight:300; line-height:.97;
      color:var(--white); margin-bottom:2rem;
      opacity:0; animation:fadeU .9s .35s forwards;
    }
    .hero-h1 em { font-style:italic; color:var(--gold-light); display:block; }
    .hero-p {
      max-width:420px; font-size:1rem; line-height:1.85;
      color:var(--text2); font-weight:300; margin-bottom:3rem;
      opacity:0; animation:fadeU .8s .55s forwards;
    }
    .hero-btns {
      display:flex; gap:1.2rem; flex-wrap:wrap;
      opacity:0; animation:fadeU .8s .7s forwards;
    }
    .btn-gold {
      font-family:'Syne',sans-serif; font-size:.68rem; letter-spacing:.18em;
      text-transform:uppercase; background:var(--gold); color:var(--bg);
      border:none; padding:.9rem 2.2rem; cursor:none;
      transition:background .2s, transform .2s;
    }
    .btn-gold:hover { background:var(--gold-light); transform:translateY(-1px); }
    .btn-outline {
      font-family:'Syne',sans-serif; font-size:.68rem; letter-spacing:.18em;
      text-transform:uppercase; background:transparent; color:var(--text);
      border:1px solid var(--border2); padding:.9rem 2.2rem; cursor:none;
      text-decoration:none; display:inline-flex; align-items:center; gap:.6rem;
      transition:border-color .2s, color .2s;
    }
    .btn-outline:hover { border-color:var(--gold); color:var(--gold); }

    /* hero aside stats */
    .hero-aside {
      position:absolute; right:3rem; bottom:4rem; z-index:2;
      display:flex; gap:3rem;
      opacity:0; animation:fadeU .8s .9s forwards;
    }
    .h-stat { text-align:center; }
    .h-stat-n {
      font-family:'Cormorant Garamond',serif;
      font-size:2.8rem; font-weight:300; color:var(--white); line-height:1;
    }
    .h-stat-n span { color:var(--gold); }
    .h-stat-l {
      font-family:'Syne',sans-serif; font-size:.58rem;
      letter-spacing:.2em; text-transform:uppercase; color:var(--text3);
      margin-top:.3rem;
    }

    @keyframes fadeU {
      from { opacity:0; transform:translateY(22px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* scroll hint */
    .scroll-hint {
      position:absolute; bottom:2.5rem; left:3rem; z-index:2;
      font-family:'Syne',sans-serif; font-size:.58rem;
      letter-spacing:.25em; text-transform:uppercase; color:var(--text3);
      display:flex; align-items:center; gap:.8rem;
      opacity:0; animation:fadeU .7s 1.2s forwards;
    }
    .scroll-bar { width:36px; height:1px; background:var(--text3); position:relative; overflow:hidden; }
    .scroll-bar::after {
      content:''; position:absolute; left:-100%; top:0;
      width:100%; height:100%; background:var(--gold);
      animation:sbar 2.2s ease-in-out infinite;
    }
    @keyframes sbar { 0%{left:-100%} 100%{left:100%} }

    /* Marquee */
    .marquee-wrap {
      border-top:1px solid var(--border); border-bottom:1px solid var(--border);
      overflow:hidden; background:var(--surface); padding:.85rem 0;
    }
    .mq-track {
      display:flex; gap:0; white-space:nowrap;
      animation: mq 28s linear infinite;
    }
    .mq-item {
      font-family:'Cormorant Garamond',serif; font-size:1.1rem;
      font-weight:300; font-style:italic; color:var(--text3);
      padding:0 2.5rem; flex-shrink:0;
      display:flex; align-items:center; gap:2.5rem;
    }
    .mq-item::after { content:'·'; color:var(--gold); font-style:normal; }
    @keyframes mq { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

    /* About strip */
    .about-strip { background:var(--surface); }
    .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
    .about-visual {
      position:relative; aspect-ratio:4/5;
      background: linear-gradient(160deg, #1a1812 0%, #12100a 60%, #0e0d09 100%);
      overflow:hidden;
    }
    .about-visual-inner {
      position:absolute; inset:0;
      display:flex; align-items:center; justify-content:center;
    }
    .about-visual::after {
      content:''; position:absolute;
      top:0; right:0; width:1px; height:100%;
      background:linear-gradient(180deg, transparent, var(--gold), transparent);
      opacity:.3;
    }
    .about-tag {
      position:absolute; bottom:2rem; left:2rem;
      font-family:'Syne',sans-serif; font-size:.6rem;
      letter-spacing:.25em; text-transform:uppercase;
      color:var(--gold); background:rgba(12,12,14,.8);
      padding:.5rem 1rem; border:1px solid var(--border2);
    }

    /* Services */
    .svc-row {
      display:grid; grid-template-columns:repeat(3,1fr);
      border-top:1px solid var(--border);
    }
    .svc-card {
      padding:2.8rem 2.2rem; border-right:1px solid var(--border);
      border-bottom:1px solid var(--border);
      cursor:none; transition:background .3s;
      position:relative; overflow:hidden;
    }
    .svc-card:last-child { border-right:none; }
    .svc-card::before {
      content:''; position:absolute; bottom:0; left:0;
      width:0; height:2px; background:var(--gold);
      transition:width .4s;
    }
    .svc-card:hover { background:var(--surface2); }
    .svc-card:hover::before { width:100%; }
    .svc-n {
      font-family:'Syne',sans-serif; font-size:.58rem;
      letter-spacing:.2em; text-transform:uppercase;
      color:var(--gold); margin-bottom:1.5rem; opacity:.6;
    }
    .svc-title {
      font-family:'Cormorant Garamond',serif;
      font-size:1.7rem; font-weight:400; color:var(--white);
      margin-bottom:1rem; line-height:1.2;
    }
    .svc-desc { font-size:.85rem; line-height:1.85; color:var(--text2); }

    /* Work grid */
    .work-bento { display:grid; grid-template-columns:repeat(12,1fr); gap:1.2rem; margin-top:3.5rem; }
    .wc { position:relative; overflow:hidden; cursor:none; background:var(--surface); }
    .wc:nth-child(1) { grid-column:span 7; }
    .wc:nth-child(2) { grid-column:span 5; }
    .wc:nth-child(3) { grid-column:span 5; }
    .wc:nth-child(4) { grid-column:span 7; }
    .wc-img { aspect-ratio:16/10; overflow:hidden; position:relative; }
    .wc-img-inner { width:100%; height:100%; transition:transform .7s cubic-bezier(.25,.46,.45,.94); }
    .wc:hover .wc-img-inner { transform:scale(1.04); }
    /* Decorative project thumbs */
    .t1 { background:linear-gradient(135deg,#16120a 0%,#221c0e 40%,#1a1508 100%); }
    .t2 { background:linear-gradient(160deg,#0e1210 0%,#141f16 50%,#0c1510 100%); }
    .t3 { background:linear-gradient(140deg,#100e16 0%,#1a1624 50%,#0e0c14 100%); }
    .t4 { background:linear-gradient(150deg,#12100e 0%,#1e1a12 50%,#161208 100%); }
    .wc-dec { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.18; }
    .wc-info { padding:1.2rem 1.4rem; display:flex; justify-content:space-between; align-items:center; }
    .wc-tag { font-family:'Syne',sans-serif; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:.3rem; }
    .wc-name { font-family:'Cormorant Garamond',serif; font-size:1.35rem; font-weight:400; color:var(--white); }
    .wc-arr {
      width:32px; height:32px; border:1px solid var(--border2);
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0; transition:all .25s;
    }
    .wc:hover .wc-arr { background:var(--gold); border-color:var(--gold); }
    .wc:hover .wc-arr path { stroke:var(--bg); }

    /* Testimonial */
    .test-section { background:var(--surface); }
    .test-inner { max-width:780px; }
    .test-q {
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(1.5rem,3vw,2.3rem); font-weight:300;
      line-height:1.55; color:var(--white); margin-bottom:2.5rem;
    }
    .test-q strong { color:var(--gold-light); font-weight:400; }
    .test-author { display:flex; align-items:center; gap:1.2rem; }
    .test-av {
      width:44px; height:44px; border-radius:50%;
      background:linear-gradient(135deg, var(--gold-dim), rgba(201,168,76,.3));
      border:1px solid var(--gold);
      display:flex; align-items:center; justify-content:center;
      font-family:'Syne',sans-serif; font-size:.7rem; color:var(--gold);
    }
    .test-name { font-family:'Syne',sans-serif; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text); margin-bottom:.2rem; }
    .test-role { font-family:'Syne',sans-serif; font-size:.6rem; letter-spacing:.1em; color:var(--text3); }

    /* CTA band */
    .cta-band {
      background:var(--gold); padding:4.5rem 3rem;
      display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:2rem;
    }
    .cta-band-t {
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(2rem,5vw,3.5rem); font-weight:300;
      color:var(--bg); line-height:1.1;
    }
    .cta-band-t em { font-style:italic; }
    .btn-dark {
      font-family:'Syne',sans-serif; font-size:.68rem; letter-spacing:.18em;
      text-transform:uppercase; background:var(--bg); color:var(--gold);
      border:none; padding:.9rem 2.2rem; cursor:none; flex-shrink:0;
      transition:background .2s, color .2s;
    }
    .btn-dark:hover { background:var(--surface); }

    /* ─── FOOTER ─── */
    footer {
      background:var(--surface); padding:4rem 3rem 2rem;
      border-top:1px solid var(--border);
    }
    .ft-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid var(--border); margin-bottom:2rem; }
    .ft-logo-wrap { display:flex; flex-direction:column; gap:1rem; }
    .ft-tagline { font-size:.85rem; line-height:1.8; color:var(--text3); max-width:260px; }
    .ft-h { font-family:'Syne',sans-serif; font-size:.62rem; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem; }
    .ft-links { list-style:none; display:flex; flex-direction:column; gap:.7rem; }
    .ft-links a { font-size:.85rem; color:var(--text2); text-decoration:none; cursor:none; transition:color .2s; }
    .ft-links a:hover { color:var(--gold); }
    .ft-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
    .ft-copy { font-family:'Syne',sans-serif; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text3); }
    .ft-socials { display:flex; gap:1.5rem; }
    .ft-socials a { font-family:'Syne',sans-serif; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text3); text-decoration:none; cursor:none; transition:color .2s; }
    .ft-socials a:hover { color:var(--gold); }

    /* ─── WORK PAGE ─── */
    .pg-hero {
      padding:10rem 3rem 5rem;
      background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
      border-bottom:1px solid var(--border);
    }
    .filter-bar {
      display:flex; gap:1rem; flex-wrap:wrap; margin-top:3rem;
    }
    .filter-btn {
      font-family:'Syne',sans-serif; font-size:.65rem; letter-spacing:.18em;
      text-transform:uppercase; background:transparent;
      border:1px solid var(--border); color:var(--text2);
      padding:.55rem 1.4rem; cursor:none; transition:all .2s;
    }
    .filter-btn.active, .filter-btn:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }

    .projects-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; margin-top:4rem; }
    .proj-card { cursor:none; overflow:hidden; background:var(--surface); border:1px solid var(--border); }
    .proj-img { aspect-ratio:16/10; overflow:hidden; position:relative; }
    .proj-img-inner { width:100%; height:100%; transition:transform .6s ease; }
    .proj-card:hover .proj-img-inner { transform:scale(1.04); }
    .proj-info { padding:1.8rem; }
    .proj-tags { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
    .proj-tag { font-family:'Syne',sans-serif; font-size:.55rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); background:var(--gold-dim); padding:.25rem .7rem; border:1px solid rgba(201,168,76,.2); }
    .proj-title { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:400; color:var(--white); margin-bottom:.6rem; }
    .proj-desc { font-size:.83rem; line-height:1.8; color:var(--text2); }
    .proj-cta { display:flex; align-items:center; gap:.5rem; margin-top:1.2rem; font-family:'Syne',sans-serif; font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); cursor:none; text-decoration:none; transition:gap .2s; }
    .proj-cta:hover { gap:1rem; color:var(--gold); }

    /* ─── ABOUT PAGE ─── */
    .team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:4rem; }
    .team-card { cursor:none; }
    .team-img {
      aspect-ratio:3/4; overflow:hidden; margin-bottom:1.2rem;
      position:relative;
      border: 1px solid var(--gold);
      box-shadow: 0 0 18px rgba(201,168,76,.15), inset 0 0 0 1px rgba(201,168,76,.08);
    }
    .team-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
    .ph-1 { background:linear-gradient(160deg,#16120a,#221c0e); }
    .ph-2 { background:linear-gradient(160deg,#0e1210,#141f16); }
    .ph-3 { background:linear-gradient(160deg,#100e16,#1a1624); }
    .ph-4 { background:linear-gradient(160deg,#12100e,#1e1a12); }
    .ph-5 { background:linear-gradient(160deg,#0e1214,#12181e); }
    .ph-6 { background:linear-gradient(160deg,#140e0e,#201412); }
    .ph-init { font-family:'Cormorant Garamond',serif; font-size:3rem; font-weight:300; color:rgba(201,168,76,.3); }
    .team-name { font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:400; color:var(--white); margin-bottom:.2rem; }
    .team-role { font-family:'Syne',sans-serif; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }

    .values-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0; border:1px solid var(--border); margin-top:4rem; }
    .val-item { padding:3rem; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
    .val-item:nth-child(even) { border-right:none; }
    .val-item:nth-last-child(-n+2) { border-bottom:none; }
    .val-n { font-family:'Cormorant Garamond',serif; font-size:4rem; font-weight:300; color:transparent; -webkit-text-stroke:1px rgba(201,168,76,.2); line-height:1; margin-bottom:1rem; }
    .val-title { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:400; color:var(--white); margin-bottom:.8rem; }
    .val-desc { font-size:.85rem; line-height:1.85; color:var(--text2); }

    /* ─── SERVICES PAGE ─── */
    .svc-detail-list { margin-top:4rem; }
    .svc-detail-item {
      display:grid; grid-template-columns:60px 1fr 280px;
      align-items:start; gap:2.5rem; padding:2.8rem 0;
      border-bottom:1px solid var(--border); cursor:none;
      transition:padding-left .3s;
    }
    .svc-detail-item:first-child { border-top:1px solid var(--border); }
    .svc-detail-item:hover { padding-left:.8rem; }
    .sd-n { font-family:'Cormorant Garamond',serif; font-size:2.5rem; font-weight:300; color:transparent; -webkit-text-stroke:1px rgba(201,168,76,.2); line-height:1; }
    .sd-main .sd-title { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:400; color:var(--white); margin-bottom:.8rem; line-height:1; }
    .sd-main .sd-desc { font-size:.88rem; line-height:1.85; color:var(--text2); }
    .sd-features { display:flex; flex-direction:column; gap:.6rem; }
    .sd-feat { font-family:'Syne',sans-serif; font-size:.65rem; letter-spacing:.1em; color:var(--text2); display:flex; align-items:center; gap:.6rem; }
    .sd-feat::before { content:''; width:4px; height:4px; background:var(--gold); border-radius:50%; flex-shrink:0; }

    .pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:4rem; }
    .price-card { padding:2.5rem; border:1px solid var(--border); position:relative; background:var(--surface); }
    .price-card.featured { border-color:var(--gold); background:var(--surface2); }
    .price-badge { position:absolute; top:-1px; left:50%; transform:translateX(-50%); background:var(--gold); padding:.25rem 1.2rem; font-family:'Syne',sans-serif; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bg); white-space:nowrap; }
    .price-tier { font-family:'Syne',sans-serif; font-size:.65rem; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
    .price-amount { font-family:'Cormorant Garamond',serif; font-size:3.5rem; font-weight:300; color:var(--white); line-height:1; margin-bottom:.3rem; }
    .price-amount span { font-size:1.2rem; vertical-align:super; }
    .price-period { font-size:.8rem; color:var(--text3); margin-bottom:2rem; }
    .price-features { list-style:none; display:flex; flex-direction:column; gap:.8rem; margin-bottom:2rem; }
    .price-features li { font-size:.85rem; color:var(--text2); display:flex; align-items:center; gap:.7rem; }
    .price-features li::before { content:''; width:5px; height:5px; background:var(--gold); border-radius:50%; flex-shrink:0; opacity:.5; }
    .price-card.featured .price-features li::before { opacity:1; }

    /* ─── CONTACT PAGE ─── */
    .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:start; }
    .contact-info { display:flex; flex-direction:column; gap:2.5rem; }
    .ci-item { border-left:2px solid var(--gold-dim); padding-left:1.5rem; }
    .ci-label { font-family:'Syne',sans-serif; font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); margin-bottom:.4rem; }
    .ci-val { font-size:.95rem; color:var(--text); }

    .contact-form { display:flex; flex-direction:column; gap:1.2rem; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
    .form-group { display:flex; flex-direction:column; gap:.5rem; }
    .form-label { font-family:'Syne',sans-serif; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text3); }
    .form-input, .form-textarea {
      background:var(--surface); border:1px solid var(--border);
      color:var(--text); padding:.9rem 1.2rem;
      font-family:'DM Sans',sans-serif; font-size:.9rem; font-weight:300;
      outline:none; transition:border-color .2s; width:100%;
    }
    .form-input:focus, .form-textarea:focus { border-color:var(--gold); }
    .form-input::placeholder, .form-textarea::placeholder { color:var(--text3); }
    .form-textarea { resize:vertical; min-height:140px; }
    .form-select {
      background:var(--surface); border:1px solid var(--border);
      color:var(--text2); padding:.9rem 1.2rem;
      font-family:'DM Sans',sans-serif; font-size:.9rem; font-weight:300;
      outline:none; transition:border-color .2s; width:100%;
      appearance:none; cursor:none;
    }
    .form-select:focus { border-color:var(--gold); color:var(--text); }
    .form-select option { background:var(--surface); }

    .submit-btn {
      font-family:'Syne',sans-serif; font-size:.7rem; letter-spacing:.2em;
      text-transform:uppercase; background:var(--gold); color:var(--bg);
      border:none; padding:1.1rem 2.5rem; cursor:none;
      transition:background .2s; align-self:flex-start;
    }
    .submit-btn:hover { background:var(--gold-light); }
    .form-success { display:none; padding:2rem; border:1px solid var(--gold); background:var(--gold-dim); text-align:center; }
    .form-success.show { display:block; animation:pageIn .4s ease; }
    .form-success p { font-family:'Cormorant Garamond',serif; font-size:1.3rem; color:var(--gold-light); }

    /* map-like graphic */
    .contact-map {
      height:220px; background:var(--surface2);
      border:1px solid var(--border); display:flex;
      align-items:center; justify-content:center;
      position:relative; overflow:hidden;
    }
    .map-grid {
      position:absolute; inset:0;
      background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
      background-size:30px 30px;
    }
    .map-dot {
      position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
    }
    .map-dot-core { width:10px; height:10px; background:var(--gold); border-radius:50%; }
    .map-dot-ring {
      position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      width:10px; height:10px;
      border:1px solid var(--gold); border-radius:50%;
      animation:ping 2s ease-out infinite;
    }
    @keyframes ping { 0%{width:10px;height:10px;opacity:1} 100%{width:80px;height:80px;opacity:0} }

    /* ─── HERO VISUAL ─── */
    .hero-visual-outer {
      position: absolute;
      right: 5%;
      top: 50%;
      transform: translateY(-50%);
      width: 320px; height: 320px;
      z-index: 2;
      opacity: 0;
      animation: fadeU .9s 1.1s forwards;
      flex-shrink: 0;
    }
    .hero-visual-circle {
      width: 100%; height: 100%;
      border-radius: 50%;
      border: 1px solid rgba(201,168,76,.22);
      background: radial-gradient(ellipse 80% 80% at 50% 50%,
        rgba(201,168,76,.06) 0%, rgba(201,168,76,.02) 40%, transparent 70%);
      box-shadow: 0 0 60px rgba(201,168,76,.07), inset 0 0 40px rgba(201,168,76,.04);
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    .hv-ring {
      position: absolute; border-radius: 50%;
      border: 1px solid rgba(201,168,76,.1);
      pointer-events: none;
    }
    .hv-ring-1 { width: 92%; height: 92%; animation: hvSpin 22s linear infinite; }
    .hv-ring-2 { width: 68%; height: 68%; border-color: rgba(201,168,76,.16); animation: hvSpin 16s linear infinite reverse; }
    .hv-ring-3 { width: 44%; height: 44%; border-color: rgba(201,168,76,.08); animation: hvSpin 30s linear infinite; }
    @keyframes hvSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
    .hv-orb {
      position: absolute; width: 6px; height: 6px;
      background: var(--gold); border-radius: 50%;
      top: 4%; left: 50%; transform: translateX(-50%);
      opacity: .8; box-shadow: 0 0 8px rgba(201,168,76,.6);
    }
    .hv-icon-wrap {
      position: relative; width: 110px; height: 110px;
      display: flex; align-items: center; justify-content: center; z-index: 2;
    }
    .hv-icon {
      position: absolute; width: 88px; height: 88px;
      opacity: 0; transform: scale(.65) rotate(-8deg);
      transition: opacity .65s ease, transform .65s cubic-bezier(.34,1.3,.64,1);
      filter: drop-shadow(0 0 22px rgba(201,168,76,.5));
    }
    .hv-icon.active { opacity: 1; transform: scale(1) rotate(0deg); }
    .hv-meta {
      position: absolute; bottom: 38px;
      display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2;
    }
    .hv-label {
      font-family: 'Syne', sans-serif; font-size: .58rem;
      letter-spacing: .38em; text-transform: uppercase;
      color: var(--gold); opacity: .65; transition: opacity .3s;
    }
    .hv-dots { display: flex; gap: 6px; }
    .hv-dot {
      width: 4px; height: 4px; border-radius: 50%;
      background: rgba(201,168,76,.25); transition: background .3s, transform .3s;
    }
    .hv-dot.active { background: var(--gold); transform: scale(1.4); }

    /* ─── RESPONSIVE ─── */

    /* Large tablets / small desktops */
    @media (max-width:1200px) {
      .hero-visual-outer { width: 260px; height: 260px; right: 3%; }
      .hero-content { max-width: 560px; }
    }

    /* Tablets: hero layout stacks, animation moves below text */
    @media (max-width:1024px) {
      .svc-row { grid-template-columns:repeat(2,1fr); }
      .ft-grid { grid-template-columns:1fr 1fr; }
      .svc-detail-item { grid-template-columns:40px 1fr; }
      .sd-features { display:none; }
      /* Stack hero: animation goes below the text */
      .hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 8rem 2.5rem 3rem;
        min-height: auto;
        gap: 3rem;
      }
      .hero-content { max-width: 100%; }
      .hero-visual-outer {
        position: relative;
        right: auto; top: auto;
        transform: none;
        width: 220px; height: 220px;
        align-self: center;
        margin: 0 auto;
      }
      .hero-aside { right: 2rem; bottom: 2rem; gap: 2rem; }
    }

    /* Mobile phones */
    @media (max-width:768px) {
      nav { padding:1.2rem 1.5rem; }
      .nav-links, .nav-btn { display:none; }
      .hamburger { display:flex; }
      .hero {
        padding: 6rem 1.5rem 2.5rem;
        gap: 2.5rem;
        min-height: 100svh;
      }
      .hero-content { max-width: 100%; }
      .hero-h1 { font-size: clamp(2.8rem, 11vw, 5rem); }
      .hero-p { font-size: .9rem; max-width: 100%; }
      .hero-aside { display:none; }
      .scroll-hint { display: none; }
      /* Animation on mobile: smaller, centred */
      .hero-visual-outer {
        width: 190px; height: 190px;
        margin: 0 auto;
      }
      .hv-icon { width: 68px; height: 68px; }
      .hv-icon-wrap { width: 80px; height: 80px; }
      .hv-meta { bottom: 26px; }
      .sec { padding:4rem 0; }
      .about-grid { grid-template-columns:1fr; }
      .about-visual { display:none; }
      .svc-row { grid-template-columns:1fr; }
      .work-bento .wc { grid-column:span 12 !important; }
      .projects-grid { grid-template-columns:1fr; }
      .team-grid { grid-template-columns:1fr 1fr !important; }
      .values-grid { grid-template-columns:1fr; }
      .val-item { border-right:none; }
      .contact-grid { grid-template-columns:1fr; gap:3rem; }
      .form-row { grid-template-columns:1fr; }
      .pricing-grid { grid-template-columns:1fr; }
      .ft-grid { grid-template-columns:1fr; }
      .pg-hero { padding:7rem 1.5rem 3rem; }
      .cta-band { flex-direction:column; padding: 3rem 1.5rem; }
      .cta-band-t { font-size: clamp(1.6rem,7vw,2.5rem); }
    }

    /* Small phones */
    @media (max-width:480px) {
      .hero { padding: 5.5rem 1.2rem 2rem; gap: 2rem; }
      .hero-h1 { font-size: clamp(2.4rem, 13vw, 3.5rem); }
      .hero-btns { flex-direction: column; gap: .8rem; }
      .btn-gold, .btn-outline { width: 100%; justify-content: center; text-align: center; }
      .hero-visual-outer { width: 160px; height: 160px; }
      .hv-icon { width: 56px; height: 56px; }
      .hv-icon-wrap { width: 66px; height: 66px; }
      .hv-meta { bottom: 18px; }
      .hv-label { font-size: .5rem; letter-spacing: .28em; }
      .team-grid { grid-template-columns: 1fr 1fr !important; gap: 1rem; }
      .pg-hero { padding: 6rem 1.2rem 2.5rem; }
      .display-title { font-size: clamp(2.2rem, 10vw, 4rem); }
      .filter-bar { gap: .6rem; }
      .filter-btn { padding: .45rem 1rem; font-size: .6rem; }
    }