/* ClickHail Site Stylesheet */
/* Edit this file to change the site's appearance globally. */

:root{
  --ink: #0c0d10;
  --ink-soft: #18191e;
  --paper: #ecebe6;
  --paper-warm: #dedcd3;
  --rule: #b8b6ac;

  /* Logo-derived palette — bold & masculine */
  --pink:   #b9261b;   /* deep crimson / oxblood */
  --orange: #c46a1a;   /* burnt amber / whiskey */
  --teal:   #1f5f4a;   /* deep forest / hunter */
  --blue:   #2a3a6e;   /* navy / oxford */
  --purple: #3d2952;   /* aubergine */
  --steel:  #3a3d44;   /* graphite */

  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans:  'Inter Tight', system-ui, sans-serif;
  --mono:  'JetBrains Mono', monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  font-feature-settings:"ss01","ss02","cv11";
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:0.4;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero, .pillars, .results, .about, .portfolio, .approach, .cta, .footer, .marquee{position:relative;z-index:2;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ================ NAV ================ */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(236,235,230,0.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.nav.scrolled{border-bottom-color:var(--rule);}
.nav__logo{
  display:flex; align-items:center; gap:14px;
  font-family:var(--serif);
  font-weight:600;
  font-size:2.59rem;
  letter-spacing:-0.025em;
  line-height:1;
}
.nav__logo img{height:58px;width:auto;display:block;}
.nav__menu{
  display:flex; gap:38px;
  font-size:1.29rem;
  font-weight:500;
}
.nav__menu a{position:relative;padding:6px 0;transition:color .2s;}
.nav__menu a::after{
  content:""; position:absolute; bottom:0; left:0;
  width:0; height:2px; background:var(--ink);
  transition:width .3s ease;
}
.nav__menu a:hover::after{width:100%;}
.nav__cta{
  padding:13px 26px;
  background:var(--ink);
  color:var(--paper);
  border-radius:999px;
  font-size:1.05rem;
  font-weight:500;
  transition:transform .2s, background .2s;
}
.nav__cta:hover{background:var(--pink);transform:translateY(-2px);}

/* ===== Services dropdown ===== */
.nav__dropdown{position:relative;}
.nav__dropdown-trigger{
  display:inline-flex; align-items:center; gap:6px;
}
.nav__dropdown-caret{
  font-size:0.7em;
  transition:transform .25s ease;
  display:inline-block;
}
.nav__dropdown:hover .nav__dropdown-caret,
.nav__dropdown:focus-within .nav__dropdown-caret{
  transform:rotate(180deg);
}
.nav__dropdown-panel{
  position:absolute;
  top:calc(100% + 14px);
  left:-20px;
  min-width:340px;
  background:#fff;
  border-radius:18px;
  padding:14px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,0.25), 0 4px 14px -6px rgba(0,0,0,0.1);
  border:1px solid var(--rule);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .25s ease, transform .25s ease, visibility 0s .25s;
  z-index:200;
}
/* Invisible bridge so cursor can travel from trigger to panel without dropdown closing */
.nav__dropdown::after{
  content:"";
  position:absolute;
  top:100%;
  left:0; right:0;
  height:18px;
}
.nav__dropdown:hover .nav__dropdown-panel,
.nav__dropdown:focus-within .nav__dropdown-panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .25s ease, transform .25s ease, visibility 0s 0s;
}
.nav__dropdown-panel a{
  display:block;
  padding:14px 18px;
  border-radius:12px;
  font-size:1rem;
  font-weight:500;
  transition:background .2s ease;
}
.nav__dropdown-panel a::after{display:none !important;}
.nav__dropdown-panel a:hover{
  background:var(--paper-warm);
}
.nav__dropdown-label{
  display:block;
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1;
  margin-bottom:4px;
}
.nav__dropdown-panel a:nth-child(1) .nav__dropdown-label{color:var(--pink);}
.nav__dropdown-panel a:nth-child(2) .nav__dropdown-label{color:var(--orange);}
.nav__dropdown-panel a:nth-child(3) .nav__dropdown-label{color:var(--teal);}
.nav__dropdown-desc{
  display:block;
  font-size:0.82rem;
  color:var(--ink-soft);
  font-weight:400;
  font-family:var(--sans);
}

/* Mobile drawer Services group */
.mobile-drawer__group{width:100%;}
.mobile-drawer__group-trigger{
  background:transparent;
  border:none;
  cursor:pointer;
  width:100%;
  text-align:left;
  font-family:var(--serif);
  font-size:2.6rem;
  font-weight:300;
  letter-spacing:-0.025em;
  line-height:1.1;
  padding:8px 0;
  color:var(--ink);
  display:flex; align-items:center; justify-content:space-between;
}
.mobile-drawer__caret{
  font-size:0.6em;
  transition:transform .25s ease;
}
.mobile-drawer__group-trigger[aria-expanded="true"] .mobile-drawer__caret{
  transform:rotate(180deg);
}
.mobile-drawer__group-panel{
  display:none;
  padding-left:20px;
  margin-bottom:12px;
  border-left:3px solid var(--pink);
}
.mobile-drawer__group-panel a{
  font-size:1.6rem !important;
  padding:6px 0 !important;
  border-bottom:none !important;
}
.mobile-drawer__group-trigger[aria-expanded="true"] + .mobile-drawer__group-panel{
  display:block;
}

.nav__hamburger{display:none;}
.mobile-drawer{display:none;}

/* ================ HERO ================ */
.hero{
  min-height:100vh;
  padding:140px 32px 80px;
  position:relative;
  overflow:hidden;
}
.hero__grid{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:60px;
  align-items:center;
}
.hero__eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:32px;
  display:flex; align-items:center; gap:12px;
  opacity:0;
  animation:fadeUp .7s .1s forwards;
}
.hero__eyebrow::before{
  content:""; width:32px; height:1px; background:var(--ink);
}
.hero__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(3rem, 7.2vw, 6.5rem);
  line-height:0.95;
  letter-spacing:-0.035em;
  margin-bottom:36px;
}
.hero__title span{
  font-style:italic;
  font-weight:400;
}
.hero__title .ink-pink{color:var(--pink);}
.hero__title .ink-orange{color:var(--orange);}
.hero__title .ink-teal{color:var(--teal);}

