/* Emilio Yepez — custom styles layered on Bootstrap 5. Edit colors here. */
:root  {
  
  --ink: #11112e;
  
  --muted: #51546a;
  
  --accent: #20c6d2;
  
  --cream: #f8f8f9;
  
  --line: #d9dbe3;
  
  --dark: #11102e;
  
}


* {
  box-sizing:border-box}

html {
  scroll-behavior:smooth}

body {
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.7}

a {
  color:inherit;
  text-decoration:none}

a:hover {
  color:var(--accent)}



.site-header {
  position:sticky;
  top:0;
  z-index:100;
  background:#fff;
  border-bottom:1px solid var(--line)}

.nav-shell {
  display:flex;
  align-items:center;
  gap:28px;
  min-height:88px}

.brand {
  font-weight:800;
  font-size:24px;
  white-space:nowrap;
  letter-spacing:-1px}

.brand span {
  color:var(--accent)}

.navbar-collapse {
  flex-grow:1;
  justify-content:center}

.site-links {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  list-style:none;
  margin:0;
  padding:0}

.site-links a {
  font-size:13px;
  font-weight:700}

.site-links li {
  list-style:none}

.btn {
  border:1px solid currentColor;
  border-radius:2px;
  padding:13px 23px;
  font-weight:700;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.2s}

.btn.primary {
  background:var(--accent);
  color:#fff;
  border-color:var(--accent)}

.btn.primary:hover {
  background:#926840}

.menu {
  display:none;
  border:0;
  background:transparent;
  font-size:25px}

.hero {
  position:relative;
  overflow:hidden;
  background:var(--cream);
  padding:90px 0}

.hero-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:65px;
  align-items:center}

.hero-index {
  position:absolute;
  right:4%;
  top:0;
  font-size:200px;
  line-height:1;
  color:#e9e3da;
  font-weight:900;
  pointer-events:none}

.hero-copy,.portrait {
  position:relative;
  z-index:1}

.eyebrow {
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--accent);
  margin-bottom:22px}

.hero h1 {
  font-size:clamp(48px,5.5vw,82px);
  line-height:1.07;
  letter-spacing:-.055em;
  font-weight:750;
  margin-bottom:30px}

.hero h1 span {
  display:block;
  color:var(--accent)}

.lede {
  font-size:18px;
  line-height:1.85;
  color:var(--muted)}

.actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px}

.portrait {
  background:#ded7ce;
  min-height:480px;
  display:flex;
  align-items:flex-end}

.portrait img {
  width:100%;
  height:570px;
  object-fit:cover;
  object-position:center top}

.portrait-label {
  position:absolute;
  z-index:2;
  left:0;
  bottom:0;
  background:var(--dark);
  color:white;
  padding:14px 20px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em}

.signal {
  display:flex;
  justify-content:space-around;
  gap:15px;
  flex-wrap:wrap;
  background:var(--dark);
  color:#fff;
  padding:22px 5%;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase}

.proof {
  padding:44px 0;
  border-bottom:1px solid var(--line)}

.proof-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px}

.proof-item {
  display:flex;
  flex-direction:column;
  font-size:13px;
  color:var(--muted)}

.proof-item .eyebrow {
  margin-bottom:4px}

.proof-item strong {
  font-size:20px;
  color:var(--ink)}

.section {
  padding:105px 0;
  scroll-margin-top:88px}

.section h2 {
  font-size:clamp(34px,4vw,56px);
  line-height:1.15;
  letter-spacing:-.04em;
  font-weight:750;
  margin-bottom:25px}

.section h3 {
  font-size:21px;
  line-height:1.35;
  font-weight:750}

.split {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:85px}

.quote {
  font-size:clamp(48px,6vw,90px);
  font-weight:800;
  letter-spacing:-.065em;
  line-height:1.06}

.about-copy p,.approach-copy p {
  color:var(--muted);
  margin-bottom:20px}

.dark {
  background:var(--dark);
  color:white}

