/* =====================================================================
   JOHN CLANTON — Luxury Real Estate & Construction
   Design System  ·  matte-black / gold-bronze / forest-green / navy
   Aesthetic reference: Sotheby's · Christie's · Rolls-Royce · Apple
   ===================================================================== */

/* ----------  DESIGN TOKENS  ---------- */
:root{
  /* surfaces (dark, default) */
  --ink:        #0a0b0c;
  --char:       #101214;
  --graphite:   #16191c;
  --graphite-2: #1d2125;
  --line:       rgba(201,162,75,.16);
  --line-soft:  rgba(255,255,255,.07);
  --glass:      rgba(14,16,18,.62);

  /* metals + accents */
  --gold:       #c9a24b;
  --gold-2:     #d8b869;
  --gold-hi:    #ecd49a;
  --bronze:     #a97b3f;
  --forest:     #234a37;
  --forest-2:   #2f6349;
  --sage:       #9db3a3;
  --navy:       #12233c;

  /* text */
  --text:       #ece9e2;
  --text-2:     #b7b3a9;
  --text-3:     #7d7a72;
  --on-gold:    #17130a;

  /* type */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* rhythm */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --radius-lg: 10px;
  --shadow: 0 30px 80px -30px rgba(0,0,0,.7);
  --shadow-gold: 0 20px 60px -25px rgba(201,162,75,.35);
  --ease: cubic-bezier(.22,.61,.36,1);

  --nav-h: 78px;
}

/* light theme */
[data-theme="light"]{
  --ink:        #f6f3ec;
  --char:       #efeae0;
  --graphite:   #e7e1d5;
  --graphite-2: #ded7c8;
  --line:       rgba(169,123,63,.24);
  --line-soft:  rgba(20,18,14,.09);
  --glass:      rgba(246,243,236,.72);
  --gold:       #9c7a2f;
  --gold-2:     #b08d3d;
  --gold-hi:    #7d5f1f;
  --sage:       #4a6152;
  --text:       #1c1b17;
  --text-2:     #4a463d;
  --text-3:     #746f63;
  --on-gold:    #fbf7ee;
  --shadow: 0 30px 80px -34px rgba(60,45,15,.4);
}

/* ----------  RESET  ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--text);
  line-height:1.6;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .5s var(--ease), color .5s var(--ease);
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none }
ul{ list-style:none }
::selection{ background:var(--gold); color:var(--on-gold) }

/* ----------  TYPOGRAPHY  ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.04; letter-spacing:-.01em }
.display{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.9rem, 7vw, 6.4rem);
  line-height:.98; letter-spacing:-.02em;
}
.h1{ font-size:clamp(2.4rem,5vw,4.4rem); line-height:1.02 }
.h2{ font-size:clamp(2rem,4vw,3.4rem) }
.h3{ font-size:clamp(1.4rem,2.4vw,2rem) }
.serif{ font-family:var(--serif) }
.lead{ font-size:clamp(1.05rem,1.5vw,1.32rem); color:var(--text-2); font-weight:300; line-height:1.7 }
.eyebrow{
  font-family:var(--sans); font-size:.74rem; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)) }
.eyebrow.center::after{ content:""; width:34px; height:1px; background:linear-gradient(90deg,var(--gold),transparent) }
.muted{ color:var(--text-2) }
.gold-text{ color:var(--gold) }
.text-grad{
  background:linear-gradient(120deg,var(--gold-hi),var(--gold) 45%,var(--bronze));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ----------  LAYOUT  ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter) }
.container-wide{ max-width:1520px }
.section{ padding:clamp(72px,11vh,150px) 0 }
.section-tight{ padding:clamp(48px,7vh,90px) 0 }
.center{ text-align:center }
.mx-auto{ margin-inline:auto }
.maxw-xs{ max-width:520px } .maxw-sm{ max-width:640px } .maxw-md{ max-width:760px } .maxw-lg{ max-width:920px }
.grid{ display:grid; gap:clamp(20px,3vw,40px) }
.g2{ grid-template-columns:repeat(2,1fr) }
.g3{ grid-template-columns:repeat(3,1fr) }
.g4{ grid-template-columns:repeat(4,1fr) }
.flex{ display:flex } .items-center{ align-items:center } .justify-between{ justify-content:space-between }
.gap-sm{ gap:12px } .gap{ gap:22px } .gap-lg{ gap:40px } .wrap{ flex-wrap:wrap }
.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); border:0; margin:0 }
.mt-sm{ margin-top:14px } .mt{ margin-top:26px } .mt-lg{ margin-top:44px } .mt-xl{ margin-top:70px }
.mb{ margin-bottom:26px } .mb-lg{ margin-bottom:44px }

/* section heading block */
.sec-head{ max-width:720px }
.sec-head.center{ margin-inline:auto }
.sec-head h2{ margin-top:18px }
.sec-head .lead{ margin-top:20px }