.hero__title-line{
  display:block;
  opacity:0;
  transform:translateY(40px);
  animation:fadeUp .9s forwards;
}
.hero__title-line:nth-child(1){animation-delay:.15s;}
.hero__title-line:nth-child(2){animation-delay:.3s;}
.hero__title-line:nth-child(3){animation-delay:.45s;}
.hero__title-line:nth-child(4){animation-delay:.6s;}

.hero__lede{
  font-size:1.18rem;
  max-width:540px;
  color:var(--ink-soft);
  margin-bottom:44px;
  opacity:0;
  animation:fadeUp .9s .75s forwards;
}
.hero__actions{
  display:flex; gap:16px; flex-wrap:wrap;
  opacity:0;
  animation:fadeUp .9s .9s forwards;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 28px;
  font-size:0.95rem;
  font-weight:500;
  border-radius:999px;
  cursor:pointer;
  border:none;
  transition:all .25s;
}
.btn--primary{background:var(--ink);color:var(--paper);}
.btn--primary:hover{background:var(--pink);transform:translateY(-2px);}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn--ghost:hover{background:var(--ink);color:var(--paper);}
.btn__arrow{transition:transform .25s;}
.btn:hover .btn__arrow{transform:translate(3px,-3px);}

/* Hero visual: stacked color cards mimicking logo bars */
.hero__visual{
  position:relative;
  height:560px;
  opacity:0;
  animation:fadeUp 1.1s .5s forwards;
}
.bar{
  position:absolute;
  border-radius:14px 14px 4px 4px;
  width:90px;
  bottom:0;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
  cursor:pointer;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.25);
}
.bar:hover{transform:translateY(-10px);}
.bar__label{
  position:absolute;
  top:24px; left:0; right:0;
  text-align:center;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:1.1rem;
  color:rgba(255,255,255,.95);
}
.bar__value{
  position:absolute;
  bottom:24px; left:0; right:0;
  text-align:center;
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:.1em;
  color:rgba(255,255,255,.8);
}
.bar--1{left:0;     height:380px; background:var(--pink);}
.bar--2{left:110px; height:480px; background:var(--orange);}
.bar--3{left:220px; height:300px; background:var(--purple);}
.bar--4{left:330px; height:540px; background:var(--teal);}

