*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Remove default focus styles */
*:focus {
    outline: none !important;
}

/* Show focus only for keyboard navigation.
   Two-tone ring: the dark outline reads on light backgrounds, the light halo
   reads on the dark footer and the orange process band. Meets SC 1.4.11
   (non-text contrast) everywhere on the site. */
*:focus-visible {
    outline: 3px solid #1c1c1c !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(252, 252, 253, 0.95);
    border-radius: 2px;
}
* {
    -webkit-tap-highlight-color: transparent;
}

/* ── ACCESSIBILITY UTILITIES ── */

/* Visually hidden, still announced by screen readers. */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Skip link — off screen until it receives keyboard focus. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
}
.skip-link:focus {
    position: fixed;
    left: 16px;
    top: 16px;
    width: auto;
    height: auto;
    padding: 12px 24px;
    background: var(--near-black);
    color: var(--white);
    font-family: var(--font-b);
    font-weight: 500;
    font-size: 16px;
    border-radius: 8px;
}

/* Main landmark reproduces the flex context the sections had on <body>,
   so wrapping them changes nothing visually. */
main {
    display: flex;
    flex-direction: column;
    width: 100%;
}
/* Stops the sticky nav from covering the target after a skip-link jump. */
#main-content { scroll-margin-top: 120px; }
#main-content:focus { outline: none; }

/* Without JS the .reveal sections would never receive .visible and would stay
   invisible. This guarantees the content is always readable. */
.no-js .reveal { opacity: 1; transform: none; }

/* ── REDUCED MOTION ──
   Honours prefers-reduced-motion for the marquee, the drifting wave, the
   floating gradient and the scroll reveals. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .brands-track,
    .drift,
    .hero-gradient { animation: none !important; }

    .reveal { opacity: 1 !important; transform: none !important; }
}


:root {
    --white: #fcfcfd;
    --transparent: #fdfdfd00;
    --near-black: #1c1c1c;
    --orange: #ff4728;
    --orange-pale: #fff0ed;
    --grey-mid: #666;
    --grey-light: #e0e0e0;
    --grey-label: #858585;
    --text-body: rgba(28,28,28,0.7);
    --font-h: 'Hanken Grotesk', sans-serif;
    --font-b: 'Inter', sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-b); background: var(--white); color: var(--near-black); min-height: 100vh; display: flex; flex-direction: column; }

a { text-decoration: none; color: inherit; }


/* General Animation Styling */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reverse-container{
  background-color: var(--near-black);
}
.orange-container{background:var(--orange)}
.dark-container{background:var(--near-black)}

/* ── NAV ── */
nav {
    background: rgb(253 253 253 / 50%);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--grey-light);
    height: 98px;
    position: sticky;
    top: -1px;
    z-index: 100;
}
nav.reverse {
  background: rgb(253 253 253 / 82%);
}
#nav{
    transition: background-color .4s ease; filter:none;
}
.nav-inner {
    max-width: 1440px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-left { display: flex; align-items: center; gap: 64px; }
.nav-logo {
    font-family: var(--font-h);
    font-weight: 500;
    font-size: 30.815px;
    letter-spacing: -0.6163px;
    white-space: nowrap;
}
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.32px;
    color: #494949;
    transition: color 0.2s;
}
.nav-links a:hover { color: var(--near-black); text-decoration: underline; }
.nav-download { display: flex; align-items: center; gap: 8px; justify-content: end;}
.nav-download svg { flex-shrink: 0; }
.nav-cta {
    border: 1px solid var(--near-black);
    border-radius: 5px;
    padding: 10px 30px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.32px;
    color: #2b2b2b;
    transition: background 0.2s, color 0.2s;
}
.nav-cta:hover { background: var(--near-black); color: var(--white); }
/* Now a real <button> — these resets keep it looking exactly like the old div. */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    width: 32px;
    height: 32px;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: 0;
    -webkit-appearance: none;
    appearance: none;
}

.nav-hamburger span {
    display: block;
    width: 24px;
    height: 1.6px;
    background: var(--near-black);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}

/* Close (X) state */
.nav-hamburger.active {
    gap: 0;
}

.nav-hamburger.active span:first-child {
    transform: translateY(0.75px) rotate(45deg);
}

.nav-hamburger.active span:last-child {
    transform: translateY(-0.75px) rotate(-45deg);
}
/* ── HERO ── */
#hero {
    background: var(--transparent);
    position: relative;
    overflow: hidden;
    padding: 104px;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}
