/* =========================================================
   ANUM ALTAF — PORTFOLIO
   Global Styles
   ========================================================= */


/* ---------------------------------------------------------
   1. GOOGLE FONTS
   --------------------------------------------------------- */

   @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:wght@400;500;600&family=DM+Serif+Display&family=Inter:wght@400;600;700&family=Lato:wght@400;700&family=Newsreader:wght@400;700&family=Noto+Sans:wght@400;700&family=Spectral:wght@400&display=swap");


   /* ---------------------------------------------------------
      2. AVENIR — LOCAL FONT FILES
      --------------------------------------------------------- */
   
   @font-face {
       font-family: "Avenir";
       src: url("../assets/fonts/avenir/Avenir Book/Avenir Book.ttf")
            format("truetype");
       font-weight: 400;
       font-style: normal;
       font-display: swap;
   }
   
   @font-face {
       font-family: "Avenir";
       src: url("../assets/fonts/avenir/Avenir Medium/Avenir Medium.ttf")
            format("truetype");
       font-weight: 500;
       font-style: normal;
       font-display: swap;
   }
   
   @font-face {
    font-family: "Alagambe";
    src: url("../assets/fonts/alagambe 2.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   MAPMYGENE CASE STUDY
   Figma frame 1003:15. Shared portfolio header, tokens,
   footer, paper assets and navigation remain unchanged.
   ========================================================= */

.mapmygene-root,
.mapmygene-page {
    overflow-x: clip;
}

.mapmygene-case-study {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.mapmygene-divider {
    width: calc(100% - 78px);
    height: 1px;
    margin: 0 auto;
    background: rgba(47, 42, 38, 0.24);
}

.mapmygene-writing-heading,
.mapmygene-script-heading,
.mapmygene-showcase h3,
.mapmygene-page p {
    margin-top: 0;
}

.mapmygene-writing-heading {
    margin-bottom: 0;
}

.mapmygene-writing-heading img {
    width: 100%;
    height: 100%;
}

.mapmygene-script-heading {
    margin-bottom: 0;
    font-family: var(--font-handwriting);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink);
}

.mapmygene-hero,
.mapmygene-started,
.mapmygene-challenge,
.mapmygene-improvements,
.mapmygene-together,
.mapmygene-reflection {
    position: relative;
}

.mapmygene-back-link img {
    display: block;
    width: 346px;
    height: 19px;
}

.mapmygene-hero-copy h1,
.mapmygene-showcase h3 {
    margin-bottom: 0;
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--ink);
}

.mapmygene-project-type {
    color: var(--warm-grey);
}

.mapmygene-meta div {
    display: flex;
    flex-direction: column;
}

.mapmygene-meta strong {
    font-weight: 600;
}

.mapmygene-hero-browser,
.mapmygene-showcase-image {
    overflow: hidden;
}

.mapmygene-hero-browser img,
.mapmygene-home-crop img,
.mapmygene-products-crop img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

.mapmygene-theme-grid {
    display: grid;
}

.mapmygene-theme-card,
.mapmygene-improvement-card {
    position: relative;
}

.mapmygene-theme-card {
    background: #f7f2ea;
    border-radius: 4px;
    box-shadow: 0 32px 40px rgba(38, 31, 20, 0.06);
}

.mapmygene-theme-tape,
.mapmygene-improvement-tape {
    position: absolute;
    z-index: 3;
    pointer-events: none;
}

.mapmygene-theme-card h3 {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 600;
    color: #6b6259;
}

.mapmygene-theme-card p,
.mapmygene-section-intro,
.mapmygene-started > p,
.mapmygene-improvements-intro,
.mapmygene-improvement-content p,
.mapmygene-reflection p {
    color: #2b2b2b;
}

.mapmygene-improvement-paper {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mapmygene-improvement-content {
    position: relative;
    z-index: 2;
}

.mapmygene-improvement-content h3 {
    margin: 0;
    font-family: "Playfair Display", var(--font-display);
    font-weight: 600;
    color: var(--ink);
}

.mapmygene-showcase-heading p {
    margin: 0;
    color: var(--warm-grey);
}

.mapmygene-about-crop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mapmygene-footer a {
    font-weight: 600;
}

@media (min-width: 1051px) {
    .mapmygene-hero {
        height: 639px;
    }

    .mapmygene-back-link {
        position: absolute;
        left: 110px;
        top: 39px;
        height: 21px;
    }

    .mapmygene-back-link .ddc-back-arrow {
        font-size: 20px;
    }

    .mapmygene-hero-copy {
        position: absolute;
        left: 80px;
        top: 124px;
        width: 493px;
    }

    .mapmygene-hero-copy h1 {
        margin: 0;
        font-size: 42px;
        line-height: normal;
    }

    .mapmygene-project-type {
        margin: 2px 0 0;
        font-size: 20px;
        line-height: normal;
    }

    .mapmygene-intro {
        width: 462px;
        margin: 18px 0 0;
        font-size: 18px;
        line-height: 1.6;
    }

    .mapmygene-meta {
        margin-top: 36px;
        font-size: 16px;
        color: #2b2b2b;
    }

    .mapmygene-meta div + div {
        width: 468px;
        margin-top: 18px;
        line-height: 1.5;
    }

    .mapmygene-hero-browser {
        position: absolute;
        left: 658px;
        top: 83px;
        width: 782px;
        height: 415px;
        border-radius: 10px;
        box-shadow: 0 32px 80px -8px rgba(38, 31, 20, 0.06);
    }

    .mapmygene-hero-browser img {
        width: 782px;
    }

    .mapmygene-started {
        height: 1010px;
    }

    .mapmygene-started .mapmygene-writing-heading {
        position: absolute;
        left: 79px;
        top: 66px;
        width: 363px;
        height: 26px;
    }

    .mapmygene-started > p {
        position: absolute;
        left: 80px;
        top: 159px;
        width: 1280px;
        margin-bottom: 0;
        font-size: 20px;
        line-height: 1.6;
    }

    .mapmygene-old-site {
        position: absolute;
        left: 77px;
        top: 311px;
        width: 1280px;
        height: 600px;
        border-radius: 8px;
        object-fit: cover;
    }

    .mapmygene-challenge {
        height: 505px;
    }

    .mapmygene-challenge .mapmygene-script-heading {
        position: absolute;
        left: 79px;
        top: 70px;
        width: 317px;
        height: 67px;
    }

    .mapmygene-section-intro {
        position: absolute;
        left: 80px;
        top: 159px;
        width: 1280px;
        margin-bottom: 0;
        font-size: 20px;
        line-height: 1.6;
    }

    .mapmygene-theme-grid {
        position: absolute;
        left: 80px;
        top: 299px;
        grid-template-columns: repeat(4, 280px);
        gap: 40px;
        width: 1280px;
    }

    .mapmygene-theme-card {
        min-height: 120px;
        padding: 28px 24px 24px;
    }

    .mapmygene-theme-card h3 {
        font-size: 22px;
        line-height: normal;
    }

    .mapmygene-theme-card p {
        margin: 12px 0 0;
        font-size: 14px;
        line-height: 1.4;
    }

    .mapmygene-theme-tape {
        left: -32px;
        top: -33px;
        width: 82px;
        height: 59px;
        object-fit: cover;
        transform: rotate(-34deg);
    }

    .mapmygene-theme-card:nth-child(2) .mapmygene-theme-tape { transform: rotate(-35.44deg); }
    .mapmygene-theme-card:nth-child(3) .mapmygene-theme-tape { transform: rotate(-41.96deg); }
    .mapmygene-theme-card:nth-child(4) .mapmygene-theme-tape { transform: rotate(-49.23deg); }

    .mapmygene-improvements {
        height: 1142px;
    }

    .mapmygene-improvements-heading {
        position: absolute;
        left: 79px;
        top: 59px;
        width: 612px;
        height: 26px;
    }

    .mapmygene-improvements-intro {
        position: absolute;
        left: 88px;
        top: 128px;
        width: 1060px;
        margin-bottom: 0;
        font-size: 20px;
        line-height: normal;
    }

    .mapmygene-improvement-stack {
        position: absolute;
        left: 80px;
        top: 268px;
        width: 1280px;
    }

    .mapmygene-improvement-card {
        width: 1280px;
        height: 352px;
    }

    .mapmygene-improvement-paper {
        left: 7px;
        top: 21px;
        width: 1216px;
        height: 306px;
        border-radius: 2px;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    }

    .mapmygene-improvement-tape {
        left: -30px;
        top: 0;
        width: 82px;
        height: 46px;
        object-fit: cover;
        transform: rotate(-39.83deg);
    }

    .mapmygene-improvement-content {
        padding: 68px 62px 40px;
    }

    .mapmygene-improvement-content h3 {
        font-size: 30px;
        line-height: normal;
    }

    .mapmygene-improvement-content p {
        width: 1026px;
        margin: 38px 0 0;
        font-size: 20px;
        line-height: 1.6;
    }

    .mapmygene-together {
        height: 5314px;
    }

    .mapmygene-together-heading {
        position: absolute;
        left: 79px;
        top: 72px;
        width: 469px;
        height: 34px;
    }

    .mapmygene-showcase {
        position: absolute;
        left: 0;
        width: 1440px;
    }

    .mapmygene-showcase-heading {
        position: absolute;
        left: 80px;
        width: 1280px;
    }

    .mapmygene-showcase-heading h3 {
        margin: 0;
        font-size: 40px;
        line-height: normal;
    }

    .mapmygene-showcase-heading p {
        font-size: 24px;
        line-height: normal;
    }

    .mapmygene-showcase-home {
        top: 210px;
        height: 872px;
    }

    .mapmygene-showcase-products {
        top: 1205px;
        height: 1472px;
    }

    .mapmygene-showcase-language {
        top: 2821px;
        height: 2493px;
    }

    .mapmygene-showcase-image {
        position: absolute;
        left: 0;
        top: 139px;
        width: 1440px;
    }

    .mapmygene-home-crop {
        height: 733px;
    }

    .mapmygene-products-crop {
        top: 122px;
        height: 1350px;
    }

    .mapmygene-about-crop {
        top: 142px;
        height: 2351px;
    }

    .mapmygene-reflection {
        height: 206px;
    }

    .mapmygene-reflection p {
        position: absolute;
        left: 52px;
        top: 108px;
        width: 1280px;
        margin-bottom: 0;
        font-size: 24px;
        line-height: 1.5;
    }

    .mapmygene-footer {
        width: calc(100% - 160px);
        min-height: 80px;
        margin-top: 0;
    }
}

@media (max-width: 1050px) {
    .mapmygene-case-study {
        padding: 24px 36px 72px;
    }

    .mapmygene-divider {
        width: 100%;
        margin: 58px 0;
    }

    .mapmygene-hero {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 32px;
    }

    .mapmygene-back-link {
        grid-column: 1 / -1;
    }

    .mapmygene-back-link img {
        max-width: calc(100vw - 120px);
        height: auto;
    }

    .mapmygene-hero-copy h1 {
        margin: 26px 0 0;
        font-size: 38px;
    }

    .mapmygene-project-type {
        margin-bottom: 0;
        font-size: 18px;
    }

    .mapmygene-intro {
        margin-bottom: 0;
        font-size: 16px;
        line-height: 1.55;
    }

    .mapmygene-meta {
        display: grid;
        gap: 16px;
        margin-top: 28px;
        font-size: 14px;
    }

    .mapmygene-hero-browser {
        align-self: end;
        aspect-ratio: 782 / 415;
        border-radius: 8px;
    }

    .mapmygene-writing-heading {
        width: min(100%, 470px);
        height: auto;
    }

    .mapmygene-started > p,
    .mapmygene-section-intro,
    .mapmygene-improvements-intro,
    .mapmygene-reflection p {
        margin: 42px 0 0;
        font-size: 17px;
        line-height: 1.6;
    }

    .mapmygene-old-site {
        width: 100%;
        height: auto;
        margin-top: 36px;
        border-radius: 8px;
    }

    .mapmygene-script-heading {
        font-size: 30px;
    }

    .mapmygene-theme-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px;
        margin-top: 48px;
    }

    .mapmygene-theme-card {
        min-height: 145px;
        padding: 34px 28px 26px;
    }

    .mapmygene-theme-tape {
        left: -20px;
        top: -26px;
        width: 72px;
        transform: rotate(-36deg);
    }

    .mapmygene-theme-card h3 {
        margin: 0;
        font-size: 20px;
    }

    .mapmygene-theme-card p {
        margin: 12px 0 0;
        font-size: 14px;
    }

    .mapmygene-improvement-stack {
        display: grid;
        gap: 34px;
        margin-top: 54px;
    }

    .mapmygene-improvement-card {
        min-height: 230px;
    }

    .mapmygene-improvement-tape {
        left: -22px;
        top: -18px;
        width: 72px;
        transform: rotate(-39.83deg);
    }

    .mapmygene-improvement-content {
        padding: 50px 44px 38px;
    }

    .mapmygene-improvement-content h3 {
        margin: 0;
        font-size: 27px;
    }

    .mapmygene-improvement-content p {
        margin: 24px 0 0;
        font-size: 17px;
        line-height: 1.6;
    }

    .mapmygene-showcase {
        margin-top: 70px;
    }

    .mapmygene-showcase-heading h3 {
        margin: 0;
        font-size: 34px;
    }

    .mapmygene-showcase-heading p {
        margin: 3px 0 26px;
        font-size: 20px;
    }

    .mapmygene-showcase-image {
        width: calc(100% + 72px);
        margin-left: -36px;
    }

    .mapmygene-home-crop {
        aspect-ratio: 1440 / 733;
    }

    .mapmygene-products-crop {
        aspect-ratio: 1440 / 1350;
    }

    .mapmygene-about-crop {
        aspect-ratio: 1440 / 2351;
    }

    .mapmygene-reflection {
        margin-top: 80px;
    }

    .mapmygene-footer {
        margin-top: 0;
    }
}

@media (max-width: 700px) {
    .mapmygene-case-study {
        padding: 12px 24px 96px;
    }

    .mapmygene-divider {
        margin: 44px 0;
    }

    .mapmygene-hero {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .mapmygene-back-link img {
        width: 255px;
        max-width: calc(100vw - 92px);
    }

    .mapmygene-hero-copy h1 {
        margin-top: 38px;
        font-size: 34px;
    }

    .mapmygene-project-type {
        margin-top: 4px;
        font-size: 16px;
    }

    .mapmygene-intro {
        margin-top: 20px;
        font-size: 15px;
    }

    .mapmygene-meta {
        font-size: 13px;
    }

    .mapmygene-hero-browser {
        width: calc(100% + 48px);
        margin: 38px 0 0 -24px;
        border-radius: 0;
    }

    .mapmygene-started > p,
    .mapmygene-section-intro,
    .mapmygene-improvements-intro,
    .mapmygene-reflection p {
        margin-top: 30px;
        font-size: 14px;
        line-height: 1.55;
    }

    .mapmygene-script-heading {
        font-size: 27px;
    }

    .mapmygene-theme-grid {
        grid-template-columns: 1fr;
        gap: 38px;
        margin-top: 42px;
    }

    .mapmygene-theme-card {
        min-height: 120px;
        padding: 30px 24px 24px;
    }

    .mapmygene-theme-card h3 {
        font-size: 18px;
    }

    .mapmygene-improvement-card {
        min-height: 210px;
    }

    .mapmygene-improvement-content {
        padding: 42px 28px 32px;
    }

    .mapmygene-improvement-content h3 {
        font-size: 22px;
    }

    .mapmygene-improvement-content p {
        margin-top: 18px;
        font-size: 14px;
    }

    .mapmygene-showcase {
        margin-top: 54px;
    }

    .mapmygene-showcase-heading h3 {
        font-size: 26px;
    }

    .mapmygene-showcase-heading p {
        font-size: 15px;
        line-height: 1.45;
    }

    .mapmygene-showcase-image {
        width: calc(100% + 48px);
        margin-left: -24px;
    }

    .mapmygene-reflection {
        margin-top: 58px;
    }

    .mapmygene-footer {
        display: none;
    }
}

/* =========================================================
   VISUAL DESIGN OVERVIEW PAGE
   Page-specific implementation of Figma frame 966:10.
   Shared header, navigation, tokens and breakpoints are reused.
   ========================================================= */

.visual-design-main {
    width: 100%;
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 34px 39px 0;
}

.visual-design-intro {
    padding-left: 28px;
}

.visual-design-intro .back-to-work {
    margin-top: 5px;
}

.visual-design-back-text {
    font-family: var(--font-handwriting);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: var(--ink);
}

.visual-design-heading {
    margin-top: 58px;
    margin-left: 67px;
}

.visual-design-heading h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 400;
    line-height: 1.05;
    color: var(--ink);
}

.visual-design-heading p {
    margin: 18px 0 0;
    max-width: 760px;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink);
}

