/* ==================================================================
   Stressdesign — Custom CSS
   Organized, commented, and token-driven for Bootstrap 4.6.2
   ==================================================================

   TABLE OF CONTENTS
   0)  Reset & Bootstrap adjustments
   1)  Design Tokens (colors, typography, rhythm)
   2)  Base Elements (images, links, body)
   3)  Typography Scale & Utilities
   4)  Buttons / CTAs
   5)  Components (images, forms)
   6)  Sections
       6.1 Banner
       6.2 Feature blocks
       6.3 Price table
       6.3.1 Page Content, Right Col
       6.4 Contact
       6.5 Copyright / Footer
       6.6 Client Experience (logo ticker)
   7)  Accessibility (honeypot, reduced motion)
   8)  Responsive tweaks
   ------------------------------------------------------------------
*/

/* ----------------------------------
   0) Reset & Bootstrap adjustments
   ---------------------------------- */
.jumbotron { margin-bottom: 0; } /* keep sections visually joined */

/* ----------------------------------
   1) Design Tokens
   - Swap values here to re-theme the site
   ---------------------------------- */
:root{
  /* Color — Magenta + Ink (Option A: dark text on accent for AA) */
  --brand-base:    #101014;   /* Ink (dark backgrounds, footer, dark jumbotrons) */
  --brand-accent:  #e52ed8;   /* Magenta (CTAs, highlights, accent sections) */
  --brand-ink:     #0A0A0A;   /* Body text on light backgrounds */
  --brand-on-base: #FFFFFF;   /* Text on dark base */
  --brand-on-acc:  #0A0A0A;   /* Text on accent (AA on #e52ed8) */

  /* Typography families */
  --font-head: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter",         system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Typography rhythm */
  --lh-body: 1.65; /* comfortable body */
  --lh-head: 1.20; /* tighter headings */

  /* Numeral features (useful for stats/pricing) */
  --num-features: tabular-nums lining-nums;
}

/* ----------------------------------
   2) Base Elements
   ---------------------------------- */
html, body { height: 100%; }
body{
  color: var(--brand-ink);
  font-family: var(--font-body);
  line-height: var(--lh-body);
  font-variant-numeric: var(--num-features);
}

img{ display:block; max-width:100%; }  /* allow element/class/attr to control height */
a, button{ cursor:pointer; text-decoration:none; }

/* ----------------------------------
   3) Typography Scale & Utilities
   ---------------------------------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{
  font-family: var(--font-head);
  line-height: var(--lh-head);
  margin-top: 0;
  margin-bottom: .5rem;
  letter-spacing: -.01em;
  font-weight: 700; /* default strong heads */
}

/* sensible weights per level */
h3, .h3 { font-weight: 600; }
h4, .h4, h5, .h5, h6, .h6 { font-weight: 500; }

/* Mobile-first sizes (≤767px) */
h1, .h1 { font-size: 2rem; }       /* 32px */
h2, .h2 { font-size: 1.725rem; }   /* 26px */
h3, .h3 { font-size: 1.375rem; }   /* 22px */
h4, .h4 { font-size: 1.125rem; }   /* 18px */
h5, .h5 { font-size: 1rem; }       /* 16px */
h6, .h6 { font-size: .875rem; }    /* 14px */

