/* ============ THEME VARIABLES ============ */
/* Colors are defined once here as CSS variables and reused everywhere.
   --gold-grad is the metallic gold gradient used on the logo, buttons, and strip. */
:root{--ink:#111827;--bg:#fff;--alt:#F8FAFC;--text:#1F2937;--head:#000;--gold:#C9A24B;--gold-grad:linear-gradient(135deg,#9A6A22 0%,#C9A24B 28%,#E2D585 50%,#C9A24B 72%,#8F5F1E 100%);--line:#e5e7eb;--card:#fff;--dark:#111827;
/* Safe-area padding keeps content clear of phone notches and system bars */
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

/* Dark mode: follows the visitor's system setting unless data-theme="light" is set on <html> */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b1020;--alt:#111827;--text:#d1d5db;--head:#fff;--line:#263042;--card:#161e2e;--dark:#05080f}}
/* Dark mode forced on manually with data-theme="dark" */
:root[data-theme="dark"]{--bg:#0b1020;--alt:#111827;--text:#d1d5db;--head:#fff;--line:#263042;--card:#161e2e;--dark:#05080f}

/* ============ BASE / RESET ============ */
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 Inter,system-ui,sans-serif}

/* ============ TYPOGRAPHY ============ */
/* Headings: heavy, uppercase Montserrat. clamp() scales sizes between mobile and desktop */
h1,h2,h3{font-family:Montserrat,Inter,sans-serif;font-weight:900;color:var(--head);line-height:1.08;text-transform:uppercase;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,7vw,4.6rem)}h2{font-size:clamp(1.6rem,4vw,2.6rem)}h3{font-size:1.15rem}
a{color:inherit}

/* ============ LAYOUT ============ */
/* .wrap centers content and caps its width; section.b is the standard page section */
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
section.b{padding:72px 0}.alt{background:var(--alt)}

