/* ==========================================================================
   CC&R Services LLC — Stylesheet v2
   Design system: Black & Brass — architectural / structural-framing inspired
   Self-hosted type: Fraunces (display) + Inter (body) — see assets/fonts
   ========================================================================== */

/* -------------------- Self-hosted fonts -------------------- */
@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces-latin-500-normal.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces-latin-600-normal.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces-latin-700-normal.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces-latin-500-italic.woff2') format('woff2');
  font-weight:500; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/inter-latin-400-normal.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/inter-latin-500-normal.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/inter-latin-600-normal.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/inter-latin-700-normal.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* -------------------- Design Tokens -------------------- */
:root{
  /* Color — Black & Brass */
  --black-0:#07070a;
  --black-1:#0c0c0f;
  --black-2:#121215;
  --black-3:#1a1a1e;
  --black-4:#232327;
  --line:#242429;
  --line-soft:#1c1c20;
  --line-gold:rgba(199,163,90,0.30);
  --line-gold-soft:rgba(199,163,90,0.14);
  --gold-deep:#8a6b2c;
  --gold-dim:#6b5730;
  --gold:#bd9645;
  --gold-2:#d4af6a;
  --gold-light:#eeda9f;
  --gold-glow:rgba(212,175,106,0.32);
  /* Exact stops sampled from the CC&R logo artwork */
  --brand-gold-1:#fbd28f;
  --brand-gold-2:#e3ab6c;
  --brand-gold-3:#b78550;
  --brand-bg:#1d1d1d;
  --white:#f7f5f0;
  --gray-1:#cbc8c1;
  --gray-2:#9d9a92;
  --gray-3:#706d67;

  /* Type */
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Scale */
  --fs-hero: clamp(3.2rem, 6.2vw, 6.4rem);
  --fs-h1: clamp(2.3rem, 4vw, 3.5rem);
  --fs-h2: clamp(1.95rem, 3vw, 2.85rem);
  --fs-h3: clamp(1.15rem, 1.4vw, 1.4rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.76rem;

  /* Spacing — generous, unhurried */
  --space-section: clamp(7rem, 13vw, 12.5rem);
  --space-block: clamp(3rem, 6vw, 5rem);
  --container: 1280px;
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-xl: 28px;

  /* Shadow */
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 24px 48px -24px rgba(0,0,0,.65);
  --shadow-card-hover: 0 1px 2px rgba(0,0,0,.5), 0 32px 64px -20px rgba(0,0,0,.75), 0 0 0 1px var(--line-gold);
  --shadow-gold: 0 18px 40px -12px rgba(189,150,69,0.42);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out-soft: cubic-bezier(.16,1,.3,1);
  --dur-xs: .18s;
  --dur-s: .32s;
  --dur-m: .6s;
  --dur-l: 1s;
}

/* -------------------- Reset -------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--black-0);
  color:var(--white);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
svg{ max-width:100%; }
svg:not([class]){ width:24px; height:24px; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,p,figure{ margin:0; }
input, textarea, select{ font-family:inherit; font-size:inherit; }

::selection{ background:var(--gold); color:var(--black-0); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--gold-light);
  outline-offset:3px;
  border-radius:2px;
}

/* -------------------- Utility -------------------- */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(1.25rem, 4vw, 3rem);
}
.section{ padding:var(--space-section) 0; position:relative; }
.section-tight{ padding:calc(var(--space-section)*0.6) 0; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  font-family:var(--font-body);
  font-size:var(--fs-eyebrow);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-2);
  font-weight:600;
  margin-bottom:1.3rem;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
  display:inline-block;
}

.section-head{
  max-width:700px;
  margin-bottom:clamp(3rem, 6vw, 5rem);
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

h1,h2,h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.015em; color:var(--white); }
.h2{ font-size:var(--fs-h2); line-height:1.16; }
.lede{ color:var(--gray-1); font-size:1.08rem; margin-top:1.2rem; max-width:58ch; line-height:1.7; }
.section-head.center .lede{ margin-left:auto; margin-right:auto; }

.text-gold{ color:var(--gold-2); }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:1rem; top:-60px;
  background:var(--gold); color:var(--black-0); font-weight:700;
  padding:.75rem 1.25rem; border-radius:var(--radius-s); z-index:999;
  transition:top var(--dur-s) var(--ease);
}
.skip-link:focus{ top:1rem; }

.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
  z-index:300; transition:width .1s linear;
}
@media (prefers-reduced-motion: reduce){ .scroll-progress{ transition:none; } }

/* -------------------- Blueprint grain texture -------------------- */
.grain-bg{ position:relative; }
.grain-bg::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(189,150,69,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(189,150,69,0.055) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  pointer-events:none;
}

