/* ============================================================================
   CEDAR SPRING — brand layer
   ----------------------------------------------------------------------------
   This file is loaded LAST, after the template's style.css and responsive.css.
   Everything Cedar Spring changes about the AIXOR template lives here and
   nowhere else, so the template can be updated by the author without losing
   any of this work.

   Contents
     A · Tokens .................. colours and typefaces
     B · Type .................... Fraunces + Archivo applied to the template
     C · Header and navigation
     D · Hero
     E · The company (facts grid)
     F · What we carry (sectors)
     G · Distribution agreement
     H · Brand protection
     I · Business details
     J · Contact
     K · Footer
     L · Accessibility, reduced motion, print
   ========================================================================== */


/* ==== A · Tokens ========================================================== */

:root {
    /* Typefaces. The template's variable names are kept so every existing
       rule picks these up without being rewritten. */
    --font_arapey:   "Fraunces", Georgia, "Times New Roman", serif;
    --font_urbanist: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Greys. --tertiary is lifted from #666 because it failed contrast on
       black; everything else is the template's. */
    --primary:   #ffffff;
    --secondary: #a8a29a;
    --tertiary:  #8b857d;

    /* Cedar. Two weights: the darker one is the brand colour, the brighter one
       is what is safe to set small text in on a black ground (5.5:1). */
    --cedar:        #cf6244;
    --cedar-bright: #e0714f;
    --cedar-deep:   #8c3f2a;

    /* Evergreen. Used for the one band that is not black. */
    --evergreen:     #16281f;
    --evergreen-ink: #e8eee9;

    --hair: #2a2724;
}


/* ==== B · Type ============================================================ */

body {
    font-family: var(--font_urbanist);
    font-size: 15px;
    letter-spacing: -0.005em;
}

/* Fraunces has optical-size and softness axes. Set them once, here. */
.section-title,
.hero-h1 .line,
.awards-box .awards-inner .award-title,
.statement,
.footer-wordmark {
    font-variation-settings: "SOFT" 0, "WONK" 0;
}

/* The template letterspaces display type by -2px, which is tuned for
   Urbanist. Fraunces is wider on the counters and needs less. */
.section-header .section-title {
    letter-spacing: -0.02em;
    font-weight: 400;
}

/* Eyebrow labels: mono-ish, uppercase, cedar tick. */
.section-subtitle {
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    font-weight: 600;
}
.section-subtitle img { filter: brightness(0) saturate(100%) invert(48%) sepia(48%) saturate(830%) hue-rotate(328deg) brightness(93%) contrast(90%); }


/* ==== C · Header and navigation =========================================== */

.header-menu-wrap .logo {
    font-family: var(--font_arapey);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -0.01em;
    line-height: 1;
}
.header-menu-wrap .logo .cs-mark {
    display: inline-block;
    width: 22px;
    height: 22px;
    vertical-align: -4px;
    margin-right: 10px;
}
.header-menu-wrap .navbar .menu { gap: 44px; }
.header-menu-wrap .navbar .menu li a {
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 600;
}
.header-menu-wrap .navbar .menu li a:hover,
.header-menu-wrap .navbar .menu li a[aria-current="true"] { color: var(--primary); }
.header-menu-wrap .navbar .menu li a[aria-current="true"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 1px;
    background: var(--cedar);
}
.header-right-info a { color: var(--secondary); font-size: 13px; }
.header-right-info a:hover { color: var(--primary); }

/* Sidebar (the hamburger panel) */
.header-sidebar-wrap .sidebar-menu .menu li a { font-family: var(--font_arapey); }
.header-sidebar-wrap .sidebar-menu .menu li a:hover { color: var(--cedar-bright); }


/* ==== D · Hero ============================================================ */

/* The template contains the hero film inside the frame, which leaves black
   bars around any footage that is not exactly the viewport ratio. Cover it,
   then lay a scrim over the top so the headline stays legible on any clip. */
.hero-sec .hero-inner .hero-video video {
    object-fit: cover;
    filter: saturate(0.55) contrast(1.05) brightness(0.62);
}
.hero-sec .hero-inner .hero-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 34%, rgba(0,0,0,.55) 72%, #000 100%),
        radial-gradient(120% 80% at 12% 88%, rgba(207,98,68,.16) 0%, rgba(0,0,0,0) 60%);
    pointer-events: none;
}