.hero__scribble{
  position:absolute;
  top:40px; left:-30px;
  width:480px;
  pointer-events:none;
  opacity:.7;
}
.hero__corner-num{
  position:absolute;
  top:20px; right:0;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:.18em;
  color:var(--ink-soft);
  text-transform:uppercase;
}

@keyframes fadeUp{
  to{opacity:1; transform:translateY(0);}
}

/* ================ MARQUEE ================ */
.marquee{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background:var(--paper-warm);
  padding:20px 0;
  overflow:hidden;
  white-space:nowrap;
}
.marquee__track{
  display:inline-flex;
  gap:60px;
  animation:scroll 40s linear infinite;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.4rem;
  font-weight:300;
}
.marquee__track span{display:inline-flex;align-items:center;gap:60px;}
.marquee__track i{
  font-style:normal;
  color:var(--pink);
  font-family:var(--mono);
  font-size:0.9rem;
}
@keyframes scroll{
  to{transform:translateX(-50%);}
}

/* ================ PILLARS ================ */
.pillars{
  padding:140px 32px 100px;
  max-width:1400px;
  margin:0 auto;
}
.section-head{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:60px;
  align-items:end;
  margin-bottom:80px;
  padding-bottom:32px;
  border-bottom:1px solid var(--rule);
}
.section-head__num{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
}
.section-head__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.2rem, 5vw, 4rem);
  line-height:1;
  letter-spacing:-0.03em;
}
.section-head__title em{font-style:italic;}

.pillar-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.pillar{
  position:relative;
  padding:48px 36px 36px;
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  transition:transform .4s, box-shadow .4s;
  cursor:pointer;
  display:flex; flex-direction:column;
  min-height:480px;
}
.pillar:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.18);
}
.pillar__num{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.2em;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.pillar__icon{
  width:64px; height:64px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:32px;
  color:#fff;
  font-family:var(--serif);
  font-size:2rem;
  font-weight:500;
  font-style:italic;
}
.pillar__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:2.4rem;
  line-height:1;
  letter-spacing:-0.025em;
  margin-bottom:20px;
}
.pillar__title em{font-style:italic;}
.pillar__desc{
  font-size:1rem;
  color:var(--ink-soft);
  margin-bottom:24px;
  line-height:1.55;
}
.pillar__list{
  list-style:none;
  margin-top:auto;
  padding-top:24px;
  border-top:1px dashed var(--rule);
}
.pillar__list li{
  font-size:0.88rem;
  padding:6px 0;
  display:flex; align-items:center; gap:10px;
}
.pillar__list li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}

.pillar--seo{border-top:6px solid var(--pink);}
.pillar--seo .pillar__icon{background:var(--pink);}
.pillar--seo .pillar__list li{color:var(--pink);}
.pillar--seo .pillar__list li span{color:var(--ink);}

.pillar--ai{border-top:6px solid var(--orange);}
.pillar--ai .pillar__icon{background:var(--orange);}
.pillar--ai .pillar__list li{color:var(--orange);}
.pillar--ai .pillar__list li span{color:var(--ink);}

.pillar--ecom{border-top:6px solid var(--teal);}
.pillar--ecom .pillar__icon{background:var(--teal);}
.pillar--ecom .pillar__list li{color:var(--teal);}
.pillar--ecom .pillar__list li span{color:var(--ink);}

