/* ============================================================
   Morley Management Group — Base + brand primitives
   Reset, fluid type scale, and the reusable pieces the design
   system defines: eyebrow, copper rule, diamond, pillars lockup,
   card, button. Ported from _ds/tokens/base.css and the Button /
   Card / Eyebrow / Pillars / Divider components.
   ============================================================ */

/* ------------------------------------------------------------
   Fluid type + layout
   The prototype hardcoded px at every size. These scale smoothly
   between 360px and 1440px viewports so nothing has to jump at a
   breakpoint.
   ------------------------------------------------------------ */
:root {
  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.88rem);   /* 13 → 14 */
  --step-0:  clamp(0.94rem, 0.90rem + 0.17vw, 1.03rem);   /* 15 → 16.5 */
  --step-1:  clamp(1.03rem, 0.96rem + 0.31vw, 1.19rem);   /* 16.5 → 19 */
  --step-2:  clamp(1.19rem, 1.06rem + 0.55vw, 1.47rem);   /* 19 → 23.5 */
  --step-3:  clamp(1.38rem, 1.15rem + 0.98vw, 1.88rem);   /* 22 → 30 */
  --step-4:  clamp(1.60rem, 1.20rem + 1.72vw, 2.50rem);   /* 25.5 → 40 */
  --step-5:  clamp(1.85rem, 1.18rem + 2.90vw, 3.38rem);   /* 30 → 54 */
  --step-6:  clamp(2.00rem, 1.52rem + 2.07vw, 3.00rem);   /* 32 → 48 */

  --shell: 1180px;
  --gutter-x: clamp(1.25rem, 0.60rem + 2.80vw, 3.50rem);  /* 20 → 56 */
  --section-py: clamp(3.5rem, 2.20rem + 5.60vw, 6.5rem);  /* 56 → 104 */

  --header-h: 96px;
  --header-h-scrolled: 68px;
}

@media (max-width: 700px) {
  /* The bar does not contract here. The logo is a fixed 52px at every
     breakpoint, and a 60px bar left it 4px of air top and bottom,
     which reads as cramped rather than compact. 68px keeps the same
     8px breathing room scrolled or not. */
  :root { --header-h: 68px; --header-h-scrolled: 68px; }
}

/* ------------------------------------------------------------
   Reset
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-scrolled) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--leading-heading);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--text-accent); text-decoration: none; }
a:hover { color: var(--copper-700); }

strong, b { font-weight: var(--weight-bold); color: var(--text-strong); }

ul { margin: 0; padding: 0; list-style: none; }

img { max-width: 100%; display: block; }

::selection { background: var(--copper-300); color: var(--navy-900); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.hero :focus-visible,
footer :focus-visible { outline-color: var(--copper-300); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: var(--z-overlay);
  background: var(--copper-500);
  color: #fff;
  font-weight: var(--weight-bold);
  font-size: var(--step--1);
  padding: 10px 20px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: transform var(--duration-base) var(--ease-standard);
}
.skip-link:focus-visible { transform: translate(-50%, 0); color: #fff; }

/* ------------------------------------------------------------
   Layout
   ------------------------------------------------------------ */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter-x);
}
.shell--narrow { max-width: 940px; }

.section { padding-block: var(--section-py); position: relative; }
.section--warm { background: var(--surface-warm); }
.section--page { background: var(--surface-page); }
.section--navy {
  background: var(--navy-900);
  color: var(--text-on-dark);
}
.section--navy-deep {
  background: var(--navy-950);
  color: var(--text-on-dark);
}
.section--navy h2,
.section--navy h3,
.section--navy-deep h2,
.section--navy-deep h3 { color: #fff; }

/* ------------------------------------------------------------
   Brand primitives
   ------------------------------------------------------------ */
.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
  margin: 0 0 var(--space-4);
}
.eyebrow--on-dark { color: var(--text-accent-on-dark); }

/* Section heading: uppercase, extra-bold, wide-tracked per the brand */
.h-section {
  font-size: var(--step-4);
  font-weight: var(--weight-extra);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-4);
  max-width: 20ch;
}
.h-section--wide { max-width: 26ch; }
/* Wide enough to hold a long first line before an explicit <br> */
.h-section--wider { max-width: 34ch; }

