/* 
  global tokens & base; nav/hero/meta/CTA banner/footer; unified breakpoints; scroll-to-top; case-study TOC+article; project components (personas, stats, standards, validation, solution figures, pain-images, video); portfolio cards (work.html) + filters/grid; related projects
*/

/* === Tokens === */
:root {
  /* colors */
  --border: #d1d1d1;
  --dark-orange: #c2451a;
  --dark-teal: #076282;
  --light-teal: #76bdba;
  --focus-color: var(--text-muted);
  --light-neutral: #f8f7f4;
  --light-orange: #f8a06e;
  --orange: #d84315; 
  --text-muted: #6d6d6d;
  --text-muted-inverted: #bdbbb2;
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-tertiary: #333;
  --white: #fff;

  /* semantic color aliases */
  --color-primary: var(--orange);
  --color-primary-dark: var(--dark-orange);
  --color-primary-light: var(--light-orange);
  --color-accent: var(--dark-teal);
  --color-accent-light: var(--light-teal);

/* 8px spacing scale, in rems (1rem = 16px) */
  --space-0: 0rem;    /* 0px */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.5rem;  /* 24px */
  --space-6: 2rem;    /* 32px */
  --space-7: 3rem;    /* 48px */
  --space-8: 4rem;    /* 64px */
  --space-9: 6rem;    /* 96px */
  --space-10: 8rem;   /* 128px */
  --space-11: 10rem;  /* 160px */

  /* size and spacing */
    --container: 1200px;
    --gutter: var(--space-5);
    --page-padding: var(--space-5);
}

/* === Base & Reset === */
* { box-sizing: border-box; margin: 0; padding: 0; }
*:focus { outline: 1px solid var(--focus-color); outline-offset: 2px; }
body { font-family: 'segoe-ui', sans-serif; font-size: 16px; line-height: 1.7; color: var(--text-primary); background: var(--white); }
h1,h2 { font-weight: 300; }
h3,h4 { font-weight: 400; }
h1,h2,h3,h4 { letter-spacing: -.02em; margin-bottom: var(--space-4); }
h1 { font-size: 2.5rem; line-height: 1.15; }
h2 { font-size: 1.7rem; line-height: 1.25; margin-top: var(--space-7); }
h3 { font-size: 1.25rem; line-height: 1.4; margin-top: var(--space-6); }
h4 { font-size: 1.125rem; line-height: 1.25; }
p { margin-bottom: var(--space-4); color: var(--text-secondary); }
ul,ol { margin: var(--space-2) var(--space-0) var(--space-4) var(--space-4); padding-left: var(--space-1); }
li { margin-bottom: var(--space-2); }
ul ::marker { font-size: .75rem; font-weight: 400; margin-right: var(--space-0); }
ol ::marker { font-size: 1rem; font-weight: 600; }
a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--dark-orange); text-decoration: underline; }
a:active { font-weight: 600; }
abbr { text-decoration: none; text-underline-offset: .25em; cursor: help;}
.sr-only { position: absolute; width: 1px; height: 1px; padding: var(--space-0); margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sr-only:focus { position: fixed;top: var(--space-2); left: var(--space-2); width: auto; height: auto;padding: var(--space-3) var(--space-5); margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--orange); color: var(--white); border-radius: 4px; z-index: 9999; font-weight: 600; text-decoration: none;}

/* === Layout Primitives === */
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--page-padding); padding-right: var(--page-padding); }
.grid-12 { display: grid; grid-template-columns: repeat(12,1fr); column-gap: var(--gutter); }
.prose { max-width: var(--container); margin: 0 auto; padding: var(--space-6) var(--page-padding) var(--space-9); }
.cs-body.grid-12 { display: grid; }

/* Ensure content within prose stays within bounds */
.prose img,
.prose figure,
.prose .research-image,
.prose .project-images,
.prose .standards-grid,
.prose .validation-grid,
.prose .solution-grid,
.prose .pain-images,
.prose .video-container,
.prose .solution-figure {
  max-width: 100%;
  overflow: hidden;
}
.prose img {
  height: auto;
  display: block;
}

/* === Navigation === */
nav { position: sticky; top: 0; background: rgba(255,255,255,.95); backdrop-filter: blur(18px); z-index: 1000; border-bottom: 1px solid var(--border); }
.nav-container { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--page-padding); max-width: var(--container); margin: 0 auto; }
.nav-logo svg, .nav-logo img { width: 40px; height: 40px; }
.nav-links { display: flex; list-style: none; gap: var(--space-7); margin: 0; }
.nav-links a { text-decoration: none; color: var(--text-secondary); position: relative; padding: var(--space-2); font-weight: normal; }
/* .nav-links a:active { font-weight: normal; } */

/* Prevent ::after pseudo-element on all nav links by default (mobile-first) */
.nav-links a::after { display: none; }

/* Active state for current page */
.nav-links a[aria-current="page"],
.nav-links a.active { color: var(--orange); font-weight: normal;}