/* ================ RESULTS ================ */
.results{
  background:var(--ink);
  color:var(--paper);
  padding:140px 32px;
}
.results__inner{max-width:1400px;margin:0 auto;}
.results__head{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:80px;
  margin-bottom:80px;
}
.results__lede{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  line-height:1.15;
  letter-spacing:-0.02em;
}
.results__lede em{font-style:italic;color:var(--pink);}
.results__sub{
  font-size:1rem;
  color:rgba(245,241,234,.7);
  align-self:end;
  max-width:480px;
}
.results__sub em{
  font-style:italic;
  font-family:var(--serif);
  font-size:1.15rem;
  color:var(--paper);
}

.results__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  border-top:1px solid rgba(245,241,234,.2);
}
.result{
  padding:40px 28px;
  border-right:1px solid rgba(245,241,234,.2);
  border-bottom:1px solid rgba(245,241,234,.2);
  transition:background .3s;
  cursor:pointer;
}
.result:nth-child(4n){border-right:none;}
.result:hover{background:rgba(245,241,234,.05);}
.result__client{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(245,241,234,.6);
  margin-bottom:16px;
}
.result__num{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.4rem,4vw,3.6rem);
  line-height:0.9;
  letter-spacing:-0.03em;
  margin-bottom:12px;
}
.result__num em{font-style:italic;}
.result__num--pink{color:var(--pink);}
.result__num--orange{color:var(--orange);}
.result__num--teal{color:var(--teal);}
.result__num--blue{color:var(--blue);}
.result__desc{
  font-size:0.9rem;
  color:rgba(245,241,234,.75);
  line-height:1.5;
}

/* ================ ABOUT ================ */
.about{
  padding:140px 32px;
  max-width:1400px;
  margin:0 auto;
}
.about__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}
.about__visual{
  position:sticky;
  top:120px;
  background:var(--paper-warm);
  border-radius:32px;
  padding:60px 48px;
  border:1px solid var(--rule);
}
.about__name{
  font-family:var(--serif);
  font-weight:400;
  font-size:3.4rem;
  line-height:1;
  letter-spacing:-0.03em;
  margin-bottom:8px;
}
.about__name em{font-style:italic;color:var(--pink);}
.about__role{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  margin-bottom:40px;
}
.about__creds{
  display:grid; gap:14px;
  padding:24px 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin-bottom:32px;
}
.cred{
  display:flex; align-items:center; gap:14px;
  font-size:0.95rem;
}
.cred__badge{
  width:36px;height:36px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);
  font-size:0.7rem;
  font-weight:700;
  color:#fff;
}
.cred:nth-child(1) .cred__badge{background:var(--pink);}
.cred:nth-child(2) .cred__badge{background:var(--orange);}
.cred:nth-child(3) .cred__badge{background:var(--teal);}
.cred:nth-child(4) .cred__badge{background:var(--blue);}

.about__book{
  display:flex; gap:16px;
  padding:20px;
  background:#fff;
  border-radius:14px;
  align-items:center;
}
.about__book-cover{
  width:60px;height:84px;
  background:linear-gradient(135deg,var(--pink),var(--steel));
  border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);
  font-style:italic;
  color:#fff;
  font-size:1.6rem;
  font-weight:500;
  flex-shrink:0;
  box-shadow:2px 2px 0 rgba(0,0,0,.15);
}
.about__book-text{font-size:0.85rem;}
.about__book-text strong{font-family:var(--serif);font-size:1.05rem;display:block;margin-bottom:2px;}

.about__copy h2{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.2rem, 4.5vw, 3.6rem);
  line-height:1.05;
  letter-spacing:-0.03em;
  margin-bottom:32px;
}
.about__copy h2 em{font-style:italic;}
.about__copy p{
  font-size:1.05rem;
  color:var(--ink-soft);
  margin-bottom:20px;
  line-height:1.65;
}
.about__copy p:first-of-type::first-letter{
  font-family:var(--serif);
  font-size:4rem;
  font-weight:400;
  font-style:italic;
  float:left;
  line-height:0.85;
  padding-right:12px;
  padding-top:6px;
  color:var(--pink);
}
.about__firsts{
  margin-top:40px;
  padding:32px;
  background:var(--paper-warm);
  border-radius:20px;
  border-left:6px solid var(--orange);
}
.about__firsts-label{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  margin-bottom:16px;
  color:var(--ink-soft);
}
.about__firsts ul{list-style:none;display:grid;gap:12px;}
.about__firsts li{
  font-family:var(--serif);
  font-size:1.15rem;
  font-weight:400;
  line-height:1.35;
  display:flex; gap:14px;
}
.about__firsts li::before{
  content:"→";
  color:var(--orange);
  font-family:var(--sans);
  font-weight:500;
}
.about__firsts li em{font-style:italic;}

