body {
  margin: 0;
  font-family: sans-serif;
  position: relative;
  display: flex;
  flex-direction: column;
}

body.about-page {
  background-image: url("../img/cloud.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}



.about-page .bio-section {
  margin-top: 70px;
  padding-top: 110px;
}

p {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}


main {
  flex: 1;
}

html, body {
  height: 100%;
}

/* Desktop/base: header matches main container width */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  max-width: 1440px;   /* same as your #container width */
  margin: 0 auto;      /* center it */
  padding: 20px 20px;  /* same side padding as #container */
  box-sizing: border-box;
}


.left-header {
  display: flex;
  align-items: center;
}

 .small-profile {     /*gif icon top left */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}

.head-name {
  color: #000000;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  position: relative;
}


.top-nav a {
 margin-left: 20px;
  text-decoration: none;
  color: #000000;
   font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  position: relative;
  transition: transform 0.9s;
  display: inline-block ;
}

.top-nav a:hover {
  /* text-decoration: underline;  */
   /* transform: scale(1.1); */
}


.profile-pic img {
  width: 380px;
  height: 380px;
  /* transition: transform 3s; */
  margin-top: 100px;
}

/* profile photo styling */



/* end style of profile photo  */


.profile-pic img:hover {
  /* transform: scale(1.4); */
}

.bio-section {
  padding: 60px 20px;
  max-width: 800px;
  text-align: left;
}

.bio-box {
  font-size: 18pt;
  font-weight: 700;               /* bold */
  margin-bottom: 20px;

  /* New font: Lora */
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 400;               /* change number: 400 = regular, 700 = bold */
  font-style: italic;
}


.bio-section { position: relative; }
.bio-section > * { transform: translateY(30px); }  /* adjust number */

.nav-buttons {
  display: flex;
  /* margin-top: 10px; spacing below the bio */
  justify-content: flex-start; /* align left */
  gap: 2px;
  padding-left: 14px;
}

.footer {
  padding: 20px;
  font-size: 0.8rem;
  font-weight: bold;
}

.footer a {
 text-decoration: none;
 color: #000;
}
#container {
  width: 1440px;
  margin: 0 auto;
  padding: 60px 20px;
  display: flex;
  flex-direction: row;
  /* align-items: center; */
  gap: 40px;
  /* padding-top: 90px; */
}

.bio-name {
  font-family: "Caveat", "Lato", sans-serif;
  font-size: 33px;        /* your chosen size */
  font-weight: 600;       /* strong but not ultra-heavy */
  color: #1b1b1b;         /* deep neutral, softer than pure black */
  margin-bottom: 8px;     /* tight gap to subheading */
}

.bio-box {
  font-family: "Lora", serif;
font-weight: 400;
font-style: italic;
  font-size: 19px;        /* smaller than name */       /* semi-bold for subheading */
  color: #333;            /* slightly lighter for hierarchy */
  margin-top: 0;
  margin-bottom: 6px;    /* space before paragraph */
}

.bio-text {
  font-family: "Lato", sans-serif;
  font-size: 16px;        /* body text size */
  font-weight: 400;       /* normal for readability */
  line-height: 1.6;
  color: #444;            /* softer gray for long text */
  margin-top: 0;
}

.bio-text {
  font-size: 16px;
  line-height: 1.6;
  color: #444;
  max-width: 600px;
  text-align: left;
  font-family: "Lato", sans-serif;
}

@media (max-width: 760px) {
  .about-page .bio-text {
    font-family: "Lato", sans-serif;
    font-weight: 400;   /* lighter than the default 700 */
    font-size: 16px;
    line-height: 1.6;
    color: #444;
  }
}



.nav-gif {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

#iconhome {
  margin-bottom: 20px;
}
.bio-content {
  position: relative;
  /* top: 59px; */
  margin-top: 9px;
}

.about-page .clouds-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px; 
  z-index: -1;
  overflow: hidden;
}

.about-page .clouds-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: 40% 80%;
}
.icon-link {         /*layout alignment and position of Icon containers */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  color: black;
  font-weight: bold;
  margin: 0 -15px; 
}


.nav-icon {        /* Behance and linkdin position and size */
  font-size: 30px;
  width: 80px;
  height: 80px;
  align-items: center;
  justify-content: center;
  color: #0A66C2;
  align-items: flex-start;
padding-top: 8px; 
}

.nav-icon .contact-page {        /* Behance and linkdin position and size */
  font-size: 30px;
  width: 80px;
  height: 80px;
  align-items: center;
  justify-content: center;
  color: #0A66C2;
  align-items: flex-start;
padding-top: 8px; 
}

/* =========================
   HAMBURGER NAVIGATION
   ========================= */
.hamburger {
  display: none;            /* hidden on desktop */
  width: 40px;
  height: 36px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.hamburger span {
  display: block;
  height: 4px;      /* thickness */
  width: 27px;      /* length */
  background: #333; /* color */
  margin: 4px 0;    /* space between bars */
  border-radius: 2px;
  transition: 0.4s;
}


/* base nav animation hook */
.top-nav {
  transition: max-height 240ms ease, opacity 180ms ease;
  will-change: max-height, opacity;
}

/* =====================================
   MOBILE LAYOUT (≤ 760px)
   ===================================== */
@media (max-width: 760px) {
  /* show hamburger on small screens */
  .hamburger { display: inline-block; }

  .header {
    position: relative;
    padding: 16px 20px;
  }

  /* collapse nav by default */
  .top-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;

    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .top-nav a {
    padding: 10px 6px;
    font-size: 16px;
  }

  /* when nav is open (JS toggles .open) */
  .top-nav.open {
    max-height: 240px;
    opacity: 1;
    pointer-events: auto;
  }

  /* About page container: stack vertically */
  .about-page #container {
    width: 100%;
    padding: 24px 16px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;   /* stack items */
    align-items: center;
    gap: 18px;
  }

  /* 1. profile image */
  .about-page .profile-pic { order: 1; }
  .about-page .profile-pic img {
    width: min(72vw, 320px);
    height: auto;
    margin-top: 8px;
  }

  /* 2. name + bio text */
  .about-page .bio-section { 
    order: 2;
    align-items: center;
    text-align: left;
    width: 100%;
    max-width: 680px;
    margin-top: 0;
    padding-top: 0;
  }
  .about-page .bio-name {
    font-size: clamp(28px, 7vw, 40px);
    text-align: center;
    margin: 12px 0 8px;
  }
  .about-page .bio-box {
    font-size: clamp(18px, 4.8vw, 22px);
    text-align: left;
    margin-top: 8px;
  }
  .about-page .bio-text {
    font-size: 16px;
    line-height: 1.7;
    margin: 10px 0 0;
    padding: 0 2px;
  }

  /* 3. icons */
  .about-page .nav-buttons {
    order: 3;
    justify-content: center;
    gap: 16px;
    padding-left: 0;
    margin-top: 8px;
  }
  .about-page .nav-icon {
    font-size: 28px;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
  }

  /* background cover smaller on phones */
  .about-page .clouds-bg { height: 160px; }
}

