/* =========================================================
   Axiom Marketing Co. — Production Stylesheet
   Design system preserved as-is from approved creative pass.
   ========================================================= */

:root{
  --bg:#0a0e0d;
  --bg-alt:#0c1110;
  --ink:#f4f0e6;
  --muted:#8a938e;
  --muted-2:#5f6864;
  --teal:#3d8b87;
  --orange:#dc9152;
  --red:#c14b3f;
  --line:rgba(244,240,230,0.09);
  --card:#0f1413;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.display{font-family:'Bricolage Grotesque',sans-serif;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

/* Skip link (accessibility) */
.skip-link{
  position:absolute;top:-100px;left:16px;z-index:1000;
  background:var(--ink);color:var(--bg);
  padding:12px 20px;border-radius:4px;
  font-size:13px;font-weight:600;
  transition:top .2s ease;
}
.skip-link:focus{top:16px;}

/* Visible focus state for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:2px;
}

/* ===== NAV ===== */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:28px 0;
  transition:padding .35s ease, background .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
header .wrap{display:flex;align-items:center;justify-content:space-between;}
header.scrolled{
  padding:16px 0;
  background:rgba(10,14,13,0.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.logo-link{display:flex;align-items:center;height:26px;}
.logo-link img{height:100%;width:auto;}
nav ul{list-style:none;display:flex;gap:44px;}
nav a{
  font-size:13px;
  letter-spacing:0.3px;
  color:var(--muted);
  transition:color .25s ease;
  position:relative;
}
nav a::after{
  content:'';position:absolute;left:0;bottom:-6px;width:0;height:1px;
  background:var(--ink);transition:width .3s ease;
}
nav a:hover{color:var(--ink);}
nav a:hover::after{width:100%;}
.nav-right{display:flex;align-items:center;gap:36px;}
.nav-cta{
  font-size:13px;
  letter-spacing:0.3px;
  padding:11px 24px;
  border:1px solid rgba(244,240,230,0.25);
  border-radius:100px;
  transition:border-color .25s ease, background .25s ease;
}
.nav-cta:hover{border-color:var(--ink);background:rgba(244,240,230,0.06);}
.mobile-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  cursor:pointer;background:none;border:none;padding:6px;
  width:36px;height:36px;position:relative;z-index:210;
}
.mobile-toggle span{
  width:24px;height:1.5px;background:var(--ink);
  transition:transform .3s ease, opacity .3s ease;
}
.mobile-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.mobile-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.mobile-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* Mobile nav drawer */
.mobile-nav{
  position:fixed;inset:0;z-index:200;
  background:rgba(9,13,12,0.98);
  backdrop-filter:blur(10px);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:36px;
  opacity:0;visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.mobile-nav.open{opacity:1;visibility:visible;}
.mobile-nav ul{list-style:none;display:flex;flex-direction:column;align-items:center;gap:28px;}
.mobile-nav a{font-size:22px;font-weight:500;color:var(--ink);}
.mobile-nav .nav-cta{font-size:14px;}
body.menu-open{overflow:hidden;}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:160px 0 100px;
}
.hero-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 45% at 50% 38%, rgba(61,139,135,0.14), transparent 70%);
}
.hero .wrap{position:relative;z-index:2;}
.hero-eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:32px;
}
.hero-eyebrow::before{
  content:'';width:28px;height:1px;background:var(--muted-2);
}
.hero-headline{
  font-size:clamp(38px,6.2vw,84px);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-2px;
  max-width:920px;
}
.hero-headline .line{display:block;}
.hero-headline .accent{
  position:relative;
  font-style:italic;
  font-weight:500;
}
.hero-headline .accent.teal{border-bottom:3px solid var(--teal);}
.hero-headline .accent.orange{border-bottom:3px solid var(--orange);}
.hero-headline .accent.red{border-bottom:3px solid var(--red);}
.hero-sub{
  max-width:520px;
  margin-top:36px;
  font-size:17px;
  line-height:1.7;
  color:var(--muted);
  font-weight:300;
}
.hero-actions{
  display:flex;align-items:center;gap:32px;
  margin-top:52px;
}
.btn-solid{
  background:var(--ink);color:var(--bg);
  padding:16px 32px;border-radius:100px;
  font-size:13.5px;letter-spacing:0.3px;font-weight:500;
  transition:transform .25s ease, opacity .25s ease;
  display:inline-block;
}
.btn-solid:hover{transform:translateY(-2px);opacity:0.88;}
.link-arrow{
  font-size:13.5px;letter-spacing:0.3px;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;
  position:relative;
}
.link-arrow .arrow{transition:transform .25s ease;}
.link-arrow:hover .arrow{transform:translateX(5px);}