/* ================ PORTFOLIO ================ */
.portfolio{
  padding:140px 32px;
  max-width:1400px;
  margin:0 auto;
}
.portfolio-list{display:grid;}
.client{
  display:grid;
  grid-template-columns:80px 1fr auto;
  gap:40px;
  align-items:center;
  padding:32px 8px;
  border-top:1px solid var(--rule);
  cursor:pointer;
  transition:padding .35s, background .35s;
  position:relative;
}
.client:last-child{border-bottom:1px solid var(--rule);}
.client:hover{
  padding-left:32px;
  background:linear-gradient(90deg, var(--paper-warm) 0%, transparent 100%);
}
.client__num{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.18em;
  color:var(--ink-soft);
}
.client__main{display:flex; flex-direction:column;gap:8px;}
.client__name{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.6rem,3vw,2.6rem);
  line-height:1;
  letter-spacing:-0.025em;
}
.client__name em{font-style:italic;}
.client__work{
  font-size:0.9rem;
  color:var(--ink-soft);
  font-family:var(--mono);
  letter-spacing:0.05em;
}
.client__metric{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.4rem,2.4vw,2.2rem);
  text-align:right;
  line-height:1;
}
.client--01 .client__metric{color:var(--pink);}
.client--02 .client__metric{color:var(--orange);}
.client--03 .client__metric{color:var(--teal);}
.client--04 .client__metric{color:var(--blue);}
.client--05 .client__metric{color:var(--purple);}
.client--06 .client__metric{color:var(--pink);}
.client--07 .client__metric{color:var(--orange);}

/* ================ APPROACH ================ */
.approach{
  background:var(--paper-warm);
  padding:140px 32px;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.approach__inner{max-width:1400px;margin:0 auto;}
.approach__steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  margin-top:60px;
}
.step{
  position:relative;
  padding-top:32px;
}
.step__num{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:5rem;
  line-height:0.8;
  margin-bottom:24px;
  letter-spacing:-0.04em;
}
.step:nth-child(1) .step__num{color:var(--pink);}
.step:nth-child(2) .step__num{color:var(--orange);}
.step:nth-child(3) .step__num{color:var(--teal);}
.step:nth-child(4) .step__num{color:var(--blue);}
.step__title{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.4rem;
  line-height:1.15;
  margin-bottom:14px;
  letter-spacing:-0.015em;
}
.step__desc{
  font-size:0.95rem;
  color:var(--ink-soft);
  line-height:1.55;
}

/* ================ CTA ================ */
.cta{
  padding:160px 32px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta__inner{max-width:1100px;margin:0 auto;position:relative;z-index:2;}
.cta__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(3rem, 7vw, 6rem);
  line-height:0.95;
  letter-spacing:-0.035em;
  margin-bottom:36px;
}
.cta__title em{font-style:italic;}
.cta__title .ink-pink{color:var(--pink);}
.cta__title .ink-orange{color:var(--orange);}
.cta__title .ink-teal{color:var(--teal);}
.cta__sub{
  font-size:1.2rem;
  color:var(--ink-soft);
  margin-bottom:48px;
  max-width:640px;
  margin-left:auto; margin-right:auto;
}
.cta__phone{
  display:inline-flex;
  align-items:center;
  gap:18px;
  padding:24px 40px;
  background:var(--ink);
  color:var(--paper);
  border-radius:999px;
  font-family:var(--serif);
  font-weight:300;
  font-size:1.6rem;
  letter-spacing:-0.01em;
  transition:transform .25s, background .25s;
}
.cta__phone:hover{background:var(--pink);transform:scale(1.03);}
.cta__phone-label{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  display:block;
  opacity:.7;
}
.cta__or{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin:32px 0 16px;
  color:var(--ink-soft);
}
.cta__email{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.3rem;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:6px;
}