/* smaller tweaks for very small devices */
@media (max-width: 380px) {
  .about-page .bio-text { font-size: 15px; }
  .about-page .nav-icon { width: 52px; height: 52px; }
}

/* Only affect screens smaller than 760px */
@media (max-width: 760px) {
  /* Container: go full width instead of locked 1440px */
  .about-page #container {
    width: 100%;
    padding: 24px 16px;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    box-sizing: border-box;
  }

  /* Profile photo scales down */
  .about-page .profile-pic img {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin-top: 8px;
  }

  /* Text fits the viewport */
  .about-page .bio-section {
    width: 100%;
    max-width: 680px;
  }
  .about-page .bio-text {
    overflow-wrap: anywhere;
    hyphens: auto;
    line-height: 1.7;
  }

  /* Disable the hover zoom effect on small screens */
  .about-page .profile-pic img:hover {
    transform: none;
  }
}

/* Prevent accidental horizontal scrolling globally */
html, body {
  overflow-x: hidden;
}

@media (max-width: 760px) {
  .about-page .bio-section {
    margin-top: 10px;
    padding: 16px;
    text-align: center;
  }
  .about-page .bio-box {
    margin-top: 8px;
    margin-bottom: 12px;
  }
  .about-page .bio-text {
    margin-top: 6px;
    line-height: 1.5;
  }
}
@media (max-width: 760px) {
  .about-page .bio-box {
    text-align: center;
  }
}

@media (max-width: 760px) {
  .about-page .profile-pic img {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin-top: 60px;   /* was 8px → push it down below cover */
  }
}

@media (max-width: 760px) {
  /* Lower the photo so it clears the cover */
  .about-page .profile-pic img {
     width: 100%;
    max-width: 320px;
    height: auto;
    margin-top: 60px;      /* was 8px; this is what wasn’t applying */
    margin-bottom: 12px;
  }

  /* Pull text section up closer */
  .about-page .bio-section {
    margin-top: 0;      /* remove extra vertical gap */
    padding-top: 0;     /* no extra top padding */
  }

   .about-page .bio-section {
    margin-top: 0;
    padding: 12px 16px 0;
  }

  /* cancel the desktop translateY on mobile only */
  .about-page .bio-section > * {
    transform: none;
  }
}

/* --- Tighten About spacing (desktop + mobile) --- */
.about-page .bio-section > * { 
  transform: none;                 /* cancel the hidden 30px push */
}

.bio-section {
  padding: 24px 20px;              /* was 60px 20px */
}

.about-page .bio-section {
  margin-top: 16px;                /* was 70px */
}

/* Mobile-only fine-tune: photo clears cover, but text sits closer */
@media (max-width: 760px) {
  .about-page .profile-pic img {
    margin-top: 44px;              /* lower if still touching cover */
    margin-bottom: 8px;            /* smaller gap before text */
  }
  .about-page .bio-section { 
    padding-top: 0;                /* no extra top padding on mobile */
  }
}

/* FINAL MOBILE GAP FIX — place at end of style.css */
@media (max-width: 760px) {
  /* 1) Remove vertical gap between photo block and bio block */
  .about-page #container {
    gap: 0 !important;
    row-gap: 0 !important;   /* explicit for column flex */
  }

  /* 2) Photo clears the cover, but almost no space before text */
  .about-page .profile-pic img {
    width: min(72vw, 320px);
    height: auto;
    margin-top: 48px !important;   /* adjust if it still touches cover */
    margin-bottom: 4px !important; /* tighten photo -> text gap */
  }

  /* 3) Pull bio block up; remove inner top padding */
  .about-page .bio-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0;              /* optional: keep it snug */
  }

  /* 4) Cancel the hidden 30px push on all bio children */
  .about-page .bio-section > * {
    transform: none !important;
  }

  /* 5) Trim heading margins so they don’t add space */
  .about-page .bio-name { margin: 4px 0 6px !important; }
  .about-page .bio-box  { margin: 2px 0 8px !important; }
}

@media (max-width: 760px) {
  .about-page .clouds-bg {
    height: 73px;   /* was 160px on mobile */
  }

  /* Optional: nudge the photo up so spacing still looks tight */
  .about-page .profile-pic img {
    margin-top: 10px !important;  /* was 48–60px in various spots */
  }
}

@media (max-width: 760px) {
  .about-page #container {
    padding: 2px 16px;  /* ← change to e.g. 8px 16px */
  }
}

@media (max-width: 760px) {
  .about-page .clouds-bg {
    background: #000;          /* pure black */
  }
  .about-page .clouds-bg img {
    display: none;             /* hide the existing cover image */
  }
  .about-page .head-name {
    color: #fff;               /* white name in header */
  }
  .about-page .hamburger span {
    background: #fff;          /* white hamburger bars */
  }
}

/* Desktop: floating rounded nav bar */
@media (min-width: 761px) {
  .header {
    position: sticky;                /* stays visible as you scroll */
    top: 16px;
    z-index: 1000;

    /* size & alignment */
    width: 100%;
    max-width: 1440px;               /* match your main container width */
    margin: 12px auto 0;             /* centered pill at the top */
    padding: 14px 24px;              /* a bit tighter than before */
    box-sizing: border-box;

    /* look & feel (glass card) */
    background: rgba(255,255,255,0.86);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  }
}

/* === Portfolio background: desktop only, resize-safe === */
@media (min-width: 761px) {
  body.portfolio-page {
    /* use the new image */
    background: url("../img/room5.png") no-repeat 100% 100% / cover !important;
    min-height: 100vh;
  }
}

/* === Hide background on mobile === */
@media (max-width: 760px) {
  body.portfolio-page {
    background: none !important;         /* no image on mobile */
    background-color: #000;              /* optional fallback color */
  }
}

/* =========================
   Portfolio Page (scoped)
   ========================= */

.portfolio-page {
  font-family: "Lato", sans-serif;
}

/* Optional cover at top (if you use .clouds-bg on this page) */
.portfolio-page .clouds-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 200px;
  z-index: -1;
  overflow: hidden;
}
.portfolio-page .clouds-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 80%;
  display: block;
}

