/* =========================================================
   JustinBauer.design — Styles
   Purpose:
   - Keep values tokenized as CSS variables for fast updates.
   - Keep "tweak points" clearly documented with comments.
   - Match your mock: light paper background + dotted pattern + purple accents.

   Accessibility notes:
   - Uses focus-visible outlines.
   - Respects prefers-reduced-motion.
   - Keeps minimum tap targets for interactive elements.
   ========================================================= */


/* =========================================================
   1) Design tokens (EDIT HERE FIRST)
   ========================================================= */

:root{
  /* =========================
     Layout width + gutters
     =========================
     Update these to change overall content width and side margins.

     Requirement:
     - Desktop max-width: 1040px
     - When viewport < max-width: keep 20px margins left/right
  */
  --maxw: 1040px;
  --gutter-desktop: 20px;
  --gutter-mobile: 20px;

  /* Header height
     If you change this, also affects:
     - main padding-top
     - scroll margin for section anchors */
  --header-h: 72px;

  /* =========================
     Typography
     =========================
     Update these to change typography quickly.
     Body font size is 20px desktop and 16px mobile (your spec).
  */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-desktop: 17px;
  --fs-mobile: 15px;

  /* Heading sizes */
  /* Perfect Fourth (1.3333) scale from a 16px base */
  --h1: clamp(2.369rem, 6vw, 5.61rem);
  --h2: 1.75rem;
  --h3: 1.125rem;

   /* Heading Letter Spacing */
  --ls-h1: 0.05em; /* 6% */
  --ls-h2: 0.03em; /* 4% */
  --ls-h3: 0.02em; /* 3% */
  --ls-body: 0.01em; /* 1% */



  /* Line heights */
  --lh-body: 1.65;
  --lh-head: 1.25;

  /* Font weights */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-extrabold: 800;

  /* =========================
     Spacing scale
     =========================
     Use these tokens instead of hardcoded values for consistency.
  */
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;

  /* Common layout gaps */
  --gap-1: var(--s-2);
  --gap-2: var(--s-3);
  --gap-3: var(--s-4);
  

  /* Card padding */
  --pad-card: var(--s-4);

  /* =========================
     Section spacing (EDIT HERE)
     =========================
     Requirement:
     - Desktop spacing top/bottom ~128px per section
     - Mobile reduces to fit viewport better

     Update these values to change vertical rhythm site-wide.
  */
  --section-pad-y-desktop: 128px;
  --section-pad-y-mobile: 72px;

  /* =========================
     Colors (EDIT HERE)
     =========================
     Requirement:
     - Main background color: #FEFFFD
  */
  --c-paper: #FEFFFD;
  --c-ink: #1A1A1A;
  --c-ink-2: #3D3D3D;
  --c-brand: #670BF4;
  --c-bg-brand: #E7DBFC;
  --glass-bg-white: rgba(254, 255, 253, 0.75);

  /* Borders */
  --bw-1: 1px;
  --bw-2: 4px;
  --border-color: var(--c-ink);
  --border-1: var(--bw-1) solid var(--border-color);
  --border-2: var(--bw-2) solid var(--border-color);

  /* =========================================================
   Section transition edge (EDIT HERE)
   Controls the subtle gradient border between
   dotted/gradient sections and white sections
   ========================================================= */

--section-edge-h: 48px; /* height of the transition edge */
--section-edge-from: rgba(103, 11, 244, 0.03); /* brand purple */
--section-edge-to: rgba(254, 255, 253, 0);    /* fade to white */

  /* =========================
     Radii (EDIT HERE)
     =========================
     Requirement:
     - Cards/buttons currently radius 0, but might change later.
  */
  --r-md: 2px;

  /* Navbar corner radius (EDIT HERE)
     Requirement:
     - Navbar corners rounded with radius 8px
     Update --nav-radius later if you want different rounding.
  */
  --nav-radius: 2px;

  /* =========================
     Gradients (EDIT HERE)
     =========================
     Buttons + link accents use purple gradient
  */
  --grad-a: #670BF4;
  --grad-b: #5C6DFF;
  --grad-angle: -45deg;
  --grad: linear-gradient(var(--grad-angle), var(--grad-a) 0%, var(--grad-b) 100%);

  /* Section gradient background (used by .bg-grad and as base for dotted sections) */
  --bg-grad-a: #FEFFFD;
  --bg-grad-b: #F9F5FF;
  --bg-grad: linear-gradient(var(--grad-angle), var(--bg-grad-a) 0%, var(--bg-grad-b) 100%);

  /* =========================
     Dotted pattern (EDIT HERE)
     =========================
     Requirement:
     - "Dotted background" sections use gradient + dots layered on top
     - Pattern must fill entire container

     Change these variables to tweak the dot pattern:
     - --grid-dot-color: dot color/opacity
     - --grid-dot-size: dot size
     - --grid-gap: spacing between dots
  */
  --grid-dot-color: rgba(167,139,250,0.10);
  --grid-dot-size: 2px;
  --grid-gap: 12px;

  /* Dotted + gradient combined background.
     If you want a different pattern (e.g. lines), edit this block. */
  --bg-dots:
    radial-gradient(var(--grid-dot-color) var(--grid-dot-size), transparent var(--grid-dot-size))
      0 0 / var(--grid-gap) var(--grid-gap),
    var(--bg-grad);

  /* Footer gradient (EDIT HERE) */
  --footer-grad-a: #4B0FF0;
  --footer-grad-b: #5C6DFF ;
  --footer-grad: linear-gradient(var(--grad-angle), var(--footer-grad-a) 0%, var(--footer-grad-b) 100%);

  /* =========================
     Liquid glass (EDIT HERE)
     =========================
     Used on:
     - Logo pill container
     - Navbar container
     - Hamburger button
  */
  --glass-bg: var(--glass-bg-white);
  --glass-border: rgba(26,26,26,0.18); /* navbar border is removed, but logo/hamburger can still use this */
  --glass-blur: 10px;

  /* =========================
     Cards surface background (EDIT HERE)
     =========================
     Requirement:
     - Focus, Selected Work, Testimonials cards use #FEFFFD background.
  */
  --card-bg: #FEFFFD;

  /* Secondary button hover background (EDIT HERE) */
  --btn-outline-hover-bg: var(--card-bg);

  /* =========================
     Buttons (EDIT HERE)
     ========================= */
  --btn-py: 1.15rem;
  --btn-px: 1.35rem;
  --btn-py-sm: 0.8rem;
  --btn-px-sm: 1.0rem;

  /* =========================
     Navbar Container Padding (EDIT HERE)
     ========================= */
  

  /* =========================
     Icons (EDIT HERE)
     =========================
     Requirement:
     - Focus card icon placeholder above heading, size 48px
     Update these if you want larger/smaller icons later.
  */
  --card-icon-box: 48px;
  --card-icon-svg: 24px;

  /* =========================
     About me Image (EDIT HERE)
     =========================
  */
  /* EDIT: desktop image width (as % of text column) */
  --about-photo-w-desktop: 30%;

  /* EDIT: mobile image width */
  --about-photo-w-mobile: 40%;

  /* EDIT: spacing around the image */
  --about-photo-gap: 32px;

  /* EDIT: how rounded the image is */
  --about-photo-radius: 4px;

  /* EDIT: limit how huge it can get on large screens */
  --about-photo-max-w: 320px;

  /* EDIT: optional border */
  --about-photo-border: 1px solid rgba(0,0,0,.08);

  /* EDIT: optional shadow */
  /* --about-photo-shadow: 0 12px 30px rgba(0,0,0,.12); */

    /* =========================
     Testimonial Avatars (EDIT HERE)
     =========================
  */

  /* EDIT: avatar size (display size) */
  --avatar-size: 80px;

  /* EDIT: avatar rounding (999px = circle) */
  --avatar-radius: 999px;

  /* EDIT: optional border/shadow */
  --avatar-border: 1px solid rgba(0,0,0,.08);
  --avatar-shadow: 0 10px 24px rgba(0,0,0,.10);

  /* =========================
     Motion & easing (EDIT HERE)
     =========================
     Requirement:
     - Mobile menu: ease in/out on open/close
     - Button hover: ease in/out (no movement)

     Update these to change animation feel globally.
  */
  --ease-ui: cubic-bezier(0.2, 0, 0, 1);
  --dur-ui: 400ms;

  /* Focus styles */
  --focus-color: #000000;
  --focus-w: 4px;
  --focus-offset: 4px;

  /* Tap target */
  --tap-min: 44px;

  /* Heading underline thickness */
  --underline-w-1: 4px;
  --underline-w-2: 8px;
}