/* Decorative bg shapes */
.cta__shape{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:.45;
  z-index:1;
}
.cta__shape--1{width:400px;height:400px;background:var(--pink);top:-100px;left:-100px;}
.cta__shape--2{width:500px;height:500px;background:var(--teal);bottom:-150px;right:-100px;}
.cta__shape--3{width:300px;height:300px;background:var(--orange);top:30%;right:20%;}

/* ================ FOOTER ================ */
.footer{
  background:var(--ink);
  color:var(--paper);
  padding:80px 32px 32px;
}
.footer__grid{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:60px;
  margin-bottom:60px;
}
.footer__brand{display:flex;flex-direction:column;gap:20px;}
.footer__logo{
  display:flex;align-items:center;gap:14px;
  font-family:var(--serif);
  font-size:2.59rem;
  font-weight:500;
  line-height:1;
}
.footer__logo img{height:64px;display:block;}
.footer__tagline{
  color:rgba(245,241,234,.65);
  max-width:340px;
  line-height:1.55;
}
.footer__col h4{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  margin-bottom:20px;
  color:rgba(245,241,234,.5);
  font-weight:500;
}
.footer__col ul{list-style:none;display:grid;gap:10px;}
.footer__col a{
  font-size:0.95rem;
  color:rgba(245,241,234,.85);
  transition:color .2s;
}
.footer__col a:hover{color:var(--pink);}
.footer__bottom{
  max-width:1400px;
  margin:0 auto;
  padding-top:32px;
  border-top:1px solid rgba(245,241,234,.15);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.1em;
  color:rgba(245,241,234,.5);
  flex-wrap:wrap; gap:20px;
}

/* ================ RESPONSIVE ================ */
/* ================ TABLET ================ */
@media (max-width: 1100px){
  .nav__menu{gap:28px;font-size:1.1rem;}
  .nav__logo{font-size:2.1rem;}
  .nav__logo img{height:52px;}
  .nav__cta{font-size:0.95rem;padding:11px 22px;}
  .results__grid{grid-template-columns:repeat(2,1fr);}
  .result:nth-child(2n){border-right:none;}
  .footer__grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;}
  .approach__steps{grid-template-columns:repeat(2,1fr);gap:48px 32px;}
}