.portfolio-page h1.cs-heading {
  margin-bottom: 32px; /* remove !important so media queries can adjust */
  /* text-decoration: underline 1px;
    text-underline-offset: 7px; */
}



/* Section heading between cover and cards */
.portfolio-page .cs-heading {
  margin: 90px 0 47px;       /* space down from cover */
  text-align: center;           /* your chosen size */
  font-weight: 900;
  color: #faedca;
    font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;        /* your chosen size */ 
  font-style: italic;
}

/* Cards grid container (exactly 3 per row on desktop) */
.portfolio-page .cs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 across */
  gap: 20px;
  max-width: 800px;   /* total grid width cap */
  margin: 0 auto 180px;/* centered, with bottom space */
  padding: 0 12px;    /* small side padding for tiny screens */
}

/* Individual card */
.portfolio-page .cs-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transition: transform 0.6s ease, box-shadow 180ms ease;
  font-family: "lora", sans-serif;
}
.portfolio-page .cs-card:hover,
.portfolio-page .cs-card:focus-visible {
  transform: scale(1.03);
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
  outline: none;
}

.portfolio-page .cs-card-3 .cs-media {
  position: relative;
  overflow: hidden;
}

/* show the real pixels, don’t upscale */
.portfolio-page .cs-card-3 .cs-media img {
  height: 100%;       /* lock the image to the container height */
  width: auto;        /* maintain natural width */
  transform: translateX(-20%); /* pan left/right without resampling */
}
/* Cover image inside card (portrait) */
.portfolio-page .cs-media {
  width: 100%;
  aspect-ratio: 3 / 4;     /* taller than wide */
  background: #ddd;
  overflow: hidden;
}

.portfolio-page .cs-media img.fit-cover {
  object-fit: contain !important;  /* or cover, fill, etc. depending on look */
  background: #91b69180;  /* optional: adds neutral background behind it */
}

.portfolio-page .cs-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* adjust per card if needed */
  display: block;
}

.portfolio-page .cs-card {
  position: relative;
}
.portfolio-page .cs-media {
  position: relative;          /* so the overlay anchors to this box */
  overflow: hidden;            /* keep overlay inside the card image */
}

/* Only apply logo overlay to the first card */
.portfolio-page .cs-card:first-child .logo-overlay {
  position: absolute;
  top: 20px;   /* put it in upper right */
  right: 20px;
  width: 60px;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* Card title */
.portfolio-page .cs-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #222;
  background: #fff;
  border-top: 1px solid #eee;

  /* center horizontally & vertically */
  display: flex;
  align-items: center;   /* vertical center */
  justify-content: center; /* horizontal center */
  min-height: 70px;      /* gives the rectangle a uniform height */
  text-align: center;    /* keeps text centered if it wraps */
  padding: 0 12px;       /* side padding for longer text */
}
/* -----------------
   Responsive tweaks
   ----------------- */

/* Two columns when space is tight */
@media (max-width: 860px) {
  .portfolio-page .cs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px; /* keeps cards comfy */
  }
}

/* Single column on small phones */
@media (max-width: 560px) {
  .portfolio-page .cs-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-bottom: 90px;
  }
  .portfolio-page .cs-heading {
    font-size: 30px;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .portfolio-page .cs-card {
    transition: none;
  }
  .portfolio-page .cs-card:hover,
  .portfolio-page .cs-card:focus-visible {
    transform: none;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  }
}

/* =========================
   MOBILE CARD OVERRIDES
   ========================= */
@media (max-width: 760px) {
  /* Stack cards full-width */
  .portfolio-page .cs-card {
    padding: 0;              /* remove outer padding for full-bleed image */
    border-radius: 12px;        /* optional: square edges on small screens */
    margin-bottom: 24px;     /* space between cards */
  }

  /* Media section fills full width with fixed height */
  .portfolio-page .cs-card .cs-media {
    width: 100%;
    height: 220px;           /* adjust height for mobile */
    overflow: hidden;
    border-radius: 0;
  }

  .portfolio-page .cs-card .cs-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* makes it fill without green sides */
    object-position: center;  /* change to "center 80%" if you want to bias lower part */
    display: block;
  }

  /* Put padding back only for the text areas */
  .portfolio-page .cs-card .cs-title,
  .portfolio-page .cs-card .cs-desc {
    padding: 12px 16px;
  }
}

/* =========================
   MOBILE FIC CARD OVERRIDES
   ========================= */
@media (max-width: 760px) {
  /* Only target FIC card */
  .portfolio-page .fic-card {
    padding: 0;
    overflow: hidden;
  }

  .portfolio-page .fic-card .cs-media {
    width: 100%;
    height: 240px;              /* adjust for how tall you want it */
    overflow: hidden;
  }

  .portfolio-page .fic-card .cs-media img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover !important;    /* no more white bars */
    object-position: center 70%;     /* adjust number to reveal more bottom */
  }

  .portfolio-page .fic-card .cs-title,
  .portfolio-page .fic-card .cs-desc {
    padding: 12px 16px;
  }
}

@media (max-width: 760px) {
  .portfolio-page .clouds-bg { height: 73px; }  /* match index/about */
}


/* Pull portfolio content up on mobile (match ~73px cover height) */
@media (max-width: 760px) {
  .portfolio-page .cs-heading {
     margin: 110px 0 16px; /* adjust the first value (top) as needed */
  }
}

@media (max-width: 760px) {
  .portfolio-page h1.cs-heading {
    margin-bottom: 30px !important;  /* try 8–12px to taste */
  }
}


/* Mobile only: force Card 2 to match Card 1 */
@media (max-width: 760px) {
  /* target the 2nd card regardless of its class name */
  .portfolio-page .cs-grid .cs-card:nth-child(2) {
    padding: 0 !important;
    border-radius: 12px !important;
    margin-bottom: 24px !important;
  }

  .portfolio-page .cs-grid .cs-card:nth-child(2) .cs-media {
    width: 100% !important;
    height: 220px !important;     /* same as your mobile card media height */
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  .portfolio-page .cs-grid .cs-card:nth-child(2) .cs-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;  /* override any .fit-cover contain */
    object-position: center !important;
    transform: none !important;    /* cancel any translate from per-card rules */
    background: transparent !important;
  }

  .portfolio-page .cs-grid .cs-card:nth-child(2) .cs-title,
  .portfolio-page .cs-grid .cs-card:nth-child(2) .cs-desc {
    padding: 12px 16px !important; /* match Card 1 text padding on mobile */
  }
}