.hero-gradient-container{
    position: absolute;
    width: 100%;
    height: 1020px;
    overflow: hidden;
    left: 0;
    top: 0; /* explicit, so moving it out of the <main> flow cannot shift it */
    z-index: -100;
}
.hero-gradient {
    position: absolute;
    right: 0;
    top: 0;
    width: 850px;
    height: 650px;
    pointer-events: none;
    filter: blur(15px);
    background: radial-gradient(
    ellipse at center,
    rgba(255, 71, 40, 0.30) 0%,
    rgba(255, 255, 255, 0) 70%
    );

    animation: floatGradient 12s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes floatGradient {
    0%   { transform: translate(0, 0) scale(1); }
    20%  { transform: translate(-400px, 10px) scale(1.03); }
    40%  { transform: translate(-10px, 150px) scale(1.07); }
    60%  { transform: translate(200px, 25px) scale(1.04); }
    80%  { transform: translate(35px, 0px) scale(1.06); }
    100% { transform: translate(10px, -15px) scale(1); }
}

.hero-location {
    display: flex; align-items: center; gap: 8px;
    font-size: 18px; color: var(--grey-mid);
    line-height: 29px;
    margin-bottom: 16px;
}
.hero-dot { width: 5px; height: 5px; background: var(--orange); border-radius: 50%; flex-shrink: 0; }
/* The headline is an <h1> whose lines are <span>s; the p selectors are kept so
   other pages using the old markup are unaffected. */
.hero-headline { margin-bottom: 32px; }
.hero-headline p,
.hero-headline span {
    display: block;
    font-family: var(--font-h);
    font-weight: 400;
    font-size: 3.5rem;
    line-height: 1.23;
    letter-spacing: -1.1328px;
    color: var(--near-black);
}
.hero-headline p.accent,
.hero-headline span.accent { font-weight: 700; color: var(--orange); }
.hero-body {
    font-size: 18px;
    line-height: 33px;
    color: var(--text-body);
    max-width: 597px;
    margin-bottom: 32px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; flex-direction: row; width:fit-content;}
.btn-outline-orange {
    border: 1px solid var(--orange);
    border-radius: 8px;
    padding: 5px 24px;
    height: 54px;
    justify-content: center;;
    display: flex; align-items: center;
    font-weight: 500;
    font-size: 18px;
    color: var(--orange);
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.btn-outline-orange:hover { background: var(--orange); color: #fff; }
.btn-text-orange {
    height: 54px;
    display: flex; align-items: center;
    padding: 5px 24px;
    font-weight: 500;
    font-size: 18px;
    color: var(--orange);
}
.btn-text-orange:hover { text-decoration: underline; }

/* ── STATS ── */
.stats-bar {
    border-top: 1px solid var(--grey-light);
    border-bottom: 1px solid var(--grey-light);
    background: var(--transparent);
    display: flex;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}
.stat-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 135px;
    border-left: 1px solid var(--grey-light);
}
.stat-cell:first-child { border-left: none; }
.stat-inner { display: flex; flex-direction: column; gap: 8px; }
.stat-value {
    font-family: var(--font-h);
    font-weight: 700;
    font-size: 40px;
    color: var(--near-black);
    line-height: 1;
}
.stat-label { font-size: 16px; color: var(--text-body); line-height: 22px; }

/* ── BRANDS ── */
.brands-bar {
    border-top: 1px solid var(--grey-light);
    padding: 24px;
    background: var(--transparent);
    overflow: hidden;
    width: 100%;
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
}

.brands-track {
    display: flex;
    width: max-content;
    opacity: 40%;
    animation: scrollBrands 60s linear infinite;
}

.brand-cell {
    flex-shrink: 0;
    width: 320px;
    height: 67.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
}

/* Size is now held in CSS rather than an invalid width="100px" attribute. */
.brand-cell img {
    width: 100px;
    height: auto;
    max-width: 100%;
}

/* SC 2.2.2 — gives people a way to stop the moving content. */
.brands-bar:hover .brands-track,
.brands-bar:focus-within .brands-track {
    animation-play-state: paused;
}
@keyframes scrollBrands {
    from {
    transform: translateX(0);
    }

    to {
    transform: translateX(-50%);
    }
}

/* ── FEATURED ── */
.featured-container {
  background-color: var(--near-black);
}
.featured {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 104px;
}
.featured.work .case-link{
  padding:16px 24px;
  width:fit-content;
  border-radius: 10px;
  background-color:var(--near-black);
  color:var(--white);
}
.featured.reverse {
  background-color: var(--near-black);
  padding: 104px;
}
.featured.reverse.orange {
  background-color: var(--orange);
}
.featured.reverse .featured-title, .featured.reverse .stat-value {
  color:var(--white);
}
.featured.reverse .featured-category, .featured.reverse .featured-body, .featured.reverse .stat-label{
  color:var(--grey-label);
}

.featured.reverse .case-link{
  background-color:var(--white);
  color:var(--near-black);
}

.featured.reverse.orange .featured-title, .featured.reverse.orange .stat-value {
  color:var(--white);
}
.featured.reverse.orange .featured-category, .featured.reverse.orange .featured-body, .featured.reverse.orange .stat-label{
  color:var(--orange-pale);
}
.featured.reverse.orange .case-link{
  background-color:var(--near-black);
  color:var(--orange-pale);
}

.featured-inner {
    display: flex;
    align-items: center;
    gap: 78px;
}
.featured-image {
    flex-shrink: 0;
    width: 535px;
    height: 565px;
    background: transparent;
    border-radius: 10px;
    overflow:hidden;
}
.featured-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured-info { display: flex; flex-direction: column; gap: 16px; }
.featured-tags { display: flex; align-items: center; gap: 24px; }
.tag-featured {
    background: var(--orange-pale);
    color: var(--orange);
    font-size: 12px;
    border-radius: 100px;
    padding: 2px 16px;
    line-height: 22px;
}
.featured-category { font-size: 18px; color: var(--grey-mid); }
.featured-title {
    font-family: var(--font-h);
    font-weight: 400;
    font-size: 3rem;
    line-height: 1.25;
    letter-spacing: -1.12px;
    color: var(--near-black);
}
.featured-body {
    font-size: 18px;
    line-height: 33px;
    color: var(--text-body);
    max-width: 597px;
}
.featured-stats { display: flex; gap: 0 32px; flex-wrap: wrap; }
.featured-outcome h3 {font-family: var(--font-b); font-weight: 400; color:var(--near-black)}
.featured-outcome ul {list-style: none;}
.featured-outcome li {margin-top:12px; color:var(--grey-mid)}
.featured-outcome span{margin-right:4px; color:var(--orange)}
.case-link {
    font-weight: 500;
    padding:8px 0;
    font-size: 18px;
    color: var(--orange);
}
.case-link:hover { text-decoration: underline; }

/* ── MORE WORK ── */
#more-work {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 104px;
}
.section-label {
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 32px;
}
.cards-grid {
    display: grid;
    gap: 24px;
}
.work-card {
    flex: 1;
    min-width: 0;
    background: var(--white);
    border: 1px solid var(--grey-light);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.2s;
}
.work-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.card-thumb {
    background: var(--near-black);
    height: 207px;
    width: 100%;
}
.card-body { padding: 24px; display: flex; flex-direction: column; gap: 4px; }
.card-category { font-size: 18px; color: var(--grey-label); line-height: 25px; }
.card-title { font-size: 18px; color: var(--near-black); line-height: 25px; }

/* ── DESIGN PROCESS ── */
#process {
    background: var(--orange);
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 104px;
    max-width: 1440px;
    margin: 0 auto;
}
.process-wave {
    position: absolute;
    left: -132px; top: 204px;
    pointer-events: none;
    opacity: 0.5;
}
.drift { animation: drift 9s linear infinite; }
@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-1424px); }
}
#process-wave {position:absolute;}
.process-arrow {
    position: absolute;
    left: 64px; top: 79px;
    pointer-events: none;
}
.process-heading {
    font-family: var(--font-h);
    font-weight: 500;
    font-size: clamp(40px, 5.5vw, 76.637px);
    line-height: 1.17;
    letter-spacing: -1.5327px;
    color: #ffe0db;
    margin-bottom: 64px;
    position: relative;
}
/* An <ol> — the visible 01.–05. numbering is the content, so the native
   markers are suppressed and role="list" restores semantics in Safari. */