/* ===== STATS BAR ===== */
.stats{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:44px 0;
}
.stats .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.stat{
  padding:0 24px;
  border-left:1px solid var(--line);
}
.stat:first-child{border-left:none;padding-left:0;}
.stat-num{
  font-size:clamp(26px,3vw,38px);
  font-weight:600;
  letter-spacing:-1px;
}
.stat-label{
  font-size:12.5px;color:var(--muted);margin-top:8px;letter-spacing:0.3px;
}

/* ===== SECTION SHARED ===== */
section{padding:160px 0;position:relative;}
.section-eyebrow{
  font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:20px;
  display:flex;align-items:center;gap:12px;
}
.section-eyebrow::before{content:'';width:28px;height:1px;background:var(--muted-2);}
.section-title{
  font-size:clamp(30px,4.2vw,52px);
  font-weight:600;
  letter-spacing:-1.5px;
  line-height:1.15;
  max-width:640px;
}
.section-desc{
  color:var(--muted);
  font-size:16.5px;
  line-height:1.75;
  max-width:460px;
  margin-top:24px;
  font-weight:300;
}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:40px;margin-bottom:88px;
}
.section-head-inner{flex:1;}

/* ===== SERVICES: FEATURE CARD ===== */
.feature-card{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
  padding:72px 0;
}
.feature-card.reverse{grid-template-columns:1fr 1fr;}
.feature-card.reverse .feature-visual{order:2;}
.feature-card.reverse .feature-text{order:1;}
.feature-index{
  font-size:13px;color:var(--muted-2);letter-spacing:2px;margin-bottom:20px;
}
.feature-text h3{
  font-size:clamp(26px,3vw,38px);
  font-weight:600;letter-spacing:-1px;line-height:1.2;
  margin-bottom:22px;
}
.feature-text p{
  color:var(--muted);font-size:15.5px;line-height:1.75;margin-bottom:32px;font-weight:300;
  max-width:420px;
}
.feature-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-bottom:40px;max-width:440px;}
.feature-list li{
  font-size:14.5px;color:var(--ink);display:flex;align-items:center;gap:10px;
}
.feature-list li::before{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--teal);flex-shrink:0;
}
.feature-visual{
  aspect-ratio:4/3.2;
  border-radius:4px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
}
.visual-brand{
  background:
    linear-gradient(135deg, #10201d 0%, #0c1110 60%);
}
.visual-brand .swatch-row{
  position:absolute;bottom:32px;left:32px;right:32px;
  display:flex;gap:10px;
}
.visual-brand .swatch{flex:1;height:64px;border-radius:2px;}
.visual-brand .type-sample{
  position:absolute;top:36px;left:32px;right:32px;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:42px;font-weight:700;font-style:italic;color:var(--ink);
  letter-spacing:-1px;opacity:0.9;
}
.visual-lead{
  background:linear-gradient(135deg,#12100c 0%, #0c1110 60%);
  padding:32px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:14px;
}
.visual-web{
  background:linear-gradient(135deg,#0f1a20 0%, #0c1110 60%);
  padding:32px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:14px;
}
.mini-metric{
  background:rgba(244,240,230,0.04);
  border:1px solid var(--line);
  border-radius:4px;
  padding:16px 18px;
  display:flex;justify-content:space-between;align-items:center;
}
.mini-metric .m-label{font-size:12.5px;color:var(--muted);}
.mini-metric .m-value{font-size:15px;font-weight:600;color:var(--teal);}
.mini-metric:nth-child(2) .m-value{color:var(--orange);}
.mini-metric:nth-child(3) .m-value{color:var(--red);}

/* ===== PRICING GRID ===== */
.pricing-intro{text-align:center;max-width:560px;margin:0 auto 64px;}
.pricing-intro .section-eyebrow{justify-content:center;}
.pricing-intro .section-eyebrow::before{display:none;}
.pricing-intro .section-title{margin-left:auto;margin-right:auto;}
/* .section-desc has its own max-width (460px) that's narrower than
   .pricing-intro's (560px). With margin-left/right left at their default
   of 0, the browser resolves that mismatch by dumping all the leftover
   space into margin-right — flushing the whole paragraph box to the left
   edge of its centered parent, even though the text inside it is
   text-align:center. Forcing both margins to auto centers the box itself. */
.pricing-intro .section-desc{margin-left:auto;margin-right:auto;}
.pricing-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  max-width:100%;
}
.price-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:6px;
  padding:44px 36px;
  display:flex;flex-direction:column;
  position:relative;
  min-width:0;
  transition:border-color .3s ease, transform .3s ease;
}
.price-card:hover{transform:translateY(-4px);border-color:rgba(244,240,230,0.2);}
.price-card.recommended{
  border-color:var(--orange);
  background:linear-gradient(180deg, rgba(220,145,82,0.06), var(--card) 40%);
}
.rec-tag{
  position:absolute;top:-1px;right:-1px;
  background:var(--orange);color:#0a0e0d;
  font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  padding:7px 16px;border-radius:0 6px 0 6px;
}
.price-name{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:18px;}
.price-value{font-size:40px;font-weight:600;letter-spacing:-1.5px;margin-bottom:6px;}
.price-value span{font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0;}
.price-headline{font-size:16px;font-weight:500;margin-bottom:28px;color:var(--ink);}
.price-features{list-style:none;flex-grow:1;margin-bottom:32px;}
.price-features li{
  font-size:14px;padding:11px 0;border-top:1px solid var(--line);
  color:var(--muted);display:flex;gap:10px;
}
.price-features li:first-child{border-top:none;}
.price-features li::before{content:'—';color:var(--muted-2);flex-shrink:0;}
.price-card.recommended .price-features li::before{color:var(--orange);}
.price-btn{
  text-align:center;padding:14px;border-radius:100px;
  font-size:13.5px;letter-spacing:0.3px;font-weight:500;
  border:1px solid rgba(244,240,230,0.25);
  transition:all .25s ease;
  cursor:pointer;
  background:none;
  color:var(--ink);
  font-family:inherit;
}
.price-btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.price-card.recommended .price-btn{background:var(--ink);color:var(--bg);border:none;}
.price-card.recommended .price-btn:hover{opacity:0.85;}

/* ===== OUR PROCESS ===== */
.process-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:16px;
}
.process-step{
  padding:0 32px;
  border-left:1px solid var(--line);
}
.process-step:first-child{border-left:none;padding-left:0;}
.process-num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:15px;font-weight:600;color:var(--muted-2);letter-spacing:1px;margin-bottom:22px;
}
.process-title{
  font-size:19px;font-weight:600;letter-spacing:-0.3px;color:var(--ink);margin-bottom:14px;
}
.process-desc{
  font-size:14.5px;line-height:1.75;color:var(--muted);font-weight:300;
}