/* Mobile only: make Card 3 match Card 1 */
@media (max-width: 760px) {
  .portfolio-page .cs-grid .cs-card:nth-child(3) {
    padding: 0 !important;
    border-radius: 12px !important;
    margin-bottom: 24px !important;
  }

  .portfolio-page .cs-grid .cs-card:nth-child(3) .cs-media {
    width: 100% !important;
    height: 220px !important;      /* same as Card 1 mobile media height */
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  .portfolio-page .cs-grid .cs-card:nth-child(3) .cs-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;   /* override any contain/fit-cover */
    object-position: center !important;
    transform: none !important;     /* cancel per-card translate */
  }

  .portfolio-page .cs-grid .cs-card:nth-child(3) .cs-title,
  .portfolio-page .cs-grid .cs-card:nth-child(3) .cs-desc {
    padding: 12px 16px !important;  /* match Card 1 text padding */
  }
}

/* ========= Portfolio: About/Accordion under cards ========= */
/* ========= Portfolio: text-only accordion (no backgrounds/borders) ========= */
.portfolio-page .pf-section { 
  max-width: 900px;
  margin: 0 auto 80px;
  padding: 0 12px;
}

.portfolio-page .pf-lefttitle {
  font-size: 28px;
  font-weight: 900;
  margin-top: -40px;
  text-align: left;         /* not centered */
  color: #9fc092;  
  font-family: lora;
  font-style: italic;
  font-weight: 400;           /* white title */
}



/* Reset any boxes/panels */
.portfolio-page .tf-accordion details,
.portfolio-page .tf-accordion summary,
.portfolio-page .tf-accordion .content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Summary (click target) */
.portfolio-page .tf-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 0 10px 28px;   /* space for caret only */
  color: #fff;                 /* white summary text */
  position: relative;
  user-select: none;
  font-family: "Lora", serif;
  font-weight: 400;
  display: inline-block;

}
.portfolio-page .tf-accordion summary::-webkit-details-marker { display: none; }

/* Caret (white) */
.portfolio-page .tf-accordion summary::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-right: 3px solid currentColor;  /* chevron stroke */
  border-bottom: 3px solid currentColor; /* chevron stroke */
  transform: translateY(-50%) rotate(45deg); /* ">" when closed */
  transition: transform .2s ease;
  opacity: .9;            /* white caret */
  color: #9fc092;
}

/* Open state */
.portfolio-page .tf-accordion details[open] summary::before {
  transform: translateY(-50%) rotate(225deg);
  
}

/* underline the open (selected) heading */
.portfolio-page .tf-accordion details[open] > summary span {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: inherit;
}

/* Hover/focus feedback without backgrounds */
.portfolio-page .tf-accordion summary:hover span { text-decoration: underline; }


/* Content (white body text) */
.portfolio-page .tf-accordion .content {
  padding: 0 0 8px 28px;
   color: #fcfffc;                /* white content text */
  line-height: 1.7;
}
.portfolio-page .tf-accordion .content p { margin: 8px 0 0; }



