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

:root{
  --ink:#0D0D0D;
  --cream:#F7F3EE;
  --gold:#C9A84C;
  --gold-light:#E8C97A;
  --warm-gray:#8A8278;
  --border:rgba(201,168,76,0.2);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #ffffff;
  color: #171717;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

.page-shell {
  min-height: 100vh;
  padding: 0 24px;
}

.home-wrap {
  min-height: 100vh;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-inner { width: 100%; }

.home-title-wrap { margin-bottom: 64px; }

.home-title {
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.door-grid {
  display: grid;
  gap: 24px;
}

.door-grid.three { grid-template-columns: 1fr; }

.door {
  display: block;
  width: 100%;
  text-align: left;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 24px;
  padding: 40px;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.door:hover {
  background: #fafafa;
  border-color: #d4d4d4;
  transform: translateY(-1px);
}

.door-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.8vw, 2.2rem);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.door-subtitle {
  margin: 16px 0 0;
  max-width: 440px;
  color: #737373;
  font-size: 0.95rem;
  line-height: 1.85;
}

.fixed-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.fixed-header-link{
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.92;
}

.fixed-header-link:hover{ opacity: 1; }

.fixed-header-spacer{ width: 1px; height: 1px; }

.content-wrap {
  max-width: 1024px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 64px 32px;
}

.content-wrap.narrow { max-width: 1024px; }
.content-wrap.wide { max-width: 1180px; }
.page-pad-top { padding-top: 112px; }

.page-title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.page-intro {
  margin-top: 24px;
  max-width: 720px;
  color: #525252;
  line-height: 1.8;
}

.section-stack {
  margin-top: 48px;
  display: grid;
  gap: 48px;
}

.exp-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.exp-role {
  margin-top: 4px;
  color: #737373;
  font-size: 0.95rem;
}

.exp-desc {
  margin-top: 16px;
  color: #525252;
  line-height: 1.8;
}

.exp-result {
  margin-top: 16px;
  border-left: 2px solid #171717;
  background: #fafafa;
  padding: 12px 16px;
  font-size: 0.95rem;
  color: #262626;
}

.footer-note {
  margin-top: 64px;
  font-size: 0.92rem;
  color: #737373;
}

.mt-1 { margin-top: 4px; }

.card-grid.two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px;
}

.card-link {
  display: block;
  border: 1px solid #e5e5e5;
  border-radius: 24px;
  padding: 32px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.card-link:hover {
  background: #fafafa;
  border-color: #d4d4d4;
}

.card-title {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.card-copy {
  margin: 14px 0 0;
  color: #737373;
  line-height: 1.8;
}

.card-cta {
  margin-top: 18px;
  color: #a3a3a3;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Creative page */
.creative-body{
  font-family: "DM Sans", sans-serif;
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.6;
}

.creative-page{
  background: var(--cream);
  color: var(--ink);
}

.creative-hero{
  min-height: 100vh;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  padding: 112px 24px 64px;
}

.creative-hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  opacity:.55;
}

.creative-hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.45) 40%, rgba(5,5,5,0.82) 100%);
  z-index:1;
}

.creative-hero-inner{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.creative-eyebrow{
  font-size:11px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:20px;
  font-weight:500;
}

.creative-name{
  font-family:"Playfair Display",serif;
  font-size:clamp(56px,9vw,120px);
  font-weight:900;
  line-height:.92;
  letter-spacing:-.02em;
  color:#fff;
  margin:0 0 32px;
}

.creative-name span{ color: var(--gold); }

.creative-tagline{
  font-family:"Playfair Display",serif;
  font-size:clamp(17px,2.2vw,26px);
  font-weight:400;
  font-style:italic;
  color:rgba(255,255,255,.75);
  line-height:1.4;
  margin:0;
  max-width:680px;
  text-shadow: 0 1px 20px rgba(0,0,0,.5);
}

.creative-bottom{
  margin-top: 40px;
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}

.creative-quote-bar{
  width:3px;
  height:48px;
  background:var(--gold);
  flex-shrink:0;
}

.creative-quote{
  font-family:"Playfair Display",serif;
  font-size:clamp(15px,1.6vw,19px);
  font-style:italic;
  color:rgba(255,255,255,.8);
  font-weight:400;
  flex:1;
  min-width:260px;
  margin: 0;
}

.creative-ctas{
  display:flex;
  gap:12px;
  flex-shrink:0;
}

.btn{
  display:inline-block;
  padding:13px 26px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.06em;
  border-radius:2px;
  text-decoration:none;
  transition:all .25s;
  font-family:"DM Sans",sans-serif;
}

.btn-gold{
  background:var(--gold);
  color:var(--ink);
}

.btn-gold:hover{
  background:var(--gold-light);
  transform:translateY(-2px);
}

.btn-outline{
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
}

.btn-outline:hover{
  border-color:var(--gold);
  color:var(--gold);
  transform:translateY(-2px);
}

.creative-nav{
  background:var(--ink);
  padding:0 24px;
  display:flex;
  gap:36px;
  border-bottom:1px solid rgba(201,168,76,.12);
  position:sticky;
  top:49px;
  z-index:99;
  overflow-x:auto;
}

.creative-nav a{
  color:rgba(255,255,255,.45);
  text-decoration:none;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:17px 0;
  display:block;
  border-bottom:2px solid transparent;
  transition:all .2s;
  font-weight:500;
  white-space:nowrap;
}

.creative-nav a:hover{
  color:var(--gold);
  border-bottom-color:var(--gold);
}

.creative-work-header{
  padding:72px 24px 40px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}

.creative-work-header h2{
  font-family:"Playfair Display",serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--warm-gray);
  margin:0;
}

.case{
  border-top:1px solid var(--border);
  overflow:hidden;
  background:#fff;
  transition:box-shadow .3s;
}

.case:hover{ box-shadow:0 8px 48px rgba(0,0,0,.07); }

.case-amex{ border-top:2px solid var(--gold); }

.amex-band{
  background:linear-gradient(110deg,#003f8a 0%,#0057c2 50%,#0072ff 100%);
  padding:72px 24px;
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:center;
  position:relative;
  overflow:hidden;
  min-height:260px;
}

.amex-band::after{
  content:"AMEX";
  position:absolute;
  right:-30px;
  top:50%;
  transform:translateY(-50%);
  font-family:"Playfair Display",serif;
  font-size:200px;
  font-weight:900;
  color:rgba(255,255,255,.04);
  letter-spacing:-.05em;
  pointer-events:none;
}

.amex-logo-box{
  width:210px;
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 24px;
  border-radius:8px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-family:"Playfair Display",serif;
  font-size:40px;
  font-weight:900;
  position:relative;
  z-index:1;
}

.amex-band-text{
  position:relative;
  z-index:1;
}

.amex-band-text h2{
  font-family:"Playfair Display",serif;
  font-size:clamp(28px,3.5vw,52px);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.02em;
  color:#fff;
  margin:0 0 14px;
}

.amex-band-text p{
  font-size:15px;
  color:rgba(255,255,255,.65);
  font-weight:300;
  line-height:1.75;
  max-width:520px;
  margin:0;
}

.amex-pillars{
  display:grid;
  grid-template-columns:1fr;
  border-top:1px solid var(--border);
}

.amex-pillar{
  padding:36px 24px;
  border-bottom:1px solid var(--border);
}

.amex-pillar:last-child{ border-bottom:none; }

.amex-pillar-num{
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:12px;
  display:block;
}

.amex-pillar h4{
  font-family:"Playfair Display",serif;
  font-size:16px;
  font-weight:700;
  margin:0 0 8px;
}

.amex-pillar p{
  font-size:13px;
  color:var(--warm-gray);
  line-height:1.8;
  margin:0;
}

.amex-footer{
  padding:18px 24px;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:var(--warm-gray);
  font-style:italic;
}

.amex-footer-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
}

.white-case{
  border-top:1px solid var(--border);
  background:#fff;
}

.case-grid{
  display:grid;
  grid-template-columns:1fr;
}

.case-image-pane{
  background:#000;
}

.case-image-pane img{
  width:100%;
  height:100%;
  min-height:320px;
  object-fit:cover;
  display:block;
}

.case-body{
  padding:56px 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.case-num{
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--warm-gray);
  margin-bottom:28px;
  display:flex;
  align-items:center;
  gap:12px;
}

.case-line{
  width:32px;
  height:1px;
  background:var(--border);
}

.case-company{
  font-family:"Playfair Display",serif;
  font-size:clamp(30px,3.5vw,48px);
  font-weight:900;
  line-height:1;
  letter-spacing:-.01em;
  margin:0 0 6px;
}

.case-role{
  font-size:11px;
  color:var(--gold);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:32px;
  font-weight:500;
}

.case-text{
  font-size:14px;
  color:#555;
  line-height:1.85;
  margin:0 0 22px;
  font-weight:300;
}

.case-result{
  display:flex;
  gap:14px;
  padding:16px 20px;
  background:rgba(201,168,76,.06);
  border-left:3px solid var(--gold);
}

.case-result-text{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  line-height:1.5;
}

.more-work{
  padding:60px 24px;
  border-top:1px solid var(--border);
}

.more-work h3{
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--warm-gray);
  margin:0 0 32px;
}