/* ===== PORTFOLIO ===== */
.portfolio-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:24px;
}
.port-tile{
  position:relative;overflow:hidden;border-radius:4px;
  aspect-ratio:1/1;cursor:pointer;
}
.port-tile.span-4{grid-column:span 4;aspect-ratio:16/11;}
.port-tile.span-2{grid-column:span 2;}
.port-tile.span-3{grid-column:span 3;aspect-ratio:4/3.4;}
.port-bg{
  position:absolute;inset:0;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.port-tile:hover .port-bg{transform:scale(1.06);}
.port-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(6,9,8,0.85) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;
  opacity:0;transition:opacity .4s ease;
}
.port-tile:hover .port-overlay{opacity:1;}
.port-cat{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--orange);margin-bottom:6px;}
.port-name{font-size:18px;font-weight:600;letter-spacing:-0.3px;}

/* ===== TRUSTED BY ===== */
.trusted-names{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:20px 56px;
  margin-top:56px;
}
.trusted-name{
  font-size:17px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:0.2px;
  white-space:nowrap;
  transition:color .3s ease, opacity .3s ease;
  cursor:default;
}
.trusted-name:hover{color:var(--ink);opacity:1;}

/* ===== TESTIMONIALS ===== */
.testimonial-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.t-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:6px;
  padding:40px 34px;
  display:flex;flex-direction:column;
  transition:transform .35s ease, border-color .35s ease;
}
.t-card:hover{transform:translateY(-4px);border-color:rgba(244,240,230,0.18);}
.t-mark{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:48px;font-style:italic;color:var(--muted-2);line-height:1;margin-bottom:18px;
}
.t-quote{
  font-size:15.5px;line-height:1.75;color:var(--ink);font-weight:300;margin-bottom:32px;flex-grow:1;
}
.t-person{display:flex;align-items:center;gap:14px;}
.t-avatar{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;
  background:rgba(244,240,230,0.06);
  border:1px solid var(--line);
}
.t-name{font-size:14px;font-weight:500;}
.t-role{font-size:12.5px;color:var(--muted);margin-top:2px;}