/* Desktop-only hover effects (not for touch devices) */
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover, .nav-links a:focus { color: var(--orange); }
  .nav-links a::after { display: block; content: ""; position: absolute; left: 50%; bottom: -4px; width: 0; height: 2px; background: var(--orange); transform: translateX(-50%); transition: width .2s ease; }
  .nav-links a:hover::after, .nav-links a:focus::after { width: 100%; }
  
  /* Don't show underline on active page */
  .nav-links a[aria-current="page"]::after,
  .nav-links a.active::after { width: 0; }
}

/* === Logo underline animation === */
.nav-logo { text-decoration: none; display: flex; align-items: center; gap: var(--space-2); color: var(--text-primary); font-weight: normal; font-size: 1.5rem; position: relative; }
.nav-logo a {font-weight: normal;}
.nav-logo:hover, .nav-logo:focus { text-decoration: none; color: var(--orange); }
.nav-logo-text { position: relative; padding: var(--space-2); color: inherit; }
.nav-logo-text:active, .nav-logo-text.active { font-weight: normal; }
.nav-logo-text::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; background: var(--orange); transform: translateX(-50%); transition: width 0.2s ease;
}
.nav-logo:hover .nav-logo-text::after,
.nav-logo:focus .nav-logo-text::after { width: 100%; }

/* === INDEX HERO === */
.hero-home{padding:var(--space-8) 0;background:var(--light-neutral);border-bottom:1px solid var(--border);min-height:70vh;display:flex;align-items:center}
.hero-home-content{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-3);align-items:center}
.hero-home-text h1{font-size:3.4rem;font-weight:400;line-height:1.2;margin-bottom:var(--space-5);padding-top:var(--space-7);color:var(--dark-teal)}
.hero-home-text h1 .highlight{font-size:3.25rem;font-weight:500;color:var(--text-primary)}
.hero-home-subtitle{font-size:1.12rem;color:var(--text-secondary);font-weight:400;margin-bottom:var(--space-6);line-height:1.6}
.hero-home-description{font-size:1rem;color:var(--text-secondary);line-height:1.7;margin-bottom:var(--space-6);max-width:600px}
.hero-home-visual{display:flex;justify-content:center;align-items:center}
.hero-home-image{width:90%;max-width:600px;aspect-ratio:1 / 1;overflow:visible}
.hero-home-image img{width:100%;height:100%;object-fit:contain;display:block}
.hero-rotating-text-container{display:inline-block;position:relative;vertical-align:top}
.hero-rotating-text{font-size:3.4rem;font-weight:400;color:var(--text-primary);display:inline-block;min-width:500px;text-align:left;min-height:1.2em;white-space:nowrap;}
.hero-rotating-text .cursor{display:inline-block;width:1px;height:1em;background-color:currentColor;vertical-align:-0.2em;margin-left:4px;opacity:0.75;animation:blink 1.1s step-end infinite;}