/* The headline is the page's h1. These are the template's h2 rules, moved
   onto the semantic element. */
.hero-h1 { margin: 0; }
.hero-h1 .line {
    display: block;
    background-image: linear-gradient(90deg, #ffffff 16%, #6b6b6b 145%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(2.75rem, 7.4vw, 6rem);
    line-height: 1.0;
    letter-spacing: -0.035em;
    font-family: var(--font_urbanist);
    font-weight: 500;
    padding: 14px;
    margin: -14px;
}
.hero-h1 .line--serif {
    font-family: var(--font_arapey);
    font-style: italic;
    font-weight: 300;
    letter-spacing: -0.03em;
}
/* One cedar word. More than one and it stops meaning anything. */
.hero-h1 .line em {
    font-style: italic;
    font-family: var(--font_arapey);
    font-weight: 300;
    -webkit-text-fill-color: var(--cedar-bright);
    color: var(--cedar-bright);
}

/* With the standfirst block removed, the hero has one child left. The
   template's space-between would push it to the top of the screen, so anchor
   it low instead — the headline sits over the film the way it always did. */
.hero-sec .hero-inner { justify-content: flex-end; }

/* ---- removed hero standfirst ---------------------------------------------
   The rules from here to the end of .author-info style a block that is no
   longer in index.html. Kept so it can be pasted back in one move; the markup
   is in content.md under "Removed from SECTION 04".
   -------------------------------------------------------------------------- */
.hero-sec .hero-top { max-width: 448px; }
.hero-sec .hero-top p { font-size: 15px; line-height: 24px; color: #c4bfb8; }
.hero-sec .hero-top .author-info { border-left: 1px solid var(--cedar); padding-left: 16px; }
.hero-sec .hero-top .author-info .author-name {
    margin: 0;
    color: var(--primary);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 20px;
}
.hero-sec .hero-top .author-info span { font-style: normal; color: var(--secondary); font-size: 13px; }
/* ---- end of removed hero standfirst -------------------------------------- */

.hero-sec .hero-bottom { gap: 32px; flex-wrap: wrap; }

/* Buttons */
.theme-btn {
    border-color: rgba(255,255,255,.28);
    letter-spacing: 0.06em;
    font-weight: 600;
}
.theme-btn:hover {
    border-color: var(--cedar);
    background: var(--cedar-deep);
    color: #fff;
}


/* ==== E · The company ===================================================== */

.about-sec { background: linear-gradient(0deg, rgba(20,20,20,0) 0%, #141414 100%); }

/* The two paragraphs that sit under the scroll-revealed statement. */
.company-copy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    max-width: 1080px;
    margin: -56px 0 96px;
}
.company-copy p {
    margin: 0;
    color: var(--secondary);
    font-size: 16px;
    line-height: 28px;
}
.company-copy p strong { color: var(--primary); font-weight: 500; }
@media (max-width: 900px) {
    .company-copy { grid-template-columns: 1fr; gap: 24px; margin: -24px 0 56px; }
}

/* The facts grid reuses the template's funfact cards. The demo hover images
   are grey placeholders, so they are replaced with a cedar wash. */
.funfact-box { height: auto; min-height: 268px; border-color: var(--hair); }
.funfact-box .overlay { display: none; }
.funfact-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    transition: 0.3s;
    background: linear-gradient(155deg, rgba(140,63,42,.55) 0%, rgba(20,18,16,.9) 62%);
}
.funfact-box.active::before,
.funfact-box:hover::before { opacity: 1; }
.funfact-box.active,
.funfact-box:hover { border-color: rgba(207,98,68,.45); }

.funfact-box .funfact-header { justify-content: flex-start; }
.funfact-box .funfact-header .title {
    width: auto;
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--secondary);
    font-weight: 600;
}
.funfact-box .funfact-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
.funfact-box .funfact-footer .number {
    font-family: var(--font_arapey);
    font-weight: 300;
    font-size: 68px;
    line-height: 1;
}
.funfact-box .funfact-footer .number span { color: var(--cedar-bright); -webkit-text-fill-color: var(--cedar-bright); }
.funfact-box .funfact-detail {
    display: block;
    color: var(--secondary);
    font-size: 13px;
    line-height: 20px;
    max-width: 24ch;
    z-index: 2;
}


/* ==== F · What we carry =================================================== */

.service-lists-header .service-header-th {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tertiary);
}
.service-box { border-color: var(--hair); }