/* ===== CONTACT ===== */
.contact-wrap{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:100px;
}
.contact-info .section-title{margin-bottom:24px;}
.contact-info .section-desc{margin-bottom:48px;}
.contact-detail{
  padding:20px 0;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
}
.contact-detail:last-child{border-bottom:1px solid var(--line);}
.contact-detail-label{font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);}
.contact-detail-value{font-size:15px;}
form{display:flex;flex-direction:column;gap:22px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.field label{
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:10px;
}
.field-error{
  font-size:12.5px;color:var(--red);margin-top:8px;display:none;
}
.field.has-error .field-error{display:block;}
.field.has-error input,
.field.has-error textarea,
.field.has-error select{
  border-color:var(--red);
}
/* Consent checkbox — reuses the form's existing type scale and muted
   color instead of introducing a new component; only the layout (flex
   row) and the native checkbox accent color are new. */
.field label.consent-label{
  display:flex;
  align-items:flex-start;
  gap:12px;
  text-transform:none;
  letter-spacing:normal;
  font-weight:400;
  font-size:13.5px;
  line-height:1.6;
  color:var(--muted);
  margin-bottom:0;
  cursor:pointer;
}
.consent-label input[type="checkbox"]{
  width:18px;height:18px;
  flex-shrink:0;
  margin-top:2px;
  accent-color:var(--teal);
  cursor:pointer;
}
.field.has-error label.consent-label{color:var(--red);}
input,textarea,select{
  background:transparent;
  border:none;border-bottom:1px solid var(--line);
  color:var(--ink);
  padding:8px 0 14px;
  font-size:15px;
  font-family:inherit;
  width:100%;
  border-radius:0;
}
select option{background:var(--bg-alt);}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ink);}
textarea{resize:vertical;min-height:90px;}
::placeholder{color:var(--muted-2);}
.submit-btn{
  background:var(--ink);color:var(--bg);
  padding:17px;border:none;border-radius:100px;
  font-size:13.5px;letter-spacing:0.3px;font-weight:500;
  cursor:pointer;margin-top:12px;
  transition:opacity .25s ease, transform .25s ease;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.submit-btn:hover{opacity:0.88;transform:translateY(-2px);}
.submit-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none;}
.btn-spinner{
  width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(10,14,13,0.3);
  border-top-color:var(--bg);
  animation:spin .7s linear infinite;
  display:none;
}
.submit-btn.is-loading .btn-spinner{display:inline-block;}
.submit-btn.is-loading .btn-label{opacity:0.85;}
@keyframes spin{to{transform:rotate(360deg);}}
.form-note{font-size:12.5px;color:var(--muted);text-align:left;margin-top:-4px;}
.form-note[data-state="success"]{color:var(--teal);}
.form-note[data-state="error"]{color:var(--red);}
.form-status{min-height:18px;}