.visual-design-divider {
    width: 100%;
    height: 1px;
    margin-top: 57px;
    background: rgba(47, 42, 38, 0.28);
}

.visual-design-projects {
    margin-top: 85px;
}

.visual-project-card {
    position: relative;
    width: min(1236px, calc(100% - 122px));
    height: 398px;
    margin: 0 auto;
    background:
        url("../assets/images/visual-design-card-base.png")
        center / cover
        no-repeat;
}

.visual-project-tape {
    position: absolute;
    left: -30px;
    top: -35px;
    z-index: 3;
    width: 92px;
    height: auto;
    pointer-events: none;
}

.visual-project-bands {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    height: 125px;
}

.visual-band {
    display: block;
}

.visual-band-blue {
    background: #325980;
}

.visual-band-red {
    background: #7d4149;
}

.visual-band-purple {
    background: #786171;
}

.visual-project-content {
    padding: 24px 63px 27px;
}

.visual-project-content h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.12;
    color: var(--ink);
}

.visual-project-meta {
    margin: 8px 0 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--warm-grey);
}

.visual-project-description {
    max-width: 590px;
    margin: 15px 0 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ink);
}

.visual-project-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 31px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
}

.visual-design-footer {
    width: calc(100% - 160px);
    max-width: 1280px;
    min-height: 113px;
    margin: 58px auto 0;
    border-top: 1px solid rgba(47, 42, 38, 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    color: var(--warm-grey);
}

.visual-design-footer p {
    margin: 0;
}

.visual-design-footer a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .visual-project-link,
    .visual-design-footer a {
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .visual-project-link:hover {
        transform: translateX(3px);
    }

    .visual-design-footer a:hover {
        opacity: 0.65;
    }
}

@media (max-width: 1100px) {
    .visual-project-card {
        width: calc(100% - 54px);
    }
}

@media (max-width: 700px) {
    .visual-design-main {
        padding: 18px 24px 0;
    }

    .visual-design-intro {
        padding-left: 0;
    }

    .visual-design-intro .back-to-work {
        margin-top: 8px;
    }

    .visual-design-heading {
        margin-top: 36px;
        margin-left: 0;
    }

    .visual-design-heading h1 {
        font-size: 30px;
        line-height: 1.08;
    }

    .visual-design-heading p {
        margin-top: 10px;
        max-width: 360px;
        font-size: 13px;
        line-height: 1.45;
    }

    .visual-design-divider {
        margin-top: 30px;
    }

    .visual-design-projects {
        margin-top: 44px;
    }

    .visual-project-card {
        width: 100%;
        height: auto;
        min-height: 430px;
        margin: 0;
        background-position: center;
    }

    .visual-project-tape {
        left: -17px;
        top: -20px;
        width: 66px;
    }

    .visual-project-bands {
        height: 92px;
    }

    .visual-project-content {
        padding: 27px 25px 28px;
    }

    .visual-project-content h2 {
        max-width: 310px;
        font-size: 27px;
        line-height: 1.1;
    }

    .visual-project-meta {
        margin-top: 10px;
        font-size: 12px;
    }

    .visual-project-description {
        margin-top: 17px;
        font-size: 12px;
        line-height: 1.5;
    }

    .visual-project-link {
        margin-top: 32px;
        font-size: 12px;
    }

    .visual-design-footer {
        width: calc(100% - 48px);
        min-height: 92px;
        margin-top: 46px;
        font-size: 11px;
    }
}

/* =========================================================
   VISUAL DESIGN — THREE BRANDS CASE STUDY
   Page-specific implementation of Figma frame 966:84.
   Shared site header, navigation, footer and tokens are reused.
   ========================================================= */

.visual-case-main {
    width: 100%;
    color: var(--ink);
}

.visual-case-hero,
.visual-case-challenge,
.visual-case-reflection {
    width: 100%;
    max-width: var(--page-width);
    margin: 0 auto;
    padding-right: 80px;
    padding-left: 80px;
}

.visual-case-hero {
    padding-top: 31px;
    padding-bottom: 74px;
}

.visual-case-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 46px;
    font-family: var(--font-handwriting);
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    color: var(--ink);
}

.visual-case-back > span:first-child {
    font-family: var(--font-body);
    font-size: 23px;
}

.visual-case-hero-copy {
    margin-top: 57px;
}

.visual-case-hero-copy h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 400;
    line-height: 1.08;
}

.visual-case-hero-copy p {
    max-width: 679px;
    margin: 27px 0 0;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
}

.visual-case-hero-copy p + p {
    margin-top: 18px;
}

.visual-case-challenge {
    padding-top: 46px;
    padding-bottom: 86px;
    border-top: 1px solid rgba(47, 42, 38, 0.22);
}

.visual-case-challenge h2,
.visual-directions h2,
.visual-case-reflection > h2 {
    margin: 0;
    font-family: var(--font-handwriting);
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
}

.visual-case-challenge-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    margin-top: 58px;
}

.visual-case-challenge-grid article {
    min-height: 140px;
    padding-right: 39px;
}

.visual-case-challenge-grid article:not(:last-child) {
    border-right: 1px solid rgba(47, 42, 38, 0.22);
}

.visual-case-challenge-grid p {
    max-width: 300px;
    margin: 22px 0 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
}

.visual-case-challenge-grid .visual-case-label {
    margin-top: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.visual-directions {
    padding: 120px 80px 116px;
    background: #f6f1ea;
}

.visual-directions > h2,
.visual-directions-grid {
    width: 100%;
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
}

.visual-directions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-top: 58px;
}

.visual-direction-card {
    display: flex;
    flex-direction: column;
    min-height: 637px;
    overflow: hidden;
    border: 1px solid rgba(47, 42, 38, 0.06);
    border-radius: 2px;
    background: #f2eadf;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}

.visual-direction-card > img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
}

.visual-direction-card-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 24px;
}

.visual-direction-number {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1;
    color: var(--warm-grey);
}

.visual-direction-card h3 {
    margin: 18px 0 0;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.12;
}

.visual-direction-card h3 + p {
    margin: 17px 0 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.45;
    color: var(--warm-grey);
}

.visual-direction-card a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: auto;
    padding-top: 30px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
}

.visual-case-reflection {
    padding-top: 117px;
    padding-bottom: 122px;
}

.visual-case-reflection-copy {
    display: grid;
    grid-template-columns: 440px minmax(0, 590px);
    gap: 100px;
    margin-top: 64px;
}

.visual-case-reflection-copy h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.18;
}

.visual-case-reflection-copy p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
}

@media (hover: hover) and (pointer: fine) {
    .visual-case-back,
    .visual-direction-card a {
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .visual-case-back:hover {
        opacity: 0.72;
    }

    .visual-direction-card a:hover {
        transform: translateX(3px);
    }
}

@media (max-width: 700px) {
    .visual-three-brands-page .visual-design-footer {
        display: none;
    }

    .visual-case-hero,
    .visual-case-challenge,
    .visual-case-reflection {
        padding-right: 24px;
        padding-left: 24px;
    }

    .visual-case-hero {
        padding-top: 24px;
        padding-bottom: 58px;
    }

    .visual-case-back {
        gap: 7px;
        margin-left: 0;
        font-size: 23px;
    }

    .visual-case-back > span:first-child {
        font-size: 18px;
    }

    .visual-case-hero-copy {
        margin-top: 51px;
    }

    .visual-case-hero-copy h1 {
        font-size: 36px;
    }

    .visual-case-hero-copy p {
        margin-top: 23px;
        font-size: 16px;
        line-height: 1.55;
    }

    .visual-case-challenge {
        padding-top: 39px;
        padding-bottom: 64px;
    }

    .visual-case-challenge h2,
    .visual-directions h2,
    .visual-case-reflection > h2 {
        font-size: 27px;
    }

    .visual-case-challenge-grid {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 42px;
    }

    .visual-case-challenge-grid article {
        min-height: 0;
        padding: 0 0 31px;
    }

    .visual-case-challenge-grid article + article {
        padding-top: 31px;
    }

    .visual-case-challenge-grid article:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid rgba(47, 42, 38, 0.2);
    }

    .visual-case-challenge-grid p {
        max-width: none;
        margin-top: 15px;
        font-size: 15px;
    }

    .visual-directions {
        padding: 70px 24px 72px;
    }

    .visual-directions-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 42px;
    }

    .visual-direction-card {
        min-height: 570px;
    }

    .visual-direction-card > img {
        height: 300px;
    }

    .visual-direction-card h3 {
        font-size: 27px;
    }

    .visual-case-reflection {
        padding-top: 72px;
        padding-bottom: 84px;
    }

    .visual-case-reflection-copy {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-top: 43px;
    }

    .visual-case-reflection-copy h3 {
        font-size: 27px;
    }

    .visual-case-reflection-copy p {
        font-size: 16px;
        line-height: 1.55;
    }
}

   /* ---------------------------------------------------------
      3. DESIGN TOKENS
      --------------------------------------------------------- */
   
   :root {
   
       /* Colours */
   
       --paper: #ECE3D7;
       --paper-light: #F6F1EA;
       --cream: #F2EADF;
       --aged-paper: #E5D8C7;
       --torn-paper: #D8C7B2;
   
       --ink: #2F2A26;
       --warm-grey: #767676;
   
       --connector: #C88B9B;
   
   
       /* Typography */
   
       --font-body: "Avenir", Arial, sans-serif;
       --font-display: "DM Serif Display", Georgia, serif;
       --font-logo: "Cormorant Garamond", Georgia, serif;
   
   
       /* Layout */
   
       --page-width: 1440px;
       --page-padding: 58px;

       --font-handwriting: "Alagambe", cursive;
   }
   
   
   /* ---------------------------------------------------------
      4. RESET
      --------------------------------------------------------- */
   
   *,
   *::before,
   *::after {
       box-sizing: border-box;
   }
   
   html {
       scroll-behavior: smooth;
   }
   
   body {
       margin: 0;
       min-height: 100vh;
   
       background-color: var(--paper);
       color: var(--ink);
   
       font-family: var(--font-body);
       font-weight: 400;
       line-height: 1.4;
   
       -webkit-font-smoothing: antialiased;
       text-rendering: optimizeLegibility;
   }
   
   img {
       display: block;
       max-width: 100%;
   }
   
   a {
       color: inherit;
       text-decoration: none;
   }
   
   button,
   input,
   textarea {
       font: inherit;
   }
   
   
   /* =========================================================
      GLOBAL HEADER
      ========================================================= */
   
   .site-header {
       width: 100%;
       max-width: var(--page-width);
   
       height: 100px;
   
       margin: 0 auto;
   
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
   
       padding:
           28px
           var(--page-padding)
           0;
   }
   
   
   /* Logo */
   
   .logo {
       font-family: var(--font-logo);
   
       font-size: 48px;
       font-weight: 400;
       line-height: 1;
   
       letter-spacing: 0;
   
       color: var(--ink);
   }
   
   
   /* Desktop navigation */
   
   .main-nav {
       display: flex;
       align-items: center;
   
       gap: 72px;
   
       padding-top: 12px;
   }
   
   .main-nav a {
       font-family: var(--font-body);
   
       font-size: 16px;
       font-weight: 400;
       line-height: 1;
   
       text-transform: lowercase;
   
       transition:
           opacity 180ms ease,
           transform 180ms ease;
   }
   
   .main-nav a:hover {
       opacity: 0.55;
   }
   
   .main-nav a.active {
       font-weight: 500;
   }
   
   
   /* =========================================================
      HOMEPAGE — DESKTOP
      Figma reference: 1440 × 1024
      ========================================================= */
   
   .hero {
       width: 100%;
       max-width: var(--page-width);
   
       margin: 0 auto;
   
       padding:
           0
           var(--page-padding)
           80px;
   }
   
   
   /* Main portrait + annotation composition */
   
   .hero-composition {
       position: relative;
   
       width: 100%;
       height: 505px;
   
       margin: 0 auto;
   }
   
   
   /* ---------------------------------------------------------
      Portrait
      --------------------------------------------------------- */
   
   .portrait-wrapper {
       position: absolute;
   
       left: 280px;
       top: 48px;
   
       width: 365px;
   
       transform: rotate(-1deg);
       transform-origin: center;
   
       z-index: 2;
   }
   
   .portrait {
       width: 100%;
       height: auto;
   }
   
   
   /* ---------------------------------------------------------
      Homepage annotations
      --------------------------------------------------------- */
   
   .annotation {
       position: absolute;
   
       font-family: var(--font-body);
       color: var(--ink);
   
       z-index: 3;
   }
   
   .annotation img {
       display: block;
   
       height: auto;
   
       margin-bottom: 10px;
   }
   
   .annotation p {
       margin: 0;
   
       font-family: var(--font-body);
   
       font-size: 16px;
       font-weight: 400;
   
       line-height: 1.35;
   
       color: var(--ink);
   }
   
   
   /* Curious */
   
   .annotation-curious {
       left: 53px;
       top: 338px;
   
       width: 250px;
   }
   
   .annotation-curious img {
       width: 233px;
   }
   
   
   /* Observant */
   
   .annotation-observant {
       left: 780px;
       top: 218px;
   
       width: 310px;
   }
   
   .annotation-observant img {
       width: 300px;
   
       margin-bottom: 11px;
   }
   
   
   /* Thoughtful */
   
   .annotation-thoughtful {
       left: 927px;
       top: 388px;
   
       width: 330px;
   }
   
   .annotation-thoughtful img {
       width: 327px;
   
       margin-bottom: 11px;
   }
   
   
   /* Connector lines */
   
   .annotation::before {
       content: "";
   
       position: absolute;
   
       height: 1px;
   
       opacity: 0.7;
   
       background-image:
           linear-gradient(
               to right,
               var(--connector) 45%,
               transparent 45%
           );
   
       background-size: 8px 1px;
       background-repeat: repeat-x;
   }
   
   .annotation-curious::before {
       width: 44px;
   
       right: -7px;
       top: 21px;
   }
   
   .annotation-observant::before {
       width: 50px;
   
       left: -62px;
       top: 30px;
   }
   
   .annotation-thoughtful::before {
       width: 50px;
   
       left: -63px;
       top: 30px;
   }
   
   
   /* ---------------------------------------------------------
      Homepage tagline
      --------------------------------------------------------- */
   
   .hero-intro {
       display: flex;
       flex-direction: column;
       align-items: center;
   
       text-align: center;
   
       margin-top: 28px;
   }
   
   .hero-intro h1 {
       margin: 0;
   
       font-family: var(--font-display);
   
       font-size: 40px;
       font-weight: 400;
   
       line-height: 1.12;
   
       color: var(--ink);
   
       white-space: nowrap;
   }
   
   
   /* ---------------------------------------------------------
      CTA
      --------------------------------------------------------- */
   
   .outline-button {
       display: inline-flex;
       align-items: center;
       justify-content: center;
   
       width: 350px;
       height: 56px;
   
       margin-top: 42px;
   
       padding: 0 34px;
   
       border: 1px solid var(--ink);
       border-radius: 999px;
   
       background: transparent;
   
       font-family: var(--font-body);
   
       font-size: 16px;
       font-weight: 500;
   
       line-height: 1;
   
       transition:
           background-color 180ms ease,
           color 180ms ease,
           transform 180ms ease;
   }
   
   .outline-button:hover {
       background-color: var(--ink);
       color: var(--paper);
   
       transform: translateY(-2px);
   }
   
   
   /* =========================================================
      ABOUT PAGE — DESKTOP
      Figma reference: 1440 × 1024
      ========================================================= */
   
   
   /* ---------------------------------------------------------
      Page wrapper
      --------------------------------------------------------- */
   
   .about-page {
       width: 100%;
       max-width: 1440px;
   
       margin: 0 auto;
   
       padding:
           55px
           58px
           70px;
   }
   
   
   /* ---------------------------------------------------------
      Intro
      --------------------------------------------------------- */
   
   .about-intro {
       display: grid;
   
       grid-template-columns:
           minmax(0, 1fr)
           minmax(0, 1.15fr);
   
       column-gap: 115px;
   
       align-items: start;
   }
   
   
   /* Left statement */
   
   .about-intro-heading h1 {
       margin: 0;
   
       font-family: var(--font-display);
   
       font-size: 42px;
       font-weight: 400;
   
       line-height: 1.12;
   
       color: var(--ink);
   }
   
   
   /* Right paragraph */
   
   .about-intro-copy {
       max-width: 610px;
   
       padding-top: 2px;
   }
   
   .about-intro-copy p {
       margin: 0;
   
       font-family: var(--font-body);
   
       font-size: 20px;
       font-weight: 400;
   
       line-height: 1.42;
   
       color: var(--ink);
   }
   
   
   /* ---------------------------------------------------------
      Journey section
      --------------------------------------------------------- */
   
   .journey-section {
       margin-top: 50px;
   }
   
   
   /* How I got here + arrow */
   
   .journey-heading {
       display: flex;
       align-items: center;
   
       gap: 18px;
   
       padding-left: 0;
   }
   
   .journey-heading h2 {
       margin: 0;
   
       font-family: var(--font-display);
   
       font-size: 31px;
       font-weight: 400;
   
       line-height: 1;
   
       color: var(--ink);
   }
   
   .journey-arrow {
    width: 120px;
    height: auto;

    margin-left: 2px;
}
   
   
   /* ---------------------------------------------------------
      Journey composition
      --------------------------------------------------------- */
   
      .journey-map {
        position: relative;
    
        width: 100%;
        height: 420px;
    
        margin-top: -15px;
    }
   
   /* Dotted winding journey */
   
   .journey-path {
    position: absolute;

    left: -10px;
    top: -48px;

    width: calc(100% + 20px);
    height: auto;

    z-index: 1;

    pointer-events: none;
}