/* Banner: left-align hero text + CTA on mobile */
@media (max-width: 767.98px){
  /* if the banner row uses .text-center, flip it on mobile */
  #banner .text-center { text-align: left !important; }

  #banner h1{ font-size: 1.95rem; text-align: left; } 
  #banner p{ text-align: left; }

  /* push the button to the left even if it has mx-auto */
  #banner .btn,
  #banner .atlas-cta{
    display: inline-block;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

p{
  margin-bottom: .9rem; 
  letter-spacing: -.01em;
}

/* Body copy size: 16px mobile, 18px desktop */
body { font-size: 1rem; }            /* 16px by default */

@media (min-width: 992px){           /* lg and up = desktop */
  body { font-size: 1.125rem; }      /* 18px */
}

/* Readable line-length helpers */
.measure        { max-width: 65ch; }
.measure-narrow { max-width: 52ch; }
@media (min-width: 992px){
  .measure { max-width: 60ch; }      /* was 65ch */
}

/* Tiny text utilities (rare) */
.text-xs  { font-size: .75rem; }     /* ~12px */
.text-2xs { font-size: .6875rem; }   /* ~11px */

/* Lead paragraph balanced to this scale */
.lead { font-size: 1.225rem; font-weight: 400; }

/* Section rhythm helpers */
.jumbotron h2 { margin-bottom: .5rem; }
.jumbotron p  { margin-top: .25rem; }

/* UI microtypography */
.btn, .nav-link, .badge { letter-spacing: .02em; text-transform: none; }

/* ----------------------------------
   4) Buttons / CTAs
   ---------------------------------- */
.atlas-cta{
  border-radius: 22px;
  padding: 12px 30px;
  font-weight: 700;
  transition: .3s ease-in-out;
}
.atlas-cta:hover{ transform: translateY(-5px); }
.atlas-cta-wide{ width:100%; }

/* Solid CTAs map to accent */
.cta-green,
.cta-blue{
  background: var(--brand-accent);
  color: var(--brand-on-acc);
  border-color: var(--brand-accent);
}
.cta-green:hover,
.cta-blue:hover{
  color: var(--brand-on-acc);
  filter: brightness(0.92);
}
/* Ghost CTAs default + on-accent inversion */
.cta-ghost{
  color: var(--brand-accent);                 /* on light/dark base */
  background: transparent;
  border: 2px solid currentColor;
}
/* When placed on an accent background, invert for contrast */
#feature-last .cta-ghost{
  color: var(--brand-on-acc);                 /* dark on magenta */
  border-color: currentColor;
}
#feature-last .cta-ghost:hover{
  background: var(--brand-on-acc);
  color: var(--brand-accent);
  border-color: var(--brand-on-acc);
}

/* CTA layout helper in accent section */
#feature-last .atlas-cta{ margin-right: 1rem; }
#feature-last .atlas-cta:last-child{ margin-right: 0; }

/* ----------------------------------
   5) Components
   ---------------------------------- */

/* 5.1 Responsive fixed-height image
   - mobile: fully responsive
   - md+   : fixed height, cropped nicely
   Use ONLY for wide artwork; avoid on portraits/logos.
*/
img.img-fixed-height{
  width: auto;       /* proportional width */
  max-width: 100%;   /* don't overflow columns */
  object-fit: cover; /* crop edges instead of squish */
}
@media (min-width: 768px){
  img.img-fixed-height{ height: 425px; margin-top: -25px; }
}

/* 5.2 Forms */
#contact form{ color: var(--brand-accent); }
#contact form input,
#contact form textarea{
  background: transparent;
  border: 1px solid var(--brand-accent);
  color: #ffffff;
}

/* ----------------------------------
   6) Sections
   ---------------------------------- */

/* 6.1 Banner */
#banner{ background-size: cover; }
#banner header{ overflow: hidden; }
#banner header img{ max-width: 80px; }

/* 6.2 Feature blocks */
.feature img{ width:100%; max-width:480px; }

/* Light-to-accent diagonal */
#feature-first{
  background: linear-gradient(168deg, #ffffff 55%, var(--brand-accent) 0);
  color: var(--brand-ink);
}

/* Banner Accent */
#banner-feature-last{
  background: var(--brand-accent);
  color: var(--brand-on-acc);
  padding-bottom: 0;
}

/* Accent section */
#feature-last{
  background: var(--brand-accent);
  color: var(--brand-on-acc);
  padding-bottom: 0;
}
/* Portrait in accent section: DO NOT CROP */
#feature-last .align-self-center img,
#feature-last img.portrait{
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  max-height: 520px;              /
  object-fit: contain !important;
  margin-top: 0 !important;
}
#feature-last img.img-fixed-height{ height: auto !important; } /* neutralize helper */

/* Tighten the vertical space between the two feature sections */
#feature-first { padding-bottom: 1rem; }           /* was ~2rem from .jumbotron */
#feature-first .container { margin-bottom: 1rem !important; }  /* override my-5 (3rem) */

#feature-last  { padding-top: 1rem; }              /* was ~2rem from .jumbotron */