/* Small screens */
@media (max-width: 640px) {
  /* Title stays white on mobile */
  .portfolio-page .pf-lefttitle { 
    color: #000000;
    text-align: center;
    margin-bottom: 30px; 
    font-size: clamp(24px, 6vw, 32px)
  }
  

  /* Frames (boxes) for each accordion item on mobile */
  .portfolio-page .tf-accordion details {
    background: #fff;
    border: 1px solid #e5e7eb;   /* light gray frame */
    border-radius: 12px;
    margin: 10px 0;
  }

  /* Heading (click target) — black text + full-width block */
  .portfolio-page .tf-accordion summary {
    color: #000;                 /* makes arrow black too (uses currentColor) */
    display: block;              /* full-width tap area */
    padding: 14px 16px 14px 39px;/* keep space for the chevron */
  }

  /* Ensure chevron is black even if you later change summary color */
  .portfolio-page .tf-accordion summary::before {
     border-right-color: #000;
      border-bottom-color: #000;
  }

  #about-techfleet .tf-accordion details[open] > summary { color: #b19376; }  /* selected heading color on mobile */
.portfolio-page .pf-testimonials .pf-lefttitle { color: #000000; }            /* testimonial title black on mobile */


  

  /* Body text — black in mobile frames */
  .portfolio-page .tf-accordion .content {
    color: #000;
    padding: 0 16px 16px 44px;
  }

  /* Optional: subtle open-state border emphasis */
  .portfolio-page .tf-accordion details[open] {
    border-color: #d1d5db;
  }
}



/* ===== Portfolio: Testimonials (under About Tech Fleet) ===== */
.portfolio-page .pf-testimonials { max-width: 900px; padding: 0 12px; }

.portfolio-page .pf-testimonials .pf-lefttitle {
  color: #9fc092;                 /* white title for this section */
  margin: 0 0 30px;
  text-align: left;
}

.portfolio-page .testimonial {
  display: grid;
  grid-template-columns: 1fr 100px ;  
  gap: 20px;
  align-items: start;
}

.portfolio-page .testimonial__img {
 width: 100px;
  height: 100px;
  grid-column: 2;    
  grid-row: 1;
  object-fit: cover;
}

.portfolio-page .testimonial__body { color: #fff; line-height: 1.7;  grid-column: 1;     grid-row: 1; }
.portfolio-page .testimonial__quote {
  margin: 0 0 10px;
  font-family: "lato", serif;
  font-weight: 400;
}
.portfolio-page .testimonial__name { margin: 8px 0 0; font-weight: 700; opacity: .9; }

@media (max-width: 640px) {
  .portfolio-page .pf-testimonials .pf-lefttitle { text-align: center; color: #000; }
  .portfolio-page .testimonial { grid-template-columns: 1fr; }

  /* image (closed properly) */
  .portfolio-page .testimonial__img {
    width: 100%;
    height: auto;
    max-width: 480px;
    margin: 0 auto;
  }

  /* body text: black on mobile */
  .portfolio-page .testimonial__body { color: #000; }
}



/* /* =========================
   RESPONSIVE UPSHIFTS
   ========================= */
@media (min-width: 560px) {
  .portfolio-page .cs-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .portfolio-page .cs-card .cs-title { font-size: 19px; padding: 14px 16px 16px; }
}

@media (min-width: 920px) {
  .portfolio-page .cs-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .portfolio-page .cs-card { border-radius: 18px; }
  .portfolio-page .cs-card .cs-title { font-size: 20px; }
}


/*contact page css*/

body.contact-page {
  background: url("../img/sunrise.jpg") no-repeat center center;
  background-size: cover;
  background-attachment: fixed;  /* optional: parallax effect */
}

.contact-page .contact-container {   /* contact page is body class*/
  display: flex;            /* flex and column vertical layout*/
  flex-direction: column;
  align-items: flex-start;
  position: relative;         /* relative position but now movable with css */
  z-index: 1;           /*z index for above video */
  padding: 60px 20px 10px;
  max-width: 800px;
  margin: 0 auto;   /* centers element container */
  margin-top: 38px;
}

/* Contact page: prevent scrolling on desktop only */
@media (min-width: 1025px) {
  body.contact-page {
    overflow: auto;   /* no scrollbars */      /* lock to viewport height */
  }
}



.contact-page .bio-name {
  margin-bottom: 20px;  /*move element below down */
  margin-top: 40px;
}
/* --- Contact page only: bio name in Lora italic --- */
.contact-page .bio-name {
  font-size: 18pt;
  font-weight: bold;
  margin-bottom: 20px;
  font-family: "Lora", serif;
  font-style: italic;
  font-weight: 400;
}


.contact-page .bio-text {            /* spacing and width of text and page, only affecting bio text with contact page*/
  margin-top: 0;
  margin-bottom: 20px;
  max-width: 600px;
}

.contact-page .contact-form {    /* width and positioning of contact containers */
  width: 100%;
  max-width: 600px;
  margin-bottom: 19px;
}

.contact-page .contact-form input,             /*Selecting input and textarea*/
.contact-page .contact-form textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 12px;
  font-size: 1rem;
}

.contact-page .contact-form button {
  padding: 10px 20px;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
}

/* === Contact Form text in Lato === */
body.contact-page form,
body.contact-page form input,
body.contact-page form textarea,
body.contact-page form button,
body.contact-page form label {
  font-family: 'Lato', sans-serif !important;
}

/* Contact form focus state */
body.contact-page input:focus,
body.contact-page textarea:focus,
body.contact-page select:focus {
  outline: none;                        /* remove default browser outline */
  border: 2px solid #155713;            /* black border when active */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* subtle shadow if you want */
}


body.contact-page form label {
  display: block;
  margin-bottom: -15.5px;  /* space between label and box */
}


.contact-page .nav-buttons {
  display: flex;
  gap: 10px;
  margin-top: 0px;
}

.contact-page .contact-page-clouds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 240px; /* or match your layout */
  z-index: -1;
  overflow: hidden;
}

.contact-page .contact-page-clouds img {
  width: 100%;
  height: 80%;
  object-fit: cover;
  object-position: top center; /* adjust if needed */
  display: block;
}

/* Contact page — info block below the form */
.contact-page .contact-details {
  margin-top: 16px;                    /* sits right under the form */
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 14px 16px;
  font-family: "Lato", sans-serif;     /* ensure Lato */
}

.contact-page .contact-details__title {
  font-family: "Lato", sans-serif;
  font-size: 16px;           /* down from 18px */
  font-weight: 700;
  letter-spacing: 0.04em;    /* subtle polish */
  text-transform: uppercase; /* optional: gives it a label feel */
  color: #1b1b1b;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eaeaea;  /* clean divider under the title */
}

.contact-page .contact-details__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.contact-page .contact-details__list li {
  display: grid;
  grid-template-columns: 96px 1fr;     /* label | value */
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #333;
}

.contact-page .contact-details__label {
  font-weight: 600;
  color: #333;
}

.contact-page .contact-details a {
  color: #333;
  text-decoration: none;
}
.contact-page .contact-details a:hover {
  text-decoration: underline;
}
/* Contact page: make long links wrap and look clean */
.contact-page .contact-details a {
  overflow-wrap: anywhere;   /* wrap long URLs on small screens */
}

.contact-page .contact-details__sub {
  margin: 6px 0 10px;        /* sits just under the title */
  font-family: "Lato", sans-serif;
  font-size: 14px;
  color: #666;
}


/* MOBILE */
/* Prevent inputs from spilling past the right edge */
.contact-page .contact-form input,
.contact-page .contact-form textarea {
  box-sizing: border-box;   /* include padding inside the width */
}

/* Mobile: add a bit more breathing room on the right (and left) */
@media (max-width: 760px) {
  .contact-page .contact-container {
    padding-left: 16px;     /* was 20px */
    padding-right: 16px;    /* was 20px */
  }
}

/* Mobile tightening */
@media (max-width: 760px) {
  .contact-page .contact-details {
    padding: 12px 14px;
    margin-top: 14px;
  }
  .contact-page .contact-details__list li {
    grid-template-columns: 88px 1fr;
    font-size: 15px;
  }
}

/* Contact (mobile): black cover, white header, tighter gap */
@media (max-width: 760px) {
  /* make the cover black & thinner; hide the image */
  .contact-page .contact-page-clouds {
    height: 73px;        /* match your other pages */
    background: #000;
  }
  .contact-page .contact-page-clouds img { display: none; }

  /* white site name + hamburger bars over black cover */
  .contact-page .head-name { color: #fff; }
  .contact-page .hamburger span { background: #fff; }

  /* pull the content up closer to the black bar */
  .contact-page .contact-container {
    margin-top: 8px !important;   /* was 40px */
    padding-top: 10px !important; /* was 60px */
  }

  /* if you show a heading on contact, trim its top margin too */
  .contact-page .bio-name { margin-top: 8px !important; } /* was 40px */
}

/* Contact page: white card container */
.contact-page .contact-container {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  max-width: 800px;          /* your existing width */
  margin: 24px auto 60px;    /* separates from bg and centers */
  padding: 32px 28px;        /* comfortable interior spacing */
  box-sizing: border-box;
}

/* Mobile tweaks */
@media (max-width: 760px) {
  .contact-page .contact-container {
    margin: 12px 16px 28px;  /* keep space from edges/black header */
    padding: 20px 16px;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.14);
  }
}

/* Desktop: reduce space above Contact */
@media (min-width: 761px) {
  /* 1) The fixed header offset — shrink it */
  body { padding-top: 72px; }   /* was ~96px; tweak to 64–80px to taste */

  /* 2) Pull the Contact card up */
  .contact-page .contact-container { margin-top: 60px; }  /* was ~24px */

  /* 3) Kill the H1’s default top margin inside the card */
  .contact-page .contact-container > *:first-child { margin-top: -7px; }
}

/* --- Remove background image on Contact page (mobile only) --- */
@media (max-width: 760px) {
  body.contact-page {
    background: none !important;
    background-color: #ffffff; /* optional: set plain white background */
  }
}

@media (max-width: 760px) {
  .contact-page section,
  .contact-page .contact-container {
    margin-bottom: -10px !important;
    margin-top: 20px !important;
  }
}


/* =========================
   Case Study Page (image render)
   ========================= */
.case-study-page { font-family: "Lato", sans-serif; }

/* keep the cover visible but behind */

/* stack header/content above cover */
.case-study-page .header,
.case-study-page main { position: relative; z-index: 1; }

/* centered “page” that matches your other pages’ width rhythm */
.case-study-page .cs3-frame {
  max-width: 1000px;             /* feel free to bump to 1200 if you want bigger */
  margin: 240px auto 60px;       /* 200 cover + spacing */
  padding: 0 16px;
}

/* the tall image itself */
.case-study-page .cs3-longimg {
  display: block;
  width: 100%;
  height: auto;                  /* keeps native pixel density, no upscaling blur */
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  image-rendering: auto;         /* best-quality resampling */
}

/* Center captions to the image width */
.case-study-page .cs-figure .video-caption{
  display: inline-block;      /* shrink to image width */
  margin: 0 auto 0;           /* center the figure in the section */
  text-align: center;
  font-size: 18px;
  font-style: normal;
}
.case-study-page .cs-figure img { display: block; }
.case-study-page .cs-figure .video-caption { margin-top: 6px; }


/* back button */
.case-study-page .cs3-cta {
  text-align: center;
  margin: 0 0 80px;
}
.case-study-page .cs3-button {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  background: #111;
  transition: transform .4s ease, box-shadow .4s ease;
}
.case-study-page .cs3-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
/* Mobile: black cover + white header (About + Portfolio) */
@media (max-width: 760px) {
  /* Make cover area black and hide the image inside it */
  .about-page .clouds-bg,
  .portfolio-page .clouds-bg {
    background: #000;
  }
  .about-page .clouds-bg img,
  .portfolio-page .clouds-bg img {
    display: none;
  }

  /* Header text (name) and hamburger bars to white */
  .about-page .head-name,
  .portfolio-page .head-name {
    color: #fff;
  }
  .about-page .hamburger span,
  .portfolio-page .hamburger span {
    background: #fff;
  }
}




/* =========================
   Case Study (your cs1 HTML)
   Scoped to: body.case-study-page
   ========================= */
.case-study-page { 
  font-family: "Lato", sans-serif; 
  color: #333; 
  line-height: 1.6;
}

/* keep the cover image behind content */
.case-study-page .clouds-bg {
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; 
  height: 200px; 
  z-index: 0; 
  overflow: hidden;
}
.case-study-page .clouds-bg img {
  width: 100%; 
  height: 100%; 
  display: block; 
  object-fit: cover; 
  object-position: 100% 45%;
}

/* stack header/content above cover */
.case-study-page .header,
.case-study-page main { 
  position: relative; 
  z-index: 1; 
  background: transparent;
}

/* main container that wraps the whole case study */
.case-study-page .cs1-container {
  max-width: 1000px;
  margin: 240px auto 100px; /* 200px cover + spacing */
  padding: 0 20px;
}

/* headings */
.case-study-page .cs1-title {
  font-size: 56px;
  font-weight: 900;
  text-align: center;
  margin: 0 0 8px;
  color: #1b1b1b;
}
.case-study-page .cs1-subtitle {
  text-align: center;
  font-weight: 700;
  color: #555;
  margin: 0 0 28px;
}

/* sections & lists */
.case-study-page .cs1-section { 
  margin: 36px 0; 
}
.case-study-page .cs1-section h2 { 
  font-size: 28px; 
  font-weight: 900; 
  margin: 0 0 12px; 
  color: #1b1b1b; 
}
.case-study-page .cs1-section h3 { 
  font-size: 22px; 
  font-weight: 900;
  font-style: italic; 
  margin: 6px 0 0; 
  color: #1b1b1b; 
}

/* override for Step headings */
.case-study-page .cs1-section h3.step {
  font-style: normal;            /* not 'none' */
}

.case-study-page .cs1-list { 
  padding-left: 18px; 
}
.case-study-page .cs1-list li { 
  margin: 6px 0; 
}

/* “img” placeholders are links in your HTML — style them like buttons/thumbs */
.case-study-page a[href^="img/"] {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f5f5f5;
  border: 1px solid #e9e9e9;
  text-decoration: none;
  color: #222;
  font-weight: 700;
}

.case-study-page .cs1-section img:has(+ .video-caption) { margin-bottom: 2px; }
.case-study-page .cs1-section img.cs1-image.magnify-target { margin-bottom: 2px; }


.case-study-page a[href^="img/"]:hover {
  background: #efefef;
}

.cs1-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
}

.cs1-image.concept-img {
  width: 600px;                 /* fixed target width */
  max-width: 70%;              /* shrink on small screens */
  height: auto;
  display: block;               /* needed for margin centering */
  float: none !important;       /* undo any float */
  margin-left: auto !important; /* center in normal/block layout */
  margin-right: auto !important;
  /* Handle flex/grid parents too */
  align-self: center !important;   /* works if parent is flex */
  justify-self: center !important; /* works if parent is grid */
  place-self: center !important;   /* shorthand for many grid cases */
}

/* CTA section & button (your HTML uses class="cs1-section cs3-cta") */
.case-study-page .cs3-cta { 
  text-align: center; 
  margin-top: 40px; 
}
.case-study-page .cs1-button {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  background: #111;
  transition: transform .3s ease, box-shadow .3s ease;
}
.case-study-page .cs1-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

/* Images you might add directly later */
.case-study-page .cs1-section img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0px 0;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

/* small responsive tweaks */
@media (max-width: 640px) {
  .case-study-page .cs1-title { font-size: 40px; }
  .case-study-page .cs1-subtitle { font-size: 16px; }
}

/* Only shrink & center THIS one image */
.case-study-page .cs1-section img.cs1-image.interview-notes {
  width: 600px;        /* pick your size */
  max-width: 90%;      /* stay responsive on small screens */
  height: auto;
  display: block;
   margin: 2px 0px;   /* centers it */
   margin-bottom: 7px;
}





/* Cursor hint for magnifiable images */
.magnify-target {
  cursor: zoom-in;
}


/* Tight image→caption gap for magnify images */
.case-study-page .cs1-section img.cs1-image.magnify-target { margin-bottom: 2px; }


/* Lens styling */
.magnify-lens {
  mix-blend-mode: normal;
}



/* ===== Phone videos: layout, sizing, cropping, captions ===== */

/* Row layout for the two phones */
.video-gallery {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;                 /* spacing between phones */
  margin: 40px 0;
  flex-wrap: wrap;           /* stack on narrow screens */
}

/* Each phone + its caption live inside .video-item
   WIDTH is controlled by CSS var --w on .video-item */
.video-item {
  width: var(--w, 260px);    /* set per item: style="--w:260px;" */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Rounded “phone” frame with iPhone 14-ish screen ratio */
.phone-frame {
  width: 100%;
  aspect-ratio: 9 / 19.5;    /* ~iPhone 14 screen ratio */
  border-radius: 40px;       /* outer curve */
  background: #fff;          /* ensures no black shows behind video */
  overflow: hidden;          /* crop to rounded shape */
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  position: relative;
  flex-shrink: 0;
  margin-bottom: 8px;        /* space before caption */
}

/* Inner viewport: we’ll zoom/pan the video to remove black bars */
.phone-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Video fills the frame. Zoom & offsets come from CSS vars:
   --zoom (number), --x (px), --y (px) set on .phone-frame */
.phone-viewport video {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* crop instead of letterbox */
  transform-origin: center;
  transform:
    translate(calc(-50% + var(--x, 0px)),
              calc(-50% + var(--y, 0px)))
    scale(var(--zoom, 1));
  display: block;
}

/* Subtle Lato caption sized to phone width */
.video-caption {
  width: 100%;               /* exactly as wide as the phone */
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #797979;
  text-align: center;
  margin-bottom: 20px;
}

/* If a paragraph directly wraps an image, don’t add extra gap below it */
.case-study-page .cs1-section p:has(> img) { margin-bottom: 6px; }


/* Responsive tweaks */
@media (max-width: 900px) {
  .video-gallery { gap: 48px; }
  .video-item { width: min(var(--w, 260px), 300px); }
}

@media (max-width: 640px) {
  .video-gallery { gap: 32px; }
  /* stack vertically for very small screens */
  .video-gallery { flex-direction: column; align-items: center; }
}

/* --- GLOBAL SPACING SYSTEM FOR CASE STUDY PAGE --- */

/* Sections: give each block clear breathing room */
.case-study-page .cs1-section {
  margin: 60px 0;   /* more separation between big chunks */
}

/* Headings: keep close to their text */
.case-study-page .cs1-section h2,
.case-study-page .cs1-section h3 {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Paragraphs: comfortable reading rhythm */
.case-study-page .cs1-section p {
  margin: 0 0 1.5rem;
  line-height: 1.7;
  font-size: 18px;
  max-width: 700px;   /* stops lines from being too wide */
}

.case-study-page .cs1-section li { 
  font-size: 18px; 
  line-height: 1.7;
}

/* Images: always centered, with generous top/bottom space */
.case-study-page .cs1-section img {
  display: block;
  margin: 2.5rem 0;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

/* If multiple images appear inside one section, make the gap smaller so they feel grouped */
.case-study-page .cs1-section img + img {
  margin-top: 1.5rem;
}




/* Text directly after an image: tighten gap slightly */
.case-study-page .cs1-section img + p {
  margin-top: 1rem;
}

/* Optional: captions under images */
.case-study-page figure {
  margin: 2.5rem 0;
  text-align: center;
  max-width: 700px;
}

.case-study-page figcaption {
  font-size: 0.9rem;
  color: #666;
  margin-top: 2px;
  font-style: italic;

}

/* Tighten image→caption gap (handles both <figcaption> and .video-caption) */
.case-study-page .cs1-section img + figcaption,
.case-study-page .cs1-section img:has(+ .video-caption) {
  margin-bottom: 1px;   /* overrides the 2.5rem bottom from the global img rule */
}

.case-study-page figure img { margin-bottom: 0px;
padding-bottom: 0;
}

/* Make sure the header stack is above everything on the case-study page */
.case-study-page .header { position: relative; z-index: 1000; }  /* was 1 */

/* MOBILE: ensure the open menu is clickable and sits above the page */
@media (max-width: 760px) {
  .hamburger { position: relative; z-index: 1002; }     /* button on top */
  .top-nav    { position: absolute; z-index: 1001; }    /* menu just under button */

  /* Safety: only block clicks when CLOSED; allow clicks when OPEN */
  .top-nav { pointer-events: none; }
  .top-nav.open { pointer-events: auto; }

  /* Extra safety so each link is definitely clickable */
  .top-nav a { position: relative; z-index: 1003; }
}

/* Put header above everything site-wide */
.header { position: relative; z-index: 1000; }

/* Mobile: menu sits above content, links are clickable when open */
@media (max-width: 760px) {
  .hamburger { position: relative; z-index: 1002; } /* button on top */
  .top-nav   { position: absolute; z-index: 1001; pointer-events: none; }
  .top-nav.open { pointer-events: auto; }

  /* extra safety: ensure each link receives clicks */
  .top-nav a { position: relative; z-index: 1003; }
}

/* Case Study 1 (mobile): black cover, white header, thinner cover, tighter gap */
@media (max-width: 760px) {
  /* Cover: make it black and thin, hide the image */
  .case-study-page .clouds-bg {
    height: 73px;          /* match index/about mobile cover */
    background: #000;
  }
  .case-study-page .clouds-bg img { display: none; }

  /* Header text + hamburger in white */
  .case-study-page .head-name { color: #fff; }
  .case-study-page .hamburger span { background: #fff; }

  /* Reduce the big top gap before the content */
  .case-study-page .cs1-container {
    margin: 42px auto 60px; /* was 240px top on desktop; tighten for mobile */
  }
}



/* KILLS ALL TRANSFORMS MOBILE */


/* Mobile: remove all transforms on navs, profile photos, and cards */
@media (max-width: 760px) {
  /* NAV LINKS (scale on hover) */
  .top-nav a,
  .top-nav a:hover,
  .top-nav a:focus {
    transform: none !important;
    transition: none !important;
  }

  /* PROFILE PHOTO (zoom on hover) */
  .profile-pic img,
  .profile-pic img:hover,
  .profile-pic img:focus {
    transform: none !important;
    transition: none !important;
  }

  /* CARDS (portfolio) */
  .portfolio-page .cs-card,
  .portfolio-page .cs-card:hover,
  .portfolio-page .cs-card:focus-visible {
    transform: none !important;
    transition: none !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important; /* keep the non-zoom look */
  }

  /* Card-specific image pan on Card 3 */
  .portfolio-page .cs-card-3 .cs-media img {
    transform: none !important;
  }
}

/* ALL NAV */
/* Desktop: blue/underline on hover, blue dot for active page */
@media (min-width: 761px) {
  .top-nav a {
    position: relative;                 /* needed for the dot */
    color: #333;
    text-decoration: none;
    padding-bottom: 6px;                /* room for the dot */
    transition: color .2s ease;
  }

  /* Hover state */
  .top-nav a:hover,
  .top-nav a:focus {
    color: #1a73e8;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
  }

  /* Active/current page: blue text + centered dot (no underline) */
  .top-nav a[aria-current="page"] {
    color: #1a73e8;
    text-decoration: none;
  }
  .top-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -6px;                       /* adjust if it sits too low/high */
    width: 6px;
    height: 6px;
    background: #1a73e8;
    border-radius: 50%;
  }

  /* If you can't add aria-current, use page-class targeting instead */
  .about-page    .top-nav a[href*="about"],
  .about-page    .top-nav a[href*="index"],
  .portfolio-page .top-nav a[href*="portfolio"],
  .case-study-page .top-nav a[href*="case"],
  .contact-page  .top-nav a[href*="contact"] {
    color: #1a73e8;
    text-decoration: none;
  }
  .about-page    .top-nav a[href*="about"]::after,
  .about-page    .top-nav a[href*="index"]::after,
  .portfolio-page .top-nav a[href*="portfolio"]::after,
  .case-study-page .top-nav a[href*="case"]::after,
  .contact-page  .top-nav a[href*="contact"]::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -6px;
    width: 6px;
    height: 6px;
    background: #1a73e8;
    border-radius: 50%;
  }
}

/* Desktop: NOT fixed — scrolls with the page */
@media (min-width: 761px) {
  .header {     /* change from fixed → sticky (or use 'static') */
    top: -4px;             /* small breathing room from the top */
    left: auto;           /* cancel any centering from the fixed version */
    transform: none;      /* cancel translateX */
    margin: 32px auto 0;  /* centered pill */
    width: 100%;
    max-width: 1440px;    /* same as your main container */
    /* keep your existing background/blur/border/shadow */
  }

  /* Remove the offset we added for the fixed header */
  body { padding-top: 0; }

  /* Keep a tidy gap below the nav on Contact (tune as you like) */
  .contact-page .contact-container { margin-top: 16px; }
  /* If it feels too tight, try 20–24px */
}

.contact-page .contact-container {
  /* … */
  margin: 24px auto 0px;   /* ← this “60px” makes the big gap */
  padding: 32px 28px;
}
``` :contentReference[oaicite:0]{index=0}

Add this **once at the very end of `style.css`** to pull the bottom up a bit and neutralize any child margins:

```css
/* Tighten space under the Contact card (desktop + mobile) */
.contact-page .contact-container {
  margin-bottom: 16px !important;   /* was 60px */
  padding-bottom: 10px !important;  /* small inner breathing room */
}
.contact-page .contact-container > *:last-child {
  margin-bottom: -60px !important;      /* stop last child from adding extra gap */
}
.contact-page .nav-buttons {         /* icons row */
  margin-bottom: 10px !important;
}
 
/* === About (index) MOBILE: parallax-style background === */
@media (max-width: 760px) {
  /* Kill the old black cover */
  .about-page .clouds-bg { display: none !important; }
  .about-page .clouds-bg {
    display: none !important;
  }

  /* Make body relative so we can add a fixed bg layer */
  body.about-page {
    position: relative;
    background: none !important; /* no scrolling bg on body */
  }

  /* Fixed background layer */
 /* --- MOBILE ABOUT: enable scrolling and use tall scrolling bg --- */
@media (max-width: 760px) {
  /* 1) Do NOT clip the page (this was preventing scroll) */
  body.about-page {
    overflow: visible !important;   /* was hidden */
    position: static !important;    /* undo any position:relative from experiments */
    background: url("../img/mobilecloud.png") no-repeat center top / 100% auto !important;
    background-position: 0px 100px / 160% auto !important;   /* try 0%–30% to aim the white area */

    background-attachment: scroll !important;  /* make bg move with content */
  }

  /* 2) Remove any fixed pseudo-layer you tried earlier */
  body.about-page::before { content: none !important; }

  /* 3) Make sure the black cover isn’t masking the body background */
  .about-page .clouds-bg { display: none !important; }

  /* 4) Let the document be taller than the viewport */
  html, body { 
    height: auto !important; 
    min-height: 100vh; 
    overflow-y: auto !important;     /* re-enable vertical scroll */
  }
}
}
/* --- About page ONLY, Mobile ONLY --- */



@media (max-width: 760px) {
  /* About page only */
  body.about-page .site-name,
  body.about-page .head-name {
    color: #000000b2 !important;   /* black text */
  }

  body.about-page .hamburger span,
  body.about-page .menu-toggle span {
    background-color: #000000bd !important; /* black bars */
  }
}

/* ----- Portfolio page: switch layouts by breakpoint ----- */


/* === Portfolio: mobile title fix (final override) === */
@media (max-width: 760px) {
  .portfolio-page .cs-heading {
    margin: 24px 0 12px !important;          /* small, predictable top gap */
    font-size: clamp(24px, 6vw, 32px) !important;
    position: relative;                       /* ensure we can layer it */
    z-index: 2;                               /* sit above any backgrounds */
  }

  /* mild nudge so the title doesn't collide with the black bar */
  .portfolio-page #portcontainer { 
    padding-top: 8px !important; 
  }
}


/* === Portfolio → Mobile: make the title visible === */
@media (max-width: 760px) {
  .portfolio-page .cs-heading {
    color: #111 !important;                 /* was white */
    margin: 24px 0 12px !important;         /* small, reliable gap */
    font-size: clamp(24px, 6vw, 32px) !important;
    line-height: 1.2;
    position: relative;
    z-index: 2;
  }
  /* tiny nudge so it clears the black bar and sits over the white section */
  .portfolio-page #portcontainer { padding-top: 8px !important; }
}


/* Card titles split into big (Lora) + small (Lato) */
.portfolio-page .cs-title {
  display: flex;
  flex-direction: column;   /* stack vertically */
  align-items: center;      /* center horizontally */
  justify-content: center;
  text-align: center;
  margin: 0;
  padding: 12px 0;
  background: #fff;
  border-top: 1px solid #eee;
}

.portfolio-page .cs-title .cs-main {
  font-family: "Lora", serif;   /* keep Lora */
  font-size: 22px;
  font-weight: 800;
  color: #222;
  line-height: 1.2;
}

.portfolio-page .cs-title .cs-sub {
  font-family: "Lato", sans-serif;  /* small text in Lato */
  font-size: 14px;
  font-weight: 600;
  color: #555;
  margin-top: 4px;
}