/* -------------------- Corner Bracket Signature Motif -------------------- */
.brackets{ position:relative; }
.brackets .bracket-tl, .brackets .bracket-tr, .brackets .bracket-bl, .brackets .bracket-br{
  content:"";
  position:absolute;
  width:24px; height:24px;
  border:1.5px solid var(--gold);
  opacity:.9;
  transition:width var(--dur-m) var(--ease-out-soft), height var(--dur-m) var(--ease-out-soft), opacity var(--dur-s) var(--ease);
  z-index:2;
}
.brackets .bracket-tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.brackets .bracket-tr{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
.brackets .bracket-bl{ bottom:-1px; left:-1px; border-right:none; border-top:none; }
.brackets .bracket-br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
.brackets:hover .bracket-tl, .brackets:hover .bracket-tr,
.brackets:hover .bracket-bl, .brackets:hover .bracket-br{ width:34px; height:34px; }

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  padding:1.15rem 2.3rem;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.015em;
  border-radius:3px;
  border:1px solid transparent;
  transition:transform var(--dur-s) var(--ease-out-soft), box-shadow var(--dur-s) var(--ease-out-soft), background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
  white-space:nowrap;
  position:relative;
  isolation:isolate;
}
.btn-gold{
  background:linear-gradient(180deg, var(--gold-2), var(--gold));
  color:var(--black-0);
  box-shadow:var(--shadow-gold);
  overflow:hidden;
}
.btn-gold::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.35) 42%, transparent 60%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease-out-soft);
  pointer-events:none;
}
.btn-gold:hover::before{ transform:translateX(120%); }
.btn-gold:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 50px -12px rgba(212,175,106,0.55);
  background:linear-gradient(180deg, var(--gold-light), var(--gold-2));
}
.btn-gold:active{ transform:translateY(-1px); }
.btn-outline{
  background:rgba(255,255,255,0.02);
  border-color:rgba(246,244,239,0.24);
  color:var(--white);
  backdrop-filter:blur(6px);
}
.btn-outline:hover{ border-color:var(--gold); color:var(--gold-light); background:rgba(189,150,69,0.08); transform:translateY(-3px); }
.btn-ghost-gold{ background:transparent; border-color:var(--gold-dim); color:var(--gold-2); }
.btn-ghost-gold:hover{ border-color:var(--gold); background:rgba(189,150,69,0.08); transform:translateY(-2px); }
.btn-lg{ padding:1.3rem 2.7rem; font-size:1rem; }
.btn-emphasis{ position:relative; }
.btn-emphasis::after{
  content:"";
  position:absolute; inset:0;
  border-radius:3px;
  box-shadow:0 0 0 0 rgba(212,175,106,0.45);
  animation:btn-ring 3.2s ease-out infinite;
  pointer-events:none;
}
@keyframes btn-ring{
  0%{ box-shadow:0 0 0 0 rgba(212,175,106,0.35); }
  70%{ box-shadow:0 0 0 14px rgba(212,175,106,0); }
  100%{ box-shadow:0 0 0 0 rgba(212,175,106,0); }
}
@media (prefers-reduced-motion: reduce){ .btn-emphasis::after{ animation:none; } }
.btn-sm{ padding:.75rem 1.4rem; font-size:.84rem; }
.btn-block{ width:100%; }
.btn svg{ width:19px; height:19px; flex-shrink:0; transition:transform var(--dur-s) var(--ease); }
.btn:hover svg.icon-arrow{ transform:translateX(3px); }

/* -------------------- Header / Nav -------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:1.5rem 0;
  transition:background var(--dur-s) var(--ease), padding var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(7,7,10,0.82);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  padding:1rem 0;
  border-bottom-color:var(--line);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }

.brand{ display:flex; align-items:center; gap:.85rem; }
.brand-mark{
  width:43px; height:auto;
  aspect-ratio:260/300;
  flex-shrink:0; position:relative;
  fill:url(#brandGoldGrad);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.45));
  transition:transform var(--dur-s) var(--ease-out-soft);
}
.brand:hover .brand-mark{ transform:scale(1.06) rotate(-2deg); }
.brand-name{ font-family:var(--font-display); font-size:1.26rem; letter-spacing:.006em; line-height:1.1; }
.brand-name span{ display:block; font-family:var(--font-body); font-size:.63rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gray-2); margin-top:.3rem; font-weight:600; }

.nav-links{ display:flex; align-items:center; gap:2.3rem; }
.nav-links a{
  font-size:.87rem; font-weight:500; color:var(--gray-1);
  position:relative; padding:.35rem 0;
  transition:color var(--dur-s) var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:var(--gold); transition:right var(--dur-m) var(--ease-out-soft);
}
.nav-links a:hover{ color:var(--white); }
.nav-links a:hover::after{ right:0; }

.nav-cta{ display:flex; align-items:center; gap:1rem; }
.nav-phone{ display:flex; align-items:center; gap:.55rem; font-size:.87rem; font-weight:600; color:var(--white); white-space:nowrap; flex-shrink:0; transition:color var(--dur-s) var(--ease); }
.nav-phone:hover{ color:var(--gold-2); }
.nav-phone svg{ width:16px; height:16px; color:var(--gold); }

.nav-toggle{
  display:none; background:none; border:1px solid var(--line); width:46px; height:46px;
  align-items:center; justify-content:center; color:var(--white); border-radius:3px;
}
.nav-toggle svg{ width:20px; height:20px; }

@media (max-width: 980px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(88vw, 400px); height:100vh;
    background:var(--black-1); border-left:1px solid var(--line);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:6.5rem 2.2rem 2rem; gap:1.7rem;
    transform:translateX(100%); transition:transform var(--dur-m) var(--ease-out-soft);
    z-index:210;
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a{ font-size:1.15rem; }
  .nav-cta .nav-phone{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.65); opacity:0; pointer-events:none;
    transition:opacity var(--dur-m) var(--ease); z-index:205; backdrop-filter:blur(2px);
  }
  .nav-backdrop.is-open{ opacity:1; pointer-events:auto; }
}

/* -------------------- Hero -------------------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  padding-top:9rem;
  padding-bottom:clamp(4rem, 8vw, 6.5rem);
  overflow:hidden;
  background:var(--black-0);
}

/* Full-bleed atmospheric background artwork */
.hero-bg{
  position:absolute; inset:0;
  z-index:0;
  overflow:hidden;
  transform:translateY(var(--scroll-shift, 0px));
  will-change:transform;
}
.hero-bg svg{
  position:absolute;
  top:50%; left:50%;
  width:min(1900px, 165vw); height:auto;
  transform:translate(-50%, -50%);
  will-change:transform;
  transition:transform .5s var(--ease-out-soft);
}
.hero-bg::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 60% 50% at 78% 20%, rgba(189,150,69,0.16), transparent 62%),
    linear-gradient(180deg, rgba(7,7,10,0.35) 0%, rgba(7,7,10,0.55) 45%, var(--black-0) 92%),
    linear-gradient(90deg, var(--black-0) 0%, rgba(7,7,10,0.25) 32%, transparent 60%);
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(189,150,69,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(189,150,69,0.045) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 78%);
}