.process-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
    color: #ffe0db;
    position: relative;
    list-style: none;
    padding-left: 0;
}
.process-step { display: flex; flex-direction: column; gap: 16px; }
.step-num { font-size: 18px; line-height: 25px; }
.step-title {
    font-family: var(--font-h);
    font-weight: 500;
    font-size: 32px;
    letter-spacing: -0.64px;
    line-height: 1.2;
}
.step-desc { font-size: 18px; line-height: 32px; }

/* ── CTA ── */
#cta {
    background: var(--white);
    padding: 152px 0 48px;
    max-width: 1440px;
    margin: 0 auto;
}
.cta-text-wrap { padding: 0 104px; }
.cta-heading {
    font-family: var(--font-h);
    font-weight: 400;
    font-size: 15rem;
    line-height: 0.95;
    letter-spacing: -5px;
    color: var(--near-black);
}
.cta-actions {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
    padding: 48px 104px 0;
    flex-wrap: wrap;
}
.btn-outline-dark {
    border: 1px solid #222;
    border-radius: 8px;
    padding: 5px 24px;
    height: 54px;
    display: flex; align-items: center;
    font-size: 18px;
    color: #000;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.btn-outline-dark:hover { background: #222; color: var(--white); }
.btn-solid-dark {
    background: #222;
    border-radius: 8px;
    padding: 5px 24px;
    height: 54px;
    display: flex; align-items: center;
    font-size: 18px;
    color: var(--white);
    transition: background 0.2s;
    white-space: nowrap;
}
.btn-solid-dark:hover { background: var(--orange); }

/* ── FOOTER ── */
footer {
    background: var(--near-black);
    width: 100%;
}
.footer-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 104px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer-copy {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.32px;
    color: var(--white);
}
.footer-socials { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; }
.footer-socials li { display: flex; }

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  color: #fcfcfd;
  background: #ffffff08;

  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;

  text-decoration: none;
}