.journey-path-mobile {
    display: none;
}
   
   
   /* =========================================================
   JOURNEY NOTES — DESKTOP
   Paper rotates, handwriting remains level
   ========================================================= */


/* ---------------------------------------------------------
   NOTE BASE
   --------------------------------------------------------- */

.journey-note {
    position: absolute;

    width: 220px;
    height: 145px;

    z-index: 2;
}


/* Paper texture */

.note-paper {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    z-index: 1;
}


/* Tape */

.note-tape {
    position: absolute;

    width: 72px;
    height: auto;

    top: -18px;
    left: -8px;

    z-index: 2;

    pointer-events: none;
}


/* ---------------------------------------------------------
   HANDWRITTEN SVG ARTWORK
   --------------------------------------------------------- */

.note-writing {
    position: absolute;

    left: 50%;
    top: 50%;

    width: auto;
    height: auto;

    max-width: 82%;
    max-height: 60%;

    transform-origin: center center;

    z-index: 3;

    pointer-events: none;
}


/* ---------------------------------------------------------
   FINE ARTS
   Paper: -4°
   Writing: +4° counter-rotation
   --------------------------------------------------------- */

.note-fine-arts {
    left: 10px;
    right: auto;

    top: 78px;

    width: 220px;
    height: 145px;

    transform: rotate(-4deg);
}

.note-fine-arts .note-writing {
    width: 130px;

    transform:
        translate(-50%, -50%)
        rotate(4deg);
}


/* ---------------------------------------------------------
   ILLUSTRATION
   Paper: +8°
   Writing: -8° counter-rotation
   --------------------------------------------------------- */

.note-illustration {
    left: 270px;
    right: auto;

    top: 18px;

    width: 255px;
    height: 155px;

    transform: rotate(8deg);
}

.note-illustration .note-writing {
    width: 170px;

    transform:
        translate(-50%, -50%)
        rotate(-8deg);
}


/* ---------------------------------------------------------
   EVENT PLANNING
   Paper: -9°
   Writing: +9° counter-rotation
   --------------------------------------------------------- */

.note-event-planning {
    left: 355px;
    right: auto;

    top: 193px;

    width: 255px;
    height: 155px;

    transform: rotate(-9deg);
}

.note-event-planning .note-writing {
    width: 220px;

    transform:
        translate(-50%, -50%)
        rotate(9deg);
}


/* ---------------------------------------------------------
   FRONT-END DEVELOPMENT
   Paper: +1°
   Writing: -1° counter-rotation
   --------------------------------------------------------- */

.note-development {
    left: 640px;
    right: auto;

    top: 88px;

    width: 270px;
    height: 150px;

    transform: rotate(1deg);
}

.note-development .note-writing {
    width: 150px;

    transform:
        translate(-50%, -50%)
        rotate(-1deg);
}


/* ---------------------------------------------------------
   UX DESIGN
   Paper: -7°
   Writing: +7° counter-rotation
   --------------------------------------------------------- */

.note-ux {
    left: auto;
    right: 45px;

    top: 138px;

    width: 285px;
    height: 150px;

    transform: rotate(-7deg);
}

.note-ux .note-writing {
    width: 155px;

    transform:
        translate(-50%, -50%)
        rotate(7deg);
}




/* =========================================================
   WORK PAGE
   Clean reusable card system
   ========================================================= */


/* ---------------------------------------------------------
   PAGE WRAPPER
   --------------------------------------------------------- */

   .work-page {
    width: 100%;
    max-width: 1440px;

    margin: 0 auto;

    padding:
        34px
        58px
        90px;
}


/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.work-intro {
    padding-left: 64px;
}

.work-intro-writing {
    display: block;

    width: 285px;
    height: auto;
}


/* ---------------------------------------------------------
   CATEGORY ROW
   --------------------------------------------------------- */

.work-categories {
    display: grid;
    grid-template-columns: repeat(3, 330px);

    justify-content: center;
    align-items: start;

    gap: 46px;

    margin-top: 74px;

    padding: 0;
}


/* ---------------------------------------------------------
   CARD BASE
   --------------------------------------------------------- */

.work-card {
    position: relative;

    width: 330px;
    height: 450px;

    transform-origin: center center;

    transition:
        transform 220ms ease,
        filter 220ms ease;
}


/* ---------------------------------------------------------
   PAPER
   --------------------------------------------------------- */