.hero-content{ position:relative; z-index:2; max-width:700px; }

.hero-eyebrow-row{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.85rem; }
.hero-badge{
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid var(--line-gold); padding:.55rem 1.05rem;
  font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; color:var(--gold-2); font-weight:600;
  border-radius:100px; background:rgba(7,7,10,0.5); backdrop-filter:blur(8px);
}
.hero-badge .pulse-dot{
  width:6px; height:6px; border-radius:50%; background:var(--gold-2); flex-shrink:0;
  box-shadow:0 0 0 0 rgba(212,175,106,0.6); animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(212,175,106,0.55); }
  70%{ box-shadow:0 0 0 8px rgba(212,175,106,0); }
  100%{ box-shadow:0 0 0 0 rgba(212,175,106,0); }
}

.hero h1{
  font-size:var(--fs-hero);
  line-height:1.08;
  letter-spacing:-0.022em;
  text-wrap:balance;
}
.hero h1 em{ font-style:italic; font-weight:500; background:linear-gradient(180deg, var(--gold-light), var(--gold-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.hero-sub{
  margin-top:1.9rem;
  font-size:clamp(1.06rem, 1.3vw, 1.24rem);
  color:var(--gray-1);
  max-width:49ch;
  line-height:1.75;
}

.hero-actions{ display:flex; flex-wrap:wrap; gap:1.1rem; margin-top:2.85rem; }

.hero-caption{
  position:absolute; z-index:2; right:clamp(1.25rem, 4vw, 3rem); bottom:clamp(1.5rem, 4vw, 3rem);
  display:flex; align-items:center; gap:.6rem;
  background:rgba(7,7,10,0.55); backdrop-filter:blur(10px);
  border:1px solid var(--line-gold);
  color:var(--gold-light); font-size:.76rem; font-weight:600; letter-spacing:.04em;
  padding:.65rem 1rem; border-radius:100px;
}
.hero-caption svg{ width:14px; height:14px; flex-shrink:0; }

@media (max-width: 980px){
  .hero{ align-items:center; padding-top:8rem; }
  .hero-caption{ display:none; }
}
@media (max-width: 640px){
  .hero-bg svg{ width:min(1400px, 260vw); }
}

/* -------------------- Trust bar -------------------- */
.trust-bar{
  position:relative; z-index:2;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--black-1), var(--black-2));
}
.trust-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem 0; flex-wrap:wrap; gap:1.4rem 0;
}
.trust-item{
  display:flex; align-items:center; gap:.75rem;
  padding:.4rem clamp(1rem, 2.4vw, 2.2rem);
  position:relative;
  flex:1 1 0;
  min-width:180px;
  justify-content:center;
  transition:transform var(--dur-s) var(--ease-out-soft);
}
.trust-item:hover{ transform:translateY(-2px); }
.trust-item:hover svg{ color:var(--gold-light); }
.trust-item:not(:last-child)::after{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  height:26px; width:1px; background:var(--line);
}
.trust-item svg{ width:22px; height:22px; color:var(--gold-2); flex-shrink:0; transition:color var(--dur-s) var(--ease); }
.trust-item span{ font-size:.85rem; font-weight:600; color:var(--gray-1); letter-spacing:.01em; white-space:nowrap; }
@media (max-width: 900px){
  .trust-row{ justify-content:flex-start; }
  .trust-item{ flex:1 1 44%; justify-content:flex-start; }
  .trust-item:not(:last-child)::after{ display:none; }
}
@media (max-width: 540px){ .trust-item{ flex:1 1 100%; } }