.social-icon:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.25);
}

.social-icon:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* ── PROJECT / CASE STUDY PAGE ── */

/* The page wrapper is .reverse-container (dark). A case study reads on light,
   so neutralise the wrapper here — the footer keeps its own dark background,
   and this stops black gutters appearing around #cta above 1440px. */
.reverse-container:has(.case-study) {
    background: var(--white);
}

.case-study {
    background: var(--white);
}

/* Layout containers — matches the 1440 / 104px rhythm used site-wide */
.case-study .container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 104px;
}
.case-study .container.section-narrow {
    max-width: 1068px;
}

.cs-section {
    padding: 104px 0;
    border-top: 1px solid var(--grey-light);
}

/* ── Case study typography ── */
.case-study h1 {
    font-family: var(--font-h);
    font-weight: 400;
    font-size: clamp(40px, 5vw, 76.637px);
    line-height: 1.17;
    letter-spacing: -1.5327px;
    color: var(--near-black);
    margin-bottom: 24px;
}
.case-study h2 {
    font-family: var(--font-h);
    font-weight: 400;
    font-size: clamp(32px, 4vw, 56.64px);
    line-height: 1.24;
    letter-spacing: -1.1328px;
    color: var(--near-black);
    margin-bottom: 32px;
    max-width: 860px;
}
.case-study h3 {
    font-family: var(--font-h);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: -0.64px;
    color: var(--near-black);
    margin: 64px 0 16px;
}
.case-study p {
    font-family: var(--font-b);
    font-size: 18px;
    line-height: 33px;
    color: var(--text-body);
    max-width: 700px;
}
.case-study p + p { margin-top: 24px; }

/* Section eyebrow — reuses .section-label, scoped so #more-work is untouched */
.case-study .section-label {
    display: block;
    font-family: var(--font-b);
    font-weight: 700;
    font-size: 18px;
    line-height: 44px;
    letter-spacing: -0.2px;
    color: var(--orange);
    margin-bottom: 8px;
}

/* ── Lists ── */
.case-study ul,
.case-study ol {
    list-style: none;
    padding-left: 0;
    margin: 24px 0 0;
    max-width: 700px;
    counter-reset: cs-counter;
}
.case-study li {
    position: relative;
    padding-left: 32px;
    padding-bottom: 12px;
    font-size: 18px;
    line-height: 33px;
    color: var(--text-body);
}
.case-study ul li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
}
.case-study ol li { counter-increment: cs-counter; }
.case-study ol li::before {
    content: counter(cs-counter) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 500;
    color: var(--orange);
}

/* ── Hero ── */
.cs-hero { padding: 104px 0; }
.cs-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 78px;
}
.cs-hero-content { min-width: 0; }

.cs-category {
    display: inline-block;
    background: var(--orange-pale);
    color: var(--orange);
    font-size: 12px;
    line-height: 22px;
    border-radius: 100px;
    padding: 2px 16px;
    margin-bottom: 24px;
}

.cs-company {
    font-size: 18px;
    line-height: 33px;
    color: var(--grey-mid);
    margin-bottom: 32px;
}
.cs-company strong {
    font-weight: 500;
    color: var(--near-black);
}

.cs-meta {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--grey-light);
    max-width: 597px;
}
.cs-meta p {
    padding: 16px 0;
    border-bottom: 1px solid var(--grey-light);
    line-height: 30px;
}
.cs-meta p + p { margin-top: 0; }
.cs-meta strong {
    display: block;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.32px;
    color: var(--near-black);
}