/* ----------  BUTTONS  ---------- */
.btn{
  --bg:var(--gold); --fg:var(--on-gold);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:15px 30px; font-family:var(--sans); font-size:.82rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; border-radius:var(--radius);
  background:var(--bg); color:var(--fg); position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s;
  will-change:transform;
}
.btn svg{ width:16px; height:16px }
.btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow-gold) }
.btn-gold{ background:linear-gradient(120deg,var(--gold-2),var(--gold) 60%,var(--bronze)); color:var(--on-gold) }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--line) }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); box-shadow:none }
.btn-dark{ background:var(--graphite-2); color:var(--text); border:1px solid var(--line-soft) }
.btn-lg{ padding:18px 40px; font-size:.86rem }
.btn-sm{ padding:11px 20px; font-size:.72rem }
.link-arrow{
  display:inline-flex; align-items:center; gap:.55em; color:var(--gold);
  font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.link-arrow svg{ width:15px; height:15px; transition:transform .35s var(--ease) }
.link-arrow:hover svg{ transform:translateX(6px) }

/* ----------  NAV  ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900; height:var(--nav-h);
  display:flex; align-items:center;
  transition:height .4s var(--ease), background .4s var(--ease), border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  height:64px; background:var(--glass);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--line-soft);
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; gap:24px }
.brand{ display:flex; align-items:center; gap:13px; z-index:2 }
.brand-mark{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:grid; place-items:center; position:relative;
  border:1px solid var(--gold); color:var(--gold);
  font-family:var(--serif); font-weight:600; font-size:1.15rem;
  background:radial-gradient(circle at 30% 25%, rgba(201,162,75,.18), transparent 70%);
}
.brand-name{ font-family:var(--serif); font-size:1.32rem; font-weight:600; letter-spacing:.02em; line-height:1 }
.brand-name small{ display:block; font-family:var(--sans); font-size:.56rem; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-top:5px }
.nav-links{ display:flex; align-items:center; gap:34px }
.nav-links a{
  font-size:.82rem; font-weight:500; letter-spacing:.04em; color:var(--text-2);
  position:relative; padding:6px 0; transition:color .3s;
}
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width .35s var(--ease) }
.nav-links a:hover, .nav-links a.active{ color:var(--text) }
.nav-links a:hover::after, .nav-links a.active::after{ width:100% }
.nav-cta{ display:flex; align-items:center; gap:16px }
/* dropdown */
.has-drop{ position:relative }
.drop{
  position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(10px);
  min-width:260px; background:var(--glass); backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:12px;
  display:grid; gap:2px; opacity:0; visibility:hidden; transition:opacity .3s, transform .3s, visibility .3s;
  box-shadow:var(--shadow);
}
.has-drop:hover .drop{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) }
.drop a{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:6px; color:var(--text-2);
  font-size:.85rem; letter-spacing:.02em; transition:background .25s, color .25s;
}
.drop a::after{ display:none }
.drop a:hover{ background:rgba(201,162,75,.09); color:var(--text) }
.drop a .di{ width:16px; height:16px; color:var(--gold); flex:none }
.theme-toggle{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line-soft);
  display:grid; place-items:center; color:var(--text-2); transition:.3s;
}
.theme-toggle:hover{ border-color:var(--gold); color:var(--gold) }
.theme-toggle svg{ width:17px; height:17px }
.theme-toggle .sun{ display:none } [data-theme="light"] .theme-toggle .sun{ display:block } [data-theme="light"] .theme-toggle .moon{ display:none }
.burger{ display:none; width:42px; height:42px; border-radius:8px; border:1px solid var(--line-soft); place-items:center }
.burger span{ display:block; width:20px; height:1.5px; background:var(--text); position:relative; transition:.3s }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--text); transition:.3s }
.burger span::before{ top:-6px } .burger span::after{ top:6px }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:899; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 var(--gutter);
  transform:translateX(100%); transition:transform .5s var(--ease); visibility:hidden;
}
.drawer.open{ transform:none; visibility:visible }
.drawer a{ font-family:var(--serif); font-size:2rem; color:var(--text-2); padding:8px 0; border-bottom:1px solid var(--line-soft) }
.drawer a:hover{ color:var(--gold) }