/* -------------------- Marquee strip -------------------- */
.strip{ background:var(--black-0); padding:1.3rem 0; overflow:hidden; }
.strip-track{
  display:flex; gap:3.2rem; white-space:nowrap;
  animation:marquee 34s linear infinite;
  width:max-content;
}
.strip-track span{ font-family:var(--font-display); font-size:.98rem; color:var(--gray-3); position:relative; padding-right:3.2rem; }
.strip-track span::after{ content:"—"; color:var(--gold-dim); position:absolute; right:0; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* -------------------- Why Choose -------------------- */
.why-grid{
  display:grid;
  grid-template-columns:0.82fr 1.18fr;
  gap:clamp(3rem, 5vw, 5.5rem);
  align-items:start;
}
.why-sticky{ position:sticky; top:8.5rem; }
.why-list{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
.why-item{
  display:grid; grid-template-columns:auto 1fr; gap:1.5rem;
  padding:2rem; border:1px solid var(--line);
  border-radius:var(--radius-m);
  background:var(--black-1);
  transition:transform var(--dur-s) var(--ease-out-soft), border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.why-item:hover{
  transform:translateY(-4px);
  border-color:var(--line-gold);
  box-shadow:var(--shadow-card-hover);
  background:var(--black-2);
}
.why-icon{
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(160deg, rgba(189,150,69,0.16), rgba(189,150,69,0.02));
  border:1px solid var(--line-gold);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  color:var(--gold-2);
  transition:transform var(--dur-s) var(--ease-out-soft), box-shadow var(--dur-s) var(--ease);
}
.why-item:hover .why-icon{ transform:scale(1.08) rotate(-4deg); box-shadow:0 0 0 6px var(--line-gold-soft); }
.why-icon svg{ width:22px; height:22px; }
.why-item h3{ font-size:1.08rem; margin-bottom:.5rem; }
.why-item p{ color:var(--gray-2); font-size:.92rem; max-width:52ch; line-height:1.6; }

@media (max-width: 940px){
  .why-grid{ grid-template-columns:1fr; }
  .why-sticky{ position:static; }
}

/* -------------------- Services -------------------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.75rem;
}
.service-card{
  background:var(--black-1);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:3.4rem 2.4rem;
  position:relative;
  overflow:hidden;
  transition:transform var(--dur-m) var(--ease-out-soft), border-color var(--dur-s) var(--ease), box-shadow var(--dur-m) var(--ease-out-soft);
  min-height:250px;
  display:flex; flex-direction:column;
}
.service-card::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(189,150,69,0.10), transparent 60%);
  opacity:0; transition:opacity var(--dur-m) var(--ease);
  pointer-events:none;
}
.service-card::after{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold-2), transparent);
  transform:scaleX(0); transition:transform .5s var(--ease-out-soft);
}
.service-card:hover{
  transform:translateY(-6px);
  border-color:var(--line-gold);
  box-shadow:var(--shadow-card-hover);
}
.service-card:hover::before{ opacity:1; }
.service-card:hover::after{ transform:scaleX(1); }
.service-num{
  position:absolute; top:1.2rem; right:1.6rem;
  font-family:var(--font-display); font-size:2.6rem; font-weight:600;
  color:var(--white); opacity:.05; line-height:1; letter-spacing:0;
  pointer-events:none;
}
.service-icon-wrap{
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(160deg, rgba(189,150,69,0.18), rgba(189,150,69,0.03));
  border:1px solid var(--line-gold);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.7rem;
  transition:transform var(--dur-s) var(--ease-out-soft), box-shadow var(--dur-s) var(--ease);
  position:relative;
}
.service-card:hover .service-icon-wrap{ transform:scale(1.08); box-shadow:0 0 0 6px var(--line-gold-soft); }
.service-icon{ width:25px; height:25px; color:var(--gold-2); }
.service-card h3{ font-size:1.22rem; margin-bottom:.9rem; letter-spacing:-0.01em; }
.service-card p{ color:var(--gray-2); font-size:.92rem; font-style:italic; font-family:var(--font-display); font-weight:500; line-height:1.5; flex-grow:1; }
.service-link{
  margin-top:1.7rem; font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-2); display:inline-flex; align-items:center; gap:.45rem; opacity:0; transform:translateY(6px);
  transition:all var(--dur-s) var(--ease-out-soft); position:relative; z-index:1;
}
.service-card:hover .service-link{ opacity:1; transform:translateY(0); }
.service-link svg{ width:14px; height:14px; transition:transform var(--dur-s) var(--ease); }
.service-card:hover .service-link svg{ transform:translateX(4px); }

@media (max-width: 980px){ .services-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 640px){ .services-grid{ grid-template-columns:1fr; } }

/* -------------------- About -------------------- */
.about{
  display:grid; grid-template-columns:0.88fr 1.12fr; gap:clamp(3rem, 6vw, 5.5rem); align-items:center;
}
.about-visual{ position:relative; aspect-ratio:1/1.08; }
.about-visual-frame{
  position:absolute; inset:0; border-radius:var(--radius-l); overflow:hidden;
  background:linear-gradient(150deg, #17140d, #0b0a08 60%);
  box-shadow:var(--shadow-card);
}
.about-visual-frame svg{ position:absolute; inset:0; width:100%; height:100%; }
.about-badge{
  position:absolute; top:-1.6rem; right:-1.6rem;
  background:var(--black-0); border:1px solid var(--line-gold); border-radius:var(--radius-m);
  padding:1.5rem 1.7rem; text-align:center; width:168px;
  box-shadow:var(--shadow-card);
}
.about-badge strong{ display:block; font-family:var(--font-display); font-size:1.05rem; color:var(--gold-2); line-height:1.3; }
.about-badge span{ display:block; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-2); margin-top:.4rem; }

.about-copy p{ color:var(--gray-1); margin-bottom:1.3rem; max-width:60ch; line-height:1.75; }
.about-lead{
  font-family:var(--font-display); font-size:1.28rem; font-weight:500; font-style:italic;
  color:var(--white); line-height:1.5; max-width:34ch; margin-bottom:1.8rem !important;
  padding-left:1.3rem; border-left:2px solid var(--gold);
}
.about-credentials{ display:flex; flex-wrap:wrap; gap:.9rem; margin:1.8rem 0; }
.credential-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--line-gold); border-radius:100px;
  padding:.55rem 1.1rem; font-size:.8rem; font-weight:600; color:var(--gold-2);
  background:rgba(189,150,69,0.05);
}
.credential-chip svg{ width:14px; height:14px; }

.about-pillars{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  margin-top:2.2rem; padding-top:2.2rem; border-top:1px solid var(--line);
}
.about-pillar{
  display:flex; gap:.9rem; align-items:flex-start; padding:1.1rem;
  border-radius:var(--radius-m); transition:background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.about-pillar:hover{ background:var(--black-1); transform:translateY(-2px); }
.about-pillar svg{ width:19px; height:19px; color:var(--gold); flex-shrink:0; margin-top:.15rem; }
.about-pillar h4{ font-size:.94rem; font-weight:600; color:var(--white); margin-bottom:.25rem; font-family:var(--font-body); }
.about-pillar p{ font-size:.83rem; color:var(--gray-2); margin:0; line-height:1.55; }

@media (max-width: 940px){
  .about{ grid-template-columns:1fr; }
  .about-visual{ max-width:360px; margin:0 auto; }
  .about-pillars{ grid-template-columns:1fr; }
  .about-badge{ right:0; }
}

/* -------------------- Process -------------------- */
.process-list{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:0 .5rem; align-items:stretch; }
.process-step{
  background:var(--black-2); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:2.4rem 1.8rem; position:relative;
  transition:transform var(--dur-s) var(--ease-out-soft), border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.process-step:hover{ transform:translateY(-5px); border-color:var(--line-gold); box-shadow:var(--shadow-card-hover); }
.process-icon{
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(160deg, rgba(189,150,69,0.16), rgba(189,150,69,0.02));
  border:1px solid var(--line-gold);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-2); margin-bottom:1.3rem;
  transition:transform var(--dur-s) var(--ease-out-soft);
}
.process-icon svg{ width:20px; height:20px; }
.process-step:hover .process-icon{ transform:scale(1.08); }
.process-step .num{
  font-family:var(--font-display); font-size:.85rem; color:var(--gold-dim); letter-spacing:.1em; display:block; margin-bottom:.6rem;
}
.process-step h3{ font-size:1.05rem; margin-bottom:.6rem; }
.process-step p{ font-size:.86rem; color:var(--gray-2); line-height:1.6; }
.process-arrow{
  display:flex; align-items:center; justify-content:center; color:var(--gold-dim);
}
.process-arrow svg{ width:20px; height:20px; }

@media (max-width: 940px){
  .process-list{ grid-template-columns:1fr 1fr; gap:1.2rem; }
  .process-arrow{ display:none; }
}
@media (max-width: 560px){
  .process-list{ grid-template-columns:1fr; }
}

/* -------------------- Service Areas (radius diagram) -------------------- */
.areas-wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem, 5vw, 5.5rem); align-items:center;
}
.areas-chip-list{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.area-chip{
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid var(--line); border-radius:100px; padding:.6rem 1.15rem;
  font-size:.87rem; color:var(--gray-1); background:var(--black-1);
  transition:border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.area-chip:hover{ border-color:var(--gold); color:var(--gold-light); transform:translateY(-2px); }
.area-chip svg{ width:13px; height:13px; color:var(--gold); flex-shrink:0; }
.areas-note{
  margin-top:1.8rem; padding:1.3rem 1.5rem; border-left:2px solid var(--gold);
  background:var(--black-1); font-size:.9rem; color:var(--gray-2); border-radius:0 var(--radius-s) var(--radius-s) 0;
}
.areas-note a{ color:var(--gold-2); font-weight:600; }

.radius-diagram{
  position:relative; aspect-ratio:1/1; max-width:460px; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
}
.radius-diagram svg{ width:100%; height:100%; }
.radius-ring{ fill:none; stroke:var(--line-gold-soft); stroke-width:1; stroke-dasharray:4 6; }
.radius-center{ fill:var(--gold-2); }
.radius-label{ font-family:var(--font-body); font-size:11px; letter-spacing:.06em; text-transform:uppercase; fill:var(--gray-3); }
.radius-city{ font-family:var(--font-body); font-size:12.5px; font-weight:600; fill:var(--gray-1); }
.radius-pin{ fill:var(--black-0); stroke:var(--gold); stroke-width:1.4; }
.radius-pin-dot{ fill:var(--gold-2); }
.radius-ping{
  fill:none; stroke:var(--gold); stroke-width:1.4; opacity:.7;
  animation:ping 2.6s ease-out infinite;
  transform-origin:280px 280px;
}
@keyframes ping{
  0%{ r:10; opacity:.55; }
  100%{ r:26; opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .radius-ping{ animation:none; opacity:0; } }

@media (max-width: 940px){ .areas-wrap{ grid-template-columns:1fr; } .radius-diagram{ order:-1; } }

/* -------------------- Contact -------------------- */
.contact-glow{ position:relative; overflow:hidden; }
.contact-glow::before{
  content:"";
  position:absolute; top:-10%; right:-5%; width:55%; height:70%;
  background:radial-gradient(ellipse, rgba(189,150,69,0.09), transparent 70%);
  pointer-events:none;
}
.contact-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(2.5rem, 5vw, 4.5rem); align-items:flex-start;
  position:relative; z-index:1;
}
.hp-field{
  position:absolute; left:-9999px; top:-9999px;
  width:1px; height:1px; overflow:hidden;
}

.form-card{
  border:1px solid var(--line); border-radius:var(--radius-l); padding:clamp(2rem, 3.4vw, 3rem);
  background:linear-gradient(165deg, var(--black-1), var(--black-2));
  box-shadow:var(--shadow-card);
  position:relative; overflow:hidden;
  transition:border-color var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.form-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold-2), transparent);
}
.form-card:focus-within{
  border-color:var(--line-gold);
  box-shadow:var(--shadow-card), 0 0 0 3px var(--line-gold-soft);
}
.form-card h3{ font-size:1.3rem; margin-bottom:.5rem; }
.form-card .lede{ margin-top:0; margin-bottom:2rem; font-size:.94rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field{ margin-bottom:1.2rem; display:flex; flex-direction:column; gap:.55rem; }
.field label{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-2); font-weight:600; }
.field input, .field select, .field textarea{
  background:var(--black-0); border:1px solid var(--line); color:var(--white);
  padding:.95rem 1.1rem; border-radius:var(--radius-s); transition:border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--gray-3); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); outline:none; box-shadow:0 0 0 3px var(--line-gold-soft); }