.more-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  background:var(--border);
  border:1px solid var(--border);
}

.more-card{
  background:#fff;
  padding:36px 40px;
  transition:background .2s;
}

.more-card:hover{ background:#FDFAF7; }

.more-company{
  font-family:"Playfair Display",serif;
  font-size:20px;
  font-weight:700;
  margin-bottom:4px;
}

.more-role{
  font-size:11px;
  color:var(--gold);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.more-text{
  font-size:13px;
  color:var(--warm-gray);
  line-height:1.8;
  font-weight:300;
  margin:0;
}

.skills-section{
  background:var(--ink);
  padding:100px 24px;
}

.skills-header{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:56px;
}

.skills-header h2{
  font-family:"Playfair Display",serif;
  font-size:clamp(32px,4vw,52px);
  font-weight:900;
  color:#fff;
  letter-spacing:-.01em;
  margin:0;
}

.skills-header p{
  font-size:13px;
  color:rgba(255,255,255,.4);
  max-width:280px;
  line-height:1.7;
  margin:0;
}

.skills-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:rgba(201,168,76,.1);
}

.skill-col{
  background:#111;
  padding:44px 36px;
}

.skill-col-label{
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:24px;
  display:block;
}

.skill-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  margin:0;
}

.skill-list li{
  font-size:14px;
  color:rgba(255,255,255,.55);
  font-weight:300;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.skill-list li:last-child{ border-bottom:none; }

.lor-section{
  padding:100px 24px;
  border-top:1px solid var(--border);
  background:#fff;
}

.lor-kicker{
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:44px;
  display:flex;
  align-items:center;
  gap:14px;
}

.lor-kicker::before{
  content:"";
  width:28px;
  height:1px;
  background:var(--gold);
}

.lor-quote{
  font-family:"Playfair Display",serif;
  font-size:clamp(18px,2.2vw,27px);
  font-style:italic;
  font-weight:300;
  line-height:1.65;
  color:var(--ink);
  max-width:900px;
  margin:0 0 44px;
}

.lor-attr{
  display:flex;
  align-items:center;
  gap:18px;
}

.lor-attr-icon{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,#0057c2,#003f8a);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:#fff;
  font-size:12px;
  font-weight:700;
}

.lor-attr-name{
  font-family:"Playfair Display",serif;
  font-size:15px;
  font-weight:700;
  margin-bottom:2px;
}

.lor-attr-title{
  font-size:12px;
  color:var(--warm-gray);
}

.content-section{
  padding:100px 24px;
  border-top:1px solid var(--border);
  background:#fff;
}

.content-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:52px;
}