/* Slightly roomier on md+ */
@media (min-width: 768px){
  #feature-first { padding-bottom: 1.25rem; }
  #feature-first .container { margin-bottom: 1.25rem !important; }
  #feature-last  { padding-top: 1.25rem; }
}

/* 6.3 Price table */
#price-table{ padding-top: 4rem; padding-bottom: 4rem; }
#price-table__premium{
  background: var(--brand-base);
  color: var(--brand-on-base);
}
#price-table ul li{ padding: 5px 0; }

/* 6.3.1 Page Content */

/* Content polish */
article .measure p { margin-bottom: 1rem; }
article .measure h2, article .measure h3 { margin-top: 1.5rem; }


/* 6.4 Contact */
#contact{ background-size: cover; }
#contact ul li{ padding: 3px 0; }

/* 6.5 Copyright / Footer */
#copyright{
  background: var(--brand-base);
  color: var(--brand-on-base);
  padding: 2rem 3rem;
}
#copyright #social-media a{
  width: 40px; height: 40px;
  border-radius: 99%;
  background: #ffffff;
  transition: .4s ease;
}
#copyright #social-media a i{
  color: var(--brand-base);
  font-size: 1.2rem;
  line-height: 40px;
}
#copyright #social-media a:hover{ background: var(--brand-accent); }
#copyright #social-media a:hover i{ color: var(--brand-on-acc); }

/* 6.6 Client Experience (logo ticker) */
#client-experience .container{ margin-bottom: 1.5rem; }
#client-experience p.my-4{ margin-bottom: .75rem; }
#client-experience .logo-ticker{ margin-top: -0.5rem; }
@media (min-width: 768px){
  #client-experience .logo-ticker{ margin-top: -0.75rem; }
}

/* Bigger ticker logos on phones */
@media (max-width: 575.98px){
  #client-experience .logo-ticker{
    --logo-height: 128px;   /* was 56px */
    --gap: 1.25rem;        /* optional: tighten spacing */
  }
}

/* ----------------------------------
   7) Accessibility
   ---------------------------------- */

/* 7.1 Honeypot (robust hide) — keep even if you also inline-hide */
.hp{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.hp label, .hp input{
  position: absolute; left: -10000px;
  opacity: 0; pointer-events: none;
}
@media (max-width: 767.98px){
  .hp{ display: none; }
}

/* 7.2 Reduced motion */
@media (prefers-reduced-motion: reduce){
  [data-aos]{ opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; }
}

/* ----------------------------------
   8) Responsive tweaks
   ---------------------------------- */
@media (min-width: 768px){
  /* bump heading scale for md+ */
  h1, .h1 { font-size: 2.5rem; }   /* 40px */
  h2, .h2 { font-size: 2rem; }     /* 32px */
  h3, .h3 { font-size: 1.5rem; }   /* 24px */
  h4, .h4 { font-size: 1.25rem; }  /* 20px */
  h5, .h5 { font-size: 1.125rem; } /* 18px */
}
@media (min-width: 1200px){
  h1, .h1 { font-size: 2.75rem; }  /* 44px */
  h2, .h2 { font-size: 2.25rem; }  /* 36px */
  h3, .h3 { font-size: 1.75rem; }  /* 28px */
}
/* Center the “Faculty Profile / LinkedIn Profile” CTAs on mobile */
@media (max-width: 767.98px){
  /* target the text column in the accent section */
  #feature-last .flex-md-last{
    text-align: center;
  }
  /* make buttons line up nicely and wrap */
  #feature-last .flex-md-last .atlas-cta{
    display: inline-block;
    margin: .5rem .5rem 0;          /* even spacing when they wrap */
  }
  /* neutralize any big right margins from utilities like mr-5 */
  #feature-last .flex-md-last .atlas-cta[class*="mr-"]{
    margin-right: .5rem !important;
  }
}

/* keep your nice horizontal spacing on desktop */
@media (min-width: 768px){
  #feature-last .flex-md-last .atlas-cta{
    margin-right: 1rem;
  }
  #feature-last .flex-md-last .atlas-cta:last-child{
    margin-right: 0;
  }
}