/* ============================================================
   EXECUTIVE FRAME™ — SHARED STYLESHEET
   Version 1.0 · Sarah Anticich Consulting · 2026
   
   Link this file in every HTML page:
   <link rel="stylesheet" href="ef-styles.css">
   ============================================================ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400;1,500&display=swap');

/* ── COLOUR TOKENS ── */
:root {
  --bg:        #3d4e63;
  --card:      #4a5a6e;
  --card-alt:  #4e5e72;
  --border:    rgba(255,255,255,0.07);
  --bm:        rgba(255,255,255,0.12);
  --white:     rgba(255,255,255,0.92);
  --dim:       rgba(255,255,255,0.45);
  --faint:     rgba(255,255,255,0.22);
  --ghost:     rgba(255,255,255,0.06);
  --green:     #4caf82;
  --blue:      #6ab0e0;
  --amber:     #e8a87c;
  --pink:      #e8a0b8;
  --teal:      #5a9ab5;
}

/* ── RESET ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  font-family: "Montserrat", sans-serif;
  color: var(--white);
  padding-bottom: 100px;
  overflow-x: hidden;
}

/* ── NAVIGATION ── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(48,62,78,0.98);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nb { font-weight: 800; font-size: 21px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); }
.ns { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 16px; color: var(--teal); margin-top: 1px; }
.nl { display: flex; gap: 48px; }
.nl a { font-size: 16px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); text-decoration: none; transition: color 0.2s; }
.nl a:hover { color: var(--white); }
.ncta { background: var(--green); color: #1e2a1e; padding: 8px 20px; border-radius: 50px; font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }

/* ── LAYOUT ── */
.wrap       { max-width: 1600px; margin: 0 auto; padding: 0 24px; }
.section-inner { max-width: 1600px; margin: 0 auto; padding: 0 24px; }

/* ── GRIDS ── */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }

/* ── SECTION LABELS ── */
.sec-label {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-bottom: 10px;
}
.sec-title {
  font-weight: 800;
  font-size: clamp(26px, 3.5vw, 38px);
  line-height: 1.05;
  color: rgba(255,255,255,0.88);
  margin-bottom: 48px;
}

/* ── CARDS ── */
.card { background: var(--card); border-radius: 6px; overflow: hidden; margin-bottom: 4px; }
.pad    { padding: 28px 32px; }
.pad-lg { padding: 36px 40px; }

/* ── ARM CARDS ── */
.arm { background: var(--card); padding: 28px 24px; text-decoration: none; display: flex; flex-direction: column; gap: 12px; transition: background 0.15s; }
.arm-bar  { height: 2px; border-radius: 1px; width: 28px; }
.arm-name { font-weight: 700; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); }
.arm-desc { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 17px; color: var(--dim); line-height: 1.6; }
.arm-link { font-size: 17px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

/* ── SECTION CONTAINERS ── */
.arms        { background: var(--bg); padding: 88px 24px; }
.arms-inner  { max-width: 1600px; margin: 0 auto; padding: 0 24px; }
.how         { background: var(--card); padding: 88px 0; }
.how-inner   { max-width: 1600px; margin: 0 auto; padding: 0 24px; }

/* ── HOW-WE-WORK CARDS ── */
.how-card { background: var(--card); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border); border-radius: 4px; }
.how-tag  { font-size: 17px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }
.how-name { font-weight: 700; font-size: 17px; letter-spacing: 0.04em; color: var(--white); }
.how-desc { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 17px; color: var(--dim); line-height: 1.6; }
.how-modes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.how-mode  { font-size: 17px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 8px; background: var(--ghost); color: var(--dim); }

/* ── STATEMENT BLOCK ── */
.statement       { background: var(--card); border-radius: 6px; padding: 40px 44px; margin-bottom: 4px; text-align: center; }
.statement-inner { max-width: 700px; margin: 0 auto; }
.statement p     { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.75; color: var(--dim); max-width: 700px; margin: 0 auto; }
.statement strong { font-style: normal; color: var(--white); font-weight: 600; }
.statement-rule  { height: 1px; background: var(--border); margin-top: 32px; }

