/* 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: relative; z-index: 20; display: flex; align-items: center; gap: 32px; padding: 18px 64px;
           border-bottom: 1px solid #E7E0D2; background: #FFFFFF; }

.navlogo { width: 188px; }

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

.navlink { color: #22252A; font-size: 15px; font-weight: 500; padding: 6px 0;
               border-bottom: 2px solid transparent; }

.navlink:hover { color: #A67C1F; }

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

.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; }

.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; }

.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%; }

.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. */
    .pherophotos { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
        border: 1px solid #E7E0D2; box-shadow: 0 30px 60px rgba(34,37,42,.10);
        background: #F2E4C9; }

.pherophotos img { position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; object-position: 50% 35%; opacity: 0;
        animation: pherofade 14s 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; }

@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; }

.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; }

.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; }
  .nav { 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; }
  .nav { 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; }

  .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); }
  .pherogrid { grid-template-columns: 1fr; gap: 28px; }
  .pherophotos { order: -1; aspect-ratio: 16 / 10; }
  .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; }
}

/* 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; }