/* Godfather Realty — global tokens, base, typography, buttons.
   Layout system mirrors the Intreon reference (1230px container, Oswald/Jost, square corners);
   colours derive from the Godfather crest (gold wings, deep brown shading, warm silver). */

:root {
  /* Brand (from logo) */
  --color-primary: #d49f43;        /* crest gold: fills, rules, icons, text on dark */
  --color-primary-ink: #8a6414;    /* gold for text on light surfaces (5.4:1 on white) */
  --color-primary-soft: #e6c88f;   /* highlight gold */
  --color-secondary: #874d18;      /* crest brown shading */
  --color-silver: #d9dad5;         /* crest silver */

  /* Surfaces & text */
  --color-background: #ffffff;
  --color-surface: #f6f2ea;        /* warm cream section */
  --color-surface-2: #f0ece4;
  --color-dark: #1b1611;           /* warm near-black */
  --color-dark-2: #241d16;
  --color-text: #6b645c;
  --color-heading: #1b1611;
  --color-muted: #9a9288;
  --color-on-dark: #c9c2b8;
  --color-border: #eee9df;
  --color-border-dark: rgba(255, 255, 255, 0.14);
  --color-white: #ffffff;
  --color-black: #000000;

  /* Type */
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
  --text-xs: 0.875rem;   /* 14 */
  --text-sm: 1rem;       /* 16 */
  --text-base: 1rem;
  --text-lg: 1.125rem;   /* 18 */
  --text-xl: 1.25rem;    /* 20 */
  --text-2xl: 1.5rem;    /* 24 */
  --text-3xl: 1.75rem;   /* 28 */
  --text-4xl: 2.75rem;   /* 44 — section titles */
  --text-5xl: 3.5rem;    /* 56 — page titles */
  --text-hero: clamp(2.9rem, 1.55rem + 5.25vw, 6.25rem); /* 100 at 1440 */

  /* Layout */
  --container: 1230px;
  --gutter: 15px;
  --section-y: 90px;
  --header-h: 89px;
  --header-h-sticky: 98px;

  /* Effects */
  --shadow-card: 0 10px 60px rgba(27, 22, 17, 0.07);
  --shadow-menu: 1px 1px 35px rgba(27, 22, 17, 0.08);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur: 0.4s;
}

@media (max-width: 1399px) { :root { --container: 1140px; } }
@media (max-width: 1199px) { :root { --container: 100%; --gutter: 30px; } }
@media (max-width: 991px) { :root { --section-y: 70px; --text-4xl: 2.7rem; --text-5xl: 3rem; } }
@media (max-width: 575px) { :root { --section-y: 60px; --gutter: 15px; --text-4xl: 2.25rem; --text-5xl: 2.5rem; --text-3xl: 1.6rem; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.9;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) ease; }
button { font: inherit; color: inherit; cursor: pointer; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 {
  margin: 0 0 0.6em;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-heading);
  line-height: 1.3;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--text-5xl); line-height: 1.3; }
h2, .h2 { font-size: var(--text-4xl); letter-spacing: 1px; text-transform: capitalize; }
h3, .h3 { font-size: var(--text-3xl); letter-spacing: 1px; }
h4, .h4 { font-size: var(--text-2xl); line-height: 1.4; }
h5, .h5 { font-size: var(--text-xl); line-height: 1.4; }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
::selection { background: var(--color-primary); color: var(--color-dark); }

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 1000;
  padding: 10px 18px; background: var(--color-dark); color: var(--color-white);
  transition: top var(--dur-fast) ease;
}
.skip-link:focus { top: 16px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1em; height: 1em; flex: none; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { position: relative; padding-block: var(--section-y); }
.section--cream { background-color: var(--color-surface); }
.section--dark { background-color: var(--color-dark); color: var(--color-on-dark); }
.section--dark :is(h2, h3, h4, h5) { color: var(--color-white); }
.texture-light { background-image: url("/assets/img/texture/lines-light.svg"); background-size: 1400px auto; background-position: center; }
.texture-dark { background-image: url("/assets/img/texture/lines-dark.svg"); background-size: 1400px auto; background-position: center; }

/* Section heading: eyebrow + title (+ optional side paragraph) */
.eyebrow {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.9;
  text-transform: capitalize;
  color: var(--color-primary-ink);
}
.section--dark .eyebrow, .on-dark .eyebrow { color: var(--color-primary); }
.section-head { margin-bottom: 50px; }
.section-head h2 { margin-bottom: 0; }
.section-head--center { text-align: center; max-width: 760px; margin-inline: auto; }
.section-head--split { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 60px; align-items: center; }
.section-head--split p { margin: 0; }
@media (max-width: 991px) { .section-head--split { grid-template-columns: 1fr; } }

.lead-gold {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.42;
  color: var(--color-primary-ink);
  margin-bottom: 1.4rem;
}

/* Gold-check list */
.check-list { display: grid; gap: 10px; margin-bottom: 1.6rem; }
.check-list li { position: relative; padding-left: 32px; line-height: 1.6; color: var(--color-heading); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 16px; height: 16px;
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1611' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 35px;
  border: 0;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.8px;
  text-transform: capitalize;
  color: var(--color-dark);
  background: var(--color-primary);
  transition: color var(--dur-fast) ease-in-out, transform 160ms var(--ease-out);
}
.btn:active, .btn-square:active, .carousel__arrow:active, .to-top:active { transform: scale(0.97); }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--color-dark);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.btn:hover, .btn:focus-visible { color: var(--color-white); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.btn--lg { padding: 20.8px 48px; }
.btn--light:hover, .btn--light:focus-visible { color: var(--color-dark); }
.btn--light::before { background: var(--color-white); }
.btn--dark { background: var(--color-dark); color: var(--color-white); }
.btn--dark::before { background: var(--color-primary); }
.btn--dark:hover, .btn--dark:focus-visible { color: var(--color-dark); }
.btn--block { width: 100%; }

/* Plain text link with circle arrow ("View Details") */
.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 500; letter-spacing: 0.8px; line-height: 1.9;
  color: var(--color-heading);
}
.link-arrow__icon {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-dark);
  transition: transform 0.5s var(--ease-out);
}
.link-arrow__icon .icon { width: 11px; height: 11px; stroke-width: 3; }
.link-arrow:hover, .link-arrow:focus-visible { color: var(--color-primary-ink); }
.link-arrow:hover .link-arrow__icon, .link-arrow:focus-visible .link-arrow__icon { transform: translateX(4px); }

/* Square gold arrow button (carousel/project labels) */
.btn-square {
  display: grid; place-items: center; width: 55px; height: 55px; flex: none;
  background: var(--color-primary); color: var(--color-dark); border: 0;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.btn-square .icon { width: 20px; height: 20px; }
.btn-square:hover, .btn-square:focus-visible { background: var(--color-dark); color: var(--color-white); }

/* Touch screens fire :hover on tap — keep decorative image zooms to real pointers */
@media (hover: none) {
  .proj-card img, .post-card__media img, .team-card__photo img, .cta-card img, .service-card__bg { transform: none !important; }
}

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