@media (max-width: 420px){
  :root{
    --avatar-size: 72px; /* EDIT */
  }
}

/* =========================================================
   2) Base / reset
   ========================================================= */

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

/* Respect reduced motion for accessibility */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ transition: none !important; animation: none !important; }
}

body{
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-desktop);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-paper); /* Requirement #1 */
  text-rendering: optimizeLegibility;
  letter-spacing: var( --ls-body);
}

/* =========================
   Base typography spacing
   ========================= */

p {
  margin-top: 0;
  margin-bottom: var(--s-3);
}

p:last-child {
  margin-bottom: 0;
}


@media (max-width: 480px){
  body{ font-size: var(--fs-mobile); }
}

a{ color: inherit; }
img{ max-width: 100%; height: auto; display: block; }

:focus-visible{
  outline: var(--focus-w) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* Fixed header anchor offset (prevents section headings being hidden under header) */
section[id]{ scroll-margin-top: calc(var(--header-h) + var(--s-4)); }


/* =========================================================
   3) Accessibility helpers
   ========================================================= */

.skip-link{
  position: absolute;
  left: -999px;
  top: var(--s-3);
  z-index: 9999;
  padding: var(--s-2) var(--s-3);
  background: var(--c-paper);
  border: var(--border-1);
  border-radius: var(--r-md);
}
.skip-link:focus{ left: var(--s-3); }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip: rect(0,0,0,0); white-space:nowrap; border:0;
}