/* The template rests these at opacity 0.4 and lifts them to 1 on hover. That
   is 2.6:1 on black — below AA — and on a phone there is no hover at all, so
   all six sectors would read faint to the one person the page is for.
   Dimming with a real colour rather than opacity does the same job visually
   and keeps the cedar index number at full strength. */
.service-box .service-inner .title,
.service-box .service-inner .service-feature-lists {
    opacity: 1;
    color: #b3aca4;
}
.service-box.active .service-inner .title,
.service-box.active .service-inner .service-feature-lists,
.service-box:hover .service-inner .title,
.service-box:hover .service-inner .service-feature-lists { color: var(--primary); }
.service-box .service-inner .title { font-family: var(--font_arapey); font-weight: 400; }
.service-box .service-inner .title a { text-decoration: none; cursor: default; }
.service-box .service-inner .service-feature-lists span { color: var(--secondary); }
.service-box.active,
.service-box:hover { background: linear-gradient(90deg, rgba(140,63,42,.20) 0%, rgba(0,0,0,0) 62%); }
.service-box .sector-index {
    color: var(--cedar-bright);
    font-family: var(--font_urbanist);
    font-size: 12px;
    letter-spacing: 0.14em;
    font-weight: 600;
    margin-right: 14px;
}


/* ==== G · Distribution agreement ========================================== */

.feature-sec { background: var(--evergreen); }
.feature-sec .section-title.section-title2 {
    background-image: linear-gradient(90deg, var(--evergreen-ink) 10%, #6f8478 135%);
    /* The template fixes this at 96px, which forces a two-line wrap on any
       title longer than about three words. */
    font-size: clamp(2.25rem, 5.4vw, 4.5rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
}
.feature-sec .section-title.section-title2 span {
    -webkit-text-fill-color: var(--cedar-bright);
    color: var(--cedar-bright);
}
.feature-sec .section-header .section-desc { color: #b9c5bd; max-width: 62ch; }
.feature-sec .section-subtitle { color: #9fb0a6; }

.agreement-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(224,113,79,.5);
    color: var(--cedar-bright);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 22px;
}
.agreement-badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cedar-bright);
}

/* --- the agreement block: brand photograph left, what the line is right ---
   Nova Braidz's own art direction is lilac and soft. Cedar Spring's is black
   and cedar. Rather than tint their photograph to match — which would be
   misrepresenting a brand's imagery — it sits in a framed panel with a hairline
   and its own ground, so it reads as a supplied asset rather than a clash. */

.agreement { margin-top: clamp(2.5rem, 5vw, 4rem); }

.agreement-figure {
    margin: 0;
    background: #0d1712;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    overflow: hidden;
}
.agreement-figure img {
    display: block;
    width: 100%;
    height: auto;
}
/* No caption. The alt text carries the description for anyone who needs it;
   printing a label under a brand's own banner just states the obvious. */

/* ---- removed product block ------------------------------------------------
   Everything from here to the end of the .agreement-link rules styles a block
   that is no longer in index.html: the lead line, the shade range, the
   composition-and-testing note and the link out to novabraidz.com. It is kept
   so the block can be pasted back in one move. The markup is in content.md
   under "Removed from SECTION 07". Delete both if you are sure.
   -------------------------------------------------------------------------- */

.agreement-body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
    /* The gap under the banner lives here rather than on the figure, so that
       with this block removed the banner sits straight above the terms row
       without a double margin. */
    margin-top: clamp(2rem, 4vw, 3.25rem);
}
@media (max-width: 900px) {
    .agreement-body { grid-template-columns: 1fr; gap: 8px; }
}
.agreement-lead {
    font-family: var(--font_arapey);
    font-weight: 300;
    font-size: clamp(1.5rem, 2.8vw, 2.25rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
    color: var(--evergreen-ink);
    margin: 0 0 18px;
}
.agreement-h {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9fb0a6;
    font-weight: 600;
    margin: 34px 0 14px;
}
/* First heading in a column sits level with the lead beside it. */
.agreement-h--first { margin-top: 12px; }
@media (max-width: 900px) {
    .agreement-h--first { margin-top: 34px; }
}
.agreement-note {
    margin: 0;
    color: #b9c5bd;
    font-size: 15px;
    line-height: 26px;
    max-width: 58ch;
}
.agreement-note em { color: var(--evergreen-ink); font-style: italic; }

/* Shade range. The codes carry the information; the dots are indicative. */
.shades {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.shades li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: #b9c5bd;
    white-space: nowrap;
}
.shades li b {
    font-weight: 600;
    color: var(--evergreen-ink);
    font-variant-numeric: tabular-nums;
}
.shades .dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    flex: none;
    background: var(--shade);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}