/* ================ MOBILE ================ */
@media (max-width: 860px){
  .nav{padding:14px 20px;}
  .nav__logo{font-size:1.85rem;gap:10px;}
  .nav__logo img{height:48px;}
  .footer__logo{font-size:1.85rem;}
  .footer__logo img{height:56px;}
  .nav__menu, .nav__cta{display:none;}
  .nav__hamburger{
    display:flex; flex-direction:column; gap:6px;
    width:44px; height:44px;
    background:transparent; border:none; cursor:pointer;
    align-items:center; justify-content:center;
    padding:0;
    z-index:120;
    position:relative;
  }
  .nav__hamburger span{
    width:26px; height:2px; background:var(--ink);
    transition:transform .3s, opacity .3s;
    transform-origin:center;
  }
  .nav__hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .nav__hamburger.open span:nth-child(2){opacity:0;}
  .nav__hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

  /* Mobile drawer */
  .mobile-drawer{
    display:flex;
    position:fixed;
    inset:0;
    background:var(--paper);
    z-index:110;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:80px 32px 32px;
    gap:8px;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.5,.0,.5,1);
  }
  .mobile-drawer.open{transform:translateX(0);}
  .mobile-drawer a{
    font-family:var(--serif);
    font-size:2.6rem;
    font-weight:300;
    letter-spacing:-0.025em;
    line-height:1.1;
    padding:8px 0;
    border-bottom:1px solid transparent;
    width:100%;
  }
  .mobile-drawer a em{font-style:italic;}
  .mobile-drawer__cta{
    margin-top:32px;
    padding:18px 28px !important;
    background:var(--ink);
    color:var(--paper);
    border-radius:999px;
    font-family:var(--sans) !important;
    font-size:1rem !important;
    font-weight:500 !important;
    width:auto !important;
    border-bottom:none !important;
  }
  .mobile-drawer__phone{
    font-family:var(--mono) !important;
    font-size:0.9rem !important;
    color:var(--ink-soft);
    margin-top:16px;
    border-bottom:none !important;
  }

  /* Hero */
  .hero{padding:120px 20px 60px;}
  .hero__grid{grid-template-columns:1fr;gap:48px;}
  .hero__visual{height:380px;max-width:420px;}
  .bar{width:60px;}
  .bar--1{height:260px;}
  .bar--2{left:75px;height:330px;}
  .bar--3{left:150px;height:200px;}
  .bar--4{left:225px;height:380px;}
  .bar__label{font-size:0.95rem;top:18px;}
  .hero__corner-num{font-size:0.65rem;}

  /* Sections */
  .pillars, .about, .portfolio{padding:80px 20px;}
  .results, .approach, .cta{padding:80px 20px;}
  .section-head{grid-template-columns:1fr;gap:16px;margin-bottom:48px;}
  .pillar-grid{grid-template-columns:1fr;gap:20px;}
  .pillar{min-height:0;padding:40px 28px 32px;}

  /* Results grid */
  .results__head{grid-template-columns:1fr;gap:24px;margin-bottom:48px;}
  .results__grid{grid-template-columns:repeat(2,1fr);}
  .result{padding:32px 20px;}
  .result:nth-child(odd){border-right:1px solid rgba(245,241,234,.2);}
  .result:nth-child(even){border-right:none;}

  /* About */
  .about__grid{grid-template-columns:1fr;gap:48px;}
  .about__visual{position:static;padding:40px 32px;}
  .about__name{font-size:2.6rem;}

  /* Portfolio */
  .client{grid-template-columns:50px 1fr;gap:18px;padding:24px 8px;}
  .client__metric{grid-column:1/-1;text-align:left;margin-top:6px;}
  .client:hover{padding-left:16px;}

  /* Approach */
  .approach__steps{grid-template-columns:repeat(2,1fr);gap:48px 24px;margin-top:40px;}
  .step__num{font-size:4rem;}

  /* Footer */
  .footer{padding:64px 20px 32px;}
  .footer__grid{grid-template-columns:1fr 1fr;gap:40px 24px;margin-bottom:40px;}
  .footer__brand{grid-column:1 / -1;}

  /* Marquee */
  .marquee__track{font-size:1.1rem;gap:40px;}
}

/* ================ SMALL MOBILE ================ */
@media (max-width: 520px){
  .nav__logo{font-size:1.5rem;gap:8px;}
  .nav__logo img{height:42px;}
  .hero__title{font-size:2.6rem;}
  .hero__visual{height:300px;}
  .bar{width:48px;}
  .bar--1{height:200px;}
  .bar--2{left:60px;height:260px;}
  .bar--3{left:120px;height:160px;}
  .bar--4{left:180px;height:300px;}
  .bar__label{font-size:0.85rem;top:14px;}
  .bar__value{font-size:0.6rem;}

  .results__grid{grid-template-columns:1fr;}
  .result, .result:nth-child(n){border-right:none !important;}
  .approach__steps{grid-template-columns:1fr;gap:40px;}
  .footer__grid{grid-template-columns:1fr;}
  .footer__brand{grid-column:auto;}
  .footer__bottom{flex-direction:column;text-align:center;align-items:center;}
  .pillar__title{font-size:2rem;}
  .client__name{font-size:1.4rem;}
  .client__metric{font-size:1.2rem;}
  .cta__phone{font-size:1.2rem;padding:18px 28px;flex-direction:column;gap:6px;}
  .mobile-drawer a{font-size:2.1rem;}
  .footer__logo{font-size:1.6rem;}
  .footer__logo img{height:48px;}
}