/* .cs-meta is now a <dl> — each label/value pair sits in a row wrapper so the
   rules above keep producing the identical layout. */
.cs-meta > div {
    padding: 16px 0;
    border-bottom: 1px solid var(--grey-light);
    line-height: 30px;
}
.cs-meta dd {
    margin: 0;
    font-family: var(--font-b);
    font-size: 18px;
    line-height: 30px;
    color: var(--text-body);
}

/* ── Image placeholders ── */
.cs-hero-image,
.section-image,
.feature-image {
    background: transparent;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-b);
    font-size: 16px;
    color: var(--grey-label);
    overflow: hidden;
}
.cs-hero-image { height: 565px; }
.section-image { height: 420px; margin-top: 48px; }
.feature-image { height: 340px; }

.cs-hero-image img,
.section-image img,
.feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Callout ── */
.callout {
    margin: 48px 0;
    padding: 32px;
    max-width: 860px;
    background: var(--orange-pale);
    border-left: 3px solid var(--orange);
    border-radius: 10px;
    font-size: 22px;
    line-height: 36px;
    color: var(--near-black);
}
.callout strong {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-h);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.2px;
    color: var(--orange);
}

/* ── Feature blocks ── */
.feature-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
    margin-top: 48px;
}
.feature-block.reverse .feature-image { order: -1; }
.feature-block h3 { margin: 0 0 12px; }
.feature-block p { max-width: none; }

/* ── Impact ── */
.impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}

/* The impact cards are now list items. These overrides stop the generic
   .case-study ul / li rules (bullet markers, 700px cap, list padding) from
   applying to them — the rendered result is unchanged. */
.case-study ul.impact-grid {
    margin: 48px 0 0;
    max-width: none;
    padding-left: 0;
    list-style: none;
}
.case-study .impact-card {
    padding: 32px;
    font-size: inherit;
    line-height: normal;
    color: inherit;
}
.case-study ul.impact-grid > li::before { content: none; }
.impact-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 32px;
    background: var(--white);
    border: 1px solid var(--grey-light);
    border-radius: 10px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.impact-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.impact-card span {
    font-family: var(--font-h);
    font-weight: 700;
    font-size: 48px;
    line-height: 1;
    color: var(--orange);
}
.impact-card h3 {
    margin: 0;
    font-size: 24px;
    letter-spacing: -0.48px;
}

/* ── RESPONSIVE ── */
@media (max-width: 1460px) {
    .nav-inner, #hero, .featured,.featured.reverse, #more-work, .cta-text-wrap, .cta-actions, .footer-inner { padding-left: 48px; padding-right: 48px; }
    #process { padding-left: 48px; padding-right: 48px; }
    .featured-inner { gap: 48px; }
    .featured-image { width: 420px; height: 440px; }

    .case-study .container { padding-left: 48px; padding-right: 48px; }
    .cs-hero-grid { gap: 48px; }
    .cs-hero-image { height: 460px; }
    .section-image { height: 340px; }
}