/* =========================================================
   4) Container width + gutters
   =========================================================
   Requirement:
   - Max width 1040px on desktop
   - When viewport < 1040px, keep 20px margins left/right
 */

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter-desktop);
  padding-right: var(--gutter-desktop);
}

@media (max-width: 480px){
  .container{
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
  }
}


/* =========================================================
   5) Section spacing + backgrounds
   =========================================================
   Requirement:
   - 128px top/bottom on desktop
   - reduced on mobile for viewport comfort (edit variables in :root)

   Background types:
   - .bg-dots = gradient + dots (fills full section)
   - .bg-grad = gradient only
   - footer uses purple gradient
 */

.section{
  padding-top: var(--section-pad-y-desktop);
  padding-bottom: var(--section-pad-y-desktop);
}

@media (max-width: 820px){
  .section{
    padding-top: var(--section-pad-y-mobile);
    padding-bottom: var(--section-pad-y-mobile);
  }
}

.bg-dots{ background: var(--bg-dots); }
.bg-grad{ background: var(--c-paper); }
.footer-grad{ background: var(--footer-grad); }


/* =========================================================
   6) Header (fixed) + glass pills
   =========================================================
   Requirement:
   - Header is fixed, but NOT a full-width solid bar.
   - Only logo pill + navbar pill + hamburger use "glass".
 */

.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 1000;
  background: transparent;
}

main{ padding-top: var(--header-h); }

.header-inner{
  height: var(--header-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gap-2);
}

/* Glass pill base styling.
   Note: Navbar border is removed separately below. */