/* ----------  HERO  ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden }
.hero-media{ position:absolute; inset:0; z-index:0 }
.hero-media img,.hero-media video{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,9,10,.55) 0%, rgba(8,9,10,.35) 40%, rgba(8,9,10,.82) 100%),
    radial-gradient(120% 90% at 78% 20%, transparent 30%, rgba(8,9,10,.6) 100%);
}
.hero-inner{ position:relative; z-index:2; padding-top:var(--nav-h) }
.hero .display{ max-width:16ch }
.hero-sub{ max-width:52ch; margin-top:28px }
.hero-actions{ margin-top:42px; display:flex; gap:18px; flex-wrap:wrap }
.hero-host{ display:flex; align-items:center; gap:15px; margin-top:44px }
.hero-host img{ width:60px; height:60px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); box-shadow:0 10px 26px rgba(0,0,0,.5) }
.hero-host .hh-name{ display:block; font-family:var(--serif); font-size:1.15rem; line-height:1.2; color:var(--text) }
.hero-host .hh-role{ display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-top:3px }
.hero-scroll{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--text-3);
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
}
.hero-scroll .bar{ width:1px; height:52px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden }
.hero-scroll .bar::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--gold-hi); animation:scrolldot 2.2s var(--ease) infinite }
@keyframes scrolldot{ 0%{ top:-50% } 100%{ top:120% } }

/* page hero (subpages) */
.page-hero{ position:relative; padding:calc(var(--nav-h) + 80px) 0 90px; overflow:hidden; border-bottom:1px solid var(--line-soft) }
.page-hero.with-media{ min-height:64vh; display:flex; align-items:flex-end; padding-bottom:70px }
.page-hero-media{ position:absolute; inset:0; z-index:0 }
.page-hero-media img{ width:100%; height:100%; object-fit:cover }
.page-hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,9,10,.6),rgba(8,9,10,.9)) }
.page-hero .container{ position:relative; z-index:2 }
.page-hero .display,.page-hero .h1{ margin-top:20px }
.breadcrumb{ display:flex; gap:10px; font-size:.76rem; color:var(--text-3); letter-spacing:.08em; margin-bottom:8px }
.breadcrumb a:hover{ color:var(--gold) } .breadcrumb span{ color:var(--gold) }

/* ----------  CARDS  ---------- */
.card{
  position:relative; background:linear-gradient(180deg,var(--graphite),var(--char));
  border:1px solid var(--line-soft); border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s, box-shadow .5s;
}
.card:hover{ transform:translateY(-6px); border-color:var(--line); box-shadow:var(--shadow) }
.card-pad{ padding:clamp(24px,3vw,38px) }
.card-media{ aspect-ratio:16/11; overflow:hidden; position:relative }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.card:hover .card-media img{ transform:scale(1.06) }

