/* Main Portfolio shadow gradient below title bar (matches contact page) */
.main-menu-drop-shadow {
    position: fixed;
    left: 0;
    width: 100%;
    height: 25px;
    top: 68px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.11) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 1001;
}
/* Ensure header and nearby UI use square corners (no rounding) */
.menu,
.title-area,
.dropdown-menu,
.contact-text-background-frame,
.text-frame {
    border-radius: 0 !important;
}
/* Strong, early reset to counter user-agent margins and ensure predictable layout */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
}

*, *::before, *::after { box-sizing: inherit !important; }
/* Local Gravity webfont (loaded from Assets/Fonts) */
/* Prefer modern WOFF2/WOFF with OTF fallback; converting OTF -> WOFF2 is recommended for production */
@font-face {
    font-family: 'Gravity';
    src: url('Assets/Fonts/Gravity-Regular.woff2') format('woff2'),
         url('Assets/Fonts/Gravity-Regular.woff') format('woff'),
         url('Assets/Fonts/Gravity-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gravity';
    src: url('Assets/Fonts/Gravity-Bold.woff2') format('woff2'),
         url('Assets/Fonts/Gravity-Bold.woff') format('woff'),
         url('Assets/Fonts/Gravity-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gravity';
    src: url('Assets/Fonts/Gravity-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
/* Ensure catalogue page links inherit the stylized color and remove default underline */
.design-catalogue-page a { color: #6B8D9A; text-decoration: none; }
.design-catalogue-page a:hover { text-decoration: underline; }
/* Main Portfolio background gradient (matches contact page) */
.main-bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 1024px;
    height: 681px;
    background: rgba(155, 194, 158, 0.11);
    z-index: 1;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Contact Page - Figma Absolute Layout Recreation */
/* Dropdown menu styling */
/* Dropdown menu block: hidden by default, Figma-style */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 68px; /* below the menu bar */
    right: 40px; /* align with menu button */
    min-width: 220px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.13);
    padding: 16px 0;
    z-index: 1500;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.dropdown-menu.show {
    display: flex;
}
.dropdown-link {
    display: block;
/* Spacer for vertical spacing, now relative */
    padding: 12px 32px 12px 24px;
    font-family: 'Gravity', Arial, sans-serif;
    font-size: 17px;
    color: #6B8D9A;
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    transition: background 0.2s, color 0.2s;
    border-bottom: 1px solid #F0F0F0;
}

.dropdown-link:last-child {
    border-bottom: none;
}

.dropdown-link:hover {
    background: #F7FAF7;
    color: #333;
}
.dropdown-link:last-child {
    border-bottom: none;
}
.dropdown-link:hover {
    background: #F7FAF7;
    color: #333;
}
/* Ensure dropdown items render with consistent spacing across pages */
.dropdown-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 8px 0 !important;
}
/* Ensure dropdown links never show underlines across pages (strong specificity) */
.dropdown-menu a,
.dropdown-link {
    text-decoration: none !important;
}
.dropdown-link {
    padding: 12px 24px !important;
    font-family: 'Gravity', Arial, sans-serif !important;
    font-size: 17px !important;
    line-height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}
.contact-frame-2 {
    position: absolute;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
    left: 0;
    top: 68px;
    transform: none;
    overflow: visible;
    box-sizing: border-box !important;
}

/* When on the main viewer page, constrain the contact frame to viewport height
   so the page itself doesn't produce an extra vertical scrollbar. The inner
   .pdf-viewing-area will handle internal scrolling. */
body.viewer-page .contact-frame-2 {
    min-height: calc(100vh - 68px) !important;
    top: 68px !important;
}
.contact-bg-gradient {
    position: fixed;
    left: 0;
    width: 100%;
    top: 0;
    height: 100vh; /* cover full viewport */
    background: rgba(155, 194, 158, 0.08);
    z-index: 0;
    pointer-events: none;
}
.contact-bg-blend-right {
    position: absolute;
    width: 162px;
    height: 500px;
    right: 0;
    top: 0;
        background: transparent;
    z-index: 1;
}
.contact-bg-blend-left {
    position: absolute;
    width: 862px;
    height: 500px;
    left: 0;
    top: 0;
        background: transparent;
    z-index: 2;
}
.contact-bg-white-fadeout {
    position: absolute;
    width: 1024px;
    height: 555px;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
        padding: 0;
    gap: 10px;
        background: transparent;
    z-index: 3;
}
.contact-menu-drop-shadow {
    position: absolute;
    left: 0;
    width: 100%;
    height: 25px;
    top: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.11) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 4;
}
/* Center the main white frame inside the 1024px container. Use normal
   document flow instead of absolute positioning so the catalogue does not
   create an artificial vertical gap at the end of the page. */
.contact-text-background-frame {
    position: relative !important;
    width: 100% !important;
    max-width: 750px !important;
    margin: 0 auto !important;
    top: auto !important;
    left: auto !important;
    background: #FFFFFF;
    z-index: 5;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
    border-radius: 8px;
    padding: 40px;
    height: auto !important;
    box-sizing: border-box !important;
}
/* Border framer should size to its content rather than force a large height */
.contact-border-framer {
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    z-index: 6;
    box-sizing: border-box !important;
    background: transparent;
    border: none;
    font-family: 'Gravity', Arial, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 24px;
    line-height: 29px;
    padding: 16px 40px 40px 40px;
    position: relative;
    left: 0;
    top: 0;
}
/* Spacer for vertical spacing, now relative */
.contact-spacer {
    position: absolute;
    width: 700px;
    height: 66px;
    left: calc(50% - 700px/2);
    top: 795px;
    background: transparent;
    z-index: 7;
}
/* Stack sections vertically, centered */
.contact-send-to, .contact-return-email, .contact-subject, .contact-content-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.contact-send-to {
    /* Remove absolute positioning and fixed height for natural stacking */
    position: static;
    height: auto;
    margin-bottom: 24px;
}
.contact-return-email {
    position: static;
    height: auto;
    margin-bottom: 24px;
}
.contact-subject {
    height: auto;
    height: auto;
    margin-bottom: 24px;
}
.contact-content-section {
    position: static;
    height: auto;
    margin-top: 32px;
    margin-bottom: 32px;
}
/* Label at the top of each section */
.contact-label {
    font-family: 'Gravity', Arial, sans-serif;
    font-style: normal;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 19px !important;
    color: #6B8D9A;
    margin-bottom: 4px;
}
/* Row for each field, centered */
.contact-send-to-row, .contact-return-email-row, .contact-subject-row {
    width: 100%;
    max-width: 100%;
    height: 40px;
    background: rgba(155, 194, 158, 0.11);
    border: 1px solid #6B8D9A;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: 0 auto 0 auto;
    border-radius: 3px;
}
.contact-content-row {
    width: 100%;
    background: transparent;
    border: none;
    box-sizing: border-box;
    z-index: 10;
    display: block;
    align-items: stretch;
}
/* Email/content text, centered in row */
/* Input fields styling refinement */
.contact-email {
    flex: 1 1 auto;
    height: 32px;
    font-family: 'Gravity', Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #333333;
    background: #F7FAF7;
    border: none;
    outline: none;
    padding: 0 10px;
    border-radius: 3px;
    box-sizing: border-box;
}
/* Copy button, right-aligned in row */
.contact-copy {
    margin-left: 12px;
    padding-right: 16px;
    font-family: 'Gravity', Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #6B8D9A;
    cursor: pointer;
    user-select: none;
    z-index: 12;
}
/* Content box, centered in content row */
/* Textarea refinement */
.contact-content-box {
    width: 100%;
    min-height: 180px;
    font-family: 'Gravity', Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #333333;
    background: #F7FAF7;
    border: 1px solid #6B8D9A;
    outline: none;
    padding: 10px;
    border-radius: 3px;
    resize: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
/* Send button row, centered at bottom */
/* Send button row, more margin from content */
.contact-send-row {
    width: 300px;
    height: 39px;
    margin: 24px 0 0 0;
    z-index: 14;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: flex-start;
}
/* Send button refinement */
.contact-send {
    width: 300px;
    height: 39px;
    background: #9BC29E;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    box-shadow: 0 2px 8px rgba(155, 194, 158, 0.08);
}
/* Send button text refinement */
.contact-send-label {
    font-family: 'Gravity', Arial, sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.5px;
}
/* Main Portfolio Page Layout */
.main-portfolio-frame-2 {
    position: relative;
    width: 750px;
    min-height: 900px;
    margin: 100px auto 0 auto;
    left: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 24px 0 0 40px;
    width: 100vw;
    min-height: 555px;
    background: rgba(155, 194, 158, 0.11);
    margin: 0;
        margin-bottom: 24px; /* Consistent spacing for all items */
    right: 0;
}
.menu-drop-shadow {
        height: auto !important;
    }
    width: 100%;
    height: 25px;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.11) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}
.text-frame {
    position: relative;
    width: 750px;
    min-height: 1000px;
    margin: 0 auto;
    top: 40px;
    background: #FFFFFF;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
    border-radius: 8px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contact-form-title {
    position: static;
    width: 100%;
    height: 66px;
    font-family: 'Gravity', Arial, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 24px;
    line-height: 29px;
    color: #6B8D9A;
}
.spacer {
    position: absolute;
    width: 700px;
    height: 33px;
        margin: 0 auto 0 auto; /* Centered without extra margin below */
    top: 0px;
}

/* Dropdown Menu Styles */
/* Removed conflicting .dropdown-menu block. Use only the absolute positioned dropdown-menu at the top of the file. */

/* Homepage */
body {
    position: relative;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    background: #FFFFFF;

/* Design Catalogue page specific overrides (per provided spec) */
.design-catalogue-page .text-frame {
    position: absolute;
    width: 750px;
    height: 1000px;
    left: calc(50% - 750px/2);
    top: calc(50% - 1000px/2 + 33px);
    background: #FFFFFF;
    padding: 0; /* inner framing handled by child */
}

.design-catalogue-page .contact-border-framer {
    position: absolute;
    width: 700px;
    height: 851px;
    left: calc(50% - 700px/2);
    top: calc(50% - 851px/2 + 24.5px);
    font-family: 'Gravity', Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #6B8D9A;
    background: transparent;
    padding: 16px 24px;
    box-sizing: border-box;
}

/* Portfolio text uses Inter 16/19 and muted cyan color */
.design-catalogue-page .portfolio-text,
.design-catalogue-page .portfolio-text ul,
.design-catalogue-page .portfolio-text li,
.design-catalogue-page .portfolio-text a {
    font-family: 'Inter', Arial, sans-serif;
    font-style: normal;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 19px !important;
    color: #6B8D9A !important;
    text-decoration: none !important;
}

/* Strong overrides to ensure subtitle-sized text */
.contact-border-framer .contact-label,
.contact-border-framer .portfolio-text a,
.design-catalogue-page .contact-border-framer .portfolio-text a,
.design-catalogue-page .portfolio-text a {
    font-size: 16px !important;
    line-height: 19px !important;
    font-weight: 400 !important;
}

.design-catalogue-page .portfolio-text ul { list-style: none !important; padding: 0 !important; margin: 0 !important; line-height: 19px; }
.design-catalogue-page .portfolio-text li { margin: 4px 0; position: relative; padding-left: 20px; list-style: none !important; }

/* Ensure default browser markers/markers from UA styles are removed */
.design-catalogue-page .report-list { list-style: none !important; padding-left: 0 !important; }
.design-catalogue-page .report-list li { list-style-type: none !important; }

/* Hide native markers in browsers that still render them */
.design-catalogue-page .report-list li::marker { content: none !important; }
.design-catalogue-page .report-list { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }

/* Compact spacing: smaller gap between each report link */
.design-catalogue-page .report-list > li {
    margin: 0 !important;
    padding: 0 !important;
}
.design-catalogue-page .report-list li a {
    display: block !important;
    padding: 0 !important; /* remove padding entirely as requested */
    line-height: 19px !important;
}

.design-catalogue-page .report-list li.spacer-line {
    display: block !important;
    height: 19px !important; /* spacer = full text line height */
    line-height: 19px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    content: "";
}

/* Links should inherit the same font/colour and not be underlined */
.design-catalogue-page .report-list li a {
    color: #6B8D9A;
    text-decoration: none;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 16px;
    line-height: 19px;
    font-weight: 400;
}

/* Section header: no marker, add blank line before/after */
.design-catalogue-page .report-list li.section-header::before { content: none !important; }
.design-catalogue-page .report-list li.section-header {
    margin: 12px 0 6px 0; /* empty line above, small gap after */
    padding-left: 20px; /* align text with link text */
    font-weight: 700;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 16px !important;
    line-height: 19px !important;
    color: #6B8D9A !important;
    list-style: none !important;
}
/* `.marker` class removed — markers are no longer present in HTML; styling handled by list rules */

/* Ensure section header matches link styling (same font/size/color) but links use regular weight and header is heavier */
.design-catalogue-page .portfolio-text a { font-size: 16px; line-height: 19px; font-weight: 400; }
.design-catalogue-page .portfolio-text a:hover { text-decoration: underline; color: #4f7b84; }

/* Prevent title underline on catalogue page (don't underline header link) */
.design-catalogue-page .branding-link,
.design-catalogue-page .branding-link:hover {
    text-decoration: none !important;
    color: inherit !important;
}

/* Section header: add spacing and align with links; header is plain text (not a link)
   — use same font + colour as other page titles */
.design-catalogue-page .report-list li.section-header {
    margin: 12px 0 6px 0; /* reduced gap above header */
    padding-left: 0 !important;
    font-family: 'Gravity', Arial, sans-serif; /* match other titles */
    font-size: 16px !important;
    line-height: 19px !important;
    color: #6B8D9A !important; /* same title colour */
    font-weight: 700 !important; /* balanced subtitle weight */
    text-decoration: none !important;
    cursor: default;
}
.design-catalogue-page .report-list li.section-header:hover,
.design-catalogue-page .report-list li.section-header:focus {
    text-decoration: none !important;
    color: #6B8D9A !important;
}

/* Explicitly align header & links: same font-family, size and colour; differ only by weight */
.design-catalogue-page .report-list li a,
.design-catalogue-page .report-list li.section-header {
    font-family: 'Gravity', Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 19px !important;
    color: #6B8D9A !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.design-catalogue-page .report-list li a { font-weight: 400 !important; }
.design-catalogue-page .report-list li.section-header { font-weight: 700 !important; }

/* keep underline on report links hover only */
.design-catalogue-page .report-list li a:hover { text-decoration: underline; color: #4f7b84; }

/* Keep list-style removed and left padding reset */
.design-catalogue-page .report-list { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.design-catalogue-page .report-list li { padding-left: 0 !important; }

.design-catalogue-page .contact-form-title {
    position: absolute;
    width: 700px;
    height: 66px;
    left: calc(50% - 700px/2);
    top: 33px;
    font-family: 'Gravity', Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #6B8D9A;
}

.design-catalogue-page .design-catalogue {
    position: absolute;
    width: 700px;
    height: 66px;
    left: calc(50% - 700px/2);
    top: 0px;
    font-family: 'Gravity', Arial, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 24px;
    line-height: 29px;
    color: #6B8D9A;
    text-transform: none;
}

.design-catalogue-page .spacer {
    position: absolute;
    width: 700px;
    height: 33px;
    left: calc(50% - 700px/2);
    top: 0px;
    background: transparent;
}


.menu {
    position: fixed;
    left: 0;
    right: 0;
    height: 68px;
    top: 0;
    display: flex;
    z-index: 1000;
    justify-content: space-between;
}

.menu {
    /* header background gradient so it continues to the right edge */
    background: linear-gradient(90deg, #6B8D9A 0%, #9BC29E 100%);
}

.title-area {
    position: relative;
    /* keep title area width compact; background now provided by .menu */
    width: calc(100% - 108px);
    height: 68px;
    left: 0px;
    top: 0px;
    background: transparent;
    padding-left: 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0 !important;
}

/* branding link wraps the two title lines and should inherit styles */
.branding-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.branding-link:focus {
    outline: 2px solid rgba(155,194,158,0.6);
    outline-offset: 2px;
    border-radius: 0 !important;
}

.portfolio-title {
    position: static;
    width: 673px;
    height: auto;
    font-family: 'Gravity', Arial, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: var(--pagetitle1-size);
    line-height: calc(var(--pagetitle1-size) * 1.1);
    display: flex;
    align-items: center;
    letter-spacing: 0.33em;
    color: #FFFFFF;
}

.portfolio-author {
    position: static;
    width: 673px;
    height: auto;
    font-family: 'Gravity', Arial, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: var(--pagetitle2-size);
    line-height: calc(var(--pagetitle2-size) * 1.1);
        --pagetitle1-size: 16px;
    align-items: center;
        --pagetitle2-size: 11px;
    color: #FFFFFF;
}

.navigation-button-area {
    position: absolute;
    right: 40px;
    top: 0;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Fill the space to the right of the title gradient so it visually continues to the menu button */
    background: #9BC29E;
    z-index: 1400; /* keep menu clickable above viewer */
}

.menu-button {
    position: static;
    margin-left: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
}

.frame-2 {
    position: absolute;
    width: 1024px;
    height: 681px;
    left: calc(50% - 1024px/2);
    top: 68px; /* match contact page */
    margin: 0;
    padding: 0;
    background: none;
    z-index: 10;
}

.background-blend-left {
    position: absolute;
    width: 862px;
    height: 500px;
    left: 0;
    top: 0;
    background: linear-gradient(90deg, rgba(107, 141, 154, 0.1) 0%, rgba(155, 194, 158, 0.1) 100%);
    z-index: 2;
}

.background-blend-right {
    position: absolute;
    width: 162px;
    height: 500px;
    right: 0;
    top: 0;
    background: rgba(155, 194, 158, 0.1);
    z-index: 3;
}

/* Tighten catalogue link spacing while keeping spacer lines intact
   - make anchors inline-block to avoid extra block-level gaps
   - reduce line-height for links only (spacer-line stays at 19px)
   - enforce no margins/padding on list items
*/
.design-catalogue-page .report-list > li {
    margin: 0 !important;
    padding: 0 !important;
}
.design-catalogue-page .report-list li a {
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 16px !important; /* tighter than spacer-line */
    font-size: 16px !important;
}
.design-catalogue-page .report-list li.spacer-line {
    height: 19px !important; /* preserve full-line spacer */
    line-height: 19px !important;
}

/* Reduce vertical gap between regular links to 10px while preserving spacers */
.design-catalogue-page .report-list > li:not(.spacer-line) {
    margin-bottom: 3px !important; /* 3px gap between normal items */
}
.design-catalogue-page .report-list li a {
    display: block !important; /* make anchors full-width to avoid visual widening */
    padding: 0 !important;
    margin: 0 !important;
}

.frame-3 {
    position: absolute;
    width: 100%;
    height: 25px;
    left: 0px;
    top: 100px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.11) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 30;
}
.frame-4 {
    position: absolute;
    width: 100%;
    height: 25px;
    left: 0px;
    top: 0px;
    position: static;
    margin-bottom: 24px;



.pdf-viewing-navigator {
    position: relative; /* let frame-2 flexbox control placement */
    width: 100%;
    max-width: 100%;
    height: auto;
    left: 0px;
    top: 0px;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.pdf-viewing-area {
    /* global default: let page-specific rules control final size */
    position: absolute;
    width: auto;
    height: auto;
    left: 0;
    top: 0;
    background: #FFFFFF;
    box-shadow: 0px 0px 33px 10px rgba(0, 0, 0, 0.0366667);
    overflow: visible;
    z-index: 1101;
    max-width: 100%;
}

.pdf-viewing-area iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 1; /* keep iframe under the nav controls */
}


.nav-button.nav-right {
    position: absolute;
    width: 50px;
    height: 50px;
    border: none;
    background-color: transparent;
    z-index: 40;
}

.nav-button {
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    z-index: 1120; /* ensure buttons overlay the canvas */
}

.nav-button.disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* inline image usage for the nav/fullscreen icons */
.pdf-viewing-area .nav-button { position: absolute; }
.pdf-viewing-area .full-screen-button { position: absolute; }

.nav-button img, .full-screen-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

/* flip left button horizontally so the arrow points left */
.nav-button.nav-left img {
    transform: scaleX(-1) translateX(-2px) !important;
    transform-origin: center center;
    /* keep left image positioning clean (no left offset) */
    position: relative !important;
    left: 0 !important;
}

.nav-button.nav-left {
    position: absolute;
    width: 50px;
    height: 50px;
    border: none;
    background-color: transparent;
    z-index: 40;
}

.full-screen-button {
    position: absolute;
    width: 42px;
    height: 42px;
    right: 33px; /* move to top-right with 33px padding */
    top: 33px;
}


.frame-5 {
    position: absolute;
    width: 50px;
    height: 58px;
    right: 0px;
    top: 0px;
}

/* Viewer-specific simplified/template overrides (scoped to body.viewer-page) */
html, body { overflow-x: hidden; }

/* Document background: default to white. Per-page variants (e.g. viewer) may override. */
html, body { background: #FFFFFF; }

body.viewer-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(90deg, #6B8D9A 0%, #9BC29E 100%);
    overflow-x: hidden; /* prevent horizontal scrollbar when viewer is wide */
    overflow-y: hidden; /* let the viewer element handle vertical scrolling */
}

body.viewer-page .frame-2 {
    position: relative; /* allow full-width background */
    width: 100%;
    min-width: 0;
    min-height: calc(100vh - 100px); /* fill below header */
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    background: transparent; /* remove boxed background so viewport blends show through */
    z-index: 10;
    display: flex;
    align-items: center; /* vertically center viewer */
    justify-content: center;
}

body.viewer-page .background-blend-left {
    position: fixed;
    left: 0;
    top: 0;
    width: 50vw; /* cover left half of viewport */
    height: 100vh;
    background: linear-gradient(90deg, rgba(107,141,154,0.08) 0%, rgba(155,194,158,0.08) 100%);
    z-index: 0;
    pointer-events: none;
}

body.viewer-page .background-blend-right {
    position: fixed;
    right: 0;
    top: 0;
    width: 50vw; /* cover right half of viewport */
    height: 100vh;
    background: linear-gradient(90deg, rgba(155,194,158,0.06) 0%, rgba(255,255,255,0) 100%);
    z-index: 0;
    pointer-events: none;
}

body.viewer-page .menu {
    position: fixed; /* make header span the full viewport */
    left: 0;
    right: 0;
    height: 100px;
    top: 0;
    background: #9BC29E;
    z-index: 1000;
}

body.viewer-page .title-area {
    position: relative;
    width: 100%; /* stretch title area full width */
    height: 100px;
    left: 0;
    top: 0;
    background: linear-gradient(90deg, #6B8D9A 0%, #9BC29E 100%);
    padding-left: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.viewer-page .portfolio-title {
    position: absolute;
    width: 673px;
    height: auto;
    left: 50px;
    top: 16px;
    font-weight: 300;
    font-size: var(--pagetitle1-size);
    line-height: calc(var(--pagetitle1-size) * 1.1);
    color: #FFFFFF;
}

body.viewer-page .portfolio-author {
    position: absolute;
    width: 673px;
    height: auto;
    left: 50px;
    top: 54px;
    font-weight: 700;
    font-size: var(--pagetitle2-size);
    line-height: calc(var(--pagetitle2-size) * 1.1);
    color: #FFFFFF;
}

body.viewer-page .navigation-button-area {
    position: absolute;
    width: 162px;
    height: 100px;
    right: 0px;
    top: 0px;
    background: #9BC29E;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
}

body.viewer-page .pdf-viewing-navigator {
    position: relative; /* participate in frame-2 flex centering */
    width: 100%;
    height: auto;
    left: 0px;
    top: auto;
    z-index: 1100;

    /* center the viewer inside the navigator */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
} 

/* Ensure a fixed 33px gap below the title/menu bar on viewer pages so the
   PDF viewer is always visually separated from the header. This is a layout
   safety net in case inline spacers are ignored by the browser. */
body.viewer-page .pdf-viewing-navigator {
    margin-top: 33px !important;
}

body.viewer-page .pdf-viewing-area {
    position: relative !important; /* ensure absolute children are positioned against this frame */
    width: 97vw !important; /* use viewport width to guarantee full stretch */
    max-width: none !important; /* allow the viewer to stretch to requested width */
    min-width: 420px !important;
    height: calc(100vh - 100px) !important; /* fill viewport below header */
    margin: 0 auto; /* centered inside the frame */
    padding-top: 0 !important; /* no extra padding to avoid empty scroll area */
    top: auto;
    left: auto;
    transform: none;
    background: #FFFFFF;
    box-shadow: 0px 2px 16px rgba(0,0,0,0.04);
    border-radius: 8px;
    overflow: auto !important; /* allow internal scrolling when PDF is larger */
    max-height: calc(100vh - 100px) !important;
    z-index: 1101;
}

/* High-specificity safety overrides to guarantee layout behavior across pages.
   These rules are intentionally strong (!important) because other page styles
   and inline per-page rules have previously conflicted. */

/* Ensure viewer pages never allow the outer document to scroll vertically */
/* Revert aggressive height forcing — allow normal document flow to prevent double scrollbars. */
html, body {
    height: auto !important;
    overflow-x: hidden !important;
}

/* Constrain the main frame so the page itself doesn't produce vertical overflow. */
/* Make the outer frames participate in normal flow; let inner viewer handle scrolling. */
body.viewer-page .frame-2,
body.design-catalogue-page .contact-frame-2 {
    min-height: calc(100vh - 100px) !important;
    max-height: none !important;
    overflow: visible !important;
    padding-top: 0 !important;
}

/* Force the PDF viewer to use viewport-based width and center precisely */
/* Use percentage width to fit within containing flow and avoid horizontal scrollbars. */
body.viewer-page .pdf-viewing-area {
    width: 97% !important;
    max-width: 1200px !important; /* cap width so percentage doesn't create overflow */
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Allow the pdf-viewing-area to internally scroll but prevent the page from
   showing an extra scrollbar caused by child absolute positioning. */
/* Ensure internal scrolling for large PDF content, but do not force outer page scrollbars. */
body.viewer-page .pdf-viewing-area {
    overflow: auto !important;
    max-height: calc(100vh - 100px) !important;
}
/* Viewer spacer: explicit gap under header for main viewer pages */
body.viewer-page .viewer-spacer {
    height: 33px !important;
    width: 100% !important;
    display: block !important;
}

/* Shared top spacer used across pages to keep consistent header gap */
.page-top-spacer { display: block; height: 33px; min-height: 33px; width: 100%; background: transparent; }

/* DEBUG: make the top spacer visible during verification */
.page-top-spacer.debug-visible {
    background: rgba(255, 0, 0, 0.10) !important;
    outline: 2px solid rgba(255, 0, 0, 0.35) !important;
}

/* Ensure viewer sizing is controlled by CSS (97% of container, capped) */
body.viewer-page .pdf-viewing-area {
    width: 97% !important;
    max-width: 1200px !important;
    min-width: 420px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* DEBUG: temporary visual indicators — remove after verification */
.viewer-spacer.debug-visible { background: rgba(255,0,0,0.08) !important; }
.pdf-viewing-area.debug-outline { outline: 3px solid rgba(255,0,0,0.12) !important; }
body.viewer-page .pdf-viewing-area .pdf-canvas-container {
    overflow: auto !important;
}

/* Restore the 33px top spacing specifically for the Design Catalogue page.
   Use transform on the inner frame to ensure the visual offset applies even
   when inner elements are absolutely positioned. */
/* Restore Design Catalogue spacing and prevent large fixed-height frames from creating
   unnecessary page scroll. Make inner frames auto-height so content determines page size. */
body.design-catalogue-page .contact-frame-2 {
    padding-top: 33px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
}

/* Show the subtle drop shadow under the fixed title bar on the Design Catalogue page
   so it visually matches the other pages. Use fixed positioning to sit under the header. */
body.design-catalogue-page .contact-menu-drop-shadow {
    position: fixed !important;
    top: 68px !important;
    left: 0 !important;
    width: 100vw !important;
    height: 25px !important;
    z-index: 1001 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.11) 0%, rgba(0, 0, 0, 0) 100%) !important;
    pointer-events: none !important;
}

/* Position the white content frame absolutely within the contact frame
   so it sits exactly 68px + 33px from the top of the page/header. */
body.design-catalogue-page .contact-text-background-frame {
    position: relative !important;
    top: auto !important; /* let normal flow determine vertical placement */
    left: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin-top: 33px !important; /* preserve visual gap under the header */
}

body.design-catalogue-page .contact-border-framer {
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
}

/* ensure the viewer uses viewport-based horizontal margins so 97vw centers nicely */
body.viewer-page .pdf-viewing-area {
    margin-left: calc((100vw - 97vw) / 2) !important;
    margin-right: calc((100vw - 97vw) / 2) !important;
    box-sizing: border-box !important;
}

/* Restore the 33px top spacing under the header for the Design Catalogue page */
body.design-catalogue-page .contact-frame-2 {
    padding-top: 33px !important;
    box-sizing: border-box !important;
}

/* Also nudge the inner content frame so absolutely-positioned children are moved
   down when the header is present. This fixes cases where inner absolute tops
   were set and padding alone didn't visually offset content. */
body.design-catalogue-page .contact-text-background-frame {
    top: auto !important;
}

/* Fullscreen: make the viewer occupy and center within the viewport */
.pdf-viewing-area:fullscreen,
.pdf-viewing-area:-webkit-full-screen,
.pdf-viewing-area:-moz-full-screen,
.pdf-viewing-area.is-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding-top: 0 !important; /* remove top padding in fullscreen */
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000 !important; /* dark background while fullscreen */
}

.pdf-viewing-area:fullscreen .canvas-stage,
.pdf-viewing-area:-webkit-full-screen .canvas-stage,
.pdf-viewing-area:-moz-full-screen .canvas-stage,
.pdf-viewing-area.is-fullscreen .canvas-stage {
    width: auto !important;
    max-width: none !important; /* allow stage to exceed viewport so horizontal panning works */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* In fullscreen allow the rendered canvas to exceed the container so scrollbars + pan work */
.pdf-viewing-area:fullscreen .pdf-canvas-container canvas,
.pdf-viewing-area:-webkit-full-screen .pdf-canvas-container canvas,
.pdf-viewing-area:-moz-full-screen .pdf-canvas-container canvas,
.pdf-viewing-area.is-fullscreen .pdf-canvas-container canvas {
    max-width: none !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
    display: block;
}

/* ensure canvas container fills the fullscreen viewport and can scroll for zoom/pan */
.pdf-viewing-area:fullscreen .pdf-canvas-container,
.pdf-viewing-area:-webkit-full-screen .pdf-canvas-container,
.pdf-viewing-area:-moz-full-screen .pdf-canvas-container,
.pdf-viewing-area.is-fullscreen .pdf-canvas-container {
    /* allow the container to expand horizontally (override any inline max-width) */
    max-width: none !important;
    width: auto !important;

    height: 100% !important;
    overflow: auto !important;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    /* allow native single-finger panning in fullscreen; JS will only intercept when zoomed */
    touch-action: pan-x pan-y;
}

.pdf-viewing-area:fullscreen .pdf-canvas-container.dragging,
.pdf-viewing-area.is-fullscreen .pdf-canvas-container.dragging {
    cursor: grabbing !important;
    user-select: none !important;
    touch-action: none !important;
}

/* general dragging state so pan works the same outside fullscreen */
.pdf-canvas-container.dragging {
    cursor: grabbing !important;
    user-select: none !important;
    touch-action: none !important;
}

/* canvas container */
body.viewer-page .pdf-canvas-container {
    position: relative; /* make the container the positioned ancestor for controls */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    z-index: 1100; /* keep canvas below control overlays */
}

/* stage that can be expanded to a 2-page width — canvas is centered inside */
.canvas-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: content-box;
}
.canvas-stage > canvas { display: block; }
body.viewer-page .pdf-canvas-container canvas {
    position: relative;
    z-index: 1100;
    max-width: 100%;
    max-height: 100%;
    pointer-events: auto; /* ensure canvas receives clicks/pointers */
}

/* make sure the container receives pointer events in fullscreen */
.pdf-viewing-area:fullscreen .pdf-canvas-container,
.pdf-viewing-area.is-fullscreen .pdf-canvas-container {
    pointer-events: auto !important;
}

/* ensure controls sit above the canvas and are fixed size */
body.viewer-page .nav-button, body.viewer-page .full-screen-button {
    z-index: 9999;
    width: 48px !important; /* standard touch target */
    height: 48px !important; /* standard touch target */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute; /* positioned relative to .pdf-canvas-container */
    background: rgba(255,255,255,0.02);
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    border-radius: 50%;
}

/* Force nav buttons to be positioned relative to the viewer's canvas container
   and vertically centred. Use high specificity and !important to override
   any inline or conflicting rules that affected placement. */
.pdf-viewing-area { position: relative !important; }
/* Keep canvas container non-positioned so nav controls anchor to the viewing area
    instead of moving with canvas transforms. */
.pdf-viewing-area .pdf-canvas-container { position: static !important; }
body.viewer-page .pdf-viewing-area .nav-button {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
    background: rgba(255,255,255,0.02) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
    border-radius: 50% !important;
}
body.viewer-page .pdf-viewing-area .nav-button.nav-left { left: 33px !important; right: auto !important; }
body.viewer-page .pdf-viewing-area .nav-button.nav-right { right: 33px !important; left: auto !important; }

/* In fullscreen keep the same vertical centering but allow the buttons to be fixed to viewport edges */
.pdf-viewing-area:fullscreen .nav-button,
.pdf-viewing-area.is-fullscreen .nav-button {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* icon inside button (33px) */
body.viewer-page .nav-button img, body.viewer-page .full-screen-button img {
    width: 33px !important; /* increased icon */
    height: 33px !important; /* increased icon */
    object-fit: contain;
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
    top: 0;
    pointer-events: none;
    transition: transform 120ms ease;
}

/* hide default iframe rules (no longer used) */
body.viewer-page .pdf-viewing-area iframe { display: none; }



body.viewer-page .nav-button.nav-left { left: 33px; top: 50%; transform: translateY(-50%); }
body.viewer-page .nav-button.nav-right { right: 33px; top: 50%; transform: translateY(-50%); left: auto; }
body.viewer-page .full-screen-button { right: 33px; top: 33px; left: auto; }

/* pin the fullscreen control to viewport top-right while in fullscreen */
.pdf-viewing-area:fullscreen .full-screen-button,
.pdf-viewing-area:-webkit-full-screen .full-screen-button,
.pdf-viewing-area:-moz-full-screen .full-screen-button,
.pdf-viewing-area.is-fullscreen .full-screen-button {
    position: fixed !important;
    top: 16px !important; /* halved from 33px */
    right: 16px !important; /* halved from 33px */
    z-index: 10001 !important;
}

/* Extra safety: ensure nav/fullscreen controls are visible and anchored to the viewing area */
.pdf-viewing-area > .nav-button,
.pdf-viewing-area > .full-screen-button {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 20001 !important;
    background: rgba(255,255,255,0.02) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
}
.pdf-viewing-area > .full-screen-button { top: 16px !important; transform: none !important; }
.pdf-viewing-area canvas { z-index: 1 !important; position: relative !important; }

/* Strong, highly-specific overrides for the Design Catalogue list header & links
   Placed at end so rules win over earlier declarations. */
.design-catalogue-page .contact-border-framer .portfolio-text .report-list li.section-header {
    font-family: Gravity, Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 19px !important;
    color: #6B8D9A !important;
    font-weight: 700 !important;
    margin: 24px 0 6px 0 !important;
    padding-left: 0 !important;
    text-decoration: none !important;
}
.design-catalogue-page .contact-border-framer .portfolio-text .report-list li.section-header:hover,
.design-catalogue-page .contact-border-framer .portfolio-text .report-list li.section-header:focus {
    text-decoration: none !important;
    color: #6B8D9A !important;
}
.design-catalogue-page .contact-border-framer .portfolio-text .report-list li a {
    font-family: Gravity, Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 19px !important;
    color: #6B8D9A !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}
.design-catalogue-page .contact-border-framer .portfolio-text .report-list li a:hover {
    text-decoration: underline !important;
    color: #4f7b84 !important;
}

/* --- Named style tokens (PAGETITLE1 / PAGETITLE2 / Main Title / Body / User Body / User Body Standby / Subtitle) --- */
:root {
    /* Page Title 1: "DESIGN PORTFOLIO" */
    --pagetitle1-family: 'Gravity', Arial, sans-serif;
    --pagetitle1-size: 16px;
    --pagetitle1-weight: 300;
    --pagetitle1-color: #FFFFFF;

/* Ensure dropdown items never display underlines even when body page classes add hover rules */
#dropdown-menu, .dropdown-menu {
    text-decoration-skip-ink: none !important;
}
#dropdown-menu a, #dropdown-menu .dropdown-link, .dropdown-menu a, .dropdown-link {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
    -webkit-text-decoration-color: transparent !important;
}
.dropdown-menu a:hover, .dropdown-link:hover, #dropdown-menu a:hover {
    text-decoration: none !important;
}

    /* Page Title 2: "CHRISTOPHER RESTALL" */
    --pagetitle2-family: 'Gravity', Arial, sans-serif;
    --pagetitle2-size: 11px;
    --pagetitle2-weight: 700;
    --pagetitle2-color: #FFFFFF;

    /* Main Title: page section headings like "Design Catalogue" or "Contact Form" */
    --maintitle-family: 'Gravity', Arial, sans-serif;
    --maintitle-size: 24px;
    --maintitle-weight: 300;
    --maintitle-color: #6B8D9A;

    /* Body (form labels) */
    --body-family: 'Gravity', Arial, sans-serif;
    --body-size: 16px;
    --body-weight: 400;
    --body-color: #6B8D9A;

    /* User Body (user entered text) */
    --user-body-family: 'Gravity', Arial, sans-serif;
    --user-body-size: 16px;
    --user-body-weight: 400;
    --user-body-color: #000000;

    /* User Body Standby (placeholder/standby text) */
    --user-body-standby-color: #9AAFB4;

    /* Subtitle (bolded body) */
    --subtitle-weight: 700;
}

/* Final safety overrides: remove any remaining rounded corners on header and nearby UI.
   These use high specificity and !important to defeat earlier rules and inline focus styles. */
/* Header and title area */
.menu, .menu * {
    border-radius: 0 !important;
}
/* Dropdown and its items */
.dropdown-menu, .dropdown-menu * {
    border-radius: 0 !important;
}
/* Branding link (including focus outline) */
.branding-link, .branding-link:focus, .branding-link * {
    border-radius: 0 !important;
}
/* Viewer and content frames */
.pdf-viewing-area, .contact-text-background-frame, .text-frame, .contact-border-framer {
    border-radius: 0 !important;
}

/* Page-specific: ensure the catalogue white frame has no rounding */
body.design-catalogue-page .contact-text-background-frame {
    border-radius: 0 !important;
}

/* Apply tokens to existing selectors (high specificity to override earlier rules) */
/* PAGETITLE1 */
.menu .title-area .portfolio-title,
body.viewer-page .portfolio-title {
    font-family: var(--pagetitle1-family) !important;
    font-size: var(--pagetitle1-size) !important;
    font-weight: var(--pagetitle1-weight) !important;
    color: var(--pagetitle1-color) !important;
    letter-spacing: normal !important;
}

/* PAGETITLE2 */
.menu .title-area .portfolio-author,
body.viewer-page .portfolio-author {
    font-family: var(--pagetitle2-family) !important;
    font-size: var(--pagetitle2-size) !important;
    font-weight: var(--pagetitle2-weight) !important;
    color: var(--pagetitle2-color) !important;
    letter-spacing: normal !important;
}

/* Main Title */
.contact-form-title,
.design-catalogue {
    font-family: var(--maintitle-family) !important;
    font-size: var(--maintitle-size) !important;
    font-weight: var(--maintitle-weight) !important;
    color: var(--maintitle-color) !important;
}

/* Body (labels like Send To / Return Email / Subject) */
.contact-label {
    font-family: var(--body-family) !important;
    font-size: var(--body-size) !important;
    font-weight: var(--body-weight) !important;
    color: var(--body-color) !important;
}

/* User Body (entered content) */
.contact-email,
.contact-content-box {
    font-family: var(--user-body-family) !important;
    font-size: var(--user-body-size) !important;
    font-weight: var(--user-body-weight) !important;
    color: var(--user-body-color) !important;
}

/* User Body Standby (placeholder text) */
.contact-email::placeholder,
.contact-content-box::placeholder {
    color: var(--user-body-standby-color) !important;
    opacity: 1 !important;
}

/* Subtitle (bold body) */
.design-catalogue-page .report-list li.section-header {
    font-family: var(--body-family) !important;
    font-size: var(--body-size) !important;
    line-height: 19px !important;
    color: var(--body-color) !important;
    font-weight: var(--subtitle-weight) !important;
}

/* Ensure page title lines never show underlines on hover (PAGETITLE1 & PAGETITLE2) */
.menu .title-area .branding-link .portfolio-title,
.menu .title-area .branding-link .portfolio-author,
body.viewer-page .title-area .branding-link .portfolio-title,
body.viewer-page .title-area .branding-link .portfolio-author {
    text-decoration: none !important;
}
.menu .title-area .branding-link:hover .portfolio-title,
.menu .title-area .branding-link:hover .portfolio-author,
body.viewer-page .title-area .branding-link:hover .portfolio-title,
body.viewer-page .title-area .branding-link:hover .portfolio-author {
    text-decoration: none !important;
}

/* Fail-safe: target the branding anchor itself on the catalogue page with very high specificity */
body.design-catalogue-page .menu .title-area a.branding-link,
body.design-catalogue-page .menu .title-area a.branding-link:hover,
body.design-catalogue-page .menu .title-area a.branding-link:focus {
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
}

/* Extra fail-safe: ensure no descendant element of the branding link shows an underline
   (some generic `a:hover` or later rules can still add decoration to child elements). */
.menu .title-area a.branding-link,
.menu .title-area a.branding-link:hover,
.menu .title-area a.branding-link:focus,
.menu .title-area a.branding-link * {
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
    text-decoration-skip-ink: none !important;
}

/* Ultimate fail-safe: remove any underline/border/shadow or pseudo-element
   decorations from the title lines in all states (hover/focus/active). */
.menu .title-area a.branding-link .portfolio-title,
.menu .title-area a.branding-link .portfolio-author,
.menu .title-area a.branding-link:hover .portfolio-title,
.menu .title-area a.branding-link:hover .portfolio-author,
.menu .title-area a.branding-link:active .portfolio-title,
.menu .title-area a.branding-link:focus .portfolio-title,
.menu .title-area a.branding-link .portfolio-title::after,
.menu .title-area a.branding-link .portfolio-title::before,
.menu .title-area a.branding-link .portfolio-author::after,
.menu .title-area a.branding-link .portfolio-author::before {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
    -webkit-text-decoration-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background-image: none !important;
    content: none !important;
}

/* Make line-height automatic for catalogue text so spacing adapts to font metrics */
.design-catalogue-page .portfolio-text,
.design-catalogue-page .portfolio-text ul,
.design-catalogue-page .portfolio-text li,
.design-catalogue-page .portfolio-text a,
.design-catalogue-page .report-list li.section-header,
.design-catalogue-page .report-list li {
    line-height: normal !important;
}

/* Force compact line-height for body-level text on the Design Catalogue page */

body.design-catalogue-page,
body.design-catalogue-page .contact-border-framer,
body.design-catalogue-page .portfolio-text,
body.design-catalogue-page .portfolio-text ul,
body.design-catalogue-page .portfolio-text li,
body.design-catalogue-page .portfolio-text a,
body.design-catalogue-page .report-list li,
body.design-catalogue-page .contact-email,
body.design-catalogue-page .contact-content-box {
    line-height: 1.15 !important;
}

/* Tighten spacing for Design Catalogue list items (mirror v2) */
body.design-catalogue-page .contact-border-framer .portfolio-text ul,
body.design-catalogue-page .contact-border-framer .portfolio-text li,
body.design-catalogue-page .report-list li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.00 !important;
}

body.design-catalogue-page .report-list li.spacer-line {
    display: block !important;
    height: 4px !important;
    line-height: 4px !important;
}

body.design-catalogue-page .report-list li.section-header {
    margin: 24px 0 6px 0 !important;
    padding-left: 0 !important;
}

/* Remove extra top gap before the first list item */
.design-catalogue-page .report-list { margin-top: 0 !important; padding-top: 0 !important; }
.design-catalogue-page .report-list li:first-child { margin-top: 0 !important; }

/* Pull the list up so there's no gap below the Design Catalogue title */
.design-catalogue + .portfolio-text,
.contact-border-framer .portfolio-text {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure the page title itself doesn't add extra spacing */
.design-catalogue { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* Ensure catalogue links use the Body text tokens (family/size/weight/color) */
/* High-specificity so it wins over earlier Inter/Gravity declarations */
.design-catalogue-page .contact-border-framer .portfolio-text .report-list li a,
.design-catalogue-page .report-list li a {
    font-family: var(--body-family) !important;
    font-size: var(--body-size) !important;
    font-weight: var(--body-weight) !important;
    color: var(--body-color) !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
}
.design-catalogue-page .contact-border-framer .portfolio-text .report-list li a:hover,
.design-catalogue-page .report-list li a:hover {
    text-decoration: underline !important;
    color: #4f7b84 !important;
}

/* Add leading "> " before each catalogue link text */
.design-catalogue-page .report-list li a::before {
    content: "> ";
    color: var(--body-color) !important;
    margin-right: 8px;
    font-weight: var(--body-weight) !important;
}

/* Extra overrides if previous adjustments were insufficient */
body.design-catalogue-page .contact-border-framer .portfolio-text {
    /* pull up the list more aggressively to sit under the title */
    margin-top: -28px !important;
}

body.design-catalogue-page .report-list li.section-header {
    /* ensure visible spacing above header even if margin collapsing occurs */
    margin-top: 24px !important;
    padding-top: 8px !important;
}

/* Guarantee visual weight: header bold, body links regular */
body.design-catalogue-page .report-list li.section-header {
    font-weight: 700 !important;
}
body.design-catalogue-page .report-list li a,
body.design-catalogue-page .report-list li {
    font-weight: 400 !important;
}

/* Make section header visually distinct: heavier weight, slightly larger */
body.design-catalogue-page .report-list li.section-header {
    /* Use Inter (from Google) for reliable bold weight rendering */
    font-family: 'Inter', Arial, sans-serif !important;
    font-weight: 700 !important; /* use available bold weight */
    font-size: 18px !important;
    letter-spacing: 0.01em !important;
    color: #345A60 !important; /* slightly darker for contrast */
}

/* ===== Final overrides: remove title rounding and avoid header overlapping scrollbars ===== */
/* Ensure browsers reserve space for scrollbars so fixed headers don't draw over them. */
html, body {
    scrollbar-gutter: stable both-edges !important;
    overflow-x: hidden !important;
    overflow-y: auto !important; /* allow document scroll where appropriate */
    height: auto !important;
}

/* Reserve gutter on major content containers as well */
.frame-2,
.main-portfolio-frame-2,
.contact-frame-2,
body.viewer-page .pdf-viewing-area {
    scrollbar-gutter: stable !important;
}

/* Remove any rounding around the title bar and related controls */
.menu, .menu *, .title-area, .title-area *, .navigation-button-area, .navigation-button-area *,
.dropdown-menu, .dropdown-menu *,
.branding-link, .branding-link * {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
}

/* Ensure the header uses left/right edges and does not overlay native scrollbars */
.menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
    background-clip: padding-box !important;
    z-index: 2000 !important;
}

/* Make sure any previously-hidden document scrollbar is restored and visible beneath the header */
body { -ms-overflow-style: auto !important; }


/* === Scroll handling: ensure scrollbars live under the fixed title/menu === */
/* Hide the top-level document scrollbar and let page containers handle vertical scrolling. */
html, body {
    height: 100vh !important;
    overflow: hidden !important;
}

/* Containers that should own the vertical scrollbar and start below the header. */
.frame-2,
.main-portfolio-frame-2,
.contact-frame-2,
body.viewer-page .pdf-viewing-area {
    box-sizing: border-box !important;
    height: calc(100vh - var(--menu-height)) !important;
    margin-top: var(--menu-height) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Ensure the internal canvas/container has full available height for scrolling/panning */
body.viewer-page .pdf-canvas-container,
.canvas-stage {
    height: 100% !important;
}

/* Keep the header above any scrollbars visually */
.menu { z-index: 2000 !important; }


/* Catalogue: rounded full-width title bar and content scrolling under it */
:root {
    --menu-radius: 12px;
    --menu-height: 68px;
}

/* Safe gutter reserved so fixed headers don't cover scrollbars */
:root {
    --scrollbar-safe: 18px; /* tweak if scrollbar is wider on certain systems */
}

/* Allow the menu to show rounded corners while still stretching to the viewport edges. */
.menu {
    left: 0 !important;
    right: var(--scrollbar-safe) !important; /* keep header clear of scrollbar */
    border-radius: 0 !important;
    overflow: visible !important;
    background-clip: padding-box !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
}

/* Visual extension: draw a thin strip at the right edge so the gradient appears continuous
   but the interactive fixed header does not overlap the scrollbar area. */
.menu::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    width: var(--scrollbar-safe);
    height: var(--menu-height);
    pointer-events: none;
    background: linear-gradient(90deg, #6B8D9A 0%, #9BC29E 100%);
    z-index: 1999; /* sit beneath the header but above page background */
}

/* Stronger catalogue-specific gutter: some OS/browser scrollbars are wider. */
/* Catalogue-specific: constrain header interactive area so it doesn't cover scrollbars */
body.design-catalogue-page .menu {
    width: calc(100% - 24px) !important; /* leave 24px for scrollbar */
    right: auto !important;
    box-sizing: border-box !important;
}

/* Visual strip to continue gradient to screen edge (non-interactive) */
body.design-catalogue-page .menu::after {
    width: 24px !important;
}

/* Pad the catalogue scrolling container so its scrollbar appears inside the reserved gutter area */
body.design-catalogue-page .contact-frame-2 {
    padding-right: 24px !important;
}

/* Only on the Design Catalogue page: prevent the outer document from scrolling
   and let the content area handle vertical scrollbars beneath the title bar. */
body.design-catalogue-page {
    overflow: hidden !important;
    height: 100vh !important;
}

/* Make the catalogue frame act as the scroll container below the header. */
body.design-catalogue-page .contact-frame-2 {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100vh - 68px) !important; /* header height = 68px */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 33px !important; /* preserve the visual gap under the header */
}

/* Ensure the white content panel participates in the scroller (avoid absolute positioning clipping). */
body.design-catalogue-page .contact-text-background-frame {
    position: relative !important;
    top: 0 !important;
    left: calc(50% - 750px/2) !important;
    margin: 24px auto !important;
    border-radius: var(--menu-radius) !important;
}

/* Keep dropdown/menu items rounded to match the header shape */
.dropdown-menu, .dropdown-menu * {
    border-radius: calc(var(--menu-radius) / 1.25) !important;
}

/* Final global safety net: force no rounding and ensure header keeps clear of scrollbars. */
:root {
    --scrollbar-safe: 24px;
}

/* Contact page specific overrides: match catalogue spacing and background */
body.contact-page {
    background: #F4F8F4 !important; /* same neutral background used by catalogue */
}

/* Ensure contact page keeps a 33px gap under the fixed header and uses the scroller */
body.contact-page .page-top-spacer { height: 33px !important; min-height: 33px !important; }
body.contact-page .contact-frame-2 {
    box-sizing: border-box !important;
    position: relative !important; /* participate in document flow so spacer affects it */
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding-top: 0 !important; /* remove inner padding so white-frame margins show */
    padding-bottom: 0 !important;
    margin: 0 !important;
}

/* Ensure the white content panel inside contact page sits 33px below header */
body.contact-page .contact-text-background-frame {
    margin-top: 33px !important;
    margin-bottom: 33px !important;
    padding-top: 0 !important; /* internal padding not needed */
    padding-bottom: 0 !important;
}

html body .menu,
html body .menu *,
html body .menu::before,
html body .menu::after,
html body .title-area,
html body .title-area * {
    border-radius: 0 !important;
}

/* Header should stop before the scrollbar area on all pages; draw a visual strip to the edge. */
.menu {
    left: 0 !important;
    right: var(--scrollbar-safe) !important;
}
.menu::after {
    right: 0 !important;
    width: var(--scrollbar-safe) !important;
}

/* Viewer page header should also respect the gutter */
body.viewer-page .menu {
    right: var(--scrollbar-safe) !important;
}

/* Ensure content frames don't let the header overlap their scrollbars */
.frame-2,
.main-portfolio-frame-2,
.contact-frame-2 {
    padding-right: var(--scrollbar-safe) !important;
}

/* Catalogue: final, highest-specificity reset to remove any remaining rounding at the top */
body.design-catalogue-page .menu,
body.design-catalogue-page .menu *,
body.design-catalogue-page .menu::before,
body.design-catalogue-page .menu::after,
body.design-catalogue-page .page-top-spacer,
body.design-catalogue-page .contact-bg-gradient,
body.design-catalogue-page .contact-bg-blend-right,
body.design-catalogue-page .contact-bg-blend-left,
body.design-catalogue-page .contact-bg-white-fadeout,
body.design-catalogue-page .contact-menu-drop-shadow,
body.design-catalogue-page .contact-text-background-frame {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    background-clip: padding-box !important;
}

/* Final override: ensure the Design Catalogue frame does not add extra top gap */
body.design-catalogue-page .contact-text-background-frame {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure header interactive area stops before scrollbar on catalogue page */
body.design-catalogue-page .menu {
    left: 0 !important;
    right: var(--scrollbar-safe) !important;
    width: auto !important;
}

/* Ensure the catalogue header matches the other pages exactly: remove auxiliary background
   elements and use the same full-width gradient, with transparent navigation area. */
body.design-catalogue-page .contact-bg-gradient,
body.design-catalogue-page .contact-bg-blend-right,
body.design-catalogue-page .contact-bg-blend-left,
body.design-catalogue-page .contact-bg-white-fadeout,
body.design-catalogue-page .contact-menu-drop-shadow {
    display: none !important;
}

body.design-catalogue-page .menu {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 68px !important;
    background: linear-gradient(90deg, #6B8D9A 0%, #9BC29E 100%) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Debug/last-resort override for contact page frame padding (remove after verification) */
body.contact-page .contact-text-background-frame {
    padding-top: 33px !important;
    padding-bottom: 33px !important;
    background-clip: padding-box !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04) !important;
    border-top: 2px solid rgba(155,194,158,0.06) !important;
}

/* Last-resort, highest-specificity overrides for contact page spacing */
html body.contact-page .page-top-spacer { display: block !important; height: 33px !important; min-height: 33px !important; }
html body.contact-page .contact-frame-2 { padding-top: 33px !important; padding-bottom: 33px !important; }
html body.contact-page .contact-text-background-frame { margin-top: 24px !important; padding-top: 33px !important; padding-bottom: 33px !important; }

/* Final, highest-specificity: ensure contact page shows the site background
    behind the white frame so the 33px gaps are visible. */
html body.contact-page { background: #F4F8F4 !important; }

/* Enforce contact layout: make the scroller participate in flow so the
   top spacer moves it, and ensure the white frame shows 33px gaps. */
html body.contact-page .contact-frame-2 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}

html body.contact-page .contact-text-background-frame {
    margin-top: 33px !important;
    margin-bottom: 33px !important;
}

/* Force the entire contact scroller down by 33px to ensure the top gap is visible
   even when the header is fixed and removed from document flow. */
html body.contact-page .contact-frame-2 {
    margin-top: 33px !important;
}

/* Contact-specific: set white frame internal padding to 33px top/bottom */
html body.contact-page .contact-text-background-frame {
    padding-top: 33px !important;
    padding-bottom: 33px !important;
}

/* Prevent the following .content block from adding extra top gap on contact page */
html body.contact-page .content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Make catalogue use body gradient and keep the menu transparent so only one gradient is visible */
/* Reset catalogue page background to match other pages (white) and ensure menu provides the gradient */
body.design-catalogue-page {
    background: #FFFFFF !important;
}
body.design-catalogue-page .menu {
    background: linear-gradient(90deg, #6B8D9A 0%, #9BC29E 100%) !important;
}

/* Make navigation area visually continuous with gradient but keep it transparent so look matches others */
body.design-catalogue-page .navigation-button-area {
    background: transparent !important;
}

/* Remove any catalogue-specific overlay strips */
body.design-catalogue-page .menu::after,
body.design-catalogue-page::after {
    display: none !important;
}

/* Ensure the title area text colors and sizes match global tokens */
body.design-catalogue-page .portfolio-title,
body.design-catalogue-page .portfolio-author {
    color: #FFFFFF !important;
}

/* Remove catalogue-specific overlays and restore same header/bg as other pages */
/* Ensure catalogue header matches global header: full width gradient and same height */
body.design-catalogue-page .menu::after,
body.design-catalogue-page::after {
    display: none !important;
}

body.design-catalogue-page .menu {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 68px !important;
    background: linear-gradient(90deg, #6B8D9A 0%, #9BC29E 100%) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Make the navigation button area transparent so the gradient reads continuously */
/* Make the navigation button area match other pages (fills right area) */
body.design-catalogue-page .navigation-button-area {
    background: #9BC29E !important;
}

/* Remove extra padding/gutter so the catalogue content lines up like other pages */
body.design-catalogue-page .contact-frame-2 {
    padding-right: 0 !important;
}
/* Ensure white content frame has square corners like other pages */
body.design-catalogue-page .contact-text-background-frame {
    border-radius: 0 !important;
}

/* Top-right overlay: mask any remaining rounded artifact on the catalogue page.
   Non-interactive, matches the header gradient and forces a square corner. */
body.design-catalogue-page::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    width: var(--scrollbar-safe) !important;
    height: var(--menu-height) !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, #6B8D9A 0%, #9BC29E 100%) !important;
    z-index: 3000 !important; /* above header visuals but non-interactive */
    border-radius: 0 !important;
}

/* Highest-specificity: remove any masking/clip that could produce rounded corners */
body.design-catalogue-page .menu,
body.design-catalogue-page .menu *,
body.design-catalogue-page .menu::before,
body.design-catalogue-page .menu::after {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    clip-path: inset(0) !important;
    -webkit-clip-path: inset(0) !important;
    background-clip: border-box !important;
}

/* ====================== Original document header (Design Catalogue) ====================== */
/* These rules are scoped to the Design Catalogue page and mirror the original spec provided. */
body.design-catalogue-page .menu {
    position: absolute !important;
    width: 1024px !important;
    height: 100px !important;
    left: 0px !important;
    top: 0px !important;
    background: #9BC29E !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    z-index: 1000 !important;
}

body.design-catalogue-page .title-area {
    position: absolute !important;
    width: 838px !important;
    height: 100px !important;
    left: 0px !important;
    top: 0px !important;
    background: linear-gradient(90deg, #4D7E91 0%, #9BC29E 100%) !important;
    padding-left: 50px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

body.design-catalogue-page .portfolio-author {
    position: absolute !important;
    width: 673px !important;
    height: 22px !important;
    left: 50px !important;
    top: 54px !important;
    font-family: 'Gravity', Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 18.3299px !important;
    line-height: 22px !important;
    display: flex !important;
    align-items: center !important;
    letter-spacing: 0.33em !important;
    color: #FFFFFF !important;
}

body.design-catalogue-page .portfolio-title {
    position: absolute !important;
    width: 673px !important;
    height: 38px !important;
    left: 50px !important;
    top: 16px !important;
    font-family: 'Gravity', Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 300 !important;
    font-size: 29.664px !important;
    line-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    letter-spacing: 0.33em !important;
    color: #FFFFFF !important;
}

body.design-catalogue-page .navigation-button-area {
    position: absolute !important;
    width: 162px !important;
    height: 100px !important;
    right: 0px !important;
    top: 0px !important;
    background: #9BC29E !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-right: 12px !important;
}

/* Use the provided menu button image as the navigation area's background and hide the inline img */
body.design-catalogue-page .navigation-button-area {
    background-image: url('Assets/Website Icons/Menu button 2.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 44px 44px !important;
}
body.design-catalogue-page .menu-button { display: none !important; }

/* Ensure the catalogue content sits under the 100px header (so scrollbars start below it) */
body.design-catalogue-page .contact-frame-2 {
    margin-top: 100px !important;
}

/* End original header block */

/* FINAL OVERRIDE: force catalogue header to exactly match other pages */
body.design-catalogue-page .menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 68px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: linear-gradient(90deg, #6B8D9A 0%, #9BC29E 100%) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    z-index: 10000 !important; /* ensure it sits above any background elements */
    pointer-events: auto !important;
}

/* Remove any pseudo-elements or overlays that add extra gradient strips */
body.design-catalogue-page .menu::after,
body.design-catalogue-page::after,
body.design-catalogue-page .menu::before,
body.design-catalogue-page .menu *::after,
body.design-catalogue-page .menu *::before {
    display: none !important;
    content: none !important;
}

/* Hide any background blend elements that can create an extra visual strip */
body.design-catalogue-page .contact-bg-gradient,
body.design-catalogue-page .contact-bg-blend-right,
body.design-catalogue-page .contact-bg-blend-left,
body.design-catalogue-page .contact-bg-white-fadeout,
body.design-catalogue-page .contact-menu-drop-shadow,
.background-blend-right,
.background-blend-left {
    display: none !important;
}

/* Make navigation area match the header fill so it reads identically */
body.design-catalogue-page .navigation-button-area {
    background: linear-gradient(90deg, #6B8D9A 0%, #9BC29E 100%) !important;
    box-shadow: none !important;
}

/* Ensure content sits below header and scrollbars are not overlapped */
body.design-catalogue-page .contact-frame-2 {
    margin-top: 68px !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}