.glass-pill{
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  padding: var(--btn-py-sm) var(--btn-px);
  max-height: 54px;
}


/* =========================================================
   7) Brand (SVG placeholder)
   =========================================================
   Requirement:
   - "justinbauer.design" will be an SVG.
   Replace the SVG in HTML when ready.
 */

.brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.brand.glass-pill {
  background: var(--glass-bg);
  border: 0;
  border-radius: var(--nav-radius);
}

.brand-logo{
  display: flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}


.logo-img{
  width: clamp(180px, 18vw, 220px);
  height: auto;
  display: block;
}


/* =========================================================
   8) Navigation
   =========================================================
   Requirement:
   - Remove border on navbar
   - Rounded corners (radius 2px)
   - Focus/Testimonial links removed in HTML
 */

.site-nav{
  justify-self: end;
  border: 0;
  border-radius: var(--nav-radius); /* EDIT HERE via --nav-radius */
}

/* Ensure the border from glass-pill does not apply to navbar */
.site-nav.glass-pill{
  border: 0;
  border-radius: var(--nav-radius);
}

.nav-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--gap-3);
  align-items: center;
}

.nav-link{
  position: relative;
  display: inline-flex;
  align-items: center;

  font-weight: var(--fw-semibold);
  text-decoration: none;
  color: var(--c-brand);
  letter-spacing: var(--ls-h1);

  transition: color var(--dur-ui) var(--ease-ui);
}

/* underline hidden by default */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.4em; /* tweak if needed */

  height: var(--underline-w-1);
  background: var(--grad);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-ui) var(--ease-ui);
}

/* hover state */
.nav-link:hover {
  color: var(--c-brand);
}

.nav-link:hover::after {
  transform: scaleX(.8);
}


/* =========================================================
   9) Mobile hamburger + menu
   =========================================================
   Requirement:
   - Hamburger appears on mobile
   - On click, menu panel appears with ease in/out animation

   You can tune timing/easing in :root:
   - --dur-ui
   - --ease-ui
 */

.hamburger{
  display: none; /* only on mobile */
  border: 0;
  cursor: pointer;
  border-radius: var(--nav-radius);
  justify-self: end; 
  gap: 0;
}

.hamburger.glass-pill{
  border: 0;
  border-radius: var(--nav-radius);
  padding: 1rem 1rem;
}

.hamburger-lines{
  width: 24px;
  height: 18px;
  display: grid;
  gap: 4px;
}

.hamburger-lines span{
  display: block;
  height: 2px;
  background: var(--c-ink);
}

/* Mobile menu container sits under header */
.mobile-menu{
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 999;
}

/* Animated panel
   - Starts hidden via opacity/transform
   - Becomes visible when .mobile-menu has .is-open */

.mobile-menu__panel{
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-top: 1px solid rgba(26,26,26,0.12);

  padding-top: var(--s-3);
  padding-bottom: var(--s-4);

  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;

  transition:
    opacity var(--dur-ui) var(--ease-ui),
    transform var(--dur-ui) var(--ease-ui);
}

.mobile-menu.is-open .mobile-menu__panel{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-nav-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

/* Desktop vs Mobile nav swap */
/* Desktop vs Mobile nav swap - rules consolidated to Responsive section at end */

.mobile-nav-list .nav-link:hover,
.mobile-nav-list .nav-link:focus-visible {
  background: var(--btn-outline-hover-bg);
}

.mobile-nav-list .nav-link::after {
  content: none;
}

/* =========================================================
   10) Headings (underline width = text width)
   =========================================================
   Requirement:
   - Underline under headings matches width of the heading text
 */

.section-title{
  display: inline-block; /* makes underline width match text */
  margin: 0 0 var(--s-5) 0;
  font-size: var(--h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-body);
  position: relative;
  padding-bottom: var(--s-2);
  letter-spacing: var(--ls-h2); /* 4% */
}

.section-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 85%;
  height: var(--underline-w-2);
  background: var(--grad);
}