/* === Hero (shared) === */
.hero { background: var(--light-neutral); border-bottom: 1px solid var(--border); }
.hero-main-full { padding: var(--space-8) var(--space-0) var(--space-6); max-width: 900px; }
.hero-inner { row-gap: var(--space-6); }
.hero-main { grid-column: 1 / span 7; padding: var(--space-5) var(--space-0) var(--space-0); }
.eyebrow { color: var(--dark-teal); font-weight: 600; text-transform: uppercase; letter-spacing: .065em; font-size: .95rem; margin-bottom: var(--space-3); }
.hero .eyebrow.case-study { color: var(--orange); }
.hero-main h2, .hero-main-full h2 {font-size: 1.2rem; font-weight: 300; line-height: 1.4; letter-spacing: 0; margin: var(--space-4) var(--space-0) var(--space-0); }
.hero-visual { grid-column: 8 / span 5; align-self: center; padding: var(--space-4) var(--space-0) var(--space-0); }
.hero-visual .img-frame { width: 100%; background: #fff; border-radius: 8px 8px 0 0; box-shadow: 0 8px 24px rgba(0,0,0,.06); overflow: hidden; }
.hero-visual img { width: 100%; height: auto; display: block; }
.subtitle { font-size: 1.25rem; font-weight: 300; line-height: 1.6; max-width: 850px; margin: 0 auto; color: var(--text-secondary);}

/* Home - about section*/
.about-home{ padding: var(--space-5) 0 var(--space-4); background:#fff; }
.about-home-content{ display:grid; grid-template-columns:1fr 1fr; row-gap: var(--space-3); column-gap: var(--space-7); align-items:start; }
.about-home-content h2{ grid-column:1 / -1; font-size:2.65rem; font-weight:300; margin-bottom: var(--space-4); color:var(--text-primary); line-height:1.2; }
.about-home-text p{ font-size:1rem; color:var(--text-secondary); line-height:1.7; margin-bottom: var(--space-4); }
.skills-home-grid{ display:grid; grid-template-columns:1fr 1fr; gap: var(--space-3); }
.skill-home-category h3{ color:var(--dark-teal); font-size:1.25rem; font-weight: 400; margin: var(--space-0) var(--space-0) var(--space-2); text-transform:uppercase; letter-spacing:.05em; }
.skill-home-category ul{ margin-left: var(--space-0); list-style:none; }
.skill-home-category li{ color:var(--text-secondary); margin-bottom: var(--space-1); position:relative; padding-left:1rem; font-size:1rem; }
.skill-home-category li:before{ content:"•"; position:absolute; left:0; color:var(--dark-teal); font-weight:bold; }

/* Home - case studies section*/
.case-studies-home{ padding: var(--space-5) 0 var(--space-4); background:var(--light-neutral); }
.case-study-home-grid{ display:grid; gap: var(--space-8); }                                   
.case-study-home{ background:#fff; border-radius:8px; overflow:hidden; transition:all .3s ease; border:1px solid var(--border); }
.section-home-header{ margin-bottom: var(--space-7); max-width:800px; }
.section-home-header h2{ font-size:2.65rem; font-weight:300; margin: var(--space-7) var(--space-0) var(--space-6); color:var(--text-primary); line-height:1.2; }
.section-home-header p{ font-size:1rem; color:var(--text-secondary); line-height:1.6; }

/* .case-study-home:hover, .case-study-home:focus-within{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.15); border-color:var(--orange); } */
.case-study-home-content{ padding: var(--space-5); }
.case-study-home-meta{ display:flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap:wrap; }
.meta-tag{ background:var(--light-neutral); color:var(--text-secondary); padding: var(--space-2) var(--space-5); border-radius:20px; font-size:.9rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; line-height: 1.1;}
.case-study-home h3{ font-size:1.75rem; font-weight:400; margin: var(--space-3) var(--space-0) var(--space-3); color:var(--text-primary); line-height:1.3; }
.case-study-home p{ color:var(--text-secondary); line-height:1.7; margin-bottom:var(--space-2) }
.case-study-home-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--space-2); margin: var(--space-5) 0; padding: var(--space-3) 0; border-top:1px solid var(--border);}
.case-home-stat{text-align:left;}
.case-home-stat strong{ display:block; font-size:1.65rem; color:var(--dark-teal); font-weight:500; margin-bottom: var(--space-0); }
.case-home-stat span{ font-size:1rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.read-more{color:var(--orange); text-decoration:underline; font-weight:500; display:inline-flex; align-items:center; gap: var(--space-2); font-size:1rem; transition:all .3s ease; padding: var(--space-2) 0;}
.read-more:hover, .read-more:focus{ color:var(--dark-orange); gap: var(--space-4); }

/* === Meta Bar === */
.meta-bar { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.meta-bar__item { grid-column: span 3; text-align: left; padding: var(--space-4) var(--space-0); }
.meta-bar__label { display: block; font-size: .95rem; letter-spacing: .065em; text-transform: uppercase; color: var(--dark-teal); font-weight: 600; margin-bottom: var(--space-1); }
.meta-bar__value { display: block; color: var(--text-secondary); font-size: 1rem; }

/* === Case-study layout (TOC + Article) === */
.cs-body.grid-12 { display: grid; row-gap: var(--space-6); }
.cs-body { column-gap: var(--gutter); }
.toc { grid-column: 1 / span 3; position: sticky; top: 78px; align-self: start; padding: var(--space-4) var(--space-0); border-right: 1px solid var(--border); }
.toc h4 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: var(--space-2); }
.toc ul { list-style: none; margin: var(--space-0); padding-left: var(--space-0); }
.toc li { margin: var(--space-1) var(--space-0); }
.toc a { text-decoration: none; color: var(--text-secondary); font-size: .98rem; font-weight: 400; transition: color .2s ease; }
.toc a:hover, .toc a:focus { color: var(--orange); }
.toc a.active { color: var(--text-secondary); font-weight: 700; }

/* Article column */
.cs-body .prose { grid-column: 4 / span 9; }
.prose.grid { grid-column: 4 / span 9; padding: var(--space-6) var(--space-0) var(--space-9); }

/* === Project Layout & Components === */
.card { background: var(--light-neutral); border: 1px solid var(--border); border-radius: 10px; padding: var(--space-4) var(--space-4); }
.project-layout { display: grid; grid-template-columns: 500px 1fr; gap: var(--gutter); align-items: start; margin: var(--space-6) var(--space-0) var(--space-7); }
.project-sidebar { position: sticky; top: 100px; }
.project-sidebar img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.project-content > section:first-child h2:first-of-type { margin-top: var(--space-0); }
.project-images { margin: var(--space-6) var(--space-0); }
.project-images figure { margin: var(--space-0) var(--space-0) var(--space-6) var(--space-0); }
.project-images img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.project-images figcaption { margin-top: var(--space-3); font-size: .9rem; color: var(--text-muted); text-align: center; }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); margin: var(--space-5) var(--space-0) var(--space-6); }
.stat { border-left: 3px solid var(--dark-teal); padding: var(--space-2) var(--space-0) var(--space-2) var(--space-4); }
.stat h3 { font-weight: 300; font-size: 2.2rem; letter-spacing: -.02em; }
.stat p { text-transform: uppercase; font-size: .9rem; color: var(--text-muted); }
.tools-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); margin: var(--space-6) 0; }
.tool-col ul { list-style: none; margin: var(--space-0); padding: var(--space-0); }
.tool-col li { margin: var(--space-2) var(--space-0); color: var(--text-secondary); }


