/* =========================================================================
   ACE ARTE — Single Page Site
   Theme: Deep Blue + Warm Orange on a light textured ground (Professional)
   ========================================================================= */
:root{
  /* ---- Core brand palette (Orange + Blue) ---- */
  --blue:#14324f;          /* deep navy blue — primary dark surface */
  --blue-2:#1d456a;        /* raised blue */
  --blue-mid:#2e6a9e;      /* mid blue accent */
  --blue-soft:#e8f0f7;     /* light blue tint */
  --orange:#B12526;        /* primary orange accent */
  --orange-deep:#8F1D1E;   /* hover / deep orange */
  --orange-soft:#fbe7d2;   /* light orange tint */
  --amber:#f2a65a;         /* warm light orange — accents on dark */
  --light-gray: #F0F0F0; 
  /* ---- Legacy aliases (kept so existing rules keep working) ---- */
  --ink:var(--blue);          /* was charcoal — now navy */
  --ink-2:var(--blue-2);      /* raised dark */
  --forest:var(--orange-deep);/* deep accent */
  --red:var(--orange);        /* signature accent */
  --red-deep:var(--orange-deep);
  --gold:var(--orange);       /* accent lines / borders */
  --gold-2:var(--amber);      /* accent text on dark */
  --gold-deep:var(--orange-deep);

  /* ---- Surfaces & text ---- */
  --cream:#fbf7f1;         /* page background — warm light */
  --cream-2:#ffffff;       /* raised cards */
  --white:#ffffff;
  --text:#1a2b3c;          /* body text on light (slate-navy) */
  --muted:#5c6b7a;         /* muted text */
  --line:rgba(233,123,38,.35);      /* orange hairline */
  --line-soft:rgba(20,50,79,.12);   /* blue hairline */
  --shadow:0 24px 60px -30px rgba(20,50,79,.5);
  --shadow-sm:0 12px 30px -18px rgba(20,50,79,.4);
  --maxw:1220px;
  --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:'Cormorant Garamond',Georgia,serif;
  --wordmark:'Marcellus','Cormorant Garamond',serif;
  --sans:'Jost','Segoe UI',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);
  color:var(--text);
  background-color:var(--cream);
  /* Light texture: soft orange + blue tints over a fine grain */
  background-image:
    radial-gradient(circle at 12% 18%, rgba(233,123,38,.06), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(46,106,158,.07), transparent 44%),
    linear-gradient(0deg, rgba(20,50,79,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,50,79,.018) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 44px 44px, 44px 44px;
  background-attachment:fixed;
  font-weight:400;
  line-height:1.65;font-size:16px;
-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);
  font-weight:600;
  line-height:1.1;
  margin:0;color:var(--ink)}
p{margin:0 0 1em}
section{position:relative}
.wrap{max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px}
.center{text-align:center}

/* ---- Shared type helpers ---- */
.eyebrow{
  font-family:var(--sans);font-weight:500;font-size:.74rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--orange-deep);display:inline-block;margin-bottom:14px;
}
.eyebrow.on-dark{color:var(--amber)}
.display{font-size:clamp(2rem,4.6vw,3.5rem);letter-spacing:.5px}
.rule{width:64px;height:2px;background:linear-gradient(90deg,var(--orange),var(--blue-mid));margin:18px 0}
.rule.center{margin:18px auto}
.rule.center::after{content:"";display:block;width:8px;height:8px;border:1px solid var(--orange);transform:rotate(45deg);margin:-5px auto 0}
.lead{font-size:1.08rem;color:var(--muted);max-width:64ch}
.lead.center{margin-left:auto;margin-right:auto}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:none;
  font-family:var(--sans);font-weight:500;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 30px;border-radius:4px;background:var(--bg);color:var(--fg);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
  position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 34px -16px}
.btn.gold{background-color:var(--orange);color:var(--white)}
.btn.gold:hover{
  background-color:var(--orange-deep);
  color:var(--white);
  transform:translateY(-3px);
  box-shadow: none;
}
.btn.outline{
  background:transparent;
  color:var(--orange-deep);            /* dark accent so text is visible on light cards */
  box-shadow:inset 0 0 0 1px var(--orange);
}
.btn.outline:hover{
  background:var(--orange);
  color:var(--white);
}
/* On dark surfaces (e.g. hero) keep the text light */
.btn.outline.on-dark{
  color:var(--white);
  box-shadow:inset 0 0 0 1px var(--orange);
}
.btn.outline.on-dark:hover{
  background:var(--orange-deep);
  color:var(--white);
}
.btn.lg{padding:18px 40px;font-size:.86rem}
.btn.block{width:100%;justify-content:center}

/* =========================================================================
   Emblem  +  Wordmark
   ========================================================================= */
.emblem{width:44px;height:64px;flex:none}
.brand{display:flex;align-items:center;gap:12px}
.brand .word{display:flex;flex-direction:column;line-height:1}
.brand .word .name{font-family:var(--wordmark);font-size:1.35rem;letter-spacing:.36em;color:var(--ink)}
.brand .word .name b{color:var(--orange-deep);font-weight:400}
.brand .word .sub{font-family:var(--sans);font-size:.52rem;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);margin-top:5px}
/* .on-dark stays light — used on the dark navy footer */
.on-dark .brand .word .name,.brand.on-dark .word .name{color:var(--ink)}
.brand.on-dark .word .name b{color:var(--orange-deep)}
.brand.on-dark .word .sub{color:#000}