/* =========================================================
   11) Hero
   ========================================================= */

.hero-title{
  margin: 0 0 var(--s-5) 0;
  font-size: var(--h1);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-h1);
}

.hero-title::after{
  content: "";
  display: block;
  height: var(--underline-w-2);
  width: 65%;
  margin-top: var(--s-3);
  background: var(--grad);
  letter-spacing: 0.06em; /* 6% */
}

.hero-subtitle{
  margin: var(--s-3) 0 var(--s-2) 0;
  color: var(--c-ink-2);
  font-weight: var(--fw-semibold);
  font-size: var(--h2);
}

.hero-lede{
  margin: var(--s-3) 0 var(--s-4) 0;
  max-width: 90ch;
}

.separator {
  margin: 0 0.4em;
  font-weight: var(--fw-extrabold);
}

.cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
  align-items: center;
}

/* =========================================================
   12) About Me Image
   =========================================================
 */
/* Wrap behavior is created by float */
.about-photo{
  float: right;
  width: min(var(--about-photo-w-desktop), var(--about-photo-max-w));
  margin: 0 0 var(--about-photo-gap) var(--about-photo-gap); /* bottom + left gap */
}

/* The image itself */
.about-photo__img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--about-photo-radius);
  border: var(--about-photo-border);
  box-shadow: var(--about-photo-shadow);
  object-fit: cover; /* safe if you later constrain height */
}

/* MOBILE: keep it right-aligned but wider */
@media (max-width: 820px){
  .about-photo{
    width: var(--about-photo-w-mobile);
    max-width: none; /* EDIT: remove if you still want a cap on mobile */
    margin-left: var(--about-photo-gap);
  }
}

/* IMPORTANT:
   If your About section uses a parent that needs to "contain" floats
   (so backgrounds/borders don't collapse), add this to the wrapper:
*/
.about-content::after{
  content:"";
  display:block;
  clear: both;
}

/* =========================================================
   13) Buttons (hover easing, no movement)
   =========================================================
   Requirement:
   - Primary: increase saturation, slightly darker on hover
   - Secondary: same effect + background changes to #F9F5FF
   - No transform/movement on hover
   - Ease in/out (edit --dur-ui and --ease-ui in :root)
 */

.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--r-md);
  font-weight: var(--fw-extrabold);
  text-decoration: none;
  letter-spacing: var(--ls-h1);

  /* Base visuals */
  background: var(--grad);
  color: #fff;
  border: 0;

  transition:
    filter var(--dur-ui) var(--ease-ui),
    background-color var(--dur-ui) var(--ease-ui),
    border-color var(--dur-ui) var(--ease-ui);
}

.button:hover{
  filter: saturate(1.15) brightness(.7);
}

.button--outline {
  color: var(--c-brand);
  background: var(--c-paper);
  outline: var(--bw-2) solid var(--c-brand);
  outline-offset: -4px; /* tweak to sit closer */

 

  transition:
    filter var(--dur-ui) var(--ease-ui),
    background-color var(--dur-ui) var(--ease-ui),
    border-color var(--dur-ui) var(--ease-ui);
}

.button--outline:hover {
  background-color: var(--c-bg-brand);
  outline-color: var(--c-brand);
  filter: saturate(1.1);
}

.button--small{
  padding: var(--btn-py-sm) var(--btn-px-sm);
  font-size: 0.875em;
}

/* Testimonial LinkedIn icon in white, left of text */
/* .button--linkedin{ gap: var(--s-2); } */


.section--dotted {
  position: relative;
}

/* =========================================================
   14) Gradnient tranistion for backgrounds
   ========================================================= */

/* subtle gradient edge at the bottom */
.section--dotted::before,
.section--dotted::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--section-edge-h);
  pointer-events: none;
}

.section--dotted::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    var(--section-edge-from),
    var(--section-edge-to)
  );
}