.field textarea{ resize:vertical; min-height:130px; }
.field-note{ font-size:.77rem; color:var(--gray-3); margin-top:1.1rem; line-height:1.5; }
.form-success{
  display:none; align-items:center; gap:.85rem; padding:1.1rem 1.3rem; border:1px solid var(--line-gold);
  border-radius:var(--radius-s);
  background:rgba(189,150,69,0.08); color:var(--gold-light); font-size:.9rem; margin-top:1.1rem;
}
.form-success.is-visible{ display:flex; }
.form-error{
  display:none; padding:1.1rem 1.3rem; border:1px solid rgba(196,90,70,0.4);
  border-radius:var(--radius-s);
  background:rgba(196,90,70,0.09); color:#e2a190; font-size:.9rem; margin-top:1.1rem; line-height:1.5;
}
.form-error.is-visible{ display:block; }
.form-success svg{ width:19px; height:19px; flex-shrink:0; }

.contact-side{ display:flex; flex-direction:column; gap:1.5rem; }
.contact-info-card{
  border:1px solid var(--line-gold); border-radius:var(--radius-l); padding:clamp(2rem, 3vw, 2.6rem);
  background:var(--black-1);
}
.contact-row{
  display:flex; gap:1.2rem; align-items:flex-start;
  padding:1.35rem 0; border-bottom:1px solid var(--line);
  transition:padding-left var(--dur-s) var(--ease-out-soft);
}
.contact-row:first-child{ padding-top:0; }
.contact-row:last-of-type{ border-bottom:none; }
.contact-row:hover{ padding-left:.35rem; }
.contact-row-icon{
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(160deg, rgba(189,150,69,0.16), rgba(189,150,69,0.02));
  border:1px solid var(--line-gold);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--dur-s) var(--ease-out-soft), box-shadow var(--dur-s) var(--ease);
}
.contact-row:hover .contact-row-icon{ transform:scale(1.06); box-shadow:0 0 0 5px var(--line-gold-soft); }
.contact-row-icon svg{ width:19px; height:19px; color:var(--gold-2); }
.contact-row h4{ font-size:.9rem; margin-bottom:.3rem; font-family:var(--font-body); font-weight:600; }
.contact-row a, .contact-row p{ color:var(--gray-1); font-size:.94rem; margin:0; }
.contact-row a:hover{ color:var(--gold-light); }
.contact-quick-actions{ display:flex; gap:.9rem; margin-top:2rem; flex-wrap:wrap; }