.work-card-paper {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    z-index: 1;

    filter:
        drop-shadow(
            0 7px 6px
            rgba(47, 42, 38, 0.10)
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   TAPE
   --------------------------------------------------------- */

.work-card-tape {
    position: absolute;

    top: -18px;
    left: -14px;

    width: 76px;
    height: auto;

    z-index: 3;

    pointer-events: none;
}


/* ---------------------------------------------------------
   CARD CONTENT
   --------------------------------------------------------- */

.work-card-content {
    position: absolute;

    inset: 0;

    z-index: 2;

    display: flex;
    flex-direction: column;

    padding:
        205px
        34px
        32px;
}


/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

.work-card-content h2 {
    margin: 0;

    font-family: var(--font-display);

    font-size: 28px;
    font-weight: 400;

    line-height: 1.1;

    color: var(--ink);

    white-space: nowrap;
}


/* ---------------------------------------------------------
   TAGS / DESCRIPTORS
   --------------------------------------------------------- */

.work-card-tags {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-top: 14px;

    font-family: var(--font-body);

    font-size: 13px;
    font-weight: 400;

    line-height: 1.25;

    color: var(--ink);

    white-space: nowrap;
}


.tag-divider {
    display: block;

    width: 1px;
    height: 40px;

    flex: 0 0 1px;

    background:
        rgba(47, 42, 38, 0.55);
}


/* ---------------------------------------------------------
   BUTTON
   --------------------------------------------------------- */

.work-card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 152px;
    height: 42px;

    margin-top: auto;

    border:
        1px
        solid
        var(--ink);

    border-radius: 999px;

    background: transparent;

    color: var(--ink);

    font-family: var(--font-body);

    font-size: 14px;
    font-weight: 400;

    transition:
        background-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}


/* =========================================================
   VERY SUBTLE CARD ANGLES
   ========================================================= */

.work-card-digital {
    transform: rotate(-0.6deg);
}

.work-card-visual {
    transform: rotate(0.4deg);
}

.work-card-illustration {
    transform: rotate(-0.4deg);
}


/* ---------------------------------------------------------
   DESKTOP HOVER
   straighten + lift + button reaction
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

    .work-card:hover {
        transform:
            rotate(0deg)
            translateY(-5px);

        filter:
            drop-shadow(
                0
                10px
                8px
                rgba(47, 42, 38, 0.10)
            );
    }

    .work-card:hover .work-card-button {
        background-color: var(--ink);

        color: var(--paper);

        transform: translateY(-1px);
    }
}













/* =========================================================
   DIGITAL EXPERIENCES PAGE
   ========================================================= */


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

   .digital-page {
    width: 100%;
    max-width: 1440px;

    margin: 0 auto;

    padding:
        34px
        36px
        100px;
}


/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.digital-intro {
    padding-left: 50px;
}


/* Back link */

/* ---------------------------------------------------------
   BACK TO WORK
   --------------------------------------------------------- */

   .back-to-work {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-top: 10px;

    color: var(--ink);

    text-decoration: none;
}

.back-arrow {
    font-family: var(--font-body);

    font-size: 22px;
    line-height: 1;

    transform: translateY(-1px);
}

.back-to-work-writing {
    display: block;

    width: 105px;
    height: auto;
}

.back-arrow {
    font-size: 22px;
    line-height: 1;
}


/* Heading */

.digital-heading {
    margin-top: 56px;
    margin-left: 36px;
}

.digital-heading h1 {
    margin: 0;

    font-family: var(--font-display);

    font-size: 40px;
    font-weight: 400;

    line-height: 1.05;

    color: var(--ink);
}

.digital-heading p {
    margin: 14px 0 0;

    font-family: var(--font-body);

    font-size: 17px;
    font-weight: 400;

    color: var(--ink);
}


/* ---------------------------------------------------------
   DIVIDER
   --------------------------------------------------------- */

.digital-divider {
    width: 100%;
    height: 1px;

    margin-top: 66px;

    background:
        rgba(47, 42, 38, 0.28);
}


/* ---------------------------------------------------------
   PROJECT GRID
   --------------------------------------------------------- */

.digital-projects {
    display: grid;

    grid-template-columns:
        repeat(3, 325px);

    justify-content: center;

    gap: 62px;

    margin-top: 58px;
}


/* ---------------------------------------------------------
   CARD
   --------------------------------------------------------- */

.digital-project-card {
    position: relative;

    width: 325px;
    height: 438px;
}


/* Paper */

.digital-card-paper {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    z-index: 1;

    pointer-events: none;
}


/* Tape */

.digital-card-tape {
    position: absolute;

    top: -17px;
    left: -12px;

    width: 67px;
    height: auto;

    z-index: 3;

    pointer-events: none;
}


/* ---------------------------------------------------------
   CARD CONTENT
   --------------------------------------------------------- */

.digital-card-content {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;

    padding:
        24px
        28px
        26px;
}


/* ---------------------------------------------------------
   MOCKUP
   --------------------------------------------------------- */

   .digital-project-mockup {
    display: block;

    width: 82%;
    height: 138px;

    object-fit: contain;

    margin:
        0
        0
        24px
        auto;

    position: relative;
    left: 24px;
}

.ddc-mockup {
    left: 36px;
}





/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

.digital-card-content h2 {
    margin: 0;

    font-family: var(--font-display);

    font-size: 26px;
    font-weight: 400;

    line-height: 1.08;

    color: var(--ink);
}


/* ---------------------------------------------------------
   ROLE
   --------------------------------------------------------- */

.digital-project-role {
    margin: 10px 0 0;

    font-family: var(--font-body);

    font-size: 12px;
    font-weight: 500;

    line-height: 1.3;

    color: var(--ink);
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

.digital-project-description {
    margin: 14px 0 0;

    font-family: var(--font-body);

    font-size: 12px;
    font-weight: 400;

    line-height: 1.4;

    color: var(--ink);
}


/* ---------------------------------------------------------
   CASE STUDY LINK
   --------------------------------------------------------- */

.digital-project-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    width: fit-content;

    margin-top: auto;
    margin-left: auto;

    font-family: var(--font-body);

    font-size: 12px;
    font-weight: 500;

    color: var(--ink);

    text-decoration: none;

    transition:
        transform 180ms ease;
}

.project-arrow {
    font-size: 17px;
    line-height: 1;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

    .digital-project-card {
        transition:
            transform 200ms ease,
            filter 200ms ease;
    }

    .digital-project-card:hover {
        transform: translateY(-4px);

        filter:
            drop-shadow(
                0 8px 7px
                rgba(47, 42, 38, 0.08)
            );
    }

    .digital-project-card:hover .digital-project-link {
        transform: translateX(3px);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .digital-projects {
        grid-template-columns:
            repeat(2, 325px);
    }
}


/* =========================================================
   DIGITAL EXPERIENCES — MOBILE
   ========================================================= */

   @media (max-width: 700px) {

    .digital-page {
        padding:
            18px
            20px
            110px;
    }


    /* -----------------------------------------------------
       INTRO
       ----------------------------------------------------- */

    .digital-intro {
        padding-left: 0;
    }

    .back-to-work {
        margin-top: 8px;
    }

    .back-arrow {
        font-size: 18px;
    }

    .back-to-work-writing {
        width: 92px;
    }

    .digital-heading {
        margin-top: 36px;
        margin-left: 0;
    }

    .digital-heading h1 {
        font-size: 30px;
        line-height: 1.08;
    }

    .digital-heading p {
        margin-top: 8px;

        font-size: 13px;
        line-height: 1.4;
    }


    /* -----------------------------------------------------
       DIVIDER
       ----------------------------------------------------- */

    .digital-divider {
        margin-top: 28px;
    }


    /* -----------------------------------------------------
       PROJECT STACK
       ----------------------------------------------------- */

    .digital-projects {
        display: flex;
        flex-direction: column;

        align-items: center;

        gap: 34px;

        margin-top: 38px;
    }


    /* -----------------------------------------------------
       CARD
       ----------------------------------------------------- */

    .digital-project-card {
        width: 100%;
        max-width: 345px;

        height: 465px;
    }

    .digital-card-paper {
        width: 100%;
        height: 100%;
    }

    .digital-card-tape {
        top: -16px;
        left: -10px;

        width: 64px;
    }


    /* -----------------------------------------------------
       CARD CONTENT
       ----------------------------------------------------- */

    .digital-card-content {
        padding:
            22px
            24px
            24px;
    }


    /* -----------------------------------------------------
       MOCKUPS
       ----------------------------------------------------- */

    .digital-project-mockup {
        width: 84%;
        height: 145px;

        margin:
            0
            0
            22px
            auto;

        position: relative;
        left: 20px;
    }

    .ddc-mockup {
        left: 28px;
    }


    /* -----------------------------------------------------
       TEXT
       ----------------------------------------------------- */

    .digital-card-content h2 {
        font-size: 25px;
        line-height: 1.08;
    }

    .digital-project-role {
        margin-top: 9px;

        font-size: 12px;
    }

    .digital-project-description {
        margin-top: 13px;

        font-size: 12px;
        line-height: 1.45;
    }


    /* -----------------------------------------------------
       CASE STUDY LINK
       ----------------------------------------------------- */

    .digital-project-link {
        margin-top: auto;
        margin-left: auto;

        font-size: 12px;
    }

    .project-arrow {
        font-size: 17px;
    }


    /* -----------------------------------------------------
       NO HOVER MOVEMENT ON TOUCH
       ----------------------------------------------------- */

    .digital-project-card:hover {
        transform: none;
        filter: none;
    }

    .digital-project-card:hover .digital-project-link {
        transform: none;
    }
}
/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .work-page {
        padding:
            30px
            32px
            80px;
    }


    .work-intro {
        padding-left: 20px;
    }


    .work-intro-writing {
        width: 245px;
    }


    .work-categories {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 22px;

        margin-top: 68px;
    }


    .work-card {
        width: 100%;

        height: auto;

        aspect-ratio: 330 / 450;
    }


    .work-card-content {
        padding:
            46%
            10%
            9%;
    }


    .work-card-content h2 {
        font-size: 23px;
    }


    .work-card-tags {
        gap: 8px;

        margin-top: 10px;

        font-size: 11px;
    }


    .tag-divider {
        height: 32px;
    }


    .work-card-button {
        width: 132px;
        height: 38px;

        font-size: 12px;
    }


    .work-card-tape {
        width: 64px;
    }
}


/* =========================================================
   WORK PAGE — MOBILE
   Figma reference
   ========================================================= */

   @media (max-width: 700px) {

    .work-page {
        padding:
            10px
            22px
            110px;
    }


    /* -----------------------------------------------------
       Intro
       ----------------------------------------------------- */

    .work-intro {
        padding-left: 18px;
    }

    .work-intro-writing {
        width: 205px;
        height: auto;
    }


    /* -----------------------------------------------------
       Card stack
       ----------------------------------------------------- */

    .work-categories {
        display: flex;
        flex-direction: column;

        align-items: center;

        gap: 34px;

        margin-top: 34px;

        padding: 0;
    }


    /* -----------------------------------------------------
       Card
       ----------------------------------------------------- */

    .work-card {
        position: relative;

        width: 100%;
        max-width: 345px;

        height: 205px;

        margin: 0 auto;

        transform: none;
    }


    /* Paper */

    .work-card-paper {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        object-fit: fill;

        z-index: 1;

        filter:
            drop-shadow(
                0 5px 5px
                rgba(47, 42, 38, 0.10)
            );
    }


    /* Tape */

    .work-card-tape {
        position: absolute;

        top: -14px;
        left: -18px;

        width: 62px;
        height: auto;

        z-index: 3;
    }


    /* -----------------------------------------------------
       Content
       ----------------------------------------------------- */

    .work-card-content {
        position: absolute;

        inset: 0;

        z-index: 2;

        display: flex;
        flex-direction: column;

        padding:
            42px
            24px
            18px;
    }


    /* Title */

    .work-card-content h2 {
        margin: 0;

        font-family: var(--font-display);

        font-size: 28px;
        font-weight: 400;

        line-height: 1.1;

        color: var(--ink);

        white-space: nowrap;
    }


    /* Tags */

    .work-card-tags {
        display: flex;
        align-items: center;

        gap: 12px;

        margin-top: 12px;

        font-family: var(--font-body);

        font-size: 13px;
        font-weight: 400;

        line-height: 1.25;

        color: var(--ink);

        white-space: nowrap;
    }


    .tag-divider {
        width: 1px;
        height: 46px;

        flex: 0 0 1px;

        background:
            rgba(47, 42, 38, 0.55);
    }


    /* -----------------------------------------------------
       Button
       ----------------------------------------------------- */

    .work-card-button {
        align-self: flex-end;

        width: 148px;
        height: 38px;

        margin-top: auto;

        border: 1px solid var(--ink);
        border-radius: 999px;

        font-size: 12px;
    }


    /* No hover on touch */

    .work-card:hover {
        transform: none;
        filter: none;
    }

    .work-card:hover .work-card-button {
        background: transparent;
        color: var(--ink);

        transform: none;
    }
}

/* =========================================================
   MOBILE NAV — HIDDEN BY DEFAULT
   ========================================================= */

.mobile-tab-nav {
    display: none;
}
   
   /* =========================================================
      TABLET
      ========================================================= */
   
   @media (max-width: 1100px) {
   
       :root {
           --page-padding: 36px;
       }
   
   
       /* -----------------------------------------------------
          Header
          ----------------------------------------------------- */
   
       .site-header {
           height: 95px;
   
           padding-top: 28px;
       }
   
       .logo {
           font-size: 40px;
       }
   
       .main-nav {
           gap: 38px;
   
           padding-top: 8px;
       }
   
       .main-nav a {
           font-size: 14px;
       }
   
   
       /* -----------------------------------------------------
          Homepage
          ----------------------------------------------------- */
   
       .hero {
           padding-bottom: 70px;
       }
   
       .hero-composition {
           width: 850px;
           max-width: 100%;
   
           height: 500px;
       }
   
       .portrait-wrapper {
           left: 42%;
           top: 45px;
   
           width: 325px;
   
           transform: rotate(-1deg);
       }
   
       .annotation-curious {
           left: 0;
           top: 310px;
   
           width: 210px;
       }
   
       .annotation-curious img {
           width: 190px;
       }
   
       .annotation-observant {
           left: 67%;
           top: 185px;
   
           width: 260px;
       }
   
       .annotation-observant img {
           width: 245px;
       }
   
       .annotation-thoughtful {
           left: 72%;
           top: 350px;
   
           width: 275px;
       }
   
       .annotation-thoughtful img {
           width: 260px;
       }
   
       .annotation p {
           font-size: 14px;
       }
   
       .hero-intro {
           margin-top: 24px;
       }
   
       .hero-intro h1 {
           font-size: 34px;
       }
   
       .outline-button {
           width: 310px;
           height: 52px;
   
           margin-top: 34px;
   
           font-size: 15px;
       }
   
   
       /* -----------------------------------------------------
          About tablet
          ----------------------------------------------------- */
   
       .about-page {
           padding:
               50px
               var(--page-padding)
               70px;
       }
   
       .about-intro {
           grid-template-columns:
               minmax(0, 0.9fr)
               minmax(0, 1.1fr);
   
           column-gap: 70px;
       }
   
       .about-intro-heading h1 {
           font-size: 36px;
       }
   
       .about-intro-copy p {
           font-size: 17px;
       }
   
       .journey-section {
           margin-top: 85px;
       }
   
       .journey-map {
           transform-origin: top left;
       }
   
       .note-fine-arts {
           left: 0;
       }
   
       .note-illustration {
           left: 22%;
       }
   
       .note-event-planning {
           left: 30%;
       }
   
       .note-development {
           left: 55%;
       }
   
       .note-ux {
           right: 0;
       }
   }
   
   
   /* =========================================================
      MOBILE
      Main Figma reference: 393 × 852
      ========================================================= */
   
   @media (max-width: 700px) {
   
       :root {
           --page-padding: 24px;
       }
   
   
       /* -----------------------------------------------------
          Header
          ----------------------------------------------------- */
   
       .site-header {
           height: 115px;
   
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: flex-start;
   
           padding:
               24px
               var(--page-padding)
               10px;
       }
   
       .logo {
           font-size: 40px;
           line-height: 1;
       }
   
       .main-nav {
           display: none;
       }
   
   
       /* -----------------------------------------------------
          Homepage mobile
          ----------------------------------------------------- */
   
       .hero {
           width: 100%;
   
           padding:
               0
               var(--page-padding)
               110px;
       }
   
       .hero-composition {
           position: relative;
   
           display: block;
   
           width: 100%;
           max-width: 393px;
   
           height: 355px;
   
           margin:
               0
               auto;
       }
   
   
       /* Portrait */
   
       .portrait-wrapper {
           position: absolute;
   
           width: 165px;
   
           left: 45px;
           top: 92px;
   
           transform: rotate(-1deg);
   
           z-index: 2;
       }
   
   
       /* Annotation base */
   
       .annotation {
           position: absolute;
   
           margin: 0;
   
           color: var(--ink);
   
           z-index: 3;
       }
   
       .annotation img {
           display: block;
   
           height: auto;
   
           margin-bottom: 5px;
       }
   
       .annotation p {
           margin: 0;
   
           font-family: var(--font-body);
   
           font-size: 10px;
           font-weight: 400;
   
           line-height: 1.3;
   
           color: var(--ink);
       }
   
   
       /* Curious */
   
       .annotation-curious {
           left: 0;
           top: 42px;
   
           width: 135px;
       }
   
       .annotation-curious img {
           width: 112px;
       }
   
   
       /* Observant */
   
       .annotation-observant {
           left: 225px;
           top: 96px;
   
           width: 145px;
       }
   
       .annotation-observant img {
           width: 125px;
       }
   
   
       /* Thoughtful */
   
       .annotation-thoughtful {
           left: 215px;
           top: 220px;
   
           width: 150px;
       }
   
       .annotation-thoughtful img {
           width: 138px;
       }
   
   
       /* Mobile connector lines */
   
       .annotation::before {
           content: "";
   
           position: absolute;
   
           display: block;
   
           height: 1px;
   
           opacity: 0.45;
   
           background-image:
               linear-gradient(
                   to right,
                   var(--connector) 45%,
                   transparent 45%
               );
   
           background-size: 7px 1px;
           background-repeat: repeat-x;
       }
   
       .annotation-curious::before {
           width: 22px;
   
           right: 0;
           top: 13px;
       }
   
       .annotation-observant::before {
           width: 23px;
   
           left: -30px;
           top: 15px;
       }
   
       .annotation-thoughtful::before {
           width: 23px;
   
           left: -30px;
           top: 15px;
       }
   
   
       /* Homepage tagline */
   
       .hero-intro {
           margin-top: 18px;
   
           padding: 0 18px;
   
           text-align: center;
       }
   
       .hero-intro h1 {
           width: 100%;
           max-width: 300px;
   
           margin: 0 auto;
   
           font-size: 22px;
   
           line-height: 1.15;
   
           white-space: normal;
       }
   
   
       /* Homepage CTA */
   
       .outline-button {
           width: 260px;
           height: 48px;
   
           margin-top: 32px;
   
           padding: 0 24px;
   
           font-size: 14px;
           font-weight: 500;
       }
   
   
       /* -----------------------------------------------------
   ABOUT MOBILE
   Figma reference: vertical winding journey
   ----------------------------------------------------- */

.about-page {
    padding:
        0
        28px
        120px;
}


/* Intro */

.about-intro {
    display: block;
}

.about-intro-heading {
    margin-top: 58px;
}

.about-intro-heading h1 {
    margin: 0;

    font-family: var(--font-display);

    font-size: 24px;
    font-weight: 400;

    line-height: 1.18;

    color: var(--ink);
}

.about-intro-copy {
    max-width: none;

    padding-top: 24px;
}

.about-intro-copy p {
    margin: 0;

    font-family: var(--font-body);

    font-size: 16px;
    font-weight: 400;

    line-height: 1.48;

    color: var(--ink);
}


/* -----------------------------------------------------
   HOW I GOT HERE
   ----------------------------------------------------- */

   .journey-section {
    margin-top: 42px;
}


.journey-heading {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    padding-left: 0;
}

.journey-heading h2 {
    margin: 0;

    font-family: var(--font-display);

    font-size: 24px;
    font-weight: 400;

    line-height: 1.1;
}

.journey-arrow {
    width: 82px;
    height: auto;

    margin-top: -8px;
    margin-left: 0;
}


/* -----------------------------------------------------
   MOBILE JOURNEY MAP
   ----------------------------------------------------- */

.journey-map {
    position: relative;

    width: 100%;
    height: 900px;

    margin-top: -2px;
}


/* Vertical dotted path */

/* -----------------------------------------------------
   MOBILE JOURNEY PATH
   Uses dedicated Figma vertical SVG
   ----------------------------------------------------- */

   .journey-path-desktop {
    display: none;
}

.journey-path-mobile {
    display: block;

    position: absolute;

    top: 15px;
    left: 0;

    width: 100%;
    height: auto;

    z-index: 1;

    pointer-events: none;
}

/* -----------------------------------------------------
   MOBILE NOTES BASE
   ----------------------------------------------------- */

.journey-note {
    position: absolute;

    z-index: 2;
}

.note-tape {
    width: 58px;

    top: -14px;
    left: -8px;
}


/* -----------------------------------------------------
   FINE ARTS
   ----------------------------------------------------- */

.note-fine-arts {
    left: -8px;
    right: auto;

    top: 18px;

    width: 165px;
    height: 112px;

    transform: rotate(-4deg);
}

.note-fine-arts .note-writing {
    width: 105px;

    transform:
        translate(-50%, -50%)
        rotate(4deg);
}


/* -----------------------------------------------------
   EVENT PLANNING
   ----------------------------------------------------- */

.note-event-planning {
    left: auto;
    right: -8px;

    top: 145px;

    width: 205px;
    height: 130px;

    transform: rotate(-8deg);
}

.note-event-planning .note-writing {
    width: 178px;

    transform:
        translate(-50%, -50%)
        rotate(8deg);
}


/* -----------------------------------------------------
   ILLUSTRATION
   ----------------------------------------------------- */

.note-illustration {
    left: 18px;
    right: auto;

    top: 320px;

    width: 220px;
    height: 138px;

    transform: rotate(8deg);
}

.note-illustration .note-writing {
    width: 145px;

    transform:
        translate(-50%, -50%)
        rotate(-8deg);
}


/* -----------------------------------------------------
   FRONT-END DEVELOPMENT
   ----------------------------------------------------- */

.note-development {
    left: auto;
    right: 10px;

    top: 495px;

    width: 225px;
    height: 135px;

    transform: rotate(0deg);
}

.note-development .note-writing {
    width: 145px;

    transform:
        translate(-50%, -50%);
}


/* -----------------------------------------------------
   UX DESIGN
   ----------------------------------------------------- */

.note-ux {
    left: 15px;
    right: auto;

    top: 655px;

    width: 220px;
    height: 138px;

    transform: rotate(-6deg);
}

.note-ux .note-writing {
    width: 135px;

    transform:
        translate(-50%, -50%)
        rotate(6deg);
}
   
       /* -----------------------------------------------------
          Fixed bottom navigation
          ----------------------------------------------------- */
   
       .mobile-tab-nav {
           position: fixed;
   
           left: 0;
           right: 0;
           bottom: 0;
   
           z-index: 1000;
   
           display: grid;
           grid-template-columns: repeat(4, 1fr);
   
           min-height: 62px;
   
           padding:
               6px
               14px
               calc(6px + env(safe-area-inset-bottom));
   
           background:
               rgba(236, 227, 215, 0.97);
   
           border-top:
               1px solid rgba(47, 42, 38, 0.10);
   
           backdrop-filter: blur(8px);
           -webkit-backdrop-filter: blur(8px);
       }
   
       .mobile-tab {
           position: relative;
   
           display: flex;
           align-items: center;
           justify-content: center;
   
           min-height: 48px;
   
           font-family: var(--font-body);
   
           font-size: 12px;
           font-weight: 400;
   
           color: var(--warm-grey);
   
           transition:
               color 180ms ease,
               opacity 180ms ease;
       }
   
       .mobile-tab:hover {
           color: var(--ink);
       }
   
       .mobile-tab.active {
           color: var(--ink);
   
           font-weight: 500;
       }
   
       .mobile-tab.active::after {
           content: "";
   
           position: absolute;
   
           left: 50%;
           bottom: 4px;
   
           width: 22px;
           height: 1px;
   
           background: var(--ink);
   
           transform: translateX(-50%);
       }
   
   
       /* Leave room for fixed navigation */
   
       body {
           padding-bottom:
               calc(72px + env(safe-area-inset-bottom));
       }
   }









 /* =========================================================
   DDC CASE STUDY
   ========================================================= */


/* ---------------------------------------------------------
   PAGE WRAPPER
   --------------------------------------------------------- */

.ddc-case-study {
    width: 100%;
    max-width: 1440px;

    margin: 0 auto;

    padding:
        26px
        36px
        110px;
}

.ddc-root,
.ddc-page {
    overflow-x: clip;
}

a[aria-disabled="true"] {
    pointer-events: none;
}


/* ---------------------------------------------------------
   SHARED SECTION STYLING
   --------------------------------------------------------- */

.ddc-section {
    padding:
        54px
        48px;
}

.ddc-section-divider {
    width: 100%;
    height: 1px;

    background:
        rgba(47, 42, 38, 0.24);
}


/* =========================================================
   HANDWRITTEN TEXT
   ========================================================= */

.ddc-handwritten {
    font-family: var(--font-handwriting);
    font-weight: 400;

    color: var(--ink);
}


/* ---------------------------------------------------------
   BACK LINK
   --------------------------------------------------------- */

.ddc-back-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: var(--ink);

    text-decoration: none;
}