.section--dotted::after {
  bottom: 0;
  background: linear-gradient(
    to top,
    var(--section-edge-from),
    var(--section-edge-to)
  );
}



/* =========================================================
   15) Icon Styling
   ========================================================= */

.bullet-icon{
  display: inline-block;
  margin-right: var(--s-2);
  vertical-align: middle;

  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lg-icon{
  font-size: var(--s-6);
  display: inline-block;
  margin-bottom: var(--s-3);

  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
 
.contact-icon{
    font-size: var(--s-4);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  vertical-align: middle;
}


.prose{ max-width: 100ch; }


/* =========================================================
   16) About list layout
   =========================================================
   Requirement:
   - About section stacked (HTML handles stacking)
   - List displays as 2 columns on desktop, 1 on mobile
 */

.about-inline-list{
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0 0 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-1) var(--gap-3);
}

@media (max-width: 820px){
  .about-inline-list{
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   17) Cards (Focus / Work / Testimonials)
   =========================================================
   Requirement:
   - Focus, Selected Work, Testimonials cards have background #FEFFFD
   - Selected work items use the same card border style
 */

.card{
  border: var(--border-2);
  border-radius: var(--r-md);
  padding: var(--pad-card);
}

.card--surface{
  background: var(--card-bg);
}

/* Focus card titles should be left aligned with no strange indent */
.card-title{
  margin: 0 0 var(--s-3) 0;
  font-size: var(--h3);
  font-weight: var(--fw-extrabold);
  text-align: left;
  letter-spacing: var(--ls-h3);

}

.card-text{
  margin: 0;
  color: var(--c-ink-2);
}

.card-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-3);
}

@media (max-width: 820px){
  .card-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   18) Testimonials — responsive stacking (mobile)
   Goal:
   - Row 1: avatar (left) + button (right)
   - Row 2: name
   - Row 3: title
   - Row 4: quote (already below header)
   ========================================================= */

/* Desktop can remain as-is.
   This section focuses on the mobile stacking behavior. */
   

@media (max-width: 820px) {

  /* The header area that currently lays out avatar/meta/button */
  .testimonial-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--gap-2);
    align-items: start; /* helps prevent vertical centering weirdness on small screens */
  }



  /* Avatar stays in the first column */
  .testimonial-head .avatar {
    grid-column: 1;
    grid-row: 1;
  }

  /* Button goes top-right */
  .testimonial-head .button {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
  }

  /* Meta (name + title) should sit UNDER the avatar+button row
     and span full width */
  .testimonial-head .testimonial-meta {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: var(--s-2); /* tweak spacing between row1 and name/title */
  }

  /* Ensure name and title stack cleanly */
  .testimonial-head .t-name,
  .testimonial-head .t-role {
    display: block;
    margin: 0; /* prevent unexpected spacing */
  }

  /* Add spacing between name and title (optional, tokenized) */
  .testimonial-head .t-role {
    margin-top: var(--s-1);
  }

  /* Quote block already sits under .testimonial-head in your HTML.
     Ensure it doesn’t get weird top margins. */
  .testimonial blockquote {
    margin-top: var(--s-3);
  }

  .testimonial blockquote p {
    margin-top: 0;
    margin-bottom: 0; /* keep quote tight inside the card */
  }
}

/* =========================================================
   19) Approach
   ========================================================= */

.steps{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--gap-2);
}

.step{
  background: var( --c-bg-brand);
  padding: var(--pad-card);
  border-radius: var(--r-md);
}

.step-title{
  margin: 0 0 var(--s-1) 0;
  font-size: var(--h3);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-h3);
}

.step-text{
  margin: 0;
  color: var(--c-ink-2);
}


/* =========================================================
   20) Selected work
   =========================================================
   Requirement:
   - Each work item is wrapped in a card (HTML uses .card + .card--surface)
 */

.work-list{
  display: grid;
  gap: var(--gap-3);
}

.work-title{
  margin: 0 0 var(--s-3) 0;
  font-size: var(--h3);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-h3);
}

