/* Royal Table Cancún, "evento fino" preview.
   Loaded after styles.css and only overrides it, so the current design stays untouched.
   Serif display (Cormorant Garamond) echoes the serif ROYAL wordmark; Jost keeps body text clean.
   Shape rule: everything is square-cornered (2px); navy leads, pink is reserved for small details. */

:root {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", system-ui, sans-serif;
  --radius: 2px;
  --radius-pill: 2px;
  --bg: #fbfcfc;
  --surface: #f2f5f6;
  --line: #d5dfe2;
  --brand: #003d4c;
  --brand-deep: #002a35;
}

body { font: 400 1.02rem/1.7 var(--font-body); letter-spacing: 0.005em; }
/* Cormorant defaults to old-style figures (20 reads as "2o"); use lining numbers everywhere */
h1, h2, h3, .stat dd, .hero-proof strong, .clients li { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* Headlines: larger, lighter serif */
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.005em; }
h2 { font-size: clamp(2.4rem, 4.4vw, 3.7rem); line-height: 1.04; }
h3 { font-size: 1.6rem; line-height: 1.15; }

/* Small uppercase labels: buttons, nav, tabs */
.btn, .nav a, .tabs [role="tab"], .link-arrow, .hero-eyebrow, .clients h3 {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Buttons: tailored, square, navy */
.btn { font-weight: 500; font-size: 0.74rem; padding: 15px 26px; gap: 10px; }
.btn-lg { font-size: 0.78rem; padding: 18px 32px; }
.btn i { font-size: 1.35em; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-ghost { border-color: var(--brand); color: var(--brand); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--brand-deep); }
  .btn-ghost:hover { background: var(--brand); color: #fff; }
}
/* On the hero photo the main button turns white so it reads first */
.hero .btn-primary { background: #fff; color: var(--brand); }
.btn-light { background: transparent; border-color: rgb(255 255 255 / 0.7); }
@media (hover: hover) and (pointer: fine) {
  .hero .btn-primary:hover { background: #eef3f4; }
  .btn-light:hover { background: rgb(255 255 255 / 0.12); }
}
.mobile-bar .btn { background: var(--brand); color: #fff; }

/* Header */
.nav { gap: 34px; }
.nav a { font-size: 0.72rem; font-weight: 500; }
.menu-btn { border-radius: var(--radius); }
.mobile-menu a { font: 500 1.6rem var(--font-display); }

/* Hero */
.hero-eyebrow { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.28em; }
.hero h1 { font-weight: 500; font-size: clamp(3rem, 5.2vw, 5rem); line-height: 1; letter-spacing: -0.01em; max-width: 20ch; }
.hero-sub { font-size: 1.08rem; font-weight: 300; max-width: 46ch; }
.hero-ctas { margin-top: 40px; }
.hero-proof { font-size: 0.82rem; letter-spacing: 0.06em; font-weight: 300; }
.hero-proof strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; letter-spacing: 0; margin-right: 4px; }
@media (max-width: 767px) { .hero h1 { font-size: 2.9rem; } }

/* More air between sections */
.about { padding-block: 120px 96px; }
.catalog { padding-block: 120px; }
.harmony { padding-block: 120px 96px; }
.process { padding-block: 128px 104px; }
.gallery-section { padding-block: 40px 128px; }
.contact { padding-block: 120px; }

/* Stats: big light serif numbers on hairlines */
.stats { border-top-color: var(--line); padding-top: 40px; gap: 40px; }
.stat dd { font-family: var(--font-display); font-weight: 400; font-size: clamp(3.4rem, 6vw, 4.8rem); letter-spacing: -0.01em; }
.stat dd.stat-text { font-size: 1.7rem; font-weight: 500; line-height: 1.2; }
.stat dt { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; }

/* Catalog tabs: underlined text instead of pills */
.tabs { gap: 30px; border-bottom: 1px solid var(--line); padding-bottom: 0; }
.tabs [role="tab"] {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 14px 0; font-size: 0.72rem; font-weight: 500; color: var(--muted);
  border-radius: 0; margin-bottom: -1px;
}
.tabs [aria-selected="true"] { background: transparent; color: var(--brand); border-bottom-color: var(--brand); }
@media (hover: hover) and (pointer: fine) { .tabs [aria-selected="false"]:hover { color: var(--brand); border-bottom-color: var(--line); } }
@media (min-width: 768px) { .tabs { flex-wrap: nowrap; } }

.panel { padding: 0; background: transparent; gap: 48px; }
.panel-img { border-radius: var(--radius); }
.panel-body h3 { font-size: 2.2rem; }
.chips { gap: 8px 22px; }
.chips li { background: transparent; padding: 0; border-radius: 0; color: var(--brand); font-size: 0.95rem; font-weight: 400; }
.chips li + li::before { content: none; }
.note { border-radius: var(--radius); }
.placeholder { border-radius: var(--radius); }

.link-arrow { font-size: 0.72rem; font-weight: 500; border-bottom-color: var(--brand); padding-bottom: 6px; }

/* Harmony */
.harmony-list li { font-weight: 400; padding: 16px 0; }
.harmony-list i { color: var(--brand); }
.strip img { border-radius: var(--radius); }

/* Process: square hairline icons */
.step-icon { border-radius: var(--radius); background: transparent; border: 1px solid var(--line); color: var(--brand); }
.steps h3 { font-size: 1.7rem; }
.clients { background: transparent; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: 32px 0; }
.clients h3 { font-size: 0.72rem; font-weight: 500; }
.clients li { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; }

/* Gallery and lightbox */
.g, .g img, .lightbox img, .lightbox-close { border-radius: var(--radius); }

/* Contact */
.contact-cta h2 { font-size: clamp(2.6rem, 5vw, 4.2rem); }
.contact-info h3 { font-family: var(--font-body); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500; }
.contact-info h3 i { color: var(--brand); }

/* ---------------------------------------------------------------
   Contrast pass: the page read as one flat off-white document.
   Sections now alternate white / tinted, text is darker, the catalog
   sits on a raised white card, and the page closes on one deliberate
   navy color block (contact + footer). The rest of the site stays light.
---------------------------------------------------------------- */
:root {
  --bg: #ffffff;
  --ink: #0a232b;
  --muted: #3d545c;
  --line: #cfdadd;
  --surface: #e8eff1;
  --surface-harmony: #e2f0ec;
}
body { background: var(--bg); color: var(--ink); }
h1, h2, h3 { color: var(--brand-deep); }
.hero h1 { color: #fff; }

/* Section rhythm: white, tint, tint (Harmony teal), white, white, navy */
.about { background: #fff; }
.catalog { background: var(--surface); }
.harmony { background: var(--surface-harmony); }
.process, .gallery-section { background: #fff; }

/* Stats: navy rule and bolder numbers */
.stats { border-top: 2px solid var(--brand); }
.stat dd { color: var(--brand); font-weight: 500; }
.stat dt { color: var(--ink); }

/* Catalog: the active product sits on a raised white card */
.panel {
  background: #fff; padding: 20px;
  box-shadow: 0 1px 0 var(--line), 0 24px 60px -32px rgb(0 42 53 / 0.35);
}
@media (min-width: 900px) { .panel { padding: 24px; } .panel-body { padding: 24px 32px 24px 8px; } }
.panel-body > p { color: var(--muted); }
.chips li { color: var(--brand-deep); }
.tabs { border-bottom-color: #bfcdd1; }
.tabs [role="tab"] { color: #4a6168; }

/* Harmony list: stronger lines and ink */
.harmony-list li { color: var(--brand-deep); border-bottom-color: #bcd9d2; }

/* Process: filled navy icon squares instead of faint outlines */
.step-icon { background: var(--brand); border-color: var(--brand); color: #fff; }
.steps p { color: var(--muted); }
.clients { border-color: var(--brand); border-top-width: 2px; }

/* Closing color block: contact + footer in navy */
.contact { background: var(--brand); color: #fff; }
.contact h2, .contact h3 { color: #fff; }
.contact-cta p, .contact-info p { color: rgb(255 255 255 / 0.78); }
.contact-info { border-top-color: rgb(255 255 255 / 0.22); }
.contact-info h3 i { color: #fff; }
.contact .link-arrow, .contact .socials a { color: #fff; border-bottom-color: rgb(255 255 255 / 0.5); }
.contact .btn-primary { background: #fff; color: var(--brand); }
@media (hover: hover) and (pointer: fine) {
  .contact .btn-primary:hover { background: #e6eef0; }
  .contact .link-arrow:hover { border-bottom-color: #fff; }
}
.contact :focus-visible { outline-color: #fff; }
.footer { background: var(--brand-deep); border-top: 0; }
.footer-inner { color: rgb(255 255 255 / 0.7); }
.footer-logo { filter: brightness(0) invert(1); opacity: 0.9; }
.contact-info .link-arrow { font-size: 0.72rem; }
.contact .socials a { font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / 0.5); padding-bottom: 4px; }

/* Harmony: the mint tint read as dated. A muted rose-grey taken from the
   Harmony logo keeps it distinct from the blue-grey catalog above. */
:root { --surface-harmony: #f4eef0; }
.harmony { background: var(--surface-harmony); }
.harmony-list li { border-bottom-color: #e2d4da; }
.harmony-list i { color: #b3476f; }