/* service card */
.svc{
  display:block; padding:clamp(26px,3vw,40px); position:relative;
  background:linear-gradient(180deg,var(--graphite),var(--char));
  border:1px solid var(--line-soft); border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s, box-shadow .5s;
}
.svc::before{ content:""; position:absolute; left:0; top:0; height:100%; width:2px; background:linear-gradient(var(--gold),transparent); transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease) }
.svc:hover{ transform:translateY(-6px); border-color:var(--line); box-shadow:var(--shadow) }
.svc:hover::before{ transform:scaleY(1) }
.svc-ico{
  width:56px; height:56px; border-radius:12px; display:grid; place-items:center; margin-bottom:24px;
  color:var(--gold); border:1px solid var(--line); background:radial-gradient(circle at 30% 25%,rgba(201,162,75,.14),transparent 70%);
}
.svc-ico svg{ width:26px; height:26px }
.svc h3{ font-size:1.4rem; margin-bottom:12px }
.svc p{ color:var(--text-2); font-size:.96rem; font-weight:300 }
.svc .link-arrow{ margin-top:22px }
.svc-num{ position:absolute; top:26px; right:30px; font-family:var(--serif); font-size:1.1rem; color:var(--text-3) }

/* feature list */
.feat{ display:flex; gap:16px; align-items:flex-start }
.feat-ico{ width:44px; height:44px; border-radius:10px; flex:none; display:grid; place-items:center; color:var(--gold); border:1px solid var(--line); background:rgba(201,162,75,.06) }
.feat-ico svg{ width:20px; height:20px }
.feat h4{ font-size:1.2rem; margin-bottom:6px }
.feat p{ color:var(--text-2); font-size:.92rem; font-weight:300 }

/* check list */
.checks{ display:grid; gap:14px }
.checks li{ display:flex; gap:13px; align-items:flex-start; color:var(--text-2); font-weight:300 }
.checks li svg{ width:20px; height:20px; color:var(--gold); flex:none; margin-top:2px }
.checks li b{ color:var(--text); font-weight:500 }

/* ----------  STATS / COUNTERS  ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius-lg); overflow:hidden }
.stat{ background:var(--char); padding:clamp(28px,4vw,52px) 24px; text-align:center }
.stat .num{ font-family:var(--serif); font-size:clamp(2.6rem,5vw,4rem); line-height:1; color:var(--gold); font-weight:600 }
.stat .num .suf{ color:var(--text) }
.stat .lbl{ margin-top:12px; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3) }

/* ----------  IMAGE + TEXT SPLIT  ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center }
.split.reverse{ direction:rtl } .split.reverse > *{ direction:ltr }
.frame{ position:relative; border-radius:var(--radius-lg); overflow:hidden }
.frame img{ width:100%; height:100%; object-fit:cover }
.frame.tall{ aspect-ratio:4/5 } .frame.wide{ aspect-ratio:5/4 }
.frame-gold{ box-shadow:0 0 0 1px var(--line), 0 40px 80px -40px rgba(0,0,0,.7) }
.frame-badge{
  position:absolute; bottom:22px; left:22px; padding:16px 22px; border-radius:8px;
  background:var(--glass); backdrop-filter:blur(14px); border:1px solid var(--line);
  display:flex; align-items:center; gap:14px;
}
.frame-badge .n{ font-family:var(--serif); font-size:2rem; color:var(--gold); line-height:1 }
.frame-badge .t{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); max-width:130px }

/* ----------  TESTIMONIALS  ---------- */
.quote{
  background:linear-gradient(180deg,var(--graphite),var(--char)); border:1px solid var(--line-soft);
  border-radius:var(--radius-lg); padding:clamp(28px,3.4vw,44px); position:relative;
}
.quote .mark{ font-family:var(--serif); font-size:4rem; line-height:.6; color:var(--gold); opacity:.4 }
.quote p{ font-family:var(--serif); font-size:clamp(1.15rem,1.7vw,1.5rem); font-weight:500; line-height:1.5; margin:14px 0 24px; color:var(--text) }
.quote .who{ display:flex; align-items:center; gap:14px }
.quote .who .av{ width:48px; height:48px; border-radius:50%; background:var(--graphite-2); display:grid; place-items:center; color:var(--gold); font-family:var(--serif); font-size:1.2rem; border:1px solid var(--line) }
.quote .who .nm{ font-weight:600; font-size:.95rem } .quote .who .rl{ font-size:.78rem; color:var(--text-3) }
.stars{ display:flex; gap:3px; color:var(--gold); margin-bottom:6px } .stars svg{ width:15px; height:15px }