.work-text{
  margin: 0 0 var(--s-3) 0;
  color: var(--c-ink-2);
  max-width: 70ch;
}

.work-kicker{
  margin: 0 0 var(--s-3) 0;
  font-weight: var(--fw-semibold);
}

.work-bullets{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--gap-1);
}

.work-cta{
  margin-top: var(--s-6);
}


/* =========================================================
   21) Testimonials
   =========================================================
   Requirement:
   - Avatar 80x80 circle
   - Buttons include LinkedIn icon in white
 */

.testimonial-list{
  display: grid;
  gap: var(--gap-2);
}

.testimonial{ margin: 0; }

/* Ensures the avatar always reserves the same space */
.avatar{
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
}

/* The image itself */
.avatar__img
{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 999px; /* circle */
}

.testimonial-head{
  display: grid;
  grid-template-columns: var(--avatar-size) 1fr auto; 
  gap: var(--gap-3);
  align-items: center;
  margin-bottom: var(--s-3);
}

.testimonial-meta{
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.t-name{ 
  font-weight: var(--fw-extrabold); 
  font-size: var(--h3);
  letter-spacing: var(--ls-h3);
}

.t-role{ 
  color: var(--c-ink-2); 
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-h3);
}

blockquote{ margin: 0; padding: 0; }




/* =========================================================
   22) Contact
   =========================================================
   Requirement:
   - No bordered container
   - Links use gradient underline style
 */

.contact-intro{
  max-width: 70ch;
  color: var(--c-ink-2);
  margin: 0 0 var(--s-4) 0;
}

.contact-links{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--gap-1);
}

.contact-item{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap-1);
  align-items: center;
}

.contact-icon{
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
}

.contact-link{
 display: inline-block;
  width: fit-content;
  align-self: start;

  font-weight: var(--fw-regular);
  color: var(--c-brand);
  text-decoration: none; /* explicitly no underline */
  position: relative;

  transition: color var(--dur-ui) var(--ease-ui);
}

.contact-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3em;
  height: var(--underline-w-1);
  background: var(--grad);

  transform: scaleX(0);       /* hidden */
  transform-origin: left;
  transition: transform var(--dur-ui) var(--ease-ui);
}

.contact-link:hover {
  color: var(--c-brand);
}

.contact-link:hover::after {
  transform: scaleX(0.8);       /* underline appears */
}

.contact-link:hover::after{
  height: 3px;
}

.contact-cta{ margin-top: var(--s-5); }


/* =========================================================
   23) Footer
   =========================================================
   Requirement:
   - Remove "back to top"
   - Center align text
   - Font size 16px
 */

.site-footer{ color:var(--c-paper); }

.footer-inner{
  padding-top: var(--s-4);
  padding-bottom: var(--s-4);
}

.footer-center{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  justify-content: center;
  align-items: center;
  text-align: center;

}

.footer-text{
  margin: 0;
  font-size: 14px;
  font-weight: var(--fw-regular);
  letter-spacing: var( --ls-h1);
}


/* =========================================================
   Responsive — Global
   Consolidated global breakpoint rules (kept component-specific
   media queries next to their components for context).
   ========================================================= */

@media (max-width: 820px) {
  /* Header / nav swaps */
  .nav-desktop { display: none; }
  .hamburger { display: inline-flex; align-items: center; justify-content: center; }

  /* Mobile menu row tweaks */
  .mobile-nav-list .nav-link::after { content: none; }
  .mobile-nav-list .nav-link { display: flex; width: 100%; justify-content: flex-start; padding: 0.75rem var(--s-3); border-radius: var(--nav-radius); }

  /* Header spacing tweak (keeps hamburger aligned) */
  .header-inner.container { gap: 0; }
}


/* =========================================================
   Scroll Reveal
   Simple reveal on scroll using opacity + translateY.
   Elements get the base `.reveal` class (added by JS) and
   the `.reveal--visible` class when they enter the viewport.
   Respects `prefers-reduced-motion`.
   ========================================================= */