.lede {
  font-size: var(--step-1);
  color: var(--text-body);
  max-width: 62ch;
  margin: 0 0 var(--space-7);
}
.section--navy .lede,
.section--navy-deep .lede { color: rgba(255, 255, 255, 0.82); }

/* Thin copper accent rule. Draws itself in on reveal. */
.rule {
  border: 0;
  height: var(--border-rule);
  width: 56px;
  background: var(--rule-accent);
  margin: var(--space-5) 0 0;
  transform-origin: left center;
}

/* Copper diamond flanked by hairlines */
.divider-diamond {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: 520px;
}
.divider-diamond::before,
.divider-diamond::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-strong);
}
.divider-diamond--on-dark::before,
.divider-diamond--on-dark::after { background: rgba(255, 255, 255, 0.22); }
.divider-diamond i {
  width: 7px; height: 7px;
  flex: none;
  transform: rotate(45deg);
  background: var(--copper-500);
}
.divider-diamond--on-dark i { background: var(--copper-300); }

/* PEOPLE | OPERATIONS | PROJECTS */
.pillars {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9em;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-size: var(--text-sm);
  color: var(--navy-800);
  margin: 0;
}
.pillars--on-dark { color: rgba(255, 255, 255, 0.86); }
.pillars--sm { font-size: var(--text-xs); }
.pillars span { display: inline-block; }
.pillars i {
  width: 1px;
  height: 1em;
  background: currentColor;
  opacity: 0.4;
  display: inline-block;
}

/* Small diamond bullet used in lists */
.tick {
  width: 6px; height: 6px;
  margin-top: 0.5em;
  flex: none;
  transform: rotate(45deg);
  background: var(--copper-500);
}
.on-dark .tick, .section--navy .tick, .section--navy-deep .tick { background: var(--copper-300); }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0 26px;
  height: 48px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }

.btn--lg { height: 54px; padding: 0 32px; font-size: var(--step-0); }
.btn--sm { height: 40px; padding: 0 18px; }
.btn--block { display: flex; width: 100%; }

.btn--accent {
  background: var(--copper-500);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--accent:hover {
  background: var(--copper-600);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--navy-800);
}
.btn--outline:hover {
  border-color: var(--copper-500);
  color: var(--copper-700);
  background: rgba(177, 83, 38, 0.05);
}

.btn--outline-on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.38);
  color: #fff;
}
.btn--outline-on-dark:hover {
  border-color: var(--copper-300);
  color: var(--copper-300);
  background: rgba(255, 255, 255, 0.06);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Text link with a copper underline that grows on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--copper-600);
}
.link-arrow svg { transition: transform var(--duration-base) var(--ease-standard); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow--on-dark { color: var(--copper-300); }
.link-arrow--on-dark:hover { color: var(--copper-300); }

/* ------------------------------------------------------------
   Cards
   ------------------------------------------------------------ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}
.card--rule { border-top: 3px solid var(--copper-500); }
.card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(17, 41, 76, 0.18);
}
.card--on-dark {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.86);
  box-shadow: none;
}
.card--on-dark.card--hover:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(241, 157, 106, 0.4);
  box-shadow: none;
}

.card__kicker {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-600);
  margin: 0 0 var(--space-3);
}
.card--on-dark .card__kicker { color: var(--copper-300); }
.card h3 { font-size: var(--step-2); font-weight: var(--weight-bold); margin: 0 0 var(--space-3); }
.card--on-dark h3 { color: #fff; }
/* Only plain paragraphs. A classed <p> inside a card (a stat, a
   price, a kicker) styles itself, and `.card p` would otherwise
   out-specify it. */
.card p:not([class]) { font-size: var(--step-0); color: var(--text-body); }
.card--on-dark p:not([class]) { color: rgba(255, 255, 255, 0.78); }

/* ------------------------------------------------------------
   Grids
   ------------------------------------------------------------ */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}