/* ----------  CTA BANNER  ---------- */
.cta{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; isolation:isolate;
  padding:clamp(48px,7vw,96px); text-align:center;
  background:linear-gradient(120deg,var(--forest),var(--navy));
  border:1px solid var(--line);
}
.cta::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background:radial-gradient(120% 120% at 50% 0%, rgba(201,162,75,.22), transparent 55%) }
.cta .display{ margin-inline:auto }

/* ----------  BLOG / INSIGHTS  ---------- */
.post{ display:flex; flex-direction:column; height:100% }
.post .card-media{ aspect-ratio:16/10 }
.post-body{ padding:26px; display:flex; flex-direction:column; flex:1 }
.post-meta{ display:flex; gap:12px; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:14px }
.post-meta .tag{ color:var(--gold) }
.post h3{ font-size:1.35rem; line-height:1.15; margin-bottom:12px }
.post p{ color:var(--text-2); font-size:.92rem; font-weight:300; flex:1 }
.post .link-arrow{ margin-top:20px }

/* ----------  PORTFOLIO / GALLERY  ---------- */
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:44px }
.filter-btn{ padding:9px 20px; border:1px solid var(--line-soft); border-radius:100px; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); transition:.3s }
.filter-btn:hover,.filter-btn.active{ border-color:var(--gold); color:var(--gold); background:rgba(201,162,75,.06) }
.masonry{ columns:3; column-gap:clamp(16px,2vw,26px) }
.masonry .tile{ break-inside:avoid; margin-bottom:clamp(16px,2vw,26px) }
.tile{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-soft) }
.tile img{ width:100%; transition:transform .8s var(--ease) }
.tile:hover img{ transform:scale(1.05) }
.tile-cap{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px; opacity:0; transition:opacity .4s;
  background:linear-gradient(180deg,transparent 40%,rgba(8,9,10,.9));
}
.tile:hover .tile-cap{ opacity:1 }
.tile-cap .t{ font-family:var(--serif); font-size:1.3rem } .tile-cap .s{ font-size:.76rem; color:var(--gold); letter-spacing:.14em; text-transform:uppercase; margin-top:4px }

/* ----------  FORMS  ---------- */
.field{ display:flex; flex-direction:column; gap:9px; margin-bottom:20px }
.field label{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3) }
.input,.field input,.field select,.field textarea{
  width:100%; padding:15px 18px; background:var(--char); color:var(--text);
  border:1px solid var(--line-soft); border-radius:var(--radius); font-family:var(--sans); font-size:.95rem;
  transition:border-color .3s, background .3s;
}
.field textarea{ resize:vertical; min-height:130px }
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); background:var(--graphite) }
.form-note{ font-size:.8rem; color:var(--text-3) }
.form-ok{ padding:16px 20px; border:1px solid var(--forest-2); background:rgba(47,99,73,.12); border-radius:var(--radius); color:var(--sage); font-size:.9rem; display:none }
.form-ok.show{ display:block }

/* ----------  BRAND STRIP  ---------- */
.brands{ display:flex; align-items:center; justify-content:center; gap:clamp(30px,6vw,80px); flex-wrap:wrap }
.brand-chip{ display:flex; align-items:center; gap:14px; opacity:.85; transition:opacity .3s }
.brand-chip:hover{ opacity:1 }
.brand-chip img{ height:34px; width:auto; filter:brightness(0) invert(1); opacity:.72 }
[data-theme="light"] .brand-chip img{ filter:none; opacity:.9 }
.brand-chip.kr img{ height:30px }