/* Persona cards */
.personas-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-6); margin: var(--space-6) var(--space-0); }
.persona-card { background: var(--light-neutral); border: 1px solid var(--border); border-radius: 8px; padding: var(--space-5); display: grid; grid-template-columns: 48px 1fr; gap: var(--space-4); align-items: start; }
.persona-icon { width: 48px; height: 48px; grid-column: 1; grid-row: 1; }
.persona-card h4 { margin: var(--space-0); font-size: 1.25rem; font-weight: 500; line-height: 1.3; grid-column: 2; grid-row: 1; align-self: center; }
.persona-card p { margin: var(--space-0); font-size: 1rem; line-height: 1.6; grid-column: 1 / -1; grid-row: 2; }

/* Research images & figure */
.research-image { margin-top: var(--space-5); text-align: center; }
.research-image img { max-width: 100%; height: auto;  }
.research-image figcaption { margin-top: var(--space-2); font-size: .9rem; color: var(--text-muted); }

/* Standards and validation grids */
.standards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; margin-top: var(--space-5); }
.standards-grid ul { margin: 0; padding-left: var(--space-3); }
.standards-grid img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.validation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; margin-top: var(--space-5); }
.validation-grid figcaption { grid-column: 1 / span 2; margin-top: var(--space-3); font-size: .9rem; color: var(--text-muted); text-align: center; }

/* Solution layout */
.solution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin: var(--space-4) var(--space-0) var(--space-5); }
.solution-grid h4 { margin-top: var(--space-0); }
.solution-grid ul { margin: var(--space-0) var(--space-0) var(--space-0) var(--space-5); }
.solution-figure { padding: var(--space-4) var(--space-0) var(--space-4) var(--space-4); margin: var(--space-4) var(--space-0) var(--space-4); background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.06); overflow: hidden; }
.solution-figure img { width: 100%; height: auto; display: block; }
.solution-figure .figcap { padding: var(--space-2) var(--space-3); color: var(--text-muted); font-size: .92rem; }

/* Tech video container */
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin: var(--space-6) var(--space-0); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Pain images grid */
.pain-images { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); margin: var(--space-5) var(--space-0); }
.pain-images figure { margin: var(--space-0); }
.pain-images img { width: 100%; height: 100%; display: block; border: 1px solid var(--border); border-radius: 8px; }
.pain-images figcaption { grid-column: 1 / span 3; text-align: center; font-size: .9rem; color: var(--text-muted); margin-top: var(--space-3); }

/* === Portfolio Card Pattern (work.html) === */
.portfolio-item { background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.08); transition: all .4s ease; border: 1px solid var(--border); cursor: pointer; position: relative; }
.portfolio-item.hide { opacity: 0; transform: scale(0.8); position: absolute; pointer-events: none; }
.portfolio-item:hover, .portfolio-item:focus-within { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0,0,0,.15); border-color: var(--orange); }
.portfolio-image { width: 100%; height: 250px; object-fit: cover; display: block; border-bottom: #c9c9c9 solid 1px; }
.portfolio-content { padding: var(--space-6); }
.portfolio-category { display: inline-block; background: var(--light-neutral); color: var(--dark-teal); padding: var(--space-2) var(--space-4); border-radius: 20px; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--space-4); }
.portfolio-item h3 { font-size: 1.4rem; font-weight: 500; margin: var(--space-0) var(--space-0) var(--space-3); color: var(--text-primary); line-height: 1.3; }
.portfolio-item p { font-size: 1rem; color: var(--text-secondary); line-height: 1.6; margin: var(--space-0) var(--space-0) var(--space-5); }
.portfolio-link { color: var(--orange); text-decoration: none; font-weight: 500; font-size: .95rem; display: inline-flex; align-items: center; gap: var(--space-2); transition: all .3s ease; position: relative; z-index: 10; }
.portfolio-link:hover, .portfolio-link:focus { color: var(--dark-orange); gap: var(--space-3); text-decoration: underline; }

/* Work Page section containers */
.portfolio-section { padding: var(--space-8) var(--space-0) var(--space-4); background: var(--light-neutral); min-height: 100vh; }
.portfolio-header { text-align: center; margin-bottom: var(--space-4); }
.portfolio-header h1 { font-size: 3.25rem; font-weight: 300; margin-bottom: var(--space-5); color: var(--text-primary); }
.subtitle abbr { text-decoration: none !important; }

/* Filter chips */  
.filter-container { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-4); padding: var(--space-6) 0; }
.filter-btn { background: var(--white); color: var(--text-secondary); border: 1px solid var(--border); padding: var(--space-3) var(--space-6); border-radius: 50px; font-size: .95rem; font-weight: 500; cursor: pointer; transition: all .3s ease; text-transform: uppercase; letter-spacing: .05em; }
.filter-btn:hover, .filter-btn:focus { background: var(--light-neutral); border-color: var(--orange); color: var(--orange); transform: translateY(-2px); }
.filter-btn.active { background: var(--orange); color: var(--white); border-color: var(--orange); }