.agreement-link { margin: 30px 0 0; }
.agreement-link a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--cedar-bright);
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.06em;
    font-weight: 600;
    border-bottom: 1px solid rgba(224,113,79,.45);
    padding-bottom: 3px;
}
.agreement-link a:hover { border-bottom-color: var(--cedar-bright); }
.agreement-link img { width: 11px; height: 11px; display: block; }

/* ---- end of removed product block ---------------------------------------- */

/* The appointment itself, in the same labelled-row language as SECTION 09 */
.agreement-terms {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(255,255,255,.12);
    margin: clamp(2.5rem, 5vw, 4rem) 0 0;
}
.agreement-terms .row-item {
    border-bottom: 1px solid rgba(255,255,255,.12);
    border-right: 1px solid rgba(255,255,255,.12);
    padding: 24px 26px 28px;
}
.agreement-terms .row-item:last-child { border-right: 0; }
.agreement-terms dt {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9fb0a6;
    font-weight: 600;
    margin-bottom: 12px;
}
.agreement-terms dd {
    margin: 0;
    font-family: var(--font_arapey);
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: var(--evergreen-ink);
}
@media (max-width: 900px) {
    .agreement-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .agreement-terms .row-item:nth-child(2n) { border-right: 0; }
}
@media (max-width: 560px) {
    .agreement-terms { grid-template-columns: 1fr; }
    .agreement-terms .row-item { border-right: 0; padding: 20px 0 22px; }
}


/* ==== H · Brand protection ================================================ */

/* Same numbered list the template used for awards. The demo hover images are
   grey placeholders, so each row gets a cedar wash instead. */
.awards-box { border-bottom-color: var(--hair); cursor: default; }
.awards-list .awards-box .overlay,
.awards-list .awards-box:nth-child(2) .overlay,
.awards-list .awards-box:nth-child(3) .overlay,
.awards-list .awards-box:nth-child(4) .overlay,
.awards-list .awards-box:nth-child(5) .overlay,
.awards-list .awards-box:nth-child(6) .overlay {
    background-image: linear-gradient(90deg, rgba(140,63,42,.42) 0%, rgba(0,0,0,0) 68%);
}

/* The template styles this row as an h4. Cedar Spring uses an h3 so the
   heading levels never skip, so the rules are restated for the class. */