.reveal{
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 600ms var(--ease-ui), transform 600ms var(--ease-ui);
  will-change: opacity, transform;
}

.reveal.reveal--visible{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal.reveal--visible{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   Consent banner
   Simple banner that appears until the user Accepts or Declines.
   Uses existing `.button` styles for action buttons.
   ========================================================= */

/* Use very specific selectors (direct child of `html`) so these rules
   override most site CSS without relying on `!important`.
   The banner is portalled to the document root in JS for robustness. */
html > .consent-banner, body > .consent-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 20px;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  z-index: 2147483647; /* ensure top-most */
  display: flex;
  justify-content: center;
  transform: translateZ(0); /* promote to its own layer */
  pointer-events: auto;
}

/* Minor inset enforcement for smaller viewports */
html > .consent-banner, body > .consent-banner{
  inset: auto 0 20px 0;
}

html > .consent-banner .consent-inner, body > .consent-banner .consent-inner{
  background: var(--c-ink);
  padding: var(--btn-px);
  display: flex;
  gap: var(--gap-2);
  align-items: center;
  max-width: 960px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  color: var(--c-paper);
  border-radius: var(--r-md);
}

/* Ensure buttons inside the consent banner remain styled and visible */
html > .consent-banner .consent-inner .button, body > .consent-banner .consent-inner .button {
  background: var(--grad);
  color: #fff;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  font-family: var(--font-sans);
  font-weight: 600;
}

html > .consent-banner .consent-inner .button.button--outline, body > .consent-banner .consent-inner .button.button--outline {
  background: var(--c-paper);
  color: var(--c-brand);
  outline: var(--bw-2) solid var(--c-brand);
}

html > .consent-banner .consent-inner .button.button--outline:hover, body > .consent-banner .consent-inner .button.button--outline:hover{
  background-color: var(--c-bg-brand);
  outline-color: var(--c-brand);
  filter: saturate(1.1);
}

html > .consent-banner .consent-text, body > .consent-banner .consent-text{
  margin: 0;
  color: var(--c-paper);
  flex: 1;
  font-size: var(--fs-mobile);
  font-family: var(--font-sans) !important;
  letter-spacing: var(--ls-body);
}

html > .consent-banner .consent-actions, body > .consent-banner .consent-actions{
  display: flex;
  gap: var(--gap-1);
}

@media (max-width: 480px){
  html > .consent-banner .consent-inner, body > .consent-banner .consent-inner{
    flex-direction: column;
    align-items: stretch;
  }
  html > .consent-banner .consent-actions, body > .consent-banner .consent-actions{
    justify-content: stretch;
  }
}

@media (max-width: 1000px) {
  html > .consent-banner, body > .consent-banner {
    left: var(--gutter-mobile);
    right: var(--gutter-mobile);
    bottom: env(safe-area-inset-bottom, var(--gutter-mobile));
  }

  html > .consent-banner .consent-inner, body > .consent-banner .consent-inner {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    padding-left: var(--btn-px-sm);
    padding-right: var(--btn-px-sm);
  }
}

/* Mobile variant: place banner fixed at the TOP of the viewport
   (used only on narrow viewports via JS). Keeps same visual styles
   as desktop but pinned to top so navbar can appear above it. */
html > .consent-banner.mobile-top, body > .consent-banner.mobile-top{
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: env(safe-area-inset-top, 0);
}

html > .consent-banner.mobile-top .consent-inner, body > .consent-banner.mobile-top .consent-inner{
  margin: 0 auto;
  /* width: calc(100% - (var(--gutter-mobile) * 2)); */
  max-width: 960px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

/* Ensure the hidden attribute actually hides the banner even if .consent-banner
   defines display in author CSS. This prevents the element staying visible
   when `banner.hidden = true` is set from JS. */
.consent-banner[hidden]{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}