.dark .eyebrow {
  color:#d7a875}

.dark .muted,.dark p {
  color:#b9c4ca}

.timeline {
  margin-top:45px}

.event {
  display:grid;
  grid-template-columns:200px 1fr;
  gap:30px;
  padding:26px 0;
  border-top:1px solid rgba(255,255,255,.18)}

.event time {
  color:#d7a875;
  font-size:13px;
  font-weight:700}

.event p {
  margin:0}

.grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:40px}

.card {
  padding:35px;
  border:1px solid var(--line);
  border-radius:0;
  background:#fff}

.card .num {
  font-size:12px;
  color:var(--accent);
  font-weight:700}

.card h3 {
  margin:22px 0 15px}

.card p {
  color:var(--muted)}

.card-link {
  font-weight:700;
  font-size:13px;
  color:var(--accent)}

.approach {
  background:var(--cream)}

.approach-grid {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:80px}

.approach-links {
  display:flex;
  flex-direction:column;
  gap:12px;
  font-weight:700}

.client-groups {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
  margin-top:35px}

.client-group {
  border-top:1px solid var(--line);
  padding-top:22px}

.client-list {
  display:flex;
  flex-wrap:wrap;
  gap:10px}

.client-list span {
  border:1px solid var(--line);
  padding:8px 12px;
  font-size:13px}

.notice {
  margin-top:35px;
  color:var(--muted);
  font-size:12px}

.agency {
  display:grid;
  grid-template-columns:.6fr 1fr;
  gap:70px;
  align-items:center}

.beam {
  min-height:290px;
  background:linear-gradient(140deg,#182c37,#a47c57);
  position:relative}

.beam:after {
  content:'';
  position:absolute;
  inset:25%;
  border:2px solid #fff5;
  transform:rotate(45deg)}

.article-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:35px}

.article-card {
  padding:30px;
  border:1px solid var(--line);
  display:block;
  min-height:250px}

.article-card:hover {
  border-color:var(--accent)}

.article-card .meta {
  font-size:12px;
  color:var(--accent)}

.article-card h3 {
  margin:20px 0}

.article-card p {
  color:var(--muted)}

.contact {
  background:var(--cream);
  position:relative;
  overflow:hidden}

.contact-mark {
  position:absolute;
  right:-20px;
  top:0;
  font-size:clamp(90px,15vw,240px);
  font-weight:900;
  color:#ebe6dd;
  pointer-events:none}

.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  position:relative}

.contact-list {
  display:flex;
  flex-direction:column;
  gap:10px;
  font-weight:700}

.contact form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  background:white;
  padding:35px}

.contact form label {
  display:flex;
  flex-direction:column;
  font-size:12px;
  font-weight:700;
  gap:7px}

.contact form label:has(textarea),.contact form label:has(select),.contact form label:has([type=checkbox]),.contact form button,.contact form small {
  grid-column:1/-1}

.contact input:not([type=checkbox]),.contact textarea,.contact select {
  width:100%;
  padding:12px;
  border:1px solid var(--line);
  font-size:14px;
  background:white}

.contact textarea {
  min-height:120px}

.contact form label:has([type=checkbox]) {
  flex-direction:row;
  align-items:flex-start;
  font-weight:400}

.contact form small {
  color:var(--muted)}

.contact-feedback {
  background:#fff;
  padding:15px;
  margin-bottom:20px}

.footer {
  background:var(--dark);
  color:#b9c4ca;
  padding:35px 0}

.footer-grid {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px}

.footer-grid div {
  display:flex;
  gap:20px}

.inner-page {
  padding-top:95px;
  padding-bottom:110px;
  min-height:60vh}

.inner-page h1 {
  font-size:clamp(40px,5vw,66px);
  letter-spacing:-.04em;
  margin-bottom:35px}

.post-content {
  max-width:850px;
  margin:auto}

.entry-content {
  font-size:17px;
  line-height:1.9}

.entry-content img {
  max-width:100%;
  height:auto}

.pagination-links {
  margin-top:40px}


@media(max-width:991px) {
  .nav-shell {
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  padding-top:12px;
  padding-bottom:12px}

.menu {
  display:block;
  margin-left:auto}

.navbar-collapse {
  order:4;
  flex-basis:100%}

.site-links {
  flex-direction:column;
  align-items:flex-start;
  padding:20px 0;
  gap:14px}

.header-cta {
  display:none}

.hero-grid,.split,.approach-grid,.contact-grid {
  grid-template-columns:1fr;
  gap:40px}

.hero {
  padding:65px 0}

.portrait {
  max-width:550px}

.grid,.article-grid {
  grid-template-columns:repeat(2,1fr)}

.proof-grid {
  grid-template-columns:repeat(2,1fr)}

.agency {
  grid-template-columns:1fr 1fr;
  gap:35px}

}


@media(max-width:600px) {
  .section {
  padding:65px 0}

.hero h1 {
  font-size:47px}

.hero-index {
  font-size:100px}

.portrait img {
  height:440px}

.grid,.article-grid,.client-groups,.agency,.proof-grid {
  grid-template-columns:1fr}

.event {
  grid-template-columns:1fr;
  gap:8px}

.contact form {
  grid-template-columns:1fr;
  padding:20px}

.contact form label {
  grid-column:1/-1}

.footer-grid {
  flex-direction:column}

.quote {
  font-size:60px}

}