/* ----------  FOOTER  ---------- */
.footer{ background:var(--char); border-top:1px solid var(--line-soft); padding:80px 0 34px; margin-top:0 }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:48px; margin-bottom:60px }
.footer h5{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:22px }
.footer-links{ display:grid; gap:12px } .footer-links a{ color:var(--text-2); font-size:.9rem; transition:color .3s } .footer-links a:hover{ color:var(--gold) }
.footer p{ color:var(--text-2); font-size:.9rem; font-weight:300 }
.footer .brand-name{ color:var(--text) }
.foot-contact{ display:grid; gap:12px } .foot-contact a{ display:flex; gap:12px; align-items:center; color:var(--text-2); font-size:.9rem } .foot-contact a:hover{ color:var(--gold) } .foot-contact svg{ width:16px; height:16px; color:var(--gold); flex:none }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding-top:28px; border-top:1px solid var(--line-soft); font-size:.8rem; color:var(--text-3) }
.footer-bottom .socials{ display:flex; gap:10px }
.footer-bottom .socials a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-soft); display:grid; place-items:center; color:var(--text-2); transition:.3s }
.footer-bottom .socials a:hover{ border-color:var(--gold); color:var(--gold) }
.footer-bottom .socials svg{ width:16px; height:16px }
.nmls{ font-size:.72rem; color:var(--text-3); margin-top:8px; line-height:1.7 }

/* ----------  FLOATING CONSULT + AI ASSISTANT  ---------- */
.float-consult{
  position:fixed; right:26px; bottom:26px; z-index:850;
  display:inline-flex; align-items:center; gap:10px; padding:15px 22px;
  background:linear-gradient(120deg,var(--gold-2),var(--bronze)); color:var(--on-gold);
  border-radius:100px; font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 18px 46px -14px rgba(201,162,75,.5); transition:transform .4s var(--ease);
}
.float-consult:hover{ transform:translateY(-4px) }
.float-consult svg{ width:18px; height:18px }

.ai-fab{
  position:fixed; left:26px; bottom:26px; z-index:850; width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center; color:var(--on-gold);
  background:linear-gradient(135deg,var(--gold),var(--bronze));
  box-shadow:0 18px 46px -14px rgba(201,162,75,.55); transition:transform .4s var(--ease);
}
.ai-fab:hover{ transform:scale(1.06) }
.ai-fab svg{ width:26px; height:26px }
.ai-fab .pulse{ position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--gold); animation:pulse 2.4s var(--ease) infinite }
@keyframes pulse{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(1.7); opacity:0 } }
.ai-panel{
  position:fixed; left:26px; bottom:100px; z-index:851; width:min(380px,calc(100vw - 52px)); height:560px; max-height:calc(100vh - 130px);
  background:var(--char); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow);
  transform:translateY(20px) scale(.96); opacity:0; visibility:hidden; transform-origin:bottom left;
  transition:transform .4s var(--ease), opacity .4s, visibility .4s;
}
.ai-panel.open{ transform:none; opacity:1; visibility:visible }
.ai-head{ padding:18px 20px; background:linear-gradient(120deg,var(--forest),var(--navy)); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px }
.ai-head .av{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--bronze)); display:grid; place-items:center; color:var(--on-gold) }
.ai-head .av svg{ width:20px; height:20px }
.ai-head .nm{ font-weight:600; font-size:.95rem } .ai-head .st{ font-size:.72rem; color:var(--sage); display:flex; align-items:center; gap:6px }
.ai-head .st::before{ content:""; width:7px; height:7px; border-radius:50%; background:#48c774; box-shadow:0 0 8px #48c774 }
.ai-head .x{ margin-left:auto; color:var(--text-2); width:32px; height:32px; display:grid; place-items:center; border-radius:8px }
.ai-head .x:hover{ background:rgba(255,255,255,.08) }
.ai-body{ flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px; scrollbar-width:thin }
.ai-msg{ max-width:82%; padding:12px 16px; border-radius:14px; font-size:.9rem; line-height:1.5; font-weight:300 }
.ai-msg.bot{ align-self:flex-start; background:var(--graphite-2); border-bottom-left-radius:4px }
.ai-msg.me{ align-self:flex-end; background:linear-gradient(120deg,var(--gold-2),var(--bronze)); color:var(--on-gold); border-bottom-right-radius:4px; font-weight:400 }
.ai-chips{ display:flex; gap:8px; flex-wrap:wrap; padding:0 20px 12px }
.ai-chip{ padding:8px 14px; border:1px solid var(--line-soft); border-radius:100px; font-size:.78rem; color:var(--text-2); transition:.25s }
.ai-chip:hover{ border-color:var(--gold); color:var(--gold) }
.ai-input{ display:flex; gap:8px; padding:14px; border-top:1px solid var(--line-soft) }
.ai-input input{ flex:1; padding:12px 14px; background:var(--graphite); border:1px solid var(--line-soft); border-radius:100px; color:var(--text); font-size:.9rem }
.ai-input input:focus{ outline:none; border-color:var(--gold) }
.ai-input button{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--bronze)); color:var(--on-gold); display:grid; place-items:center; flex:none }
.ai-input button svg{ width:18px; height:18px }
.ai-typing{ display:flex; gap:4px; padding:12px 16px } .ai-typing span{ width:7px; height:7px; border-radius:50%; background:var(--text-3); animation:blink 1.2s infinite } .ai-typing span:nth-child(2){ animation-delay:.2s } .ai-typing span:nth-child(3){ animation-delay:.4s }
@keyframes blink{ 0%,60%,100%{ opacity:.3 } 30%{ opacity:1 } }

