/* ==========================================================================
   Maseer Group — site styles
   Brand: navy #1B3358 · gold #C9942A · warm paper #FBFAF6
   Type:  Fraunces (display) + Source Sans 3 (body)
   ========================================================================== */

:root {
  --navy: #1B3358;
  --navy-700: #16294a;
  --navy-900: #0f1d36;
  --gold: #C9942A;
  --gold-soft: #E7C078;
  --paper: #FBFAF6;
  --ink: #1c2433;
  --muted: #51607a;
  --line: #e7e2d6;
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

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

body {
  font-family: "Source Sans 3", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3, h4, .font-display {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
}

/* Eyebrow / kicker label */
.kicker {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.kicker--on-navy { color: #E7C078; }

/* Thin rule used beside kickers */
.kicker-rule { display:inline-block; width:34px; height:2px; background: var(--gold); vertical-align:middle; }

/* Links underline animation */
.link-underline { position: relative; }
.link-underline::after {
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .28s ease;
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.55rem; font-weight:600; border-radius:9999px;
  padding:.8rem 1.5rem; transition: all .2s ease; cursor:pointer; line-height:1; white-space:nowrap; }
.btn-gold { background: var(--gold); color:#1a1407; box-shadow: 0 6px 18px -8px rgba(201,148,42,.7); }
.btn-gold:hover { background:#b88420; transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(201,148,42,.85); }
.btn-navy { background: var(--navy); color:#fff; }
.btn-navy:hover { background: var(--navy-700); transform: translateY(-1px); }
.btn-ghost-light { border:1.5px solid rgba(255,255,255,.35); color:#fff; }
.btn-ghost-light:hover { border-color:#E7C078; color:#E7C078; }
.btn-ghost-navy { border:1.5px solid rgba(27,51,88,.25); color: var(--navy); }
.btn-ghost-navy:hover { border-color: var(--navy); background: rgba(27,51,88,.04); }

/* Cards */
.card { background:#fff; border:1px solid var(--line); border-radius:18px; transition: all .25s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -28px rgba(15,29,54,.35); border-color:#d9cfb8; }

/* Decorative dotted texture for navy sections */
.dot-grid { background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; }
/* Dotted texture for light sections (navy dots) */
.dot-grid-ink { background-image: radial-gradient(rgba(27,51,88,.06) 1px, transparent 1px); background-size: 24px 24px; }
/* Fine gold hairline used to add 'expensive' detailing */
.hairline-gold { height:1px; background: linear-gradient(90deg, transparent, rgba(201,148,42,.55), transparent); }

/* Reveal on scroll */
.reveal { opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none;} }

/* Loop connector line for the process steps */
.process-line::before {
  content:""; position:absolute; top:34px; left:calc(50% + 34px); right:calc(-50% + 34px); height:2px;
  background: linear-gradient(90deg, var(--gold), rgba(201,148,42,.25));
}
@media (max-width: 767px){ .process-line::before{ display:none; } }

/* Industry chip */
.chip { transition: all .2s ease; }
.chip:hover { border-color: var(--gold); color: var(--navy); transform: translateY(-2px); }

/* Inputs */
.field { width:100%; background:#fff; border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem;
  font-size:1rem; color:var(--ink); transition: border-color .2s, box-shadow .2s; }
.field:focus { outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,148,42,.18); }
.field::placeholder { color:#9aa4b6; }

/* Footer link */
.foot-link { color: rgba(255,255,255,.72); transition: color .2s; }
.foot-link:hover { color:#E7C078; }

/* Navbar — light theme */
[data-nav] { transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
.nav-scrolled { box-shadow: 0 12px 30px -24px rgba(15,29,54,.45); background: rgba(251,250,246,.92) !important; backdrop-filter: blur(10px); border-bottom-color: var(--line) !important; }

/* Tab buttons (contact) */
.tab-btn[aria-selected="false"]:hover { background: rgba(27,51,88,.05); }

/* WhatsApp / social icon buttons */
.social-btn { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:9999px;
  border:1px solid rgba(255,255,255,.18); color:#fff; transition: all .2s ease; }
.social-btn:hover { border-color:#E7C078; color:#E7C078; transform: translateY(-2px); }

/* Triangle graphic labels */
.tri-node { background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 14px 40px -28px rgba(15,29,54,.4); }

/* Copy button feedback */
.copy-btn.copied { background: var(--navy) !important; color:#fff !important; }

/* ==========================================================================
   Imagery — a single, cohesive "commissioned" treatment so every photo
   shares the brand temperature (navy duotone + gold hairline framing).
   ========================================================================== */
.media { position:relative; overflow:hidden; border-radius:20px; background:var(--navy-900);
  box-shadow: 0 0 0 1px rgba(201,148,42,.22), 0 44px 90px -52px rgba(15,29,54,.55); }
.media > img { display:block; width:100%; height:100%; object-fit:cover; }

/* subtle, unifying navy duotone laid over every photo */
.media-tone::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(27,51,88,.10) 0%, rgba(15,29,54,.30) 100%);
  mix-blend-mode: multiply; }

/* bottom scrim for captions / overlaid logos */
.media-scrim::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(180deg, transparent 38%, rgba(15,29,54,.55) 78%, rgba(15,29,54,.82) 100%); }

/* slow, whisper-quiet zoom on hover */
.media-zoom > img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.media-zoom:hover > img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce){ .media-zoom > img { transition:none; } .media-zoom:hover > img { transform:none; } }

/* relationship-triangle node circle */
.node-circle { width:116px; height:116px; border-radius:9999px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 1.5px rgba(201,148,42,.45), 0 0 0 9px rgba(27,51,88,.04), 0 20px 44px -24px rgba(15,29,54,.5); }
.node-circle svg { width:38px; height:38px; }
.tri-edge { background:#fff; border:1px solid var(--line); color:var(--gold);
  box-shadow: 0 8px 22px -14px rgba(15,29,54,.45); }