/* ── BUTTONS ── */
.btn-primary {
  background: var(--green); color: #1e2a1e;
  padding: 12px 28px; border-radius: 50px;
  font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; font-family: "Montserrat", sans-serif; display: inline-block;
}
.btn-ghost {
  background: var(--ghost); color: var(--dim);
  padding: 12px 28px; border-radius: 50px; border: 1px solid var(--bm);
  font-size: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; font-family: "Montserrat", sans-serif; display: inline-block;
}
.btn-faint {
  background: transparent; color: var(--faint);
  padding: 12px 28px; border-radius: 50px; border: 1px solid var(--border);
  font-size: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; font-family: "Montserrat", sans-serif; display: inline-block;
}
.btn-fill {
  background: #4caf82; color: #1e2a1e;
  padding: 13px 28px; border-radius: 50px;
  font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; font-family: "Montserrat", sans-serif; display: inline-block;
}

/* ── CTA SECTION ── */
.cta-inner   { padding: 60px 44px; text-align: center; }
.cta-kicker  { font-size: 21px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--faint); margin-bottom: 18px; }
.cta-title   { font-weight: 900; font-size: clamp(28px, 4vw, 46px); line-height: 1.05; color: var(--white); margin-bottom: 16px; }
.cta-title span { color: var(--faint); font-weight: 300; }
.cta-sub     { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 21px; color: var(--dim); margin-bottom: 8px; }
.cta-contact { font-size: 16px; color: var(--faint); letter-spacing: 0.06em; line-height: 2.2; margin-top: 28px; }
.cta-contact a { color: var(--dim); text-decoration: none; }
.cta-btns    { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ── FOOTER ── */
footer { background: rgba(40,52,66,0.8); border-top: 1px solid var(--border); padding: 36px 0; margin-top: 4px; }
.footer-inner { max-width: 1600px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px; }
.fn { font-weight: 700; font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.35); }
.fs { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 16px; color: rgba(255,255,255,0.2); margin-top: 2px; }
.ft { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 21px; color: rgba(255,255,255,0.18); }
.fl { display: flex; gap: 18px; flex-wrap: wrap; }
.fl a { font-size: 21px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.2); text-decoration: none; }
.fl a:hover { color: rgba(255,255,255,0.5); }

/* ── UTILITY ── */
.serif     { font-family: "Cormorant Garamond", serif; font-style: italic; }
.eye       { font-size: 21px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }
.row-rule  { height: 1px; background: var(--border); }
.spec      { height: 3px; display: flex; overflow: hidden; }

/* ── RESPONSIVE ── */
@media(max-width: 1100px) {
  .wrap, .section-inner, .footer-inner { padding: 0 24px; }
}
@media(max-width: 900px) {
  nav { padding: 0 24px; }
  .wrap, .section-inner, .footer-inner { padding: 0 24px; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 700px) {
  nav { padding: 0 20px !important; }
  .nl { display: none; }
  .wrap, .section-inner, .footer-inner { padding: 0 20px !important; }
  .g2, .g3, .g4 { grid-template-columns: 1fr !important; }
  .sec-label { display: none; }
  .sec-title { font-size: clamp(22px, 6vw, 32px) !important; margin-bottom: 24px !important; }
  .statement { padding: 32px 20px !important; }
  .statement p { font-size: 16px !important; }
  .cta-inner { padding: 48px 20px !important; }
  .cta-title { font-size: clamp(22px, 6vw, 34px) !important; }
  .cta-btns { flex-direction: column; align-items: center; }
  footer { padding: 28px 0 !important; }
  .footer-inner { flex-direction: column; gap: 12px; }
  .fl { flex-wrap: wrap; }
}