/* ----------  REVEAL ANIMATIONS  ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease) }
.reveal.in{ opacity:1; transform:none }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s } .reveal[data-d="5"]{ transition-delay:.4s }
.reveal-img{ clip-path:inset(0 100% 0 0); transition:clip-path 1.1s var(--ease) } .reveal-img.in{ clip-path:inset(0 0 0 0) }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important } .reveal{ opacity:1; transform:none } .reveal-img{ clip-path:none } }

/* ----------  MISC  ---------- */
.tag-pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border:1px solid var(--line); border-radius:100px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold) }
.grain{ position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.028; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.prose{ max-width:760px } .prose p{ margin-bottom:22px; color:var(--text-2); font-weight:300; font-size:1.05rem } .prose h2{ margin:44px 0 18px } .prose h3{ margin:32px 0 14px } .prose ul{ margin:0 0 22px; display:grid; gap:10px } .prose ul li{ padding-left:22px; position:relative; color:var(--text-2); font-weight:300 } .prose ul li::before{ content:""; position:absolute; left:0; top:11px; width:8px; height:1px; background:var(--gold) }
.pill-row{ display:flex; gap:10px; flex-wrap:wrap }

/* ----------  RESPONSIVE  ---------- */
@media (max-width:1024px){
  .g4{ grid-template-columns:repeat(2,1fr) } .g3{ grid-template-columns:repeat(2,1fr) }
  .stats{ grid-template-columns:repeat(2,1fr) }
  .masonry{ columns:2 }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:40px }
}
@media (max-width:860px){
  .nav-links,.nav-cta .btn{ display:none }
  .burger{ display:grid }
  .split,.split.reverse{ grid-template-columns:1fr; direction:ltr }
  .split.reverse > *{ direction:ltr }
  .g2{ grid-template-columns:1fr }
}
@media (max-width:620px){
  .g4,.g3,.stats{ grid-template-columns:1fr }
  .masonry{ columns:1 }
  .footer-grid{ grid-template-columns:1fr }
  .hero-actions{ flex-direction:column; align-items:stretch } .hero-actions .btn{ width:100% }
  .float-consult span{ display:none } .float-consult{ padding:16px }
}