.coverage-panel{
  position:relative; aspect-ratio:16/11; border:1px solid var(--line-gold); border-radius:var(--radius-l);
  overflow:hidden; box-shadow:var(--shadow-card);
  background:
    linear-gradient(rgba(189,150,69,0.06) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, rgba(189,150,69,0.06) 1px, transparent 1px) 0 0/40px 40px,
    radial-gradient(ellipse 80% 80% at 50% 45%, rgba(189,150,69,0.10), transparent 70%),
    var(--black-2);
}
.coverage-rings{
  position:absolute; inset:0; width:100%; height:100%;
}
.coverage-content{
  position:relative; z-index:1; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  text-align:center; padding:2rem;
}
.coverage-pin-icon{
  width:32px; height:32px; color:var(--gold-2);
  animation:coverage-pin-bob 3.5s ease-in-out infinite;
}
@keyframes coverage-pin-bob{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}
.coverage-content h3{ font-family:var(--font-display); font-size:1.28rem; color:var(--white); font-weight:600; }
.coverage-tags{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; max-width:340px; }
.coverage-tag{
  border:1px solid var(--line); border-radius:100px; padding:.5rem 1rem;
  font-size:.78rem; font-weight:600; color:var(--gray-1); background:rgba(7,7,10,0.4);
  transition:border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease-out-soft);
}
.coverage-tag:hover{ border-color:var(--gold); color:var(--gold-light); transform:translateY(-2px); }