@media (max-width: 860px) {
    nav { height: 68px; }
    #nav.open{background-color: var(--white);}
    .nav-inner { padding: 0 24px; }
    /* visibility:hidden is what removes the collapsed links from the tab order
       and from screen readers — max-height:0 alone leaves them focusable but
       invisible. It is delayed on close so the slide-up still animates. */
    .nav-links {position: absolute;top: 68px; left: 0;
    right: 0; display: flex; flex-direction: column; align-items: end; background: var(--white); border-bottom: 1px solid var(--grey-light); padding: 0 24px; max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 0.3s ease, padding 0.3s ease, visibility 0s linear 0.3s; gap:0;text-align: end;}
    .nav-links.open {max-height: 500px; padding: 24px; visibility: visible; transition: max-height 0.3s ease, padding 0.3s ease, visibility 0s linear 0s;}
    .nav-links.open a{padding:24px 0; width: 100%; border-top: solid 1px var(--grey-light); border-bottom: solid 1px var(--grey-light);}
    .nav-links.open a:first-child, .nav-links.open a:last-child{border: none;}
    .nav-links.open a:first-child {padding-top: 0;  border: none;}
    .nav-links.open a:last-child{padding-bottom: 0; border: none;}
    .nav-hamburger { display: flex; }
    .nav-cta{display: none;}
    .nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 99;}
    .nav-overlay.open {opacity: 1; visibility: visible;}

    #hero { padding: 36px 24px; }
    .hero-gradient { width: 300px; height: 240px; }
    .hero-actions {flex-direction: column;}

    .stats-bar { flex-direction: column; }
    .stat-inner {flex-direction: column; padding: 24px 0;}
    .stat-cell { padding-left: 24px; justify-content: left; height: 80px; border-left: none; border-top: 1px solid var(--grey-light); }
    .stat-cell:first-child { border-top: none; }

    .brands-bar { flex-wrap: wrap; }
    .brand-cell { min-width: calc(100% / 100); height: 48px; }
    .brands-track{animation: scrollBrands 60s linear infinite;}

    .process-arrow{left:-4px; top:29px;}

    .featured, .featured.reverse { padding: 48px 24px; }
    .featured-inner { flex-direction: column; gap: 32px; }
    .featured-image { width: 100%; height: 260px; }

    #more-work { padding: 48px 24px; }
    .cards-grid { flex-direction: column; }
    .card-thumb { height: 160px; }

    #process { padding: 60px 24px 80px; }
    .process-steps { grid-template-columns: repeat(1, 1fr); }
    .step-title { font-size: 24px; }
    .step-desc { font-size: 16px; line-height: 26px; }

    #cta { padding-top: 60px; }
    .cta-heading {font-size:5rem;}
    .cta-text-wrap { padding: 0 24px; }
    .cta-actions { padding: 32px 24px 0; justify-content: flex-start; }

    .btn-outline-dark, .btn-solid-dark {width:100%;justify-content: center;}

    .footer-inner { padding: 20px 24px; flex-direction: column; gap: 16px; align-items: center; }

    .case-study .container { padding-left: 24px; padding-right: 24px; }
    .cs-hero { padding: 48px 0; }
    .cs-section { padding: 48px 0; }
    .cs-hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .cs-hero-image { height: 260px; }
    .section-image { height: 220px; margin-top: 32px; }
    .feature-block { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
    .feature-block.reverse .feature-image { order: 0; }
    .feature-image { height: 220px; }
    .impact-grid { grid-template-columns: 1fr; }
    .case-study h3 { font-size: 24px; margin-top: 48px; }
    .callout { padding: 24px; font-size: 18px; line-height: 30px; margin: 32px 0; }
}

/* ── ABOUT PAGE ──
   Consolidated from about.html. Selectors already defined above were omitted
   so the existing style.css rules remain authoritative.
*/
.nav-name {
  font-family: var(--font-h);
      font-weight: 500;
      font-size: 30.815px;
      letter-spacing: -0.6163px;
      color: #1c1c1c;
      white-space: nowrap;
}

.about-section {
  background: #fcfcfd;
  padding: 104px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.about-inner {
  display: flex;
      align-items: center;
      gap: 48px;
      width: 100%;
}

.about-text {
  display: flex;
      flex-direction: column;
      gap: 32px;
      flex-shrink: 0;
}

.about-heading {
  font-family: var(--font-h);
      font-weight: 400;
      font-size: 56.64px;
      line-height: 70px;
      letter-spacing: -1.1328px;
      color: #1c1c1c;
}

.about-heading strong {
  font-family: var(--font-h);
      font-weight: 700;
      color: #ff4728;
}

.about-body {
  font-family: var(--font-b);
      font-size: 18px;
      line-height: 33px;
      color: #666;
      max-width: 597px;
}

.about-image {
  background: #1c1c1c;
      flex: 1 0 0;
      height: 424px;
      min-width: 0;
      border-radius: 10px;
      box-shadow: 0 4px 4px rgba(0,0,0,0.25);
      overflow: hidden;
}
#home-about-img{
  object-position: center 24%;
}
.about-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.story-wrapper {
  padding-top: 152px;
      background: var(--near-black);
}

.story-section {
  background: var(--near-black);
  padding: 48px 104px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.section-num {
  font-family: var(--font-b);
      font-weight: 700;
      font-size: 18px;
      line-height: 44px;
      color: var(--white);
}

.section-title-large {
  font-family: var(--font-h);
      font-weight: 400;
      font-size: 76.637px;
      line-height: 90px;
      letter-spacing: -1.5327px;
      color: var(--white);
}

.section-body {
  font-family: var(--font-b);
      font-size: 18px;
      line-height: 33px;
      color: var(--white);
      max-width: 700px;
}

.section-body a {
  font-weight:800;
  text-decoration: underline;
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 64px;
}

.cards-row {
  display: flex;
      gap: 16px;
      width: 100%;
}
.cards-row img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
#guitar-img{
  object-position: center 39%;
}
#image-boo{
  object-position: center 32%;
}

.card {
  border-radius: 10px;
      height: 475px;
      flex: 1 0 0;
      min-width: 0;
      overflow: hidden;
}

.card-light {
  background: #ffe0db;
}

.card-dark {
  background: #fcfcfd;
}