/* Portfolio grid  */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--gutter) + 12px); margin-bottom: var(--space-8); }

/* === About & Contact Pages === */
/* About Hero */
.about-hero,.contact-hero{background:var(--light-neutral);border-bottom:1px solid var(--border);padding:var(--space-8) var(--space-0) var(--space-7);text-align:center}
.about-hero h1,.contact-hero h1{font-size:3.5rem;font-weight:300;line-height:1.1;margin-bottom:var(--space-5);color:var(--text-primary)}

/* About Main Content */
.about-content { padding: var(--space-8) 0; background: var(--white); }
.about-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-8); align-items: start; }
.about-image-section { position: sticky; top: 100px; }
.about-image { width: 100%; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); border: 1px solid var(--border); }
.about-text-section h2 { font-size: 2rem; font-weight: 400; margin: var(--space-6) var(--space-0) var(--space-3); color: var(--text-primary); }
.about-text-section h2:first-child { margin-top: 0; }
.about-text-section p { font-size: 1rem; line-height: 1.7; margin-bottom: var(--space-4); }

/* About Timeline */
.about-timeline-section { padding: var(--space-6) 0 4rem; background: var(--light-neutral); }
.about-timeline-section h2 { text-align: center; font-size: 2.5rem; font-weight: 300; margin: var(--space-5) var(--space-0) var(--space-6); color: var(--text-primary); }
.about-timeline { max-width: 800px; margin: 0 auto; position: relative; padding-left: var(--space-8); }
.about-timeline::before { content: ""; position: absolute; left: 1.75rem; top: 0; bottom: 0; width: 3px; background: var(--dark-teal); }
.about-timeline-item { margin-bottom: var(--space-7); position: relative; }
.about-timeline-item::before{content:"";position:absolute;left:-2.75rem;top:.5rem;width:16px;height:16px;border-radius:50%;background:var(--dark-teal);border:3px solid var(--white);box-shadow:0 0 0 3px var(--dark-teal)}
.about-timeline-item h3 { font-size: 1.5rem; color: var(--dark-teal); margin-bottom: var(--space-2); }
.about-timeline-item p { font-size: 1rem; line-height: 1.7; }

/* About Skills */
.about-skill-category { background: var(--light-neutral); padding: var(--space-5); border-radius: 12px; border: 1px solid var(--border); transition: all .3s ease;}
.about-skills-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-7); }
.about-skills-section { padding: var(--space-8) var(--space-0); background: var(--white); }
.about-skills-section h2 { text-align: center; font-size: 2.5rem; font-weight: 300; margin: var(--space-0) var(--space-0) var(--space-5); color: var(--text-primary); }

.about-skill-category h3 { color: var(--dark-teal); font-size: 1.2rem; font-weight: 600; text-transform:uppercase; letter-spacing:.025em; margin-bottom: var(--space-2); margin-top: 0; }
.skill-home-category h3 { color:var(--dark-teal); font-size: 1.2rem; font-weight: 600; text-transform:uppercase; letter-spacing:.025em; margin: var(--space-0) var(--space-0) var(--space-2); }

.about-skill-category ul { list-style: none; margin-left: var(--space-0);}
.about-skill-category li { position: relative; color: var(--text-secondary); margin-bottom: var(--space-0); padding-left: var(--space-2); text-indent: -0.9rem; }
.about-skill-category li::before { content: "•";  margin-right: var(--space-2); color: var(--dark-teal); font-weight: bold; font-size: 1.2rem; }

/* Contact Section */
.contact-section{padding:var(--space-9) 0;background:var(--white)}
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:var(--space-8);align-items:start}

/* Contact Info Left Side */
.contact-info { padding-top: var(--space-7);}
.contact-info svg { width:2.5rem;height:2.5rem;margin-bottom:var(--space-1);stroke:var(--dark-teal) }
.contact-info h2{font-size:1.25rem;font-weight:300;margin:var(--space-2) var(--space-0) var(--space-4);color:var(--text-primary)}
.contact-info p { font-size:1rem;color:var(--text-primary);line-height:1.6;margin-bottom:var(--space-2) }
.contact-info a { color:var(--orange);text-decoration:none;transition:color .3s ease;unicode-bidi:bidi-override;direction:rtl }
.contact-info a.email-ready { direction:ltr}
.contact-info a:hover,.contact-info a:focus { color:var(--dark-orange);text-decoration:underline }
.contact-note { font-size:1rem;color:var(--text-muted);margin-top:var(--space-4) }