/* ============ HEADER & NAVIGATION ============ */
/* Sticky dark header that stays at the top while scrolling */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--ink);color:#fff}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
/* Logo text is filled with the gold gradient (transparent text over a clipped background) */
.logo{font:900 1rem Montserrat,sans-serif;letter-spacing:.12em;text-decoration:none;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
nav{display:flex;gap:18px}nav a{color:#d1d5db;text-decoration:none;font-size:.85rem;font-weight:500}nav a.on,nav a:hover{color:var(--gold)}
/* Mobile (820px and below): hide the nav, show the hamburger; .open drops the nav down as a column */
@media(max-width:820px){nav{display:none}nav.open{display:flex;position:absolute;top:64px;left:0;right:0;background:var(--ink);flex-direction:column;padding:16px 20px}.menu{display:block!important}}
/* Hamburger button: hidden on desktop */
.menu{display:none;background:none;border:1px solid #374151;color:#fff;border-radius:6px;padding:6px 10px}

/* ============ BUTTONS ============ */
/* .btn = gold gradient button, .o = outline variant, .sm = smaller size */
.btn{display:inline-block;background:var(--gold-grad);color:#111;border:2px solid #E2D585;font:800 .8rem Montserrat,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:13px 22px;border-radius:4px;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.1)}.btn.o{background:none;color:#fff}.btn.sm{padding:9px 14px}

/* ============ HERO ============ */
.hero{background:linear-gradient(135deg,#0b1020,#111827 55%,#3a2a0a);color:#fff;padding:96px 0 80px}
.hero h1{color:#fff;max-width:14ch}.hero p{max-width:60ch;font-size:1.15rem;color:#d1d5db}
/* Row of call-to-action buttons that wraps on small screens */
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ============ CREDIBILITY STRIP ============ */
.strip{background:var(--gold-grad);color:#111;font:800 .8rem Montserrat,sans-serif;letter-spacing:.06em;text-align:center;padding:14px 20px;text-transform:uppercase}

/* ============ LOGO TICKER ============ */
/* The inner div is twice the width of one set of logos and slides left by 50%,
   then loops, so the repeated items make the scroll look endless */
.ticker{overflow:hidden;border-block:1px solid var(--line);padding:18px 0}
.ticker div{display:flex;gap:48px;width:max-content;animation:tk 30s linear infinite;font:800 .95rem Montserrat;opacity:.5;color:var(--head)}
@keyframes tk{to{transform:translateX(-50%)}}

/* ============ QUOTE ============ */
blockquote{font-size:clamp(1.2rem,2.6vw,1.7rem);border-left:5px solid var(--gold);margin:0;padding:6px 0 6px 22px;color:var(--head);font-weight:500}

/* ============ GRIDS & CARDS ============ */
/* auto-fit grids: columns wrap automatically based on available width (.g4 = narrower columns, .g3 = wider) */
.grid{display:grid;gap:18px}.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:24px}

/* ============ M.A.S.K. CARDS ============ */
/* Clickable cards: hover or .open lifts the card and highlights the border */
.mask{cursor:pointer;transition:.25s;position:relative;overflow:hidden}
.mask:hover,.mask.open{transform:translateY(-4px);border-color:var(--gold)}
/* Big gold letter (M, A, S, K) */
.mask .l{font:900 3.5rem Montserrat;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
/* Description is collapsed by default and expands when the card is .open */
.mask .d{max-height:0;overflow:hidden;transition:max-height .35s}.mask.open .d{max-height:240px}

/* ============ CHECKMARK LISTS ============ */
ul.chk{padding:0;list-style:none}ul.chk li{padding:6px 0 6px 28px;position:relative}ul.chk li:before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:800}

/* ============ DARK SECTIONS ============ */
.dark{background:var(--dark);color:#d1d5db}.dark h2{color:#fff}

/* ============ VIDEO PLACEHOLDER ============ */
/* 16:9 box with a dark radial gradient; stands in until a real video is embedded */
.vid{aspect-ratio:16/9;background:#000 radial-gradient(circle,#3a2a0a,#05080f);border-radius:10px;display:grid;place-items:center;cursor:pointer;color:#fff;border:0;width:100%;font:800 1rem Montserrat}

/* ============ TESTIMONIAL CAROUSEL ============ */
/* Only the slide with .on is visible; the dots below mark which one is active */
.car{position:relative;min-height:170px}.car .t{display:none;font-size:1.25rem;color:var(--head)}.car .t.on{display:block}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:var(--line);margin-right:8px;cursor:pointer}.dots .on{background:var(--gold)}

/* ============ SCROLL FADE-IN ============ */
/* Elements start hidden and shifted down; adding .in (via script) fades them into place */
.fade{opacity:0;transform:translateY(22px);transition:.7s}.fade.in{opacity:1;transform:none}

/* ============ FORMS ============ */
/* .r = a row of fields that wraps to fit the width */
form{display:grid;gap:12px}form .r{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:6px;font:inherit;background:var(--card);color:var(--text)}
label{font-size:.8rem;font-weight:600;display:block;margin-bottom:4px}

/* ============ MODALS ============ */
/* Full-screen dark overlay; hidden until .on is added, then centered with flexbox */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}.modal.on{display:flex}
.modal .box{background:var(--bg);border-radius:10px;max-width:640px;width:100%;max-height:92%;overflow:auto;padding:28px;position:relative}
/* Close (×) button in the top-right corner of the modal */
.x{position:absolute;right:12px;top:8px;background:none;border:0;font-size:1.8rem;color:var(--text);cursor:pointer}

/* ============ FOOTER & MISC ============ */
footer{background:var(--ink);color:#9ca3af;padding:36px 0;text-align:center;font-size:.85rem}
.note{font-size:.8rem;opacity:.7}

/* ============ ACCESSIBILITY ============ */
/* Turn off the fade-in and ticker animations for visitors who prefer reduced motion */
@media(prefers-reduced-motion:reduce){.fade{transition:none}.ticker div{animation:none}}

.lead{max-width:62ch;font-size:1.15rem;margin-bottom:32px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.card:hover{border-color:var(--gold)}

.kt-sub{font-family:Montserrat,sans-serif;font-weight:800;font-size:clamp(1.2rem,3vw,1.9rem);line-height:1.2;color:var(--gold);margin:0 0 24px}
.kt-sub.white{color:#fff;margin-top:36px}
.kt-callout{font-weight:800;color:#fff;font-size:1.25rem;border-left:4px solid var(--gold);padding-left:18px;margin:28px 0}


.ticker{background:transparent;border-color:#e5e7eb}
.ticker div{opacity:1;align-items:center}
.ticker span{opacity:.5;color:#111827}
.ticker img{height:40px;width:auto;opacity:1;filter:brightness(1.4)}
.ticker img.lg{height:90px}

footer{text-align:left;padding:56px 0 24px;font-size:.95rem}
.foot-grid{display:grid;gap:40px;grid-template-columns:1.2fr 1fr 1.3fr 1.3fr}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{font:800 1.05rem Montserrat,sans-serif;color:#fff;text-transform:uppercase;margin:0 0 14px}
.foot-grid a{color:#d1d5db;text-decoration:none}
.foot-grid > div > a:not(.logo){display:block;padding:5px 0;text-transform:uppercase;font-size:.85rem}
.foot-grid a:hover{color:var(--gold)}
.foot-grid p{margin:0 0 14px;color:#d1d5db}
.foot-logo{max-width:220px;height:auto}
.social{display:flex;gap:14px;margin-top:20px}
.social a{width:26px;height:26px;color:#fff}
.social svg{width:100%;height:100%}
.foot-copy{text-align:center;margin:44px 0 0;padding-top:20px;border-top:1px solid #263042;color:#9ca3af;font-size:.85rem}

.quote{
  position:relative;
  padding:52px 28px 28px;
  border-top:4px solid var(--gold);
  background:linear-gradient(180deg,rgba(201,162,75,.10),transparent 55%),var(--card);
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  transition:transform .25s,box-shadow .25s;
}
.quote:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(0,0,0,.4)}
.quote::before{
  font:900 5rem/1 Montserrat,sans-serif;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.quote p{font-size:1.2rem;line-height:1.55;font-weight:500;color:var(--head)}
.quote .who{
  display:block;border-top:1px solid var(--line);padding-top:14px;
  font-size:.9rem;font-weight:700;color:var(--gold);
}

.quote .who strong{display:block;font-size:1.05rem;color:var(--head);margin-bottom:2px}

/* wider, centered layout */
.wrap{max-width:1280px}
section .wrap>p{margin-left:auto;margin-right:auto}
/*section .wrap>p{max-width:75ch}*/

/* centered hero */
.hero{text-align:center;padding:120px 0 100px;
  background:radial-gradient(ellipse at 50% 120%,#3a2a0a,transparent 62%),linear-gradient(180deg,#0b1020,#111827)}
.hero h1{max-width:18ch;margin-inline:auto}
.hero p{margin-inline:auto}
.hero .cta{justify-content:center}

/* centered section helper + 4-across M.A.S.K. grid */
.center{text-align:center}
.center>p,.center .lead{margin-inline:auto}
.mask-grid{display:grid;gap:20px;grid-template-columns:repeat(4,1fr);text-align:left}
@media(max-width:900px){.mask-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mask-grid{grid-template-columns:1fr}}

/* new pull-quote style (replaces the gold-bar blockquote) */
blockquote{position:relative;border:0;margin:48px auto;padding:0 20px;max-width:900px;text-align:center;
  font:800 clamp(1.5rem,3.4vw,2.6rem)/1.2 Montserrat,sans-serif;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
blockquote::before,blockquote::after{content:"";display:block;width:80px;height:3px;background:var(--gold-grad);margin:0 auto}
blockquote::before{margin-bottom:26px}
blockquote::after{margin-top:26px}

/* Fernando quote: white text, keeps the gold lines */
blockquote.q-white{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff}

/* "Not how to stop performing" quote: plain white, Alex Brush script */
blockquote.q-banner{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:#fff;font-family:'Alex Brush',cursive;font-weight:400;
  text-transform:none;letter-spacing:.01em;line-height:1.25;
  font-size:clamp(2.2rem,5.5vw,4rem);
  max-width:900px;padding:0 20px;border-radius:0;box-shadow:none;
}
blockquote.q-banner::before,blockquote.q-banner::after{display:none}

.split{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:center}
.split.rev{grid-template-columns:6fr 5fr}
.split.rev .photo{order:2}
.photo{margin:0;position:relative;isolation:isolate}
.photo img{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.photo::after{content:"";position:absolute;inset:16px -16px -16px 16px;border:2px solid var(--gold);border-radius:14px;z-index:-1}
.photo-row{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.photo-row img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;display:block}
@media(max-width:820px){.split,.split.rev{grid-template-columns:1fr}.split.rev .photo{order:0}.photo::after{display:none}.photo-row{grid-template-columns:1fr}}

.split blockquote{font-size:clamp(1.3rem,2.2vw,1.9rem);margin:32px auto}


/* hero emphasis words */
.hl-gold{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hl-script{
  font-family:'Alex Brush',cursive;font-weight:400;text-transform:none;
  font-size:1.4em;line-height:.9;color:#E2D585;
  display:inline-block;padding:0 .08em;
}
.hero h1{max-width:20ch}
/*
.hero{text-align:left;padding:80px 0 0;overflow:hidden;
  background:radial-gradient(circle at 75% 65%,rgba(250,204,21,.25),transparent 45%),linear-gradient(180deg,#0b1020,#111827)}
.hero-split{display:grid;grid-template-columns: 1fr 1.1fr;gap:40px;align-items:end}
.hero-text{align-self:center;padding-bottom:90px}
.hero h1{max-width:14ch;margin-inline:0}
.hero p{margin-inline:0}
.hero .cta{justify-content:flex-start}
.hero-photo{width:100%;max-width:700px;height:auto;display:block;margin:0 0 0 auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.45))}
@media(max-width:820px){
  .hero-split{grid-template-columns:1fr;text-align:center}
  .hero-text{padding-bottom:20px}
  .hero h1,.hero p{margin-inline:auto}
  .hero .cta{justify-content:center}
}

.hero-photo {
  transform: scale(1.2);
  transform-origin: bottom right;
}
*/

/* Hero grid container */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: flex-end; /* Keeps image aligned to bottom */
}

/* Image Wrapper */
.hero-photo-container {
  position: relative;
  width: 100%;
  height: 600px; /* Gives the photo a solid fixed vertical presence */
  overflow: hidden;
}

/* Base Photo styling */
.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center; /* Keeps Fernando's head and chest centered */
  display: block;
}

/* Smooth edge fading using pseudo-overlay */
.hero-photo-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: 
    linear-gradient(to right, #0b1020 0%, transparent 40%),  /* Fades left edge */
    linear-gradient(to top, #111827 0%, transparent 20%),    /* Fades bottom edge */
    linear-gradient(to bottom, #0b1020 0%, transparent 15%); /* Fades top edge */
}

@media(max-width: 820px) {
  .hero-split {
    grid-template-columns: 1fr;
  }
  .hero-photo-container {
    height: 400px;
  }
}

/*
.card-box {
  background: linear-gradient(145deg, #1d2636 0%, #151c28 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid var(--teal);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Gold highlight for top feature cards */
/*
.card-box:nth-child(1),
.card-box:nth-child(3) {
  border-top-color: var(--gold-border);
}

.card-box:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: var(--gold-border);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5),
              0 0 20px rgba(35, 139, 139, 0.15);
}

.card-box h3 {
  color: #FFFFFF !important;
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.card-box p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(245, 243, 238, 0.75);
  margin: 0;
}

.card-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(35, 139, 139, 0.12);
  border-radius: 50%;
  color: var(--teal);
}
*/

.card-box {
  background: linear-gradient(145deg, #1d2636 0%, #151c28 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid var(--teal); /* All cards default to teal top border */
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.card-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(35, 139, 139, 0.12); /* Default teal icon background */
  border-radius: 50%;
  color: var(--teal);                   /* Default teal icon color */
  transition: all 0.3s ease;
}

/* HOVER STATE: Turns border & icon GOLD on hover for ALL cards */
.card-box:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: var(--gold-border);  /* Top border shifts to gold */
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5),
              0 0 20px rgba(226, 192, 103, 0.2);
}

.card-box:hover .card-icon {
  color: #E2C067;                         /* Icon turns gold */
  background: rgba(226, 192, 103, 0.15);  /* Icon background turns gold tint */
}


/* Hidden base state */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Visible active state triggered by JS */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: Staggered animation for grid items */
.grid-3col .card-box:nth-child(2) { transition-delay: 0.1s; }
.grid-3col .card-box:nth-child(3) { transition-delay: 0.2s; }
.grid-3col .card-box:nth-child(4) { transition-delay: 0.1s; }
.grid-3col .card-box:nth-child(5) { transition-delay: 0.2s; }
.grid-3col .card-box:nth-child(6) { transition-delay: 0.3s; }

@media(min-width:821px){
  header .wrap nav{margin-left:auto;margin-right:28px;gap:26px}
}

.logo{display:inline-flex;align-items:center;line-height:0}
.logo img{display:block;width:auto}
.logo-h{height:36px}
.logo-i{height:45px}
@media(max-width:600px){.logo-h{height:28px}}