/* ===== FOOTER ===== */
footer{
  padding:56px 0 48px;border-top:1px solid var(--line);
}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;}
.footer-logo img{height:22px;width:auto;}
.footer-links{display:flex;gap:32px;list-style:none;}
.footer-links a{color:var(--muted);font-size:13px;}
.footer-links a:hover{color:var(--ink);}
.footer-copy{color:var(--muted-2);font-size:12.5px;}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s ease;}
.reveal.show{opacity:1;transform:translateY(0);}
.stagger.show > *{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ===== RESPONSIVE ===== */
@media(max-width:980px){
  nav, .nav-right{display:none;}
  .mobile-toggle{display:flex;}
  .stats .wrap{grid-template-columns:repeat(2,1fr);row-gap:32px;}
  .stat:nth-child(3){border-left:none;padding-left:0;}
  .feature-card{grid-template-columns:1fr;gap:56px;}
  /* .feature-card.reverse carries higher specificity than the rule above
     (two classes vs. one), so without this explicit override the desktop
     two-column grid survives on mobile for the Lead Generation card and
     crops its graphic off-screen. This restores the intended stack. */
  .feature-card.reverse{grid-template-columns:1fr;}
  .feature-card.reverse .feature-visual{order:1;margin:0 auto;}
  .feature-card.reverse .feature-text{order:2;}
  .feature-visual{width:100%;margin:0 auto;}
  /* visual-lead's content is normal-flow (not absolutely positioned like
     visual-brand's), so it can size to its content on mobile instead of
     being locked to the desktop aspect-ratio — this is what was at risk
     of clipping the bottom metric on narrow phones. visual-web uses the
     same mini-metric layout, so it needs the identical treatment. */
  .visual-lead, .visual-web{aspect-ratio:auto;padding:28px 24px;}
  .pricing-grid{grid-template-columns:1fr;}
  .testimonial-grid{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr;gap:40px;}
  .process-step{border-left:none;padding:32px 0 0;border-top:1px solid var(--line);}
  .process-step:first-child{padding-top:0;border-top:none;}
  .contact-wrap{grid-template-columns:1fr;gap:56px;}
  .portfolio-grid{grid-template-columns:repeat(2,1fr);}
  .port-tile.span-4,.port-tile.span-3,.port-tile.span-2{grid-column:span 2;aspect-ratio:4/3.2;}
  .section-head{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:56px;}
  section{padding:100px 0;}
}
@media(max-width:600px){
  .wrap{padding:0 22px;}
  .hero{padding:130px 0 72px;}
  .hero-actions{flex-direction:column;align-items:flex-start;gap:20px;}
  .form-row{grid-template-columns:1fr;}
  .feature-list{grid-template-columns:1fr;}
  .portfolio-grid{grid-template-columns:1fr;}
  .port-tile.span-4,.port-tile.span-3,.port-tile.span-2{grid-column:span 1;}
  .trusted-names{gap:16px 32px;margin-top:40px;}
  footer .wrap{flex-direction:column;align-items:flex-start;}
}