.awards-box .awards-inner .award-title {
    font-size: clamp(1.75rem, 4.4vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--primary);
    font-weight: 400;
    font-family: var(--font_arapey);
    background: linear-gradient(90deg, #ffffff 0%, #6b6b6b 130%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 7px;
    margin: -7px;
    transition: 0.3s;
}
.awards-box.active .awards-inner .award-title,
.awards-box:hover .awards-inner .award-title {
    background: none;
    -webkit-text-fill-color: var(--primary);
    color: var(--primary);
}
.awards-box .awards-inner .award-title .num {
    display: inline-block;
    width: 2.6em;
    font-family: var(--font_urbanist);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    -webkit-text-fill-color: var(--cedar-bright);
    color: var(--cedar-bright);
}

/* Title left, explanation right, aligned in a column of its own rather than
   trailing whatever width the title happens to take. */
.awards-box .awards-inner {
    justify-content: space-between;
    align-items: baseline;
    gap: 48px;
}
.awards-box .awards-inner .award-title { flex: 1 1 auto; min-width: 0; }
.awards-box .awards-inner .date {
    color: var(--tertiary);
    flex: 0 0 340px;
    max-width: 340px;
    line-height: 22px;
}
@media (max-width: 1100px) {
    .awards-box .awards-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
    .awards-box .awards-inner .date { flex: 1 1 auto; max-width: 52ch; }
}


/* ==== I · Business details ================================================ */

.details-sec { padding: 90px 72px; }
.details-sec .section-header { margin-bottom: 56px; }
.details-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--hair);
}
.details-grid .row-item {
    border-bottom: 1px solid var(--hair);
    border-right: 1px solid var(--hair);
    padding: 26px 28px 30px;
}
.details-grid .row-item:nth-child(4n) { border-right: 0; }
@media (max-width: 1100px) {
    .details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .details-grid .row-item:nth-child(4n) { border-right: 1px solid var(--hair); }
    .details-grid .row-item:nth-child(2n) { border-right: 0; }
}
.details-grid dt {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tertiary);
    margin-bottom: 12px;
    font-weight: 600;
}
.details-grid dd {
    margin: 0;
    color: var(--primary);
    font-size: 18px;
    line-height: 26px;
    font-family: var(--font_arapey);
    font-weight: 400;
}
.details-note {
    max-width: 62ch;
    margin: 34px 0 0;
    color: var(--secondary);
    font-size: 15px;
    line-height: 26px;
}


/* ==== J · Contact ========================================================= */

/* The template sets this as an h3. Cedar Spring uses an h2 so the heading
   levels never skip, so the display rules are restated here. */
.contact-sec .contact-content h2 {
    background: linear-gradient(90deg, #ffffff 16%, #6b6b6b 142%);
    display: inline-block;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: -14px -14px 4px;
    padding: 14px;
    font-size: clamp(2.5rem, 6.4vw, 5.25rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 500;
}
.contact-sec .contact-content h2 span {
    font-family: var(--font_arapey);
    font-style: italic;
    font-weight: 300;
}
.contact-sec .img-box { height: auto; min-height: 420px; display: flex; align-items: center; }
.contact-lines { margin: 34px 0 0; display: flex; flex-direction: column; gap: 22px; }
.contact-line dt {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tertiary);
    margin-bottom: 8px;
    font-weight: 600;
}
.contact-line dd { margin: 0; }
.contact-line dd a,
.contact-line dd span {
    font-family: var(--font_arapey);
    font-size: clamp(1.25rem, 2.6vw, 2rem);
    line-height: 1.2;
    color: var(--primary);
    text-decoration: none;
    letter-spacing: -0.015em;
}
.contact-line dd a:hover { color: var(--cedar-bright); }
.contact-line dd .small { font-size: 16px; color: var(--secondary); font-family: var(--font_urbanist); }
.contact-note { margin: 30px 0 0; color: var(--secondary); font-size: 15px; line-height: 26px; max-width: 52ch; }


/* ==== K · Footer ========================================================== */

.footer-area { border-top: 1px solid var(--hair); }
.footer-widget h2,
.footer-widget h4 {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tertiary);
    font-weight: 600;
    margin: 0 0 24px;
    line-height: 20px;
}

/* Preloader wordmark replaces the template's logo PNG. */
.preloader-wrap .preloader-wordmark {
    font-family: var(--font_arapey);
    font-weight: 300;
    font-size: clamp(2rem, 7vw, 5rem);
    letter-spacing: -0.02em;
    color: #fff;
    position: relative;
    z-index: 2;
}
.footer-widget-top .links a { font-family: var(--font_arapey); }
.footer-registration {
    color: var(--secondary);
    font-size: 13px;
    line-height: 22px;
    margin: 0;
}
/* The template right-aligns the third footer column; the paragraph inside it
   has to follow, or the block reads as a mistake. */