.card-text-orange {
  background: #ffe0db;
      border-radius: 10px;
      height: 100%;
      width: 396px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
}

.card-text-orange p,
.card-text-dark p {
  font-family: var(--font-h);
      font-weight: 400;
      font-size: 42.64px;
      line-height: 53px;
      letter-spacing: -0.8528px;
      white-space: nowrap;
}

.card-text-orange p {
  color: #ff4728;
}

.card-text-dark {
  background: #fcfcfd;
      border-radius: 10px;
      height: 100%;
      width: 396px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
}

.card-text-dark p {
  color: #1c1c1c;
}

.outside-wrapper {
  background: #ff4728;
      padding-top: 152px;
}

.outside-section {
  background: var(--orange);
  padding: 48px 104px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.outside-section .section-num {
  color: var(--orange-pale);
}

.outside-section .section-title-large {
  color: var(--orange-pale);
}

.outside-section .section-body {
  color: var(--orange-pale);
}

.experience-section {
  padding: 104px 104px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.exp-left {
  display: flex;
      flex-direction: column;
      gap: 32px;
      max-width: 550px;
}

.exp-title {
  font-family: var(--font-h);
      font-weight: 400;
      font-size: 76.637px;
      line-height: 90px;
      letter-spacing: -1.5327px;
      color: #1c1c1c;
}

.exp-body {
  font-family: var(--font-b);
      font-size: 18px;
      line-height: 33px;
      color: #666;
}

.btn-outline {
  display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 1px solid #222;
      width: fit-content;
      border-radius: 8px;
      padding: 10px 24px;
      font-family: var(--font-b);
      font-size: 18px;
      line-height: 44px;
      color: #1c1c1c;
      text-decoration: none;
      background: transparent;
      cursor: pointer;
      white-space: nowrap;
}

.exp-list {
  display: flex;
      flex-direction: column;
      flex-shrink: 0;
      list-style: none;
      padding-left: 0;
      margin: 0;
}

.exp-item {
  display: flex;
      gap: 80px;
      align-items: flex-start;
      padding: 24px 0;
      border-bottom: 1px solid #e6e6e6;
}

.exp-item:last-child {
  border-bottom: none;
}

.exp-date {
  font-family: var(--font-b);
      font-size: 18px;
      line-height: 33px;
      color: #666;
      white-space: nowrap;
      flex-shrink: 0;
}

.exp-role {
  display: flex;
      flex-direction: column;
}

.exp-role-title {
  font-family: var(--font-b);
      font-weight: 500;
      font-size: 18px;
      line-height: 33px;
      color: #1c1c1c;
}

.exp-role-company {
  font-family: var(--font-b);
      font-size: 18px;
      line-height: 33px;
      color: #666;
}

.cta-section {
  background: #fcfcfd;
      padding: 152px 0 48px;
      display: flex;
      flex-direction: column;
      gap: 48px;
}

.cta-headline {
  font-family: var(--font-h);
      font-weight: 400;
      font-size: 259.32px;
      line-height: 228px;
      letter-spacing: -5.1864px;
      color: #1c1c1c;
      white-space: nowrap;
}

.cta-buttons {
  display: flex;
      justify-content: flex-end;
      gap: 24px;
      padding: 0 104px;
}

.btn-contact {
  display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ff4728;
      border-radius: 8px;
      padding: 10px 24px;
      height: 54px;
      font-family: var(--font-b);
      font-weight: 500;
      font-size: 18px;
      line-height: 44px;
      color: #ffefe0;
      text-decoration: none;
      white-space: nowrap;
}

.btn-resume {
  display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #1c1c1c;
      border-radius: 8px;
      padding: 10px 24px;
      height: 54px;
      font-family: var(--font-b);
      font-weight: 500;
      font-size: 18px;
      line-height: 44px;
      color: #1c1c1c;
      text-decoration: none;
      white-space: nowrap;
      background: transparent;
}

.footer-icons {
  display: flex;
      gap: 10px;
}

.footer-icon {
  width: 40px;
      height: 40px;
      border: 2px solid #fcfcfd;
      border-radius: 5px;
}

.hamburger {
  display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
      background: none;
      border: none;
}

.hamburger span {
  display: block;
      width: 24px;
      height: 1px;
      background: #1c1c1c;
      transition: all 0.3s;
}

.mobile-menu {
  display: none;
      flex-direction: column;
      gap: 16px;
      padding: 24px 104px;
      background: #fcfcfd;
      border-bottom: 1px solid #e0e0e0;
}

.mobile-menu.open {
  display: flex;
}

.mobile-menu a {
  font-family: var(--font-b);
      font-weight: 500;
      font-size: 16px;
      color: #494949;
      text-decoration: none;
}

@media (max-width: 1200px) {
.cta-headline {
  font-size: 180px; line-height: 165px;
}
}

@media (max-width: 1024px) {
.about-section {
  padding: 64px 48px;
}

.story-section,
.outside-section {
  padding: 48px 48px;
}

.experience-section {
  padding: 64px 48px 0;
}

.cta-buttons {
  padding: 0 48px;
}

.mobile-menu {
  padding: 24px 48px;
}

.cta-headline {
  font-size: 130px; line-height: 120px;
}
}

@media (max-width: 900px) {
.hamburger {
  display: flex;
}

.about-inner {
  flex-direction: column;
}

.about-image {
  width: 100%; flex: none; height: 280px;
}

.about-body {
  max-width: 100%;
}

.experience-section {
  flex-direction: column; align-items: flex-start;
}

.exp-list {
  width: 100%;
}

.cta-headline {
  font-size: 80px; line-height: 78px; letter-spacing: -2px; white-space: normal;
}

.story-wrapper {
  padding-top: 80px;
}

.outside-wrapper {
  padding-top: 80px;
}
}

@media (max-width: 640px) {
.about-section {
  padding: 48px 24px;
}

.story-section,
.outside-section {
  padding: 32px 24px;
}

.experience-section {
  padding: 48px 24px 0;
}

.cta-buttons {
  padding: 0 24px; flex-direction: column; align-items: stretch;
}

.mobile-menu {
  padding: 16px 24px;
}

.about-heading {
  font-size: 40px; line-height: 52px;
}

.section-title-large {
  font-size: 48px; line-height: 56px;
}

.exp-title {
  font-size: 48px; line-height: 56px;
}

.cta-headline {
  font-size: 56px; line-height: 58px;
}

.cards-row {
  flex-direction: column;
}

.card {
  height: 200px; width: 100% !important; flex: none;
}
.card.d-none{
  display: none;
}

.card-text-orange,
.card-text-dark {
  width: 100%; height: 200px;
}

.card-text-orange p,
.card-text-dark p {
  font-size: 28px; line-height: 36px; white-space: normal;
}

.exp-item {
  gap: 24px;
}
}

.icon-download {
  display: inline-block;
      width: 20px;
      height: 20px;
      vertical-align: middle;
      flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   OPTIONAL — WCAG AA COLOUR ADJUSTMENTS  (NOT ENABLED)

   These are the only accessibility issues left across the four pages that
   cannot be fixed without changing the visual design, so they are parked here
   as a decision for you rather than applied. Measured against WCAG 2.2
   SC 1.4.3 — 4.5:1 for normal text, 3:1 for large text (24px+, or 18.66px+
   bold).

   ON WHITE — #ff4728 on #fcfcfd = 3.31:1
     .btn-outline-orange, .btn-text-orange, .case-link   (18px)      fails
     .case-study .section-label   ("01. The Problem", 18px bold)     fails
     .impact-card span            (48px)                             passes
     .hero-headline .accent       (3.5rem)                           passes
     Fix: #d63c1c = 4.53:1, visually still the same brand orange.

   ON THE PALE ORANGE — #ff4728 on #fff0ed = 3.06:1
     .tag-featured (12px), .cs-category (12px), .callout strong      fails
     Fix: #c4351a = 4.6:1 on the same pale background.

   ON THE ORANGE BANDS — #ffe0db on #ff4728 = 2.74:1
     #process .step-num / .step-title / .step-desc                   fails
     .outside-section .section-body (18px)                           fails
     .outside-section .section-title-large (76px, large text)        fails
     This one needs the band itself to change: white text on #d6371b
     is 4.66:1. Keeping #ffe0db means going darker still.

   ON THE PEACH CARD — #ff4728 on #ffe0db = 2.74:1
     .card-text-orange p ("always learning.", 42.64px)               fails
     Fix: #d63c1c on #ffe0db = 3.75:1, enough at that size.

:root {
    --orange-text: #d63c1c;
}
.btn-outline-orange,
.btn-text-orange,
.case-link,
.case-study .section-label { color: var(--orange-text); }
.btn-outline-orange { border-color: var(--orange-text); }
.tag-featured,
.cs-category,
.callout strong { color: #c4351a; }
.card-text-orange p { color: var(--orange-text); }
#process, .orange-container { background: #d6371b; }
.process-heading, .process-steps { color: #ffffff; }
.outside-section .section-title-large,
.outside-section .section-body { color: #ffffff; }
   ───────────────────────────────────────────────────────────────────────── */