.ddc-back-arrow {
    font-family: var(--font-body);

    font-size: 20px;
    line-height: 1;
}

.ddc-back-text {
    font-size: 22px;
    line-height: 1;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   HANDWRITTEN SECTION HEADINGS
   --------------------------------------------------------- */

.ddc-section-writing {
    display: block;

    width: auto;

    margin:
        0
        0
        36px;

    font-size: 27px;
    font-weight: 400;

    line-height: 1.1;
}


/* =========================================================
   HERO
   ========================================================= */

.ddc-hero {
    padding:
        8px
        48px
        58px;
}

.ddc-hero-grid {
    display: grid;

    grid-template-columns:
        0.82fr
        1.18fr;

    gap: 34px;

    align-items: center;

    margin-top: 38px;
}


/* ---------------------------------------------------------
   HERO COPY
   --------------------------------------------------------- */

.ddc-hero-copy h1 {
    margin: 0;

    font-family: var(--font-display);

    font-size: 40px;
    font-weight: 400;

    line-height: 1.02;

    color: var(--ink);
}

.ddc-hero-intro {
    max-width: 360px;

    margin:
        18px
        0
        0;

    font-family: var(--font-body);

    font-size: 14px;
    line-height: 1.45;

    color: var(--ink);
}


/* ---------------------------------------------------------
   PROJECT META
   --------------------------------------------------------- */

.ddc-project-meta {
    display: flex;
    flex-direction: column;

    gap: 16px;

    margin-top: 24px;
}

.ddc-meta-label {
    margin: 0;

    font-family: var(--font-body);

    font-size: 12px;
    font-weight: 600;

    color: var(--ink);
}

.ddc-meta-value {
    max-width: 390px;

    margin:
        4px
        0
        0;

    font-family: var(--font-body);

    font-size: 12px;
    line-height: 1.45;

    color: var(--ink);
}

.ddc-live-link {
    display: inline-block;

    margin-top: 20px;

    font-family: var(--font-body);

    font-size: 12px;
    font-weight: 600;

    color: var(--ink);

    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ---------------------------------------------------------
   HERO MOCKUP
   --------------------------------------------------------- */

.ddc-hero-visual {
    display: flex;
    justify-content: flex-end;
    overflow: visible;
}

.ddc-hero-mockup {
    display: block;

    width: 740px;
    max-width: none;
    height: auto;

    transform: translateX(75px);
}

/* =========================================================
   WHERE IT STARTED
   ========================================================= */

   .ddc-original-site-layout {
    position: relative;

    width: 100%;
    max-width: 1000px;

    height: 540px;

    margin: 0 auto;
}


/* ---------------------------------------------------------
   ORIGINAL SITE SCREENS
   --------------------------------------------------------- */

.ddc-original-images {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}

.ddc-original-screen {
    position: absolute;

    display: block;

    height: auto;

    box-shadow:
        0 4px 9px
        rgba(47, 42, 38, 0.06);
}


/* Main English screen */

.ddc-original-english {
    width: 120%;

    top: 0;
    left: 14%;
}


/* Urdu overlapping screen */

.ddc-original-urdu {
    width: 80%;

    top: 350px;
    left: 35%;

    z-index: 3;
}


/* =========================================================
   PAPER NOTE
   ========================================================= */

.ddc-paper-note {
    position: absolute;

    width: 519px;
    height: 233px;

    left: 2%;
    top: 205px;

    
    z-index: 5;
}


/* Paper itself */

.ddc-note-paper {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    transform: rotate(-15deg);

    z-index: 1;
}


/* Tape */

.ddc-note-tape {
    position: absolute;

    top: -12px;
    left: -2px;

    width: 52px;
    height: auto;

    z-index: 3;

    pointer-events: none;
}


/* Text MUST stay over paper */

.ddc-note-content {
    position: absolute;

    inset: 0;

    z-index: 2;

    box-sizing: border-box;

    padding:
        28px
        24px
        20px;

    transform: rotate(2deg);
}

.ddc-note-content p {
    margin: 0;

    font-family: var(--font-body);

    font-size: 11px;
    line-height: 1.45;

    color: var(--ink);
}

.ddc-note-content p + p {
    margin-top: 12px;
}

/* =========================================================
   THE BRIEF
   ========================================================= */

.ddc-brief-copy {
    max-width: 640px;
}

.ddc-brief-copy p {
    margin:
        0
        0
        14px;

    font-family: var(--font-body);

    font-size: 13px;
    line-height: 1.5;

    color: var(--ink);
}

.ddc-newspaper-wrap {
    display: flex;
    justify-content: center;

    margin-top: 26px;
}

.ddc-newspaper-reference {
    display: block;

    width: 58%;
    max-width: 520px;
    height: auto;
}

.ddc-newspaper-annotation {
    display: none;
}


/* =========================================================
   WHAT NEEDED TO WORK BETTER
   ========================================================= */

.ddc-improvement-stack {
    display: flex;
    flex-direction: column;

    gap: 24px;

    max-width: 790px;

    margin: 0 auto;
}

.ddc-improvement-card {
    position: relative;

    width: 100%;
    min-height: 140px;
}

.ddc-improvement-paper {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    z-index: 1;
}

.ddc-improvement-tape {
    position: absolute;

    top: -10px;
    left: -11px;

    width: 50px;
    height: auto;

    z-index: 3;

    pointer-events: none;
}

.ddc-improvement-content {
    position: relative;

    z-index: 2;

    padding:
        32px
        40px
        28px;
}

.ddc-improvement-content h3 {
    margin: 0;

    font-family: var(--font-display);

    font-size: 20px;
    font-weight: 400;

    color: var(--ink);
}

.ddc-improvement-content p {
    max-width: 650px;

    margin:
        14px
        0
        0;

    font-family: var(--font-body);

    font-size: 12px;
    line-height: 1.5;

    color: var(--ink);
}


/* =========================================================
   HOW IT CAME TOGETHER
   ========================================================= */

.ddc-design-block {
    margin-top: 56px;
}

.ddc-design-block:first-of-type {
    margin-top: 0;
}

.ddc-block-heading {
    margin-bottom: 20px;
}

.ddc-block-heading h2 {
    margin: 0;

    font-family: var(--font-display);

    font-size: 24px;
    font-weight: 400;

    line-height: 1.1;

    color: var(--ink);
}

.ddc-block-heading p {
    margin:
        5px
        0
        0;

    font-family: var(--font-body);

    font-size: 11px;
    line-height: 1.4;

    color:
        rgba(47, 42, 38, 0.70);
}


/* ---------------------------------------------------------
   FLAT SCREENS
   --------------------------------------------------------- */

.ddc-full-screen {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;
}


/* =========================================================
   VISUAL LANGUAGE
   ========================================================= */

.ddc-colour-palette {
    display: flex;
    align-items: center;

    gap: 8px;

    margin:
        18px
        0
        24px;
}

.ddc-colour {
    display: block;

    width: 44px;
    height: 44px;

    border-radius: 50%;
}

.ddc-colour-charcoal {
    background: #444444;
}

.ddc-colour-cream {
    background: #F2EADF;

    border:
        1px solid
        rgba(47, 42, 38, 0.10);
}

.ddc-colour-yellow {
    background: #F2B928;
}

.ddc-colour-red {
    background: #98191D;
}


/* =========================================================
   RESPONSIVE DESIGN
   ========================================================= */

.ddc-responsive-gallery {
    display: flex;
    flex-direction: column;

    gap: 26px;
}

.ddc-responsive-image {
    display: block;

    width: 100%;
    height: auto;
}

.ddc-closing-copy {
    max-width: 640px;

    margin-top: 26px;
}

.ddc-closing-copy p {
    margin: 0;

    font-family: var(--font-body);

    font-size: 12px;
    line-height: 1.55;

    color: var(--ink);
}


/* =========================================================
   NEXT PROJECT
   ========================================================= */

.ddc-next-project {
    display: flex;
    justify-content: flex-end;

    padding:
        42px
        48px
        0;
}

.ddc-next-link {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    font-family: var(--font-body);

    font-size: 13px;
    font-weight: 600;

    color: var(--ink);

    text-decoration: none;
}


/* =========================================================
   DDC CASE STUDY — FIGMA DESKTOP COMPOSITION
   Selected frame: 1440px, node 871:279
   These overrides are isolated to the DDC page and desktop.
   ========================================================= */

@media (min-width: 1051px) {

    .ddc-page {
        overflow-x: hidden;
    }

    .ddc-case-study {
        position: relative;
        width: 1440px;
        max-width: none;
        height: 13095px;
        margin: -100px auto 0;
        padding: 0;
        overflow: visible;
    }

    .ddc-section,
    .ddc-hero {
        position: absolute;
        width: 1440px;
        padding: 0;
    }

    .ddc-section-divider {
        position: absolute;
        left: 39px;
        width: 1362px;
        height: 1px;
        background: rgba(47, 42, 38, 0.28);
    }

    .ddc-hero + .ddc-section-divider { top: 739px; }
    .ddc-started + .ddc-section-divider { top: 1954px; left: 57px; }
    .ddc-improvements + .ddc-section-divider { top: 4801px; }

    .ddc-hero {
        inset: 0 auto auto 0;
        height: 739px;
    }

    .ddc-back-link {
        position: absolute;
        left: 91px;
        top: 139px;
        width: 515px;
        height: 22px;
        gap: 12px;
    }

    .ddc-back-arrow {
        width: 23px;
        font-size: 22px;
    }

    .ddc-back-text {
        width: 346px;
        height: 19px;
        overflow: hidden;
        color: transparent;
        background: url("../assets/graphics/back-to-digital-experiences.svg") left center / 346px 19px no-repeat;
    }

    .ddc-hero-grid,
    .ddc-hero-copy,
    .ddc-hero-visual {
        display: block;
        position: static;
        margin: 0;
    }

    .ddc-hero-copy h1 {
        position: absolute;
        left: 131px;
        top: 224px;
        width: 493px;
        margin: 0;
        font-size: 42px;
        line-height: normal;
    }

    .ddc-project-type {
        position: absolute;
        left: 131px;
        top: 358px;
        margin: 0;
        color: #767676;
        font-size: 20px;
        line-height: normal;
    }

    .ddc-hero-intro {
        position: absolute;
        left: 131px;
        top: 401px;
        width: 462px;
        max-width: none;
        margin: 0;
        font-size: 18px;
        line-height: normal;
    }

    .ddc-project-meta {
        display: block;
        position: static;
        margin: 0;
    }

    .ddc-meta-block {
        position: absolute;
        left: 131px;
        width: 468px;
    }

    .ddc-meta-block:first-child { top: 502px; }
    .ddc-meta-block:last-child { top: 563px; }

    .ddc-meta-label,
    .ddc-meta-value {
        max-width: none;
        margin: 0;
        font-size: 16px;
        line-height: normal;
    }

    .ddc-meta-label { font-weight: 600; }

    .ddc-live-link {
        position: absolute;
        left: 135px;
        top: 663px;
        margin: 0;
        font-size: 16px;
        line-height: normal;
    }

    .ddc-hero-mockup {
        position: absolute;
        left: 667px;
        top: 176px;
        width: 790px;
        max-width: none;
        height: auto;
        transform: none;
    }

    .ddc-section-writing {
        position: absolute;
        margin: 0;
        line-height: 0;
    }

    .ddc-section-writing img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .ddc-started {
        top: 739px;
        height: 1215px;
    }

    .ddc-started .ddc-section-writing {
        left: 155px;
        top: 133px;
        width: 363px;
        height: 27px;
    }

    .ddc-original-site-layout {
        position: static;
        width: auto;
        max-width: none;
        height: auto;
        margin: 0;
    }

    .ddc-original-images { position: static; }

    .ddc-original-screen {
        box-shadow: none;
        object-fit: cover;
    }

    .ddc-original-english {
        left: 221px;
        top: 188px;
        width: 1164px;
        height: 571px;
    }

    .ddc-original-urdu {
        left: 557px;
        top: 655px;
        width: 869px;
        height: 426px;
        z-index: 3;
    }

    .ddc-paper-note {
        left: 44px;
        top: 539px;
        width: 527px;
        height: 253px;
        transform: rotate(-2.15deg);
    }

    .ddc-note-tape {
        top: -19px;
        left: -34px;
        width: 92px;
        transform: rotate(-37.7deg);
    }

    .ddc-note-content {
        padding: 49px 51px 24px 74px;
        transform: rotate(2.15deg);
    }

    .ddc-note-content p {
        font-size: 20px;
        line-height: normal;
    }

    .ddc-note-content p + p { margin-top: 24px; }

    .ddc-brief {
        top: 1954px;
        height: 1339px;
    }

    .ddc-brief .ddc-section-writing {
        left: 159px;
        top: 133px;
        width: 201px;
        height: 34px;
    }

    .ddc-brief-copy {
        position: absolute;
        left: 158px;
        top: 197px;
        width: 858px;
        max-width: none;
    }

    .ddc-brief-copy p {
        margin: 0 0 20px;
        font-size: 20px;
        line-height: normal;
    }

    .ddc-newspaper-wrap {
        position: absolute;
        left: 109px;
        top: 379px;
        width: 1273px;
        height: 792px;
        margin: 0;
        display: block;
    }

    .ddc-newspaper-reference {
        width: 1273px;
        max-width: none;
        height: auto;
    }

    .ddc-improvements {
        top: 3293px;
        height: 1508px;
    }

    .ddc-improvements::before {
        content: "";
        position: absolute;
        left: 57px;
        top: 0;
        width: 1362px;
        height: 1px;
        background: rgba(47, 42, 38, 0.28);
    }

    .ddc-improvements .ddc-section-writing {
        left: 159px;
        top: 133px;
        width: 612px;
        height: 27px;
    }

    .ddc-improvement-stack {
        position: absolute;
        left: 122px;
        top: 272px;
        width: 1216px;
        max-width: none;
        gap: 63px;
    }

    .ddc-improvement-card {
        width: 1216px;
        min-height: 306px;
        height: 306px;
    }

    .ddc-improvement-tape {
        top: -36px;
        left: -42px;
        width: 92px;
        transform: rotate(-39.83deg);
    }

    .ddc-improvement-content {
        padding: 72px 55px 30px;
    }

    .ddc-improvement-content h3 {
        font-family: "Playfair Display", var(--font-display);
        font-size: 30px;
        font-weight: 600;
        line-height: normal;
        color: #2f2a26;
    }

    .ddc-improvement-content p {
        width: 874px;
        max-width: none;
        margin-top: 37px;
        font-size: 24px;
        line-height: normal;
        color: #2b2b2b;
    }

    .ddc-together {
        top: 4801px;
        height: 8294px;
    }

    .ddc-together .ddc-section-writing {
        left: 122px;
        top: 133px;
        width: 469px;
        height: 34px;
    }

    .ddc-design-block {
        position: absolute;
        left: 0;
        width: 1440px;
        margin: 0;
    }

    .ddc-design-block:nth-of-type(1) { top: 315px; }
    .ddc-design-block:nth-of-type(2) { top: 1557px; }
    .ddc-design-block:nth-of-type(3) { top: 2835px; }
    .ddc-design-block:nth-of-type(4) { top: 4342px; }

    .ddc-block-heading {
        position: absolute;
        left: 108px;
        top: 0;
        width: 1217px;
        margin: 0;
    }

    .ddc-design-block:first-of-type .ddc-block-heading { left: 117px; }

    .ddc-block-heading h2 {
        font-family: "Playfair Display", var(--font-display);
        font-size: 40px;
        font-weight: 600;
        line-height: 40px;
    }

    .ddc-block-heading p {
        margin-top: 0;
        color: #767676;
        font-size: 24px;
        line-height: 40px;
    }

    .ddc-full-screen {
        position: absolute;
        left: 0;
        top: 118px;
        width: 1440px;
        height: 960px;
        max-width: none;
        object-fit: cover;
    }

    .ddc-urdu-block .ddc-full-screen { top: 165px; }
    .ddc-visual-language .ddc-full-screen { top: 349px; }

    .ddc-colour-palette {
        position: absolute;
        left: 97px;
        top: 160px;
        gap: 9px;
        margin: 0;
    }

    .ddc-colour {
        width: 119px;
        height: 119px;
    }

    .ddc-responsive-gallery {
        position: absolute;
        left: 24px;
        top: 148px;
        width: 1474px;
        height: 3602px;
        display: block;
    }

    .ddc-responsive-image {
        position: absolute;
        left: 0;
        width: 1474px;
        max-width: none;
        object-fit: fill;
    }

    .ddc-responsive-image:nth-child(1) {
        top: 0;
        height: 1099px;
    }

    .ddc-responsive-image:nth-child(2) {
        top: 1058px;
        height: 1198px;
    }

    .ddc-responsive-image:nth-child(3) {
        top: 2362px;
        height: 1240px;
    }

    .ddc-closing-copy {
        position: absolute;
        left: 79px;
        top: 3819px;
        width: 967px;
        max-width: none;
        margin: 0;
    }

    .ddc-closing-copy p {
        font-size: 24px;
        line-height: normal;
    }

    .ddc-final-live-link {
        left: 56px;
        top: 88px;
    }
}


/* =========================================================
   DDC CASE STUDY — LAPTOP-SCALE DESKTOP CORRECTION
   Figma controls composition; the portfolio controls scale.
   Isolated from shared header and mobile/tablet styles.
   ========================================================= */

@media (min-width: 1051px) {

    .ddc-page {
        overflow-x: clip;
    }

    .ddc-case-study {
        position: static;
        width: 100%;
        max-width: 1280px;
        height: auto;
        margin: 0 auto;
        padding: 20px 36px 88px;
        overflow: visible;
    }

    .ddc-section,
    .ddc-hero {
        position: relative;
        width: 100%;
        height: auto;
    }

    .ddc-section {
        padding: 54px 48px 64px;
    }

    .ddc-section-divider,
    .ddc-hero + .ddc-section-divider,
    .ddc-started + .ddc-section-divider,
    .ddc-improvements + .ddc-section-divider {
        position: static;
        width: 100%;
        height: 1px;
        background: rgba(47, 42, 38, 0.24);
    }

    .ddc-started + .ddc-section-divider {
        margin-top: 30px;
    }

    .ddc-hero {
        inset: auto;
        padding: 8px 48px 54px;
    }

    .ddc-back-link {
        position: static;
        width: auto;
        height: auto;
        gap: 8px;
    }

    .ddc-back-arrow {
        width: auto;
        font-size: 18px;
    }

    .ddc-back-text {
        width: 282px;
        height: 16px;
        overflow: hidden;
        color: transparent;
        background: url("../assets/graphics/back-to-digital-experiences.svg") left center / contain no-repeat;
    }

    .ddc-hero-grid {
        display: grid;
        position: static;
        grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
        gap: 30px;
        align-items: center;
        margin-top: 34px;
    }

    .ddc-hero-copy,
    .ddc-hero-visual {
        position: static;
    }

    .ddc-hero-copy h1 {
        position: static;
        width: auto;
        margin: 0;
        font-size: clamp(34px, 3vw, 40px);
        line-height: 1.04;
    }

    .ddc-project-type {
        position: static;
        margin: 14px 0 0;
        color: #767676;
        font-size: 16px;
        line-height: 1.35;
    }

    .ddc-hero-intro {
        position: static;
        width: auto;
        max-width: 390px;
        margin: 17px 0 0;
        font-size: 14px;
        line-height: 1.5;
    }

    .ddc-project-meta {
        display: flex;
        position: static;
        flex-direction: column;
        gap: 14px;
        margin-top: 22px;
    }

    .ddc-meta-block,
    .ddc-meta-block:first-child,
    .ddc-meta-block:last-child {
        position: static;
        width: auto;
    }

    .ddc-meta-label,
    .ddc-meta-value {
        max-width: 405px;
        font-size: 12px;
        line-height: 1.45;
    }

    .ddc-meta-value { margin-top: 3px; }

    .ddc-live-link {
        position: static;
        margin-top: 18px;
        font-size: 12px;
        line-height: 1.4;
    }

    .ddc-hero-visual {
        display: flex;
        justify-content: flex-end;
    }

    .ddc-hero-mockup {
        position: static;
        width: min(100%, 650px);
        max-width: none;
        height: auto;
        transform: translateX(42px);
    }

    .ddc-section-writing,
    .ddc-started .ddc-section-writing,
    .ddc-brief .ddc-section-writing,
    .ddc-improvements .ddc-section-writing,
    .ddc-together .ddc-section-writing {
        position: static;
        height: auto;
        margin: 0 0 34px;
        line-height: 0;
    }

    .ddc-section-writing img {
        display: block;
        width: 100%;
        height: auto;
    }

    .ddc-started .ddc-section-writing { width: 272px; }
    .ddc-brief .ddc-section-writing { width: 148px; }
    .ddc-improvements .ddc-section-writing { width: 455px; }
    .ddc-together .ddc-section-writing { width: 350px; }

    .ddc-started,
    .ddc-brief,
    .ddc-improvements,
    .ddc-together {
        top: auto;
    }

    .ddc-original-site-layout {
        position: relative;
        width: 100%;
        max-width: 920px;
        height: 500px;
        margin: 0 auto;
    }

    .ddc-original-images {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .ddc-original-screen {
        position: absolute;
        height: auto;
        object-fit: cover;
        box-shadow: 0 4px 9px rgba(47, 42, 38, 0.06);
    }

    .ddc-original-english {
        left: 15%;
        top: 0;
        width: 82%;
        height: auto;
    }

    .ddc-original-urdu {
        left: 43%;
        top: 285px;
        width: 60%;
        height: auto;
        z-index: 3;
    }

    .ddc-paper-note {
        left: 10px;
        top: 250px;
        width: 365px;
        height: 210px;
        transform: rotate(-2deg);
        transform-origin: center;
    }

    .ddc-note-paper {
        object-fit: contain;
    }

  .ddc-note-tape {
    top: 28px;
    left: -2px;
    width: 58px;
    transform: rotate(-15deg);
    transform-origin: center;
  }

  .ddc-note-content {
    padding: 42px 36px 28px 46px;
    transform: translateY(20px);
  }

    .ddc-note-content p {
        font-size: 11px;
        line-height: 1.42;
    }

    .ddc-note-content p + p { margin-top: 10px; }

    .ddc-brief-copy {
        position: static;
        width: 100%;
        max-width: 680px;
    }

    .ddc-brief-copy p {
        margin: 0 0 14px;
        font-size: 14px;
        line-height: 1.5;
    }

    .ddc-brief {
        padding-bottom: 168px;
    }

    .ddc-newspaper-wrap {
        position: relative;
        left: 25.5px;
        top: auto;
        display: block;
        width: 1273px;
        max-width: none;
        height: 792px;
        margin: 34px auto 0;
    }

    .ddc-newspaper-reference {
        position: absolute;
        left: 396px;
        top: 30px;
        width: 777px;
        max-width: none;
        height: auto;
        object-fit: contain;
    }

    .ddc-newspaper-annotation {
        display: block;
        position: absolute;
        z-index: 3;
    }

    .ddc-annotation-label,
    .ddc-annotation-arrow {
        display: block;
        max-width: none;
        height: auto;
    }

    .ddc-newspaper-annotation .ddc-annotation-label {
        width: 100%;
    }

    .ddc-annotation-monochrome {
        left: 0;
        top: 0;
        width: auto;
    }

    .ddc-annotation-monochrome .ddc-annotation-label {
        position: absolute;
        left: 0;
        top: 236.89px;
        width: 343px;
        height: 29px;
    }

    .ddc-annotation-monochrome .ddc-annotation-arrow {
        position: absolute;
        left: 164.92px;
        top: 0;
        width: 408px;
        height: 254.75px;
        margin: 0;
        object-fit: contain;
        transform: rotate(-33.224deg);
    }

    .ddc-annotation-typography {
        left: 0;
        right: auto;
        top: 0;
        width: auto;
    }

    .ddc-annotation-typography .ddc-annotation-label {
        position: absolute;
        left: 898.69px;
        top: 231.27px;
        width: 191px;
        height: 25.6px;
    }

    .ddc-annotation-typography .ddc-annotation-arrow {
        position: absolute;
        left: 685px;
        top: 217.89px;
        width: 367.1px;
        height: 298.3px;
        margin: 0;
        object-fit: contain;
        transform: rotate(159.1deg);
    }

    .ddc-annotation-columns {
        left: 0;
        right: auto;
        top: 0;
        bottom: auto;
        width: auto;
    }

    .ddc-annotation-columns .ddc-annotation-label {
        position: absolute;
        left: 973.69px;
        top: 413.6px;
        width: 132.8px;
        height: 19.7px;
    }

    .ddc-annotation-columns .ddc-annotation-arrow {
        position: absolute;
        left: 1095.343px;
        top: 389.916px;
        width: 298.371px;
        height: 186.254px;
        margin: 0;
        object-fit: contain;
        transform: rotate(44.724deg);
    }

    .ddc-improvements {
        padding-top: 133px;
        padding-bottom: 192px;
    }

    .ddc-improvements::before {
        display: block;
        left: -41px;
        top: 0;
        width: 1362px;
    }

    .ddc-improvements .ddc-section-writing {
        position: relative;
        left: 31px;
        top: 0;
        width: 611.534px;
        height: 26.368px;
        margin-bottom: 112.632px;
    }

    .ddc-improvement-stack {
        position: static;
        width: 1216px;
        max-width: none;
        gap: 63px;
        margin: 0 0 0 -6px;
    }

    .ddc-improvement-card {
        width: 1216px;
        height: 306px;
        min-height: 0;
        transform: none;
    }

    .ddc-improvement-card:nth-child(2) {
        align-self: auto;
        transform: none;
    }

    .ddc-improvement-card:nth-child(1),
    .ddc-improvement-card:nth-child(3) {
        transform: none;
    }

    .ddc-improvement-paper {
        inset: -4px;
        width: 1224px;
        height: 314px;
        object-fit: contain;
    }

    .ddc-improvement-tape {
        top: -36px;
        left: -42px;
        width: 92.436px;
        height: 87.846px;
        transform: none;
    }

    .ddc-improvement-content {
        padding: 72px 55px 30px;
    }

    .ddc-improvement-content h3 {
        font-family: "Playfair Display", var(--font-display);
        font-size: 30px;
        font-weight: 600;
        line-height: normal;
    }

    .ddc-improvement-content p {
        width: 874px;
        max-width: none;
        margin-top: 37px;
        font-size: 24px;
        line-height: normal;
    }

    .ddc-together {
        height: auto;
        min-height: 8360px;
        padding: 0;
    }

    .ddc-together > .ddc-section-writing {
        position: absolute;
        left: 42px;
        top: 133px;
        width: 468.683px;
        height: 33.644px;
        margin: 0;
    }

    .ddc-design-block,
    .ddc-design-block:nth-of-type(1),
    .ddc-design-block:nth-of-type(2),
    .ddc-design-block:nth-of-type(3),
    .ddc-design-block:nth-of-type(4) {
        position: absolute;
        left: 0;
        width: 1280px;
        margin: 0;
    }

    .ddc-design-block:nth-of-type(1) { top: 315px; }
    .ddc-design-block:nth-of-type(2) { top: 1557px; }
    .ddc-design-block:nth-of-type(3) { top: 2835px; }
    .ddc-design-block:nth-of-type(4) { top: 4342px; }

    .ddc-block-heading,
    .ddc-design-block:first-of-type .ddc-block-heading {
        position: static;
        width: 100%;
        max-width: 760px;
        margin: 0 0 18px;
    }

    .ddc-block-heading h2 {
        font-family: "Playfair Display", var(--font-display);
        font-size: 27px;
        font-weight: 600;
        line-height: 1.15;
    }

    .ddc-block-heading p {
        max-width: 720px;
        margin-top: 4px;
        color: #767676;
        font-size: 14px;
        line-height: 1.5;
    }

    .ddc-design-block:first-of-type .ddc-block-heading {
        position: absolute;
        left: 37px;
        top: 0;
        width: 1217px;
        max-width: none;
        margin: 0;
    }

    .ddc-together .ddc-block-heading h2 {
        font-size: 36px;
        line-height: 40px;
        color: #2f2a26;
    }

    .ddc-together .ddc-block-heading p {
        max-width: none;
        margin: 0;
        font-size: 22px;
        line-height: 40px;
        color: #767676;
    }

    .ddc-design-block:first-of-type .ddc-full-screen {
        position: absolute;
        left: -80px;
        top: 118px;
        width: 1440px;
        max-width: none;
        height: 960px;
        margin: 0;
        object-fit: cover;
    }

    .ddc-design-block:nth-of-type(2) .ddc-block-heading {
        position: absolute;
        left: 31px;
        top: 0;
        width: 1217px;
        max-width: none;
        margin: 0;
    }

    .ddc-design-block:nth-of-type(2) .ddc-full-screen {
        position: absolute;
        left: -80px;
        top: 165px;
        width: 1440px;
        max-width: none;
        height: 960px;
        margin: 0;
        object-fit: cover;
    }

    .ddc-design-block:nth-of-type(3) .ddc-block-heading,
    .ddc-design-block:nth-of-type(4) .ddc-block-heading {
        position: absolute;
        left: 28px;
        top: 0;
        width: 1217px;
        max-width: none;
        margin: 0;
    }

    .ddc-design-block:nth-of-type(3) .ddc-colour-palette {
        position: absolute;
        left: 17px;
        top: 160px;
        gap: 9px;
        margin: 0;
    }

    .ddc-design-block:nth-of-type(3) .ddc-colour {
        width: 119px;
        height: 119px;
    }

    .ddc-design-block:nth-of-type(3) .ddc-full-screen {
        position: absolute;
        left: -80px;
        top: 349px;
        width: 1440px;
        max-width: none;
        height: 960px;
        margin: 0;
        object-fit: cover;
    }

    .ddc-design-block:nth-of-type(4) .ddc-responsive-gallery {
        position: absolute;
        left: -56px;
        top: 148px;
        width: 1474px;
        height: 3602px;
        margin: 0;
        display: block;
    }

    .ddc-design-block:nth-of-type(4) .ddc-responsive-image {
        position: absolute;
        left: 0;
        width: 1474px;
        max-width: none;
        object-fit: fill;
    }

    .ddc-design-block:nth-of-type(4) .ddc-responsive-image:nth-child(1) {
        top: 0;
        height: 1099px;
    }

    .ddc-design-block:nth-of-type(4) .ddc-responsive-image:nth-child(2) {
        top: 1058px;
        height: 1198px;
    }

    .ddc-design-block:nth-of-type(4) .ddc-responsive-image:nth-child(3) {
        top: 2362px;
        height: 1240px;
    }

    .ddc-design-block:nth-of-type(4) .ddc-closing-copy {
        position: absolute;
        left: -1px;
        top: 3819px;
        width: 967px;
        max-width: none;
        margin: 0;
    }

    .ddc-design-block:nth-of-type(4) .ddc-closing-copy p {
        font-size: 24px;
        line-height: normal;
    }

    .ddc-design-block:nth-of-type(4) .ddc-final-live-link {
        position: static;
        display: inline-block;
        margin: 24px 0 0;
        font-size: 16px;
        line-height: normal;
    }

    .ddc-full-screen,
    .ddc-urdu-block .ddc-full-screen,
    .ddc-visual-language .ddc-full-screen {
        position: static;
        width: calc(100% + 96px);
        max-width: none;
        height: auto;
        margin-left: -48px;
        object-fit: contain;
    }

    .ddc-urdu-block .ddc-block-heading {
        margin-bottom: 14px;
    }

    .ddc-colour-palette {
        position: static;
        gap: 10px;
        margin: 16px 0 24px;
    }

    .ddc-colour {
        width: 62px;
        height: 62px;
    }

    .ddc-responsive-gallery {
        position: static;
        display: flex;
        width: calc(100% + 72px);
        height: auto;
        margin-left: -36px;
        gap: 26px;
    }

    .ddc-responsive-image,
    .ddc-responsive-image:nth-child(1),
    .ddc-responsive-image:nth-child(2),
    .ddc-responsive-image:nth-child(3) {
        position: static;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    .ddc-closing-copy {
        position: static;
        width: 100%;
        max-width: 650px;
        margin: 32px 0 0;
    }

    .ddc-closing-copy p {
        font-size: 13px;
        line-height: 1.6;
    }

    .ddc-final-live-link {
        display: inline-block;
        margin-top: 16px;
    }
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .ddc-live-link,
    .ddc-next-link,
    .ddc-back-link {
        transition:
            opacity 180ms ease,
            transform 180ms ease;
    }

    .ddc-back-link:hover {
        transform: translateX(-3px);
    }

    .ddc-live-link:hover {
        opacity: 0.65;
    }

    .ddc-next-link:hover {
        transform: translateX(3px);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .ddc-hero-grid {
        grid-template-columns:
            1fr
            1fr;

        gap: 30px;
    }

    .ddc-hero-mockup {
        width: 108%;

        transform: translateX(10px);
    }

    .ddc-original-site-layout {
        min-height: 500px;
    }

    .ddc-original-images {
        height: 440px;
    }

    .ddc-paper-note {
        width: 250px;

        top: 150px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .ddc-case-study {
        padding:
            14px
            20px
            110px;
    }


    /* -----------------------------------------------------
       SECTIONS
       ----------------------------------------------------- */

    .ddc-section {
        padding:
            40px
            0;
    }

    .ddc-hero {
        padding:
            8px
            0
            42px;
    }


    /* -----------------------------------------------------
       HANDWRITTEN TEXT
       ----------------------------------------------------- */

    .ddc-back-arrow {
        font-size: 18px;
    }

    .ddc-back-text {
        font-size: 18px;
    }

    .ddc-section-writing {
        margin-bottom: 26px;

        font-size: 23px;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .ddc-hero-grid {
        grid-template-columns: 1fr;

        gap: 28px;

        margin-top: 28px;
    }

    .ddc-hero-copy h1 {
        font-size: 31px;
    }

    .ddc-hero-intro {
        max-width: 100%;

        font-size: 13px;
    }

    .ddc-meta-value {
        max-width: 100%;
    }

    .ddc-hero-visual {
        justify-content: center;
    }

    .ddc-hero-mockup {
        width: 100%;
        max-width: 100%;

        transform: none;
    }


    /* -----------------------------------------------------
       ORIGINAL SITE
       ----------------------------------------------------- */

    .ddc-original-site-layout {
        min-height: 0;
    }

    .ddc-original-images {
        position: static;

        height: auto;

        display: flex;
        flex-direction: column;

        gap: 16px;
    }

    .ddc-original-screen {
        position: static;

        width: 100%;
    }

    .ddc-original-urdu {
        width: 90%;

        align-self: flex-end;
    }


    /* -----------------------------------------------------
       START NOTE
       ----------------------------------------------------- */

    .ddc-paper-note {
        position: relative;

        left: auto;
        top: auto;

        width: 90%;
        height: 160px;

        margin:
            -26px
            0
            0;
    }


    /* -----------------------------------------------------
       BRIEF
       ----------------------------------------------------- */

    .ddc-brief-copy p {
        font-size: 12px;
    }

    .ddc-newspaper-reference {
        width: 82%;
    }


    /* -----------------------------------------------------
       IMPROVEMENT CARDS
       ----------------------------------------------------- */

    .ddc-improvement-stack {
        gap: 20px;
    }

    .ddc-improvement-card {
        min-height: 155px;
    }

    .ddc-improvement-content {
        padding:
            30px
            26px
            24px;
    }

    .ddc-improvement-content h3 {
        font-size: 19px;
    }

    .ddc-improvement-content p {
        font-size: 11px;
    }


    /* -----------------------------------------------------
       DESIGN BLOCKS
       ----------------------------------------------------- */

    .ddc-design-block {
        margin-top: 44px;
    }

    .ddc-block-heading h2 {
        font-size: 21px;
    }

    .ddc-full-screen,
    .ddc-responsive-image {
        width: 100%;
    }


    /* -----------------------------------------------------
       PALETTE
       ----------------------------------------------------- */

    .ddc-colour {
        width: 36px;
        height: 36px;
    }


    /* -----------------------------------------------------
       CLOSING COPY
       ----------------------------------------------------- */

    .ddc-closing-copy p {
        font-size: 11px;
    }


    /* -----------------------------------------------------
       NEXT PROJECT
       ----------------------------------------------------- */

    .ddc-next-project {
        padding:
            34px
            0
            0;
    }
}

/* =========================================================
   DDC CASE STUDY — MOBILE-ONLY CORRECTIONS
   Hero order, taped note, and newspaper annotations only.
   ========================================================= */

@media (max-width: 700px) {

    /* Hero: back link, mockup, then the complete copy block. */
    .ddc-page .ddc-hero-grid {
        display: flex;
        flex-direction: column;
        gap: 26px;
        margin-top: 24px;
    }

    .ddc-page .ddc-hero-visual {
        order: 1;
        width: 100%;
        justify-content: center;
    }

    .ddc-page .ddc-hero-copy {
        order: 2;
        width: 100%;
    }

    /* Where it started: desktop paper angle, horizontal copy. */
    .ddc-page .ddc-paper-note {
        width: 90%;
        height: auto;
        aspect-ratio: 332 / 191;
        transform: rotate(-2deg);
        transform-origin: center;
    }

    .ddc-page .ddc-note-paper {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transform: rotate(-15deg);
        transform-origin: center;
    }

    .ddc-page .ddc-note-content {
        right: auto;
        width: calc(100% - 20px);
        padding: 36px 31px 24px 40px;
        transform: translateY(17px);
    }

    .ddc-page .ddc-note-tape {
        top: 24px;
        left: -2px;
        width: 50px;
        transform: rotate(-15deg);
        transform-origin: center;
    }

    /* The brief: compact, self-contained mobile annotation field. */
    .ddc-page .ddc-newspaper-wrap {
        position: relative;
        display: block;
        width: 100%;
        height: 365px;
        margin: 28px auto 0;
    }

    .ddc-page .ddc-newspaper-reference {
        position: absolute;
        left: 50%;
        top: 58px;
        width: 74%;
        max-width: none;
        height: auto;
        object-fit: contain;
        transform: translateX(-50%);
    }

    .ddc-page .ddc-newspaper-annotation {
        display: block;
        position: absolute;
        inset: auto;
        z-index: 3;
        width: auto;
        height: auto;
    }

    .ddc-page .ddc-newspaper-annotation .ddc-annotation-label,
    .ddc-page .ddc-newspaper-annotation .ddc-annotation-arrow {
        position: absolute;
        display: block;
        max-width: none;
        height: auto;
        margin: 0;
        object-fit: contain;
    }

    .ddc-page .ddc-annotation-monochrome {
        left: 0;
        top: 0;
    }

    .ddc-page .ddc-annotation-monochrome .ddc-annotation-label {
        left: 0;
        top: 112px;
        width: 120px;
    }

    .ddc-page .ddc-annotation-monochrome .ddc-annotation-arrow {
        left: 92px;
        top: 76px;
        width: 72px;
        transform: rotate(-33.224deg);
    }

    .ddc-page .ddc-annotation-typography {
        right: 0;
        top: 0;
    }

    .ddc-page .ddc-annotation-typography .ddc-annotation-label {
        right: 4px;
        top: 20px;
        width: 90px;
    }

    .ddc-page .ddc-annotation-typography .ddc-annotation-arrow {
        right: 74px;
        top: 52px;
        width: 64px;
        transform: rotate(159.1deg);
    }

    .ddc-page .ddc-annotation-columns {
        right: 0;
        top: 0;
    }

    .ddc-page .ddc-annotation-columns .ddc-annotation-label {
        right: 4px;
        top: 292px;
        width: 78px;
    }

    .ddc-page .ddc-annotation-columns .ddc-annotation-arrow {
        right: 72px;
        top: 250px;
        width: 52px;
        transform: rotate(44.724deg);
    }
}

/* =========================================================
   HOMEPAGE — FIGMA MOBILE COMPOSITION
   Selected frame: 393 × 852, node 901:58
   Homepage-only overrides; desktop and other pages untouched.
   ========================================================= */

@media (max-width: 700px) {

    .home-page .site-header {
        height: 115px;
        padding: 19px 0 0;
    }

    .home-page .logo {
        font-size: 48px;
        line-height: 1;
    }

    .home-page .main-nav {
        display: none;
    }

    .home-page .hero {
        width: 100%;
        max-width: none;
        padding: 0 0 110px;
        overflow-x: clip;
    }

    .home-page .hero-composition {
        position: relative;
        display: block;
        width: min(393px, 100vw);
        max-width: none;
        height: auto;
        aspect-ratio: 393 / 302;
        margin: 0 auto;
    }

    .home-page .portrait-wrapper {
        left: 11.196%;
        top: 25.166%;
        width: 48.092%;
        transform: none;
    }

    .home-page .annotation {
        margin: 0;
    }

    .home-page .annotation img {
        width: 100%;
        height: auto;
        margin: 0;
    }

    .home-page .annotation p {
        margin: 0;
        font-size: 10px;
        font-weight: 400;
        line-height: normal;
        color: #2a2f26;
    }

    .home-page .annotation::before {
        display: none;
    }

    .home-page .annotation-curious {
        left: 6.616%;
        top: 11.258%;
        width: 29.516%;
    }

    .home-page .annotation-curious img {
        width: 116px;
        max-width: 100%;
        margin-bottom: 9px;
    }

    .home-page .annotation-curious p {
        width: 114px;
        max-width: 100%;
    }

    .home-page .annotation-observant {
        left: 63.613%;
        top: 29.470%;
        width: 32.313%;
    }

    .home-page .annotation-observant img {
        width: 126.991px;
        max-width: 100%;
        margin: 0 0 7px 1px;
    }

    .home-page .annotation-observant p {
        width: 102px;
    }

    .home-page .annotation-thoughtful {
        left: 59.542%;
        top: 70.199%;
        width: 31.213%;
    }

    .home-page .annotation-thoughtful img {
        width: 122.668px;
        max-width: 100%;
    }

    .home-page .annotation-thoughtful p {
        width: 160px;
        max-width: 130%;
    }

    .home-page .hero-intro {
        margin-top: 46px;
        padding: 0;
        text-align: center;
    }

    .home-page .hero-intro h1 {
        width: 287px;
        max-width: calc(100vw - 48px);
        margin: 0 auto;
        font-size: 18px;
        line-height: normal;
        white-space: normal;
    }

    .home-page .outline-button {
        width: 302px;
        max-width: calc(100vw - 48px);
        height: 55px;
        margin-top: 42px;
        padding: 0 24px;
        border-radius: 40px;
        font-size: 18px;
        font-weight: 700;
    }
}

/* ---------------------------------------------------------
   SHARED BACK-LINK VISUAL SIZE
   --------------------------------------------------------- */

.back-to-work-writing {
    width: auto;
    height: 22px;
}

.visual-case-back {
    font-size: 22px;
}

.ddc-back-text {
    width: 401px;
    height: 22px;
    font-size: 22px;
    background-size: contain;
}

.back-arrow,
.visual-case-back > span:first-child,
.ddc-back-arrow {
    font-size: 22px;
}

/* =========================================================
   VISUAL DIRECTION CASE-STUDIES
   Reusable framework for individual Visual Design directions.
   ========================================================= */

.visual-direction-page {
    --direction-navy: #0f2e4d;
    --direction-ocean: #325980;
    --direction-steel: #698eb3;
    --direction-ice: #b5cde6;
    --direction-mist: #cfe7ff;
    --direction-teal: #3e8f87;
    --direction-aged-paper: #e5d8c7;
    --direction-light-paper: #f2eadf;
    --direction-rationale-paper: #f6f1ea;
    --direction-font-display: "Bebas Neue", sans-serif;
    --direction-font-body: "Inter", Arial, sans-serif;
    --direction-font-label: "Newsreader", Georgia, serif;
}

.direction-main {
    width: 100%;
    color: var(--ink);
}

.direction-section {
    width: 100%;
    padding: 80px max(80px, calc((100vw - 1440px) / 2 + 80px)) 96px;
    border-bottom: 1px solid rgba(47, 42, 38, 0.2);
}

.direction-light-paper {
    background: var(--direction-light-paper);
}

.direction-rationale-paper {
    background: var(--direction-rationale-paper);
}

.direction-back {
    margin: 0 0 54px;
}

.direction-eyebrow {
    margin: 0;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--warm-grey);
}

.direction-intro-heading {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.direction-intro h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 400;
    line-height: 1.05;
}

.direction-intro-copy {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: min(864px, 100%);
    margin-top: 48px;
}

.direction-intro-copy p,
.direction-body-copy {
    margin: 0;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
}

.direction-script-heading {
    margin: 0 0 48px;
    font-family: var(--font-handwriting);
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.5px;
    color: var(--warm-grey);
}

.direction-brand-statement {
    margin: 0;
    font-family: var(--direction-font-display);
    font-size: 72px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.5px;
    color: var(--direction-navy);
}

.direction-concept .direction-body-copy {
    width: min(760px, 100%);
    margin-top: 40px;
}

.nordic-moodboard-grid {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr) 480px;
    grid-template-rows: 440px 320px;
    gap: 24px;
}

.nordic-moodboard-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nordic-moodboard-fjord {
    grid-column: 1 / 3;
}

.nordic-moodboard-ice {
    grid-column: 3;
}

.nordic-moodboard-marine {
    grid-column: 1;
}

.nordic-moodboard-vegetation {
    grid-column: 2;
}

.nordic-moodboard-sea {
    grid-column: 3;
}

.direction-rationale-statement {
    margin: 0;
    font-family: var(--direction-font-display);
    font-size: 56px;
    line-height: 1;
    color: var(--direction-navy);
}

.direction-rationale .direction-body-copy {
    margin-top: 32px;
}

.direction-palette {
    background: var(--direction-aged-paper);
}

.direction-palette-group + .direction-palette-group {
    margin-top: 48px;
}

.direction-palette-group h3 {
    margin: 0 0 16px;
    font-family: var(--direction-font-label);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.direction-swatches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.direction-swatch {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    border-radius: 20px;
    color: #fff;
}

.direction-swatches-primary .direction-swatch {
    min-height: 220px;
}

.direction-swatches-secondary .direction-swatch {
    min-height: 160px;
    padding: 16px;
}

.direction-swatch strong {
    font-family: var(--direction-font-display);
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.direction-swatches-secondary strong {
    font-size: 24px;
}

.direction-swatch span {
    font-family: var(--direction-font-body);
    font-size: 14px;
    font-weight: 600;
}

.direction-swatches-secondary span {
    font-size: 13px;
}

.direction-swatch.nordic-navy { background: #0f2e4d; }
.direction-swatch.ocean-blue { background: #325980; }
.direction-swatch.steel-blue { background: #698eb3; }
.direction-swatch.ice-blue { background: #b5cde6; color: #0f2e4d; }
.direction-swatch.arctic-mist { background: #cfe7ff; color: #0f2e4d; }
.direction-swatch.deep-sea-teal { background: #3e8f87; }

.direction-type-grid,
.direction-application-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
}

.direction-type-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 360px;
    padding: 32px;
    border: 1px solid var(--ink);
}

.direction-type-primary { background: var(--direction-light-paper); }
.direction-type-body { background: var(--direction-rationale-paper); }

.direction-specimen-label,
.direction-application-label {
    margin: 0;
    font-family: var(--direction-font-label);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--warm-grey);
}

.direction-type-card h3 {
    margin: 0;
    color: var(--direction-navy);
}

.direction-type-primary h3 {
    font-family: var(--direction-font-display);
    font-size: 64px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.direction-type-body h3 {
    font-family: var(--direction-font-body);
    font-size: 36px;
    line-height: 1;
}

.direction-specimen-rule {
    height: 1px;
    background: rgba(47, 42, 38, 0.3);
}

.direction-bebas-sample {
    margin: 0;
    font-family: var(--direction-font-display);
    font-size: 40px;
    line-height: 1.1;
    color: var(--direction-navy);
}

.direction-inter-sample,
.direction-alphabet {
    margin: 0;
    font-family: var(--direction-font-body);
}

.direction-inter-sample {
    font-size: 14px;
    line-height: 1.6;
}

.direction-alphabet {
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.5px;
    color: var(--direction-ocean);
}

.direction-specimen-note {
    margin: auto 0 0;
    font-family: var(--direction-font-label);
    font-size: 13px;
    line-height: 1.4;
    color: var(--warm-grey);
}

.direction-application-grid {
    gap: 40px;
}

.direction-application {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-height: 306px;
    padding: 40px;
    font-family: var(--direction-font-body);
}

.direction-application-light {
    background: var(--direction-mist);
    color: var(--direction-navy);
}

.direction-application-dark {
    background: var(--direction-navy);
    color: var(--direction-ice);
}

.direction-application-dark .direction-application-label {
    color: var(--direction-ice);
}

.direction-application h3 {
    margin: 0 0 16px;
    font-family: var(--direction-font-display);
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.direction-application p:not(.direction-application-label) {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.direction-contrast {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    font-size: 13px;
}

.direction-contrast span {
    font-size: 12px;
    color: var(--direction-ocean);
}

.direction-application-dark .direction-contrast span {
    color: var(--direction-steel);
}

.direction-next {
    background: var(--direction-rationale-paper);
}

.direction-next h2 {
    margin: 24px 0 0;
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
}

.direction-next > p:not(.direction-eyebrow) {
    margin: 8px 0 0;
    font-family: var(--font-body);
    font-size: 20px;
    color: var(--warm-grey);
}

.direction-next a {
    display: inline-flex;
    gap: 10px;
    margin-top: 48px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
}

@media (max-width: 700px) {
    .visual-direction-page .visual-design-footer {
        display: none;
    }

    .direction-section {
        padding: 56px 24px 64px;
    }

    .direction-intro {
        padding-top: 24px;
    }

    .direction-back {
        margin-bottom: 46px;
    }

    .direction-intro h1 {
        font-size: 36px;
    }

    .direction-intro-copy {
        margin-top: 36px;
    }

    .direction-intro-copy p,
    .direction-body-copy {
        font-size: 16px;
        line-height: 1.55;
    }

    .direction-script-heading {
        margin-bottom: 38px;
        font-size: 27px;
    }

    .direction-brand-statement {
        font-size: clamp(38px, 10vw, 48px);
    }

    .direction-brand-statement br {
        display: none;
    }

    .nordic-moodboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 260px 180px 220px;
        gap: 12px;
    }

    .nordic-moodboard-fjord { grid-column: 1 / 3; }
    .nordic-moodboard-ice { grid-column: 1; grid-row: 2; }
    .nordic-moodboard-marine { grid-column: 2; grid-row: 2; }
    .nordic-moodboard-vegetation { grid-column: 1; grid-row: 3; }
    .nordic-moodboard-sea { grid-column: 2; grid-row: 3; }

    .direction-rationale-statement {
        font-size: 45px;
    }

    .direction-swatches {
        grid-template-columns: 1fr;
    }

    .direction-swatches-primary .direction-swatch,
    .direction-swatches-secondary .direction-swatch {
        min-height: 150px;
    }

    .direction-type-grid,
    .direction-application-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .direction-type-card {
        min-height: 340px;
        padding: 26px;
    }

    .direction-type-primary h3 {
        font-size: 54px;
    }

    .direction-bebas-sample {
        font-size: 34px;
    }

    .direction-application {
        padding: 30px;
    }

    .direction-next h2 {
        font-size: 38px;
    }

    .direction-next > p:not(.direction-eyebrow) {
        font-size: 16px;
    }
}

/* ---------------------------------------------------------
   COFFEE DIRECTION MODIFIERS
   --------------------------------------------------------- */

.coffee-direction-page {
    --coffee-cherry: #7d4149;
    --coffee-roasted: #5a4338;
    --coffee-oat: #e9ddd2;
    --coffee-raw: #b39a72;
    --coffee-blossom: #f5f1eb;
    --coffee-leaf: #7c9a6d;
    --direction-font-display: "Cormorant Garamond", Georgia, serif;
    --direction-font-body: "Lato", Arial, sans-serif;
}

.coffee-direction-page .direction-brand-statement {
    font-family: var(--direction-font-display);
    font-weight: 400;
    line-height: 0.96;
    color: #3f312a;
}

.coffee-concept-copy,
.coffee-rationale-copy {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.coffee-concept-copy p,
.coffee-rationale-copy p {
    margin: 0;
}

.coffee-direction-page .direction-rationale .direction-script-heading,
.coffee-direction-page .direction-rationale-statement,
.coffee-direction-page .direction-rationale .direction-body-copy {
    color: var(--coffee-roasted);
}

.coffee-direction-page .direction-rationale-statement {
    font-family: var(--direction-font-display);
    font-weight: 400;
    line-height: 1;
    text-transform: none;
}

.coffee-direction-page .direction-palette {
    background: #f2e7d8;
}

.coffee-direction-page .direction-swatch strong {
    font-family: "Bebas Neue", sans-serif;
}

.coffee-direction-page .direction-swatch span {
    font-family: "Inter", Arial, sans-serif;
}

.direction-swatch.coffee-cherry { background: #7d4149; }
.direction-swatch.roasted-bean { background: #5a4338; }
.direction-swatch.oat-milk { background: #e9ddd2; color: #5a4338; }
.direction-swatch.raw-coffee-bean { background: #b39a72; }
.direction-swatch.coffee-blossom { background: #f5f1eb; color: #5a4338; }
.direction-swatch.coffee-leaf { background: #7c9a6d; }

.coffee-type-primary h3,
.coffee-display-sample,
.coffee-direction-page .direction-application h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 400;
    text-transform: uppercase;
}

.coffee-type-primary h3 {
    font-size: 64px;
    line-height: 0.95;
    color: #3f312a;
}

.coffee-display-sample {
    font-size: 40px;
    line-height: 1;
    color: var(--direction-navy);
}

.coffee-display-sample span {
    color: #3f312a;
}

.coffee-type-body h3,
.coffee-type-body .direction-inter-sample,
.coffee-type-body .direction-alphabet {
    font-family: "Lato", Arial, sans-serif;
}

.coffee-type-body h3,
.coffee-type-body .direction-alphabet {
    color: #3f312a;
}

.coffee-application-light {
    background: #e9ddd2;
    color: #5a4338;
}

.coffee-application-light h3 {
    color: #7d4149;
}

.coffee-application-light .direction-contrast span {
    color: #3f312a;
}

.coffee-application-dark {
    background: #7d4149;
    color: #f5f1eb;
}

.coffee-application-dark .direction-application-label,
.coffee-application-dark .direction-contrast span {
    color: #f5f1eb;
}

.coffee-direction-page .direction-next h2 {
    font-size: 42px;
    text-transform: none;
}

@media (max-width: 700px) {
    .coffee-direction-page .direction-brand-statement {
        font-size: 48px;
    }

    .coffee-type-primary h3 {
        font-size: 48px;
    }

    .coffee-display-sample {
        font-size: 36px;
    }

    .coffee-direction-page .direction-next h2 {
        font-size: 36px;
    }
}

/* ---------------------------------------------------------
   HORROR & THRILLER DIRECTION MODIFIERS
   --------------------------------------------------------- */

.horror-direction-page {
    --horror-shadow: #2e373b;
    --horror-mauve: #786171;
    --horror-paper: #f1e8da;
    --horror-brass: #b08a52;
    --horror-leather: #5b4a3f;
    --horror-grey: #8b8780;
    --direction-font-display: "Spectral", Georgia, serif;
    --direction-font-body: "Noto Sans", Arial, sans-serif;
}

.horror-direction-page .direction-brand-statement {
    font-family: var(--direction-font-display);
    font-weight: 400;
    line-height: 1;
    color: var(--horror-shadow);
}

.horror-concept-copy,
.horror-rationale-copy {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.horror-concept-copy p,
.horror-rationale-copy p {
    margin: 0;
}

.horror-direction-page .direction-rationale-statement {
    font-family: var(--direction-font-display);
    font-weight: 400;
    line-height: 1;
    color: var(--horror-shadow);
    text-transform: uppercase;
}

.horror-direction-page .direction-palette {
    background: #e8dfd0;
}

.horror-direction-page .direction-swatch strong {
    font-family: "Bebas Neue", sans-serif;
}

.horror-direction-page .direction-swatch span {
    font-family: "Inter", Arial, sans-serif;
}

.direction-swatch.shadow-ink { background: #2e373b; }
.direction-swatch.twilight-mauve { background: #786171; }
.direction-swatch.aged-paper { background: #f1e8da; color: #2e373b; }
.direction-swatch.burnished-brass { background: #b08a52; }
.direction-swatch.leather-binding { background: #5b4a3f; }
.direction-swatch.letterpress-grey { background: #8b8780; }

.horror-type-primary h3,
.horror-display-sample,
.horror-direction-page .direction-application h3 {
    font-family: "Spectral", Georgia, serif;
    font-weight: 400;
    text-transform: uppercase;
}

.horror-type-primary h3 {
    font-size: 64px;
    line-height: 1;
    color: var(--horror-shadow);
}

.horror-display-sample {
    font-size: 40px;
    line-height: 1;
    color: var(--horror-shadow);
}

.horror-type-body h3,
.horror-type-body .direction-inter-sample,
.horror-type-body .direction-alphabet {
    font-family: "Noto Sans", Arial, sans-serif;
}

.horror-type-body h3,
.horror-type-body .direction-alphabet {
    color: var(--horror-shadow);
}

.horror-application-light {
    background: var(--horror-paper);
    color: var(--horror-shadow);
}

.horror-application-light p:not(.direction-application-label) {
    color: var(--horror-leather);
}

.horror-application-light .direction-contrast,
.horror-application-light .direction-contrast span {
    color: var(--horror-shadow);
}

.horror-application-dark {
    background: var(--horror-shadow);
    color: var(--horror-paper);
}

.horror-application-dark .direction-application-label,
.horror-application-dark .direction-contrast span {
    color: var(--horror-paper);
}

.horror-application-dark p:not(.direction-application-label) {
    color: var(--horror-grey);
}

.horror-application-dark h3,
.horror-application-dark .direction-contrast {
    color: var(--horror-paper);
}

.horror-project-end h2 {
    font-size: 56px;
    text-transform: none;
}

.horror-project-end a {
    font-weight: 900;
}

@media (max-width: 700px) {
    .horror-direction-page .direction-brand-statement {
        font-size: 38px;
    }

    .horror-type-primary h3 {
        font-size: 50px;
    }

    .horror-display-sample {
        font-size: 36px;
    }

    .horror-project-end h2 {
        font-size: 38px;
    }
}

/* =========================================================
   CONTACT PAGE
   Page-specific implementation of Figma frame 994:14.
   Shared header, navigation, footer, tokens and breakpoints reused.
   ========================================================= */

.contact-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.contact-main {
    flex: 1;
    width: 100%;
}

.contact-hero,
.contact-details {
    width: 100%;
    max-width: var(--page-width);
    margin: 0 auto;
    padding-right: 134px;
    padding-left: 134px;
}

.contact-hero {
    padding-top: 80px;
    padding-bottom: 64px;
}

.contact-script-heading {
    margin: 0;
    font-family: var(--font-handwriting);
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    color: var(--ink);
}

.contact-hero h1 {
    margin: 20px 0 0;
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ink);
}

.contact-hero > p:last-child {
    max-width: 880px;
    margin: 20px 0 0;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.5;
    color: var(--warm-grey);
}

.contact-divider {
    width: 100%;
    height: 1px;
    background: rgba(47, 42, 38, 0.22);
}

.contact-details {
    padding-top: 80px;
    padding-bottom: 120px;
}

.contact-details-intro {
    width: min(520px, 100%);
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
}

.contact-points {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 48px 0 0;
    font-family: var(--font-body);
}

.contact-points > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-points dt {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    color: var(--warm-grey);
}

.contact-points dd {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: var(--ink);
}

.contact-points a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.contact-footer {
    margin-top: auto;
}

@media (hover: hover) and (pointer: fine) {
    .contact-points a {
        transition: opacity 180ms ease;
    }

    .contact-points a:hover {
        opacity: 0.65;
    }
}

@media (max-width: 700px) {
    .contact-hero,
    .contact-details {
        padding-right: 24px;
        padding-left: 24px;
    }

    .contact-hero {
        padding-top: 48px;
        padding-bottom: 54px;
    }

    .contact-script-heading {
        font-size: 30px;
    }

    .contact-hero h1 {
        margin-top: 16px;
        font-size: 34px;
        line-height: 1.12;
    }

    .contact-hero > p:last-child {
        margin-top: 18px;
        font-size: 16px;
        line-height: 1.5;
    }

    .contact-details {
        padding-top: 54px;
        padding-bottom: 100px;
    }

    .contact-details-intro {
        font-size: 15px;
    }

    .contact-points {
        margin-top: 42px;
    }

    .contact-points dd {
        font-size: 16px;
    }

    .contact-footer {
        display: none;
    }
}


/* MapMyGene cascade guards: keep these after shared page rules. */
@media (min-width: 1051px) {
    .mapmygene-back-link {
        position: absolute;
        left: 84px;
        top: 28px;
    }

    .mapmygene-back-link .ddc-back-arrow {
        font-size: 22px;
        line-height: 1;
    }

    .mapmygene-project-type {
        font-family: var(--font-body);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.35;
        color: var(--warm-grey);
    }

    .mapmygene-reflection p {
        top: 113px;
    }

    .visual-design-footer.mapmygene-footer {
        min-height: 80px;
        margin-top: 0;
    }
}

@media (max-width: 700px) {
    .mapmygene-hero-browser {
        align-self: auto;
    }

    .visual-design-footer.mapmygene-footer {
        display: none;
    }
}