.footer-area .footer-top > .row .col-md-3:nth-child(3) .footer-registration { text-align: right; }
@media (max-width: 991px) {
    .footer-area .footer-top > .row .col-md-3 { margin-bottom: 48px; }
    .footer-area .footer-top > .row .col-md-3:nth-child(2) { width: 100%; }
    .footer-area .footer-top > .row .col-md-3:nth-child(3) .footer-widget .footer-widget-top,
    .footer-area .footer-top > .row .col-md-3:nth-child(3) .footer-widget ul,
    .footer-area .footer-top > .row .col-md-3:nth-child(3) .footer-widget .copyright { align-items: flex-start; justify-content: flex-start; }
    .footer-area .footer-top > .row .col-md-3:nth-child(3) .footer-registration { text-align: left; }
}
.footer-registration strong { color: var(--primary); font-weight: 500; }
.copyright { color: var(--tertiary); }

/* The template's footer signature is a 388KB PNG of the AIXOR logotype.
   Cedar Spring sets its name as live text instead — no image to go stale,
   and it is selectable and readable by a screen reader. */
.footer-wordmark {
    font-family: var(--font_arapey);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 0.86;
    font-size: 15.4vw;
    white-space: nowrap;
    color: transparent;
    background-image: linear-gradient(90deg, #ffffff 4%, #4a4642 118%);
    background-clip: text;
    -webkit-background-clip: text;
    margin: 0;
    padding: 0 0 6px;
}


/* ==== L · Accessibility, reduced motion, print ============================ */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 2000;
    background: var(--cedar-deep);
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}
.skip-link:focus { left: 16px; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--cedar-bright);
    outline-offset: 4px;
    border-radius: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    /* The scroll-scrubbed reveal leaves characters at 20% opacity until they
       are scrolled through. With motion off, print them lit. */
    .reveal-type .char,
    .reveal-type .word { opacity: 1 !important; transform: none !important; }
    [data-aos] { opacity: 1 !important; transform: none !important; }
    .hero-sec .hero-inner .hero-video video { display: none; }
    #magic-cursor { display: none; }
}

/* Some reviewers print the page for the credit file. */
@media print {
    body, .aixor-main { background: #fff !important; color: #000 !important; }
    .preloader-wrap, #magic-cursor, .scroll-to-show-menu,
    .header-sidebar-wrap, .hero-video, .theme-btn,
    .service-img-box, .footer-wordmark, .feature-project .img-box { display: none !important; }
    .hero-sec .hero-inner { height: auto !important; padding: 0 !important; }
    * { color: #000 !important; -webkit-text-fill-color: #000 !important; background-image: none !important; }
    .hero-h1 .line em { font-style: italic; }
    a { text-decoration: underline; }
    .details-grid .row-item, .awards-box, .service-box { border-color: #bbb !important; }
    .feature-sec, .about-sec { background: #fff !important; }
}


/* ==== Responsive ========================================================== */

@media (max-width: 1200px) {
    .details-sec { padding: 70px 40px; }
}
@media (max-width: 991px) {
    /* Template bug: below this width the sector artwork is repositioned to
       left:188px at 306px wide, which pushes the document 33px past the
       viewport and gives the whole page a horizontal scrollbar. It is
       decorative and never appears without a hover, so it goes. */
    .service-box .service-inner .service-img-box { display: none; }
}
@media (max-width: 767px) {
    /* The template fixes section titles at 48px, which is a lot of line breaks
       on a 390px screen. */
    .section-header .section-title { font-size: clamp(1.5rem, 6.6vw, 2.125rem); line-height: 1.28; letter-spacing: -0.015em; }
    /* The facts cards are min-height 268px, which on one column stacks four
       tall boxes of mostly empty space. */
    .funfact-box { min-height: 0; padding: 22px; }
    .funfact-box .funfact-footer { gap: 8px; }
    .funfact-box .funfact-footer .number { font-size: 54px; }
    .funfact-box .funfact-detail { max-width: none; }

    .details-sec { padding: 56px 20px; }
    .details-grid .row-item { border-right: 0; padding: 22px 0 24px; }
    .footer-wordmark { font-size: 16vw; }
    .hero-sec .hero-top { padding-top: 118px; }
    .awards-box .awards-inner { padding-left: 20px; padding-right: 20px; flex-direction: column; align-items: flex-start; gap: 6px; }
}