/* Form Styles */
.contact-form-wrapper{background:transparent}
.contact-form-wrapper h2{font-size:1.25rem;font-weight:300;letter-spacing:normal;line-height:1.4;margin: var(--space-0) var(--space-0) var(--space-2);color:var(--text-primary)}
.contact-form-wrapper p{font-size:.9rem;color:var(--text-muted);margin-bottom:var(--space-6)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-bottom:var(--space-6)}
.form-group{margin-bottom:var(--space-6)}
.form-group label{display:block;margin-bottom:var(--space-0);color:var(--text-primary);font-weight:400;font-size:1rem}
.form-group input,.form-group textarea{width:100%;padding:var(--space-2) 0;border:none;border-bottom:2px solid var(--border);background:transparent;color:var(--text-primary);font-size:1rem;font-family:inherit;transition:border-color .3s ease}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-muted)}
.form-group input:focus,.form-group textarea:focus{outline:none;border-bottom-color:var(--orange)}
.form-group textarea{resize:vertical;min-height:100px}

/* Submit Button */
.submit-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);background:var(--orange);color:var(--white);padding:var(--space-4) var(--space-6);border:none;border-radius:4px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;position:relative}
.submit-btn:hover,.submit-btn:focus{background:var(--dark-orange);border-color:var(--dark-orange);transform:translateY(-2px);text-decoration:underline}
.submit-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}