@media (prefers-reduced-motion: reduce){ .coverage-pin-icon{ animation:none; } }

@media (max-width: 940px){ .contact-grid{ grid-template-columns:1fr; } }
@media (max-width: 560px){ .form-row{ grid-template-columns:1fr; } }

/* -------------------- Final CTA -------------------- */
.final-cta{
  position:relative;
  background:
    radial-gradient(ellipse 65% 100% at 50% 0%, rgba(189,150,69,0.16), transparent 65%),
    var(--black-1);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  text-align:center;
  padding:var(--space-section) 0;
  overflow:hidden;
}
.final-cta::after{
  content:""; position:absolute; left:50%; bottom:-40%; width:900px; height:400px;
  background:radial-gradient(ellipse, rgba(189,150,69,0.10), transparent 70%);
  transform:translateX(-50%); pointer-events:none;
}
.final-cta h2{ font-size:clamp(2.1rem, 4.4vw, 3.4rem); max-width:20ch; margin:0 auto; position:relative; }
.final-cta .lede{ margin-left:auto; margin-right:auto; position:relative; }
.final-cta .hero-actions{ justify-content:center; position:relative; }

/* -------------------- Footer -------------------- */
.site-footer{ background:var(--black-1); position:relative; padding-top:var(--space-block); }
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.footer-intro{
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:2rem;
  padding-bottom:var(--space-block); margin-bottom:var(--space-block); border-bottom:1px solid var(--line);
}
.footer-intro h2{ font-size:clamp(1.7rem, 3vw, 2.4rem); max-width:14ch; }
.footer-intro-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem;
  padding-bottom:var(--space-block); border-bottom:1px solid var(--line);
}
.footer-brand p{ color:var(--gray-2); font-size:.9rem; margin-top:1.1rem; max-width:32ch; line-height:1.6; }
.footer-social{ display:flex; gap:.75rem; margin-top:1.8rem; }
.footer-social a{
  width:40px; height:40px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:all var(--dur-s) var(--ease-out-soft);
}
.footer-social a:hover{ border-color:var(--gold); color:var(--gold-2); transform:translateY(-3px); background:rgba(189,150,69,0.06); }
.footer-social svg{ width:16px; height:16px; }
.footer-col h4{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-2); margin-bottom:1.3rem; font-family:var(--font-body); font-weight:600; }
.footer-col ul{ display:flex; flex-direction:column; gap:.8rem; }
.footer-col a{ font-size:.92rem; color:var(--gray-1); transition:color var(--dur-s) var(--ease); }
.footer-col a:hover{ color:var(--gold-light); }
.footer-col p{ font-size:.92rem; color:var(--gray-1); }

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding:1.8rem 0;
}
.footer-bottom p{ font-size:.81rem; color:var(--gray-3); }
.footer-legal{ display:flex; gap:1.7rem; }
.footer-legal a{ font-size:.81rem; color:var(--gray-3); }
.footer-legal a:hover{ color:var(--gold-2); }

@media (max-width: 940px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; align-items:flex-start; } .footer-intro{ align-items:flex-start; } }

/* -------------------- Sticky mobile call bar -------------------- */
.mobile-callbar{
  position:fixed; bottom:0; left:0; right:0; z-index:190;
  display:none; gap:1px; background:var(--line);
  border-top:1px solid var(--gold-dim);
}
.mobile-callbar a{
  flex:1; background:var(--black-1); display:flex; align-items:center; justify-content:center; gap:.55rem;
  padding:1.05rem; font-size:.86rem; font-weight:600; color:var(--white);
}
.mobile-callbar a.is-gold{ background:linear-gradient(180deg, var(--gold-2), var(--gold)); color:var(--black-0); }
.mobile-callbar svg{ width:17px; height:17px; }
@media (max-width: 720px){ .mobile-callbar{ display:flex; } body{ padding-bottom:62px; } }