.content-header h2{
  font-family:"Playfair Display",serif;
  font-size:clamp(32px,4vw,52px);
  font-weight:900;
  letter-spacing:-.01em;
  margin:0;
}

.content-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  background:var(--border);
  border:1px solid var(--border);
}

.content-card{
  background:#fff;
  padding:40px;
  text-decoration:none;
  color:inherit;
  display:block;
  transition:background .2s;
  position:relative;
  overflow:hidden;
}

.content-card:hover{ background:#FDFAF7; }

.content-platform{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
  font-weight:500;
}

.content-name{
  font-family:"Playfair Display",serif;
  font-size:22px;
  font-weight:700;
  margin-bottom:10px;
}

.content-desc{
  font-size:13px;
  color:var(--warm-gray);
  line-height:1.8;
  max-width:320px;
}

.contact-section{
  padding:120px 24px 100px;
  border-top:1px solid var(--border);
  background:var(--ink);
  position:relative;
  overflow:hidden;
}

.contact-kicker{
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:28px;
  position:relative;
}

.contact-title{
  font-family:"Playfair Display",serif;
  font-size:clamp(44px,7vw,96px);
  font-weight:900;
  line-height:.95;
  letter-spacing:-.02em;
  color:#fff;
  margin:0 0 40px;
  position:relative;
}

.contact-title em{
  font-style:italic;
  font-weight:300;
  color:rgba(255,255,255,.5);
}

.contact-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  position:relative;
}

@media (min-width: 768px) {
  .page-shell { padding: 0 32px; }
  .door-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creative-hero{ padding: 112px 52px 64px; }
  .creative-nav{ padding: 0 52px; }
  .creative-work-header{ padding:72px 52px 40px; }
  .amex-band{ grid-template-columns:auto 1fr; gap:60px; padding:72px 80px; }
  .amex-pillars{ grid-template-columns:repeat(3,1fr); }
  .amex-pillar{ padding:36px 40px; border-bottom:none; border-right:1px solid var(--border); }
  .amex-pillar:last-child{ border-right:none; }
  .case-grid{ grid-template-columns:1fr 1fr; }
  .more-grid{ grid-template-columns:1fr 1fr; }
  .skills-section{ padding:100px 52px; }
  .skills-header{ flex-direction:row; justify-content:space-between; align-items:baseline; }
  .skills-grid{ grid-template-columns:repeat(3,1fr); }
  .lor-section{ padding:100px 52px; }
  .content-section{ padding:100px 52px; }
  .content-grid{ grid-template-columns:1fr 1fr; }
  .contact-section{ padding:120px 52px 100px; }
}


/* One-line minimal contact */
.home-contact {
  margin-top: 56px;
  text-align: center;
}

.home-contact-inline {
  font-size: 1rem;
  color: #171717;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.home-contact-inline:hover {
  opacity: 0.6;
}

.home-contact-sep {
  margin: 0 8px;
  color: #d4d4d4;
}

@media (max-width: 767px) {
  .home-contact {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
  }

  .home-contact-sep {
    display: none;
  }

  .home-contact-inline {
    font-size: 0.96rem;
  }
}