/* Loading Spinner */
.spinner{width:16px;height:16px;border:1px solid #ffffff4d;border-top-color:var(--white);border-radius:50%;animation:spin .6s linear infinite;display:none}
.submit-btn.loading .spinner{display:block}

@keyframes spin {
to{transform:rotate(360deg)}
}

/* Form Feedback Message */
.form-message{margin-top:var(--space-5);padding:var(--space-4) var(--space-5);border-radius:4px;font-size:.95rem;display:none;animation:slideIn .3s ease}
.form-message.show{display:block}
.form-message.success{background:#caf0ee;color:var(--dark-teal);border-left:4px solid var(--dark-teal)}
.form-message.error{background:#ffebee;color:#c62828;border-left:4px solid #f44336}

@keyframes slideIn {
from{opacity:0;transform:translateY(-10px)}
to{opacity:1;transform:translateY(0)}
}

/* Social Links */
.contact-social-links{display:flex;gap:var(--space-5);margin-top:var(--space-6)}
.contact-social-links a{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:var(--orange);color:var(--white);border-radius:50%;transition:all .3s ease;text-decoration:none}
.contact-social-links a:hover,.contact-social-links a:focus{background:var(--dark-orange);transform:translateY(-3px)}
.contact-social-links svg{width:1.25rem;height:1.25rem;fill:currentColor;margin:0;stroke:none}
.location-section{margin-top:var(--space-7)}
.location-section h3{font-size:1rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:var(--space-2)}
.location-section p{font-size:1rem;color:var(--text-primary)}
.location-section p em{font-size:1rem;color:var(--text-muted)}

/* === Related Projects card pattern === */
.related-work { background: var(--light-neutral); padding: var(--space-7) 0; margin-top: var(--space-5); }
.related-work h2 { text-align: center; font-size: 2.25rem; margin: 0 0 var(--space-6); }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: calc(var(--gutter) + 12px); }

/* === CTA banner === */
.cta-band { background: var(--light-neutral); text-align: center; padding: var(--space-6) var(--space-0) var(--space-6); }
.cta-heading { font-size: 1.5rem; font-weight: 500; color: var(--dark-teal); letter-spacing: .05rem; line-height: 1.25; margin: 0 0 var(--space-4); }
.cta-button{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--dark-orange);color:#fff;padding:var(--space-4) var(--space-6);border-radius:4px;text-decoration:none;font-weight:600;font-size:.9rem;transition:all .3s ease;letter-spacing:.015em;}
.cta-button:hover,.cta-button:focus{color:#fff;background:var(--orange);border-color:var(--orange);transform:translateY(-2px);text-decoration:underline}
.cta-secondary-button{display:inline-flex;align-items:center;gap:var(--space-2);background:transparent;color:var(--dark-orange);padding:var(--space-4) var(--space-6);border-radius:4px;text-decoration:none;font-weight:600;font-size:.9rem;transition:all .3s ease;letter-spacing:.02em;border:1px solid var(--dark-orange)}
.cta-secondary-button:hover,.cta-secondary-button:focus{ color:#fff; background:var(--dark-orange); border-color:var(--dark-orange); transform:translateY(-2px); text-decoration: underline;}

/* === Footer === */
footer { padding: var(--space-7) 0; border-top: 1px solid var(--border); background: #2D2D2D; }
.footer-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: var(--gutter); align-items: start; }
.footer-left { grid-column: 1 / span 6; }
.footer-right { grid-column: 7 / span 6; text-align: right; }
.footer-nav { list-style: none; display: flex; gap: var(--space-6); justify-content: flex-start; margin: 0 0 var(--space-4) 0; padding: 0; }
.footer-nav a { text-decoration: none; color: var(--light-orange); }
.footer-nav a:hover, .footer-nav a:focus { color: var(--orange); text-decoration: underline; }
.footer-cta { font-size: 1.1rem; color: var(--light-neutral); margin: var(--space-1) 0 var(--space-2); }
.footer-email a { color: var(--light-orange); text-decoration: none; margin: var(--space-4) var(--space-0) var(--space-2); }
.footer-email a:hover, .footer-email a:focus { color: var(--dark-orange); text-decoration: underline; }
.copyright { font-size: .85rem; color: var(--text-muted-inverted); margin-top: var(--space-4); }

/* === Scroll to Top Button === */
.scroll-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 48px; height: 48px; background: var(--orange); color: var(--white); border: none; border-radius: 50%; cursor: pointer; opacity: 0; visibility: hidden; transition: all .3s ease; box-shadow: 0 4px 12px rgba(216,67,21,.3); z-index: 999; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; }
.scroll-to-top.visible { opacity: 1; visibility: visible; }
.scroll-to-top:hover, .scroll-to-top:focus { background: var(--dark-orange); transform: translateY(-4px); box-shadow: 0 6px 16px rgba(216,67,21,.4); }
.scroll-to-top svg { width: 24px; height: 24px; fill: currentColor; }


/* === Breakpoints (UNIFIED) === */
@media (max-width: 480px) {
  body { font-size: 16px; }
  main { overflow-x: hidden; }
  section h2 { margin: var(--space-5) 0 var(--space-3); }
  section h3 { margin: var(--space-2) 0 var(--space-3); }
  .about-hero h1,.contact-hero h1 { font-size: 2.4rem; }
  .about-hero .subtitle,.contact-hero .subtitle { font-size: 1.1rem; }
  .about-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .about-image-section { position: static; }
  .about-skills-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .about-timeline { padding-left: var(--space-6); }
  .about-timeline-item::before { left: -2.5rem; }
  .container { overflow-x: hidden; }
  .cs-body { grid-template-columns: repeat(12,1fr); }
  .cs-body .prose { grid-column: 1 / span 12; }
  .cta-band { padding: var(--space-3) var(--space-0) var(--space-6); }
  .cta-heading { font-size: 1.4rem; letter-spacing: .02rem; line-height: 1.25; }
  .filter-container { gap: var(--space-2); padding: var(--space-4) 0; }
  .filter-btn { padding: var(--space-2) var(--space-5); font-size: .8rem; }
  .footer-left { grid-column: 1 / span 12; }
  .footer-right { grid-column: 1 / span 12; text-align: left; margin-top: var(--space-4); }
  .hero-home-image{ max-width: 320px; }
  .hero-home-text h1{ font-size: 2rem; }
  .hero-home-subtitle{ font-size: 1.05rem; }
  .hero-home-description{font-size: 0.95rem; }
  .hero-inner { grid-template-columns: repeat(12,1fr); }
  .hero-main { grid-column: 1 / span 12; padding: var(--space-5) 0 var(--space-4); }
  .hero-rotating-text{ min-width: 200px; font-size: 2rem;}
  .hero-visual { grid-column: 1 / span 12; padding: var(--space-0);}
  .meta-bar .grid-12 { grid-template-columns: 1 fr;}
  .meta-bar__item { grid-column: 1 / -1; padding-left: var(--space-4); padding-right: var(--space-4); }
  .meta-bar__label { margin-bottom: var(--space-0); }
  .nav-container { padding: var(--space-4) 15px; }
  .nav-logo { font-size: 1.1rem; gap: var(--space-1); }
  .nav-logo svg, .nav-logo img { width: 28px; height: 28px; }
  .hero-main-full { padding: var(--space-7) 0 var(--space-6); }
  .pain-images { grid-template-columns: 1fr; }
  .pain-images figcaption { grid-column: 1 / span 1; }
  .personas-grid { grid-template-columns: 1fr; }
  .portfolio-content { padding: var(--space-5); }
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-header h1 { font-size: 2rem; }
  .portfolio-header p { font-size: 1rem; }
  .portfolio-image { height: 220px; }
  .portfolio-section { padding: var(--space-10) 0 var(--space-4); }
  .prose { max-width: 100%; padding: var(--space-4) var(--page-padding) var(--space-4); }
  .prose.grid { grid-column: 1 / span 12; padding: var(--space-4) 0 var(--space-7); }
  .project-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .project-sidebar { position: static; }
  .related-grid { grid-template-columns: 1fr; }
  .related-work { padding: var(--space-8) 0 var(--space-5); margin-top: var(--space-4); }
  .stat-grid { grid-template-columns: 1fr; }
  /* .toc { display: none; } */
  .tools-grid { grid-template-columns: 1fr; }
  .solution-grid { grid-template-columns: 1fr; }
  .standards-grid { grid-template-columns: 1fr; }
  .stat h3 { margin: var(--space-2) var(--space-0); }
  .validation-grid { grid-template-columns: 1fr; }
  .validation-grid figcaption { grid-column: 1 / span 1; }
}

@media (min-width: 481px) and (max-width: 768px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .about-image-section { position: static; }
  .about-image { width: 65%; }
  .about-skills-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .cs-body { grid-template-columns: repeat(12,1fr); }
  .cs-body .prose { grid-column: 1 / span 12; }
  .filter-container { gap: var(--space-3); padding: var(--space-6) 0; }
  .filter-btn { padding: var(--space-3) var(--space-5); font-size: .85rem; }
  .footer-left { grid-column: 1 / span 12; }
  .footer-right { grid-column: 1 / span 12; text-align: left; margin-top: var(--space-4); }
  .hero-main { grid-column: 1 / span 12; padding: var(--space-8) 0 var(--space-6); }
  .hero-main-full { padding: var(--space-8) 0 var(--space-7); }
  .hero-inner { grid-template-columns: repeat(12,1fr); }
  .hero-visual { grid-column: 1 / span 12; }
  .meta-bar .grid-12 { grid-template-columns: repeat(2, 1fr); }
  .meta-bar__item { grid-column: span 1; }
  .meta-bar__label { margin-bottom: var(--space-0); }
  .nav-logo { font-size: 1.25rem; }
  .portfolio-section { padding: var(--space-9) 0 var(--space-8); }
  .portfolio-header h1 { font-size: 2.2rem; }
  .portfolio-header p { font-size: 1rem; }
  .portfolio-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .portfolio-content { padding: var(--space-6); }
  .project-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .project-sidebar { position: static; }
  .prose.grid { grid-column: 1 / span 12; }
  .related-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  /* .toc { display: none; } */
  .tools-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --page-padding: 15px; --gutter: var(--space-3);}
  .cs-body { display: block; }
  .contact-form-wrapper { order: 1; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .contact-info { order: 2; padding-top: var(--space-0); }
  .contact-section { padding: var(--space-8) 0;}
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .toc { display: none; }  /* TOC hidden */
}

@media (min-width: 769px) and (max-width: 1024px) {
  .about-skills-grid { grid-template-columns: repeat(2,1fr); gap: var(--space-6); }
  .cs-body { grid-template-columns: repeat(12,1fr); }
  .cs-body .prose { grid-column: 4 / span 9; }
  .hero-inner { grid-template-columns: repeat(12,1fr); }
  .hero-main { grid-column: 1 / span 7; }
  .hero-visual { grid-column: 8 / span 5; }
  .nav-logo { font-size: 1.35rem; }
  .portfolio-grid { grid-template-columns: repeat(2,1fr); }
  .project-layout { grid-template-columns: 280px 1fr; }
  .prose.grid { grid-column: 4 / span 9; }
  .related-grid { grid-template-columns: repeat(2,1fr); }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .toc { grid-column: 1 / span 3; position: static; border-right: none; padding: 0; }
  .tools-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 1024px) {
  .contact-grid { gap: var(--space-8); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
    :root { --orange: #d84315; --text-secondary: #000000; --border: #000000; }
  }

  /* Adjusts abbr styles based on hover capability */
@media (hover: none) {
  abbr[title] { -webkit-text-decoration: none; text-decoration: none;}
}
@media (hover: hover) {
  abbr[title] { text-decoration: none; cursor: help; text-decoration-skip-ink: none;
  }
}

/* Mobile menu button & nav responsive */
.mobile-menu-btn { display:none; background:none; border:none; font-size:2rem; color:var(--text-primary); cursor:pointer; padding: var(--space-2) var(--space-3); border-radius:3px; line-height: 1; }
.mobile-menu-btn:hover, .mobile-menu-btn:focus { background: var(--light-neutral); }

@media (max-width: 768px){
  .mobile-menu-btn{display:block; }
  .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; gap: var(--space-0); padding: var(--space-6); box-shadow:0 4px 8px rgba(0,0,0,.1);}
  .nav-links.mobile-open{display:flex;}
  .nav-links li { margin-bottom: var(--space-1);padding-bottom: var(--space-5); }
  .nav-links a{ padding: var(--space-1) 0; width:100%; text-align:center; }
  .nav-links a:focus { outline: 1px solid var(--focus-color); outline-offset: -2px; }
}

/* Home typing animation */
  @keyframes blink {50% {opacity: 0;}}

/* Responsive adjustments for home */
@media (max-width:1024px){
.about-home-content{ grid-template-columns:1fr; gap: var(--space-5); }
.case-study-home-stats{ grid-template-columns:repeat(2,1fr); }
.hero-home-content{ grid-template-columns: 1fr; gap: var(--space-4); }
.hero-home-visual{order:-1}
.hero-home-text{order:1}
.hero-home-image{max-width:450px;margin:0 auto}
.hero-home-text h1{font-size:3.2rem;padding-top:0}
.hero-rotating-text{min-width:360px;font-size:3.2rem}
 }

@media (max-width:768px){
.case-study-home-content{ padding: var(--space-7); }
.case-study-home-stats{ grid-template-columns:1fr; gap: var(--space-5); }
.cta-button,.cta-secondary-button{gap:var(--space-1);padding:var(--space-3) var(--space-5)}
.hero-home{padding:var(--space-6) 0;min-height:auto}
.hero-home-content{gap:var(--space-4)}
.hero-home-image{max-width:380px}
.hero-home-subtitle{font-size:1.15rem}
.hero-home-text h1{font-size:2rem; margin-bottom: var(--space-3);}
.hero-rotating-text{min-width:300px;font-size:2rem;}
.section-home-header h2, .about-home-content h2{ font-size:2.2rem; }
.skills-home-grid{ grid-template-columns:1fr; gap: var(--space-6); }
}