/* Aurum Advisory & Corporate Services Ltd — site stylesheet
   Fonts: Marcellus (display), Source Sans 3 (body), IBM Plex Sans/Mono (labels/data).
   Brand: gold #BE8F3A / #A67C1F, ink #22252A, dark surface #191C21. */

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

body { margin: 0; background: #FFFFFF; }

img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5, p, ul, ol { margin: 0; }

ul { list-style: none; padding: 0; }

a { text-decoration: none; }

input, select, textarea, button { font: inherit; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.page { font-family: "Source Sans 3", system-ui, sans-serif; color: #22252A;
            background: #FFFFFF; font-size: 16px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 64px; }

.disp { font-family: Marcellus, "Times New Roman", Georgia, serif; font-weight: 400; }

.eyebrow { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
               color: #A67C1F; font-weight: 600; }

.lede { color: #5F6169; font-size: 17px; line-height: 1.7; }

.balance { text-wrap: balance; }

.nav { position: sticky; top: 0; z-index: 20;
           border-bottom: 1px solid #E7E0D2; background: #FFFFFF; }

.navwrap { max-width: 1200px; margin: 0 auto; padding: 18px 64px;
               display: flex; align-items: center; gap: 32px; }

.navlogo { width: 188px; }

.navlinks { display: flex; align-items: center; gap: 26px; margin-left: auto; }

.navlink { color: #22252A; font-size: 15px; font-weight: 500; padding: 6px 0;
               border-bottom: 2px solid transparent; background: none; border-left: none;
               border-right: none; border-top: none; cursor: pointer; }

.navlink:hover { color: #A67C1F; }

.navlink[aria-current] { color: #A67C1F; border-bottom-color: #BE8F3A; }

.navdrop { position: relative; }

.navdroptoggle { appearance: none; display: inline-flex; align-items: center; gap: 5px;
                      font-family: inherit; }

.navdropicon { transition: transform .15s ease; flex: 0 0 auto; }

.navdrop.is-open .navdropicon { transform: rotate(180deg); }

.navdropmenu { display: none; position: absolute; top: 100%; left: 50%;
                   transform: translateX(-50%); margin-top: 14px; min-width: 250px;
                   background: #FFFFFF; border: 1px solid #E7E0D2; border-radius: 2px;
                   padding: 8px; box-shadow: 0 16px 24px rgba(34,37,42,.1); }

.navdrop.is-open .navdropmenu { display: grid; gap: 2px; }

.navdropitem { display: block; padding: 11px 12px; color: #22252A; font-size: 14px;
                   border-radius: 2px; }

.navdropitem:hover { background: #F7F3E9; color: #A67C1F; }

.btn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
           padding: 14px 24px; min-height: 48px; border-radius: 2px; font-weight: 600;
           font-size: 15px; border: 1px solid transparent; cursor: pointer; }

.btn-gold { background: #BE8F3A; color: #FFFFFF; }

.btn-gold:hover { background: #A67C1F; }

.btn-ghost { border-color: #D6CDB8; color: #22252A; background: transparent; }

.btn-ghost:hover { border-color: #BE8F3A; color: #A67C1F; }

.btn-ink { background: #22252A; color: #F6F2E8; }

.sig { margin: 22px 0 26px; font-family: Marcellus, serif; font-size: 19px;
           color: #A67C1F; font-style: italic; }

.herocta { display: flex; gap: 14px; flex-wrap: wrap; }

.values { border-top: 1px solid #E7E0D2; background: #FAF7F1; }

.values li { padding: 26px 28px; border-left: 1px solid #E7E0D2; }

.values li:first-child { border-left: 0; }

.values strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 5px; }

.values p { font-size: 13.5px; color: #5F6169; line-height: 1.55; }

.sec { padding: 88px 0; }

.sec-warm { background: #FAF7F1; }

.sechead { max-width: 700px; }

.sechead h2 { font-size: 38px; line-height: 1.15; margin: 14px 0 18px; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }

.two p + p { margin-top: 16px; }

/* Home overview video: a 16:9 cut for desktop/tablet, a 9:16 cut for
   mobile — only one is ever shown, swapped at the same 640px
   breakpoint used elsewhere. Native <video controls> supplies the
   play button over the poster, so no custom overlay is needed. */
.homevideo { max-width: 860px; margin: 32px auto 0; }

.homevideo video { width: 100%; border-radius: 2px;
        background: #12141A; box-shadow: 0 30px 60px rgba(34,37,42,.14); }

.homevideo-16x9 { display: block; }

.homevideo-9x16 { display: none; }

.vmcard { background: #FAF7F1; border: 1px solid #E7E0D2; padding: 28px 26px; }

.sec-warm .vmcard { background: #FFFFFF; }

.vmcard p { margin-top: 10px; font-size: 16px; line-height: 1.7; }

.stack20 { display: grid; gap: 20px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

.chips li { font-size: 13.5px; padding: 9px 14px; background: #FFFFFF;
                border: 1px solid #E7E0D2; }

.dark { background: #191C21; color: #EFEBE1; }

.dark .eyebrow { color: #D8B45C; }

.dark h2 { font-size: 38px; line-height: 1.15; margin: 14px 0 18px; }

.dark .lede { color: #A9ADB4; }

.fundgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
                background: #2E333A; margin-top: 40px; }

.fundgrid li { background: #191C21; padding: 24px 26px; display: flex; gap: 16px; }

.fundgrid strong { display: block; font-family: Marcellus, serif; font-size: 18px;
                       margin-bottom: 8px; color: #F3EEE2; }

.fundgrid p { font-size: 14px; color: #9A9EA6; line-height: 1.6; }

.reg { margin-top: 36px; display: flex; gap: 18px; align-items: flex-start;
           background: #22262D; border-left: 3px solid #BE8F3A; padding: 24px 26px; }

.reg p { font-size: 14px; line-height: 1.7; color: #B7BBC2; }

.who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #E7E0D2;
           margin-top: 44px; border: 1px solid #E7E0D2; }

.who li { background: #FFFFFF; padding: 26px 24px; }

.sec-warm .who li { background: #FAF7F1; }

.who strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 8px; }

.who p { font-size: 13.5px; color: #5F6169; line-height: 1.6; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 48px;
             list-style: none; padding: 0; }

.steps li { padding-top: 22px; border-top: 1px solid #E1D4B0; }

.stepnum { font-family: Marcellus, serif; font-size: 34px; color: #BE8F3A; line-height: 1; }

.steps strong { display: block; margin: 12px 0 8px; font-size: 17px; font-weight: 600; }

.steps p { font-size: 14px; color: #5F6169; line-height: 1.6; }

.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }

.why li { padding-left: 20px; border-left: 2px solid #E1D4B0; }

.why strong { display: block; font-family: Marcellus, serif; font-size: 19px;
                  margin-bottom: 8px; }

.why p { font-size: 14px; color: #5F6169; line-height: 1.65; }

.sec-warm .insights article { background: #FAF7F1; }

.tag { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #A67C1F;
           font-weight: 600; }

.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; }

.form { background: #FFFFFF; border: 1px solid #E7E0D2; padding: 32px; display: grid;
            gap: 16px; }

.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field { display: grid; gap: 6px; }

.field label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
                   color: #5F6169; font-weight: 600; }

.field input, .field select, .field textarea { border: 1px solid #E7E0D2; background: #FDFCF9;
        padding: 12px 13px; color: #22252A; border-radius: 2px; font-size: 15px;
        min-height: 46px; }

.field textarea { min-height: 110px; resize: vertical; }

.consent { display: flex; align-items: flex-start; gap: 10px; }

.consent input[type="checkbox"] { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto;
        accent-color: #BE8F3A; }

.consent label { font-size: 13px; line-height: 1.55; color: #5F6169; font-weight: 400;
        text-transform: none; letter-spacing: normal; }

.cmeta { display: grid; gap: 22px; margin-top: 28px; }

.cmeta strong { display: block; font-size: 12px; letter-spacing: .14em;
                    text-transform: uppercase; color: #A67C1F; margin-bottom: 6px; }

.cmeta p { color: #5F6169; font-size: 15px; line-height: 1.6; }

.cmeta a { color: #22252A; border-bottom: 1px solid #E1D4B0; }

.band { background: #BE8F3A; color: #FFFFFF; padding: 44px 0; }

.bandin { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }

.band h3 { font-family: Marcellus, serif; font-size: 27px; }

.band p { font-size: 15px; margin-top: 6px; max-width: 560px; line-height: 1.6;
              color: #FBF4E6; }

.band .btn { margin-left: auto; }

.foot { background: #191C21; color: #B4B8BF; padding: 60px 0 0; }

.footgrid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 36px; }

.footlogo { width: 168px; margin-bottom: 14px; }

.foothead { font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
                color: #D8B45C; margin: 0 0 14px; font-weight: 600; }

.footlist { display: grid; gap: 9px; }

.footlink { color: #B4B8BF; font-size: 14px; }

.footlink:hover { color: #F3EEE2; }

.tagline { font-family: Marcellus, serif; font-style: italic; color: #D8B45C;
               margin: 0 0 14px; font-size: 16px; }

.addr { font-size: 14px; line-height: 1.65; }

.addr a { color: #B4B8BF; }

.disclaimer { margin-top: 48px; border-top: 1px solid #2E333A; padding: 24px 0;
                  font-size: 12.5px; line-height: 1.7; color: #8A8F97; }

.copyrow { border-top: 1px solid #2E333A; padding: 20px 0 26px; display: flex; gap: 20px;
               flex-wrap: wrap; font-size: 13px; color: #8A8F97; }

.copyspacer { margin-left: auto; display: flex; gap: 20px; }

.phero { background: linear-gradient(180deg, #FFFFFF 0%, #FAF7F1 100%);
             padding: 66px 0 58px; border-bottom: 1px solid #E7E0D2; position: relative; }

/* Photo-backed .phero variant — Contact, Industries and the four service
   pages. The warm gradient above stays as the fallback under the photo, so
   the header still reads correctly if an image fails to load. A light
   scrim (heaviest over the text column, fading toward the far edge) keeps
   this section's existing dark text legible over any photo. */
.pherobg { overflow: hidden; }

.pherobg .pherophoto { position: absolute; inset: 0; background-size: cover; z-index: 0; }

.pherobg .pheroscrim { position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg,
      rgba(255,253,248,.97) 0%, rgba(255,253,248,.94) 32%,
      rgba(255,253,248,.78) 52%, rgba(255,253,248,.38) 74%, rgba(255,253,248,.08) 100%); }

.pherobg .pherogrid { position: relative; z-index: 2; }

.phero-contact .pherophoto { background-image: url("../images/hero-contact.jpg");
                              background-position: 68% center; }

.phero-industries .pherophoto { background-image: url("../images/hero-industries.jpg");
                                 background-position: center; }

.phero-services .pherophoto { background-image: url("../images/hero-services.jpg");
                               background-position: 66% center; }

.phero-insights .pherophoto { background-image: url("../images/hero-insights.jpg");
                               background-position: center; }

.phero-about .pherophoto { background-image: url("../images/hero-about.jpg");
                            background-size: 112% auto;
                            background-position: 38% 14%;
                            background-repeat: no-repeat; }

.phero-about .pheroscrim { background: linear-gradient(100deg,
    rgba(255,253,248,.92) 0%, rgba(255,253,248,.88) 32%,
    rgba(255,253,248,.68) 52%, rgba(255,253,248,.30) 74%, rgba(255,253,248,.05) 100%); }

.phero h1 { font-size: 46px; line-height: 1.12; margin: 16px 0 18px; max-width: 20ch; }

.phero .lede { max-width: 68ch; }

.pherogrid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px;
                 align-items: center; }

.pheromark { width: 118px; justify-self: end; opacity: .9; }

.pherocta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

.cols2 { columns: 2; column-gap: 48px; margin-top: 4px; }

.cols2 li { break-inside: avoid; font-size: 15px; line-height: 1.5; padding: 9px 0 9px 20px;
                position: relative; }

.cols2 li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px;
                        height: 7px; background: #BE8F3A; transform: rotate(45deg); }

.approach { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
                background: #E7E0D2; border: 1px solid #E7E0D2; margin-top: 44px; }

.approach li { background: #FFFFFF; padding: 28px 26px; }

.sec-warm .approach li { background: #FAF7F1; }

.approach strong { display: block; font-family: Marcellus, serif; font-size: 20px;
                       margin-bottom: 9px; }

.approach p { font-size: 14.5px; color: #5F6169; line-height: 1.65; }

.xsvc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }

.xsvc a { display: block; background: #FFFFFF; border: 1px solid #E7E0D2;
              border-top: 3px solid #BE8F3A; padding: 26px 24px; color: #22252A; }

.sec-warm .xsvc a { background: #FAF7F1; }

.xsvc a:hover { border-color: #BE8F3A; }

.xsvc h4 { font-family: Marcellus, serif; font-size: 19px; margin: 14px 0 8px; }

.xsvc p { font-size: 13.5px; color: #5F6169; line-height: 1.6; }

.xsvc .more { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
                  font-size: 13.5px; font-weight: 600; color: #A67C1F; }

.pill { display: inline-block; font-size: 10.5px; letter-spacing: .16em;
            text-transform: uppercase; font-weight: 600; color: #A67C1F; background: #F3EBD9;
            border: 1px solid #E1D4B0; padding: 5px 9px; }

.artgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }

.artcard { border: 1px solid #E7E0D2; background: #FFFFFF; padding: 26px 24px; display: flex;
               flex-direction: column; gap: 12px; }

.sec-warm .artcard { background: #FAF7F1; }

.artcard h3 { font-family: Marcellus, serif; font-size: 20px; line-height: 1.3; }

.artcard p { font-size: 13.5px; color: #5F6169; line-height: 1.6; }

.notice { margin-top: 34px; display: flex; gap: 16px; align-items: flex-start;
              background: #FAF7F1; border: 1px solid #E7E0D2; border-left: 3px solid #BE8F3A;
              padding: 22px 24px; }

.sec-warm .notice { background: #FFFFFF; }

.notice p { font-size: 14px; line-height: 1.7; color: #5F6169; }

.notice strong { color: #22252A; }

/* Long-form legal documents (Privacy Notice, Terms of Use). Narrower
   measure and a lighter type scale than the marketing sections — this is
   read start-to-finish, not scanned in cards. */
.legal { max-width: 720px; }

.legal .updated { font-size: 13.5px; color: #9A9EA6; margin-bottom: 40px; }

.legal h2 { font-family: Marcellus, serif; font-weight: 400; font-size: 22px;
            line-height: 1.3; color: #22252A; margin: 46px 0 14px; }

.legal h2:first-of-type { margin-top: 0; }

.legal h3 { font-size: 16px; font-weight: 600; color: #22252A; margin: 24px 0 10px; }

.legal p { font-size: 15.5px; line-height: 1.75; color: #3A3D42; margin: 0 0 14px; }

.legal p strong { font-weight: 600; color: #22252A; }

.legal ul { margin: 2px 0 16px; display: grid; gap: 8px; }

.legal ul li { font-size: 15px; line-height: 1.6; color: #3A3D42; padding-left: 20px;
               position: relative; }

.legal ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px;
                        height: 6px; background: #BE8F3A; transform: rotate(45deg); }

.contactblock { background: #FAF7F1; border: 1px solid #E7E0D2; padding: 22px 24px;
                margin: 18px 0 26px; }

.contactblock p { margin: 0 0 4px; font-size: 15px; }

.contactblock p:last-child { margin-bottom: 0; }

.contactblock a { color: #22252A; border-bottom: 1px solid #E1D4B0; }

/* --- home page: summary blocks that link out, Apex-style --- */
    .hsvc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; }

.hsvc article { background: #FFFFFF; border: 1px solid #E7E0D2; border-top: 3px solid #BE8F3A;
                    padding: 28px 24px; display: flex; flex-direction: column; }

.sec-warm .hsvc article { background: #FAF7F1; }

.hsvc h3 { font-family: Marcellus, serif; font-size: 20px; margin: 14px 0 10px;
               line-height: 1.25; }

.hsvc > article > p { font-size: 14px; color: #5F6169; line-height: 1.6; }

.hsvc ul { margin-top: 16px; display: grid; gap: 7px; }

.hsvc ul a { font-size: 13.5px; color: #22252A; line-height: 1.45; display: flex; gap: 9px;
                 align-items: flex-start; }

.hsvc ul a::before { content: ""; width: 6px; height: 6px; background: #E1D4B0;
                         transform: rotate(45deg); margin-top: 5px; flex: 0 0 auto; }

.hsvc ul a:hover { color: #A67C1F; }

.hsvc ul a:hover::before { background: #BE8F3A; }

.more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto;
            padding-top: 20px; font-size: 13.5px; font-weight: 600; color: #A67C1F; }

.aud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #E7E0D2;
           border: 1px solid #E7E0D2; margin-top: 36px; }

.aud a { background: #FFFFFF; padding: 20px 22px; color: #22252A; font-size: 15px;
             font-weight: 600; display: flex; align-items: center; justify-content: space-between;
             gap: 12px; line-height: 1.35; }

.sec-warm .aud a { background: #FAF7F1; }

.aud a:hover { color: #A67C1F; }

.aud svg { flex: 0 0 auto; color: #C6BCA4; }

.aud a:hover svg { color: #BE8F3A; }

.seclink { display: inline-flex; align-items: center; gap: 9px; margin-top: 28px;
               font-size: 14.5px; font-weight: 600; color: #A67C1F; }

.seclink:hover { color: #BE8F3A; }

.dark .seclink { color: #D8B45C; }

.slim { display: grid; grid-template-columns: 1fr .85fr; gap: 60px; align-items: center; }

.regline { margin-top: 22px; font-size: 13px; color: #9A9EA6; line-height: 1.7; }

.regline a { color: #D8B45C; border-bottom: 1px solid #6B5A2E; }

/* --- hero photo band ---
       .herophoto carries the image; the warm gradient underneath is the
       fallback, so the hero still reads correctly if the photo is missing. */
    .heroband { position: relative; overflow: hidden; padding: 0;
        background-color: #F2E4C9;
        background-image:
          radial-gradient(70% 90% at 82% 18%, rgba(255,244,214,.95), transparent 60%),
          radial-gradient(60% 80% at 12% 44%, rgba(255,251,240,.92), transparent 62%),
          linear-gradient(104deg, #FBF4E4 0%, #F1E2C0 38%, #D9BA85 68%, #A8834A 100%); }

.herophoto { position: absolute; inset: 0; background-image: url("../images/hero.jpg");
                 background-size: cover; background-position: 62% 48%; }

.heroscrim { position: absolute; inset: 0; background: linear-gradient(100deg,
        rgba(19,22,27,.90) 0%, rgba(19,22,27,.84) 28%, rgba(19,22,27,.72) 50%,
        rgba(19,22,27,.56) 70%, rgba(19,22,27,.40) 100%); }

.heroscrim-b { position: absolute; inset: auto 0 0 0; height: 46%;
        background: linear-gradient(180deg, rgba(12,14,17,0) 0%, rgba(12,14,17,.55) 100%); }

.heroinner { position: relative; padding: 118px 0 122px; }

.herocopy { max-width: 620px; }

.herobandrule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
                    background: rgba(245,241,230,.14); }

/* Rotating photo panel: 4 images crossfade in sequence, each fully
       visible for roughly 3-4 seconds before the next takes over. Reduced
       motion freezes on the first photo instead of animating.
       On desktop/tablet this is the service pages' full-bleed hero
       background (replacing the static .pherophoto image, which stays
       hidden here); on mobile it reverts to a boxed panel above the text
       — see the max-width:640px override below. */
    .pherophotos { position: absolute; inset: 0; z-index: 0; overflow: hidden;
        background: #F2E4C9; }

.phero-services .pherophoto { display: none; }

.pherophotos img { position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; object-position: 50% 35%; opacity: 0;
        animation: pherofade 17.5s ease-in-out infinite; }

.pherophotos img:nth-child(1) { animation-delay: 0s; }

.pherophotos img:nth-child(2) { animation-delay: 3.5s; }

.pherophotos img:nth-child(3) { animation-delay: 7s; }

.pherophotos img:nth-child(4) { animation-delay: 10.5s; }

.pherophotos img:nth-child(5) { animation-delay: 14s; }

/* This shot's focal point (the coffee cup) sits left-of-centre, which
   the shared framing above pushes under the text scrim — pull it
   rightward into the clearer part of the frame. */
.pherophotos img:nth-child(4) { object-position: 50% 42%; transform: scale(1.5);
    transform-origin: 0% 42%; }

/* The word-cloud slide is dense with its own bold text, which competes
   with the heading on desktop/tablet where photo and text share the
   frame side by side. Fading it back lets it read as texture rather
   than a second headline. Mobile stacks the photo above the text
   instead, so it's restored to full strength there — see override
   below. */
.pherophotos img:nth-child(5) { filter: opacity(38%); }

@keyframes pherofade {
      0%   { opacity: 0; }
      3%   { opacity: 1; }
      22%  { opacity: 1; }
      28%  { opacity: 0; }
      100% { opacity: 0; }
    }

@media (prefers-reduced-motion: reduce) {
      .valuesribbon { animation: none; }
    }

/* Work gallery: empty slots ready for real client work (video ads,
       print pieces, digital campaigns). No sample content is invented —
       each tile stays a marked placeholder until real files are added. */
    .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
               margin-top: 40px; }

/* Grid items default to min-width: auto, so a tile holding an image or
   video refuses to shrink below that media's natural width — forcing
   the whole grid (and page) wider than the container. min-width: 0
   lets the 1fr tracks actually share the available width. */
.gallery > * { min-width: 0; }

.galleryslot { aspect-ratio: 4 / 3; border: 1px dashed #D6CDB8; border-radius: 2px;
        background: #FFFFFF; display: flex; flex-direction: column; align-items: center;
        justify-content: center; gap: 10px; text-align: center; padding: 20px; }

.galleryslot svg { color: #C6BCA4; }

.galleryslot .glabel { font-size: 13px; font-weight: 600; color: #5F6169; }

.galleryslot .ghint { font-size: 11.5px; color: #9A9EA6; }

/* Filled gallery tiles: real client work (image, video or a linked
       document), replacing the dashed placeholder once a sample exists. */
.galleryitem { display: flex; flex-direction: column; border: 1px solid #E7E0D2;
        border-radius: 2px; background: #FFFFFF; overflow: hidden; color: inherit;
        text-decoration: none; }

a.galleryitem:hover { border-color: #BE8F3A; }

.galleryitem .gmedia { aspect-ratio: 4 / 3; background: #12141A; overflow: hidden; }

.galleryitem .gmedia img, .galleryitem .gmedia video { width: 100%; height: 100%;
        object-fit: cover; display: block; }

.galleryitem .gcaption { padding: 12px 14px; }

.galleryitem .glabel { display: block; font-size: 11px; letter-spacing: .08em;
        text-transform: uppercase; color: #A67C1F; font-weight: 700; margin-bottom: 3px; }

.galleryitem .gtitle { display: block; font-size: 13.5px; font-weight: 600; color: #22252A;
        line-height: 1.4; }

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

/* Values ribbon: an infinite right-to-left ticker. The <ul> holds four
       repeats of the four values back to back; animating exactly half its
       width to the left loops seamlessly onto an identical copy of itself.
       Repeats are aria-hidden and a plain .sr-only list carries the real
       content once for assistive tech. */
    .values { border-top: 1px solid #E7E0D2; background: #FAF7F1; overflow: hidden;
              padding: 30px 0; }

.valuesribbon { display: flex; width: max-content;
        animation: values-scroll 42s linear infinite; }

.values:hover .valuesribbon { animation-play-state: paused; }

.valuesribbon li { flex: 0 0 auto; width: 320px; padding: 0 30px;
                        border-left: 1px solid #E7E0D2; }

.valuesribbon strong { display: block; font-size: 15px; font-weight: 600;
                           margin-bottom: 5px; white-space: nowrap; }

.valuesribbon p { font-size: 13.5px; color: #5F6169; line-height: 1.55; margin: 0; }

@keyframes values-scroll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

/* --- hero photo band ---
       Dark treatment: a uniform-ish dark wash sits over the whole photo
       (heavier on the left where the copy sits, lighter toward the right
       so the room stays visible), so every text color inside .heroband is
       overridden below rather than inherited from the light page tokens.
       The solid dark fallback below the photo matches the brand's other
       dark sections if the image is ever missing. */
    .heroband { position: relative; overflow: hidden; padding: 0;
        background-color: #191C21; }

.heroband .eyebrow { color: #D8B45C; }

.heroband h1 { color: #F5F1E6; font-weight: 800; }

.heroband h1 em { color: #D8B45C; font-style: normal; }

.herorule { width: 64px; height: 2px; background: #D8B45C; border: 0;
                margin: 22px 0 26px; }

.heroband .lede { color: #C9CDD3; }

.heroband .sig { color: #D8B45C; }

.heroband .btn-ghost { border-color: rgba(245,241,230,.4); color: #F5F1E6; }

.heroband .btn-ghost:hover { border-color: #D8B45C; color: #D8B45C; }


/* ========================================================================
   RESPONSIVE
   ======================================================================== */
/* ==========================================================================
   Motion & scroll
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html { scroll-padding-top: 84px; }

/* ==========================================================================
   Mobile nav toggle (hamburger). Hidden on desktop; the panel it opens is
   hidden by default and only shown once .is-open is added by main.js.
   ========================================================================== */
.navlink-cta { display: none; }

.navtoggle {
  display: none;
  appearance: none; cursor: pointer; background: transparent;
  border: 1px solid #D6CDB8; border-radius: 2px;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  padding: 0; margin-left: auto; flex: 0 0 auto;
}
.navtoggle svg { display: block; }
.navtoggle .icon-close { display: none; }
.navtoggle[aria-expanded="true"] .icon-open { display: none; }
.navtoggle[aria-expanded="true"] .icon-close { display: block; }

/* ==========================================================================
   Tablet — 900px
   ========================================================================== */
@media (max-width: 900px) {
  .wrap { padding: 0 32px; }
  .navwrap { padding: 16px 32px; }

  .who,
  .footgrid,
  .hsvc,
  .aud,
  .xsvc,
  .artgrid,
  .gallery,
  .why {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }

  .heroband h1 { font-size: 44px; }
  .phero h1 { font-size: 38px; }
}

/* ==========================================================================
   Phone — 640px
   ========================================================================== */
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .navwrap { padding: 14px 20px; gap: 12px; }
  .navlogo { width: 150px; }

  /* Collapse the desktop link row into a toggled dropdown panel */
  .navtoggle { display: flex; }
  .navlinks {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 2px;
    background: rgba(255,255,255,.68); border-bottom: 1px solid rgba(231,224,210,.8);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    padding: 8px 20px 16px;
    box-shadow: 0 16px 24px rgba(34,37,42,.08);
  }
  .navlinks.is-open { display: flex; }
  .navlinks a { padding: 12px 4px; border-bottom: 1px solid #F3EEE1; }
  .navlinks a:last-child { border-bottom: 0; }
  .nav .btn-gold { display: none; }
  .navlinks .navlink-cta { display: block; margin-top: 8px; }

  /* Services dropdown becomes an inline expanding panel inside the
     mobile menu instead of a floating popover. */
  .navlinks .navdrop { width: 100%; border-bottom: 1px solid #F3EEE1; }
  .navlinks .navdroptoggle { width: 100%; justify-content: center;
                                  padding: 12px 4px; border-bottom: 0; }
  .navlinks .navdropmenu { display: none; position: static; transform: none;
                                margin: 0 0 6px; min-width: 0; background: transparent;
                                border: none; box-shadow: none; padding: 0; text-align: center; }
  .navlinks .navdrop.is-open .navdropmenu { display: grid; }
  .navlinks .navdropitem { padding: 10px 4px; color: #5F6169; font-size: 14px;
                                border-bottom: 1px solid #F3EEE1; }
  .navlinks .navdropitem:last-child { border-bottom: 0; }

  .heroinner { padding: 64px 0 60px; }
  .heroband h1 { font-size: 32px; line-height: 1.15; }
  .heroband .lede { font-size: 15.5px; }
  .herocopy { max-width: 100%; }
  .herocta { flex-direction: column; align-items: stretch; }
  .herocta .btn { justify-content: center; }

  .phero { padding: 44px 0 40px; }
  .phero h1 { font-size: 28px; }

  /* The desktop scrim fades left-to-right to protect a side-by-side text
     column. Once .pherogrid stacks to one column below, text spans the
     full width, so the scrim needs to be uniformly opaque instead —
     otherwise the right-hand words sit almost directly on the photo. */
  .pherobg .pheroscrim { background: rgba(255,253,248,.94); }
  /* The 112%-zoom framing on .phero-about was tuned for the wide desktop
     banner shape (to shift the subject right); on mobile's much taller,
     narrower box it leaves the image short of the container's height —
     plain cover fills it correctly at any aspect ratio instead. */
  .phero-about .pherophoto { background-size: cover; background-position: center 18%; }
  .pherogrid { grid-template-columns: 1fr; gap: 28px; }
  /* Below 640px the grid stacks to one column, so the photos revert to
     a boxed panel sitting above the text instead of the full-bleed
     desktop background — the static services image comes back too. */
  .phero-services .pherophoto { display: block; }
  .pherophotos { position: relative; inset: auto; z-index: 2; width: 100%;
      aspect-ratio: 16 / 10; margin-bottom: 28px; border: 1px solid #E7E0D2;
      box-shadow: 0 30px 60px rgba(34,37,42,.10); }
  .pherophotos img:nth-child(5) { filter: none; }
  .pherocta { flex-direction: column; align-items: stretch; }
  .pherocta .btn { justify-content: center; }

  .sec { padding: 52px 0; }
  .sechead h2, .dark h2 { font-size: 26px; line-height: 1.22; }

  .two, .contact, .slim {
    grid-template-columns: 1fr; gap: 32px;
  }
  .approach { grid-template-columns: 1fr; }

  .who, .footgrid, .hsvc, .aud, .xsvc, .artgrid, .gallery,
  .why, .steps, .fundgrid {
    grid-template-columns: 1fr;
  }
  .who li, .fundgrid li { padding: 22px 20px; }

  .cols2 { columns: 1; }
  .frow { grid-template-columns: 1fr; }
  .form { padding: 24px; }

  .band .bandin { flex-direction: column; align-items: flex-start; }
  .band .btn { margin-left: 0; width: 100%; justify-content: center; }

  .foot .footgrid { gap: 30px; }
  .copyrow, .copyspacer { flex-direction: column; align-items: flex-start; gap: 10px; }
  .copyspacer { margin-left: 0; }

  .valuesribbon li { width: 260px; padding: 0 22px; }

  .gallery .galleryslot { aspect-ratio: 1 / 1; }
  .gallery .galleryitem .gmedia { aspect-ratio: 1 / 1; }

  .homevideo { max-width: 320px; }
  .homevideo-16x9 { display: none; }
  .homevideo-9x16 { display: block; }
}

/* Contact form status message (JS-driven; empty and invisible until set) */
.formstatus { margin-top: 4px; font-size: 14px; min-height: 1px; }
.formstatus[data-state="ok"] { color: #3F7A3F; }
.formstatus[data-state="error"] { color: #A63244; }