/* -------------------- Scroll reveal -------------------- */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease-out-soft), transform .9s var(--ease-out-soft);
  transition-delay:var(--reveal-delay, 0s);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* -------------------- Back to top -------------------- */
.back-top{
  position:fixed; right:1.6rem; bottom:1.6rem; z-index:180;
  width:48px; height:48px; border:1px solid var(--line-gold); border-radius:50%; background:var(--black-1);
  color:var(--gold-2); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:all var(--dur-s) var(--ease-out-soft);
  box-shadow:var(--shadow-card);
}
.back-top:hover{ transform:translateY(-3px); border-color:var(--gold); }
.back-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.back-top svg{ width:18px; height:18px; }
@media (max-width: 720px){ .back-top{ bottom:78px; } }

/* -------------------- Hero structural-frame artwork -------------------- */
.frame-art .fl-v, .frame-art .fl-h, .frame-art .fl-b{
  stroke:var(--gold);
  stroke-width:1.4;
  fill:none;
  stroke-dasharray:var(--len);
  stroke-dashoffset:var(--len);
  animation:draw-line 1.4s var(--ease-out-soft) forwards;
  opacity:.55;
}
.frame-art .fl-h{ opacity:.8; stroke-width:1.6; }
.frame-art .fl-b{ opacity:.9; stroke-width:1.1; stroke:var(--gold-2); }
@keyframes draw-line{ to{ stroke-dashoffset:0; } }

.frame-art .fl-accent{ stroke:var(--gold-light); stroke-width:2.4; opacity:.95; }

.frame-art .fl-glow{
  animation:glow-pulse 5s ease-in-out infinite;
  transform-origin:center;
}
@keyframes glow-pulse{
  0%, 100%{ opacity:.55; transform:scale(1); }
  50%{ opacity:.9; transform:scale(1.06); }
}

.frame-art .fl-dust{ fill:var(--gold-2); animation:dust-float 6s ease-in-out infinite; }
@keyframes dust-float{
  0%, 100%{ transform:translateY(0); opacity:.25; }
  50%{ transform:translateY(-14px); opacity:.75; }
}

.frame-art .fl-tag{
  font-family:var(--font-body); font-size:9px; letter-spacing:.14em;
  fill:var(--gray-3); text-transform:uppercase;
}

/* Hero centerpiece: the CC&R brand monogram, as a refined, subtle watermark */
.hero-monogram{
  fill:url(#brandGoldGrad);
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:
    monogram-in 1.8s var(--ease-out-soft) .3s forwards,
    monogram-breathe 10s ease-in-out 2.5s infinite;
  filter:drop-shadow(0 0 50px rgba(227,171,108,0.14));
}
@keyframes monogram-in{
  from{ opacity:0; transform:translateY(20px) scale(0.98); }
  to{ opacity:0.13; transform:translateY(0) scale(1); }
}
@keyframes monogram-breathe{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.008); }
}

.corner-motif path{
  fill:none;
  stroke:url(#cornerGoldGrad);
  stroke-width:1.5;
  opacity:.32;
}

@media (prefers-reduced-motion: reduce){
  .hero-monogram{ opacity:.13; animation:none; }
}
@media (max-width: 640px){
  .corner-motif{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .frame-art .fl-v, .frame-art .fl-h, .frame-art .fl-b{ stroke-dashoffset:0; animation:none; opacity:.7; }
  .frame-art .fl-glow, .frame-art .fl-dust{ animation:none; }
}

.legal-page{ padding:9.5rem 0 6rem; max-width:820px; margin:0 auto; }
.legal-page h1{ font-size:var(--fs-h1); margin-bottom:.6rem; }
.legal-page .updated{ color:var(--gray-3); font-size:.86rem; margin-bottom:3.2rem; }
.legal-page h2{ font-size:1.25rem; margin-top:2.6rem; margin-bottom:1rem; }
.legal-page p, .legal-page li{ color:var(--gray-1); font-size:.96rem; margin-bottom:1.05rem; line-height:1.7; }
.legal-page ul{ padding-left:1.4rem; list-style:disc; }

/* -------------------- About compass emblem -------------------- */
.emblem-tick{ stroke:var(--gold-dim); stroke-width:1; }
.emblem-tick-major{ stroke:var(--gold-2); stroke-width:1.8; }
.emblem-ring{ fill:none; stroke:var(--line-gold); stroke-width:1; }
.emblem-ring-outer{ fill:none; stroke:var(--line-gold-soft); stroke-width:1; stroke-dasharray:2 5; animation:rotate-slow 60s linear infinite; transform-origin:200px 200px; }
.emblem-crosshair{ stroke:var(--line-gold-soft); stroke-width:1; }
.emblem-mono{ font-family:var(--font-display); font-size:58px; font-weight:600; fill:var(--gold-2); text-anchor:middle; }
.emblem-mark{ fill:url(#brandGoldGrad); opacity:.92; }
.emblem-sub{ font-family:var(--font-body); font-size:10px; letter-spacing:.22em; fill:var(--gray-3); text-anchor:middle; text-transform:uppercase; }
@keyframes rotate-slow{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .emblem-ring-outer{ animation:none; } }