/*
Theme Name: Afriaurum Trading
Theme URI: https://dw33py.netlify.app
Author: Dw33pY
Author URI: https://dw33py.netlify.app
Description: Custom theme for Afriaurum Trading Limited — precious minerals trading, Nairobi. All content editable via ACF fields in the dashboard.
Version: 1.2
License: GNU General Public License v2 or later
*/

/* ====== BRAND TOKENS — edit these hexes to rebrand the whole site ====== */
:root{
  --ink:#0B0B0D;         /* deepest background — hero & dark sections */
  --charcoal:#15151A;    /* raised surfaces on dark (form inputs) */
  --gold:#C9A227;        /* primary brand gold — accents on dark */
  --gold-soft:#E8C766;   /* lighter gold for glows & gradients */
  --gold-deep:#8C6D14;   /* darker gold for TEXT on light backgrounds (readability) */
  --cream:#F7F4EC;       /* light section background */
  --slate:#232328;       /* body text on light */
  --stone:#6E6A5E;       /* secondary text on light */
  --text-dark:#EDE9DC;   /* body text on dark */
  --muted-dark:#9B968A;  /* secondary text on dark */
  --line-dark:rgba(201,162,39,.22); /* gold hairlines on dark */
  --line-light:rgba(35,35,40,.14);  /* hairlines on light */
  --font-display:'Marcellus',serif;
  --font-body:'Figtree',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); /* the site's easing personality */
}

/* ====== RESET / BASE ====== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--ink);color:var(--text-dark);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
ul,ol{list-style:none}
body.no-scroll{overflow:hidden} /* locks page when the mobile menu is open */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.section--light :focus-visible{outline-color:var(--gold-deep)}
.screen-reader-text,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip:focus{position:fixed;top:16px;left:16px;z-index:200;clip:auto;width:auto;height:auto;background:var(--gold);color:var(--ink);padding:10px 18px;font-weight:600}

/* ====== LAYOUT ====== */
.wrap{width:min(1160px,92%);margin-inline:auto}
.wrap--narrow{width:min(760px,92%)}
.section{position:relative;overflow:hidden;padding:clamp(88px,11vw,150px) 0} /* position+overflow anchor the decorative images and clip them neatly */
.section .wrap{position:relative;z-index:2} /* keeps all text ABOVE the decorative images */
.section--dark{background:var(--ink);color:var(--text-dark)}
.section--light{background:var(--cream);color:var(--slate)}
.section--tight{padding:clamp(40px,6vw,72px) 0}

/* ====== DECORATIVE SECTION IMAGES — YOUR CONTROL PANEL ======
   HOW TO TUNE ANY IMAGE (every knob is on the lines below):
   1. SIZE      → the MIDDLE number inside clamp(min, PREFERRED, max)
                  "58vw" = 58% of the screen width. Raise = bigger, lower = smaller.
   2. POSITION  → right: -2% bleeds off the edge · 0 = flush · 10% = slides left
                  bottom: 0 = touches the section bottom · 10% = floats it up
   3. TINT      → brightness: 1 = original · .65 = darker · .5 = much darker
                  opacity:   1 = full strength · .55 = faded · .3 = barely there
   WHICH LINE IS WHICH IMAGE:
   .deco--hero = home hero · .deco--page = page heroes (About/Services/RS/DD/Contact)
   .deco--mid  = mid-page sections (Why/Services grid/Responsible + About intro) */
.deco{position:absolute;z-index:1;pointer-events:none;user-select:none;opacity:.55;filter:brightness(.65)} /* tint knobs for ALL images on dark sections */
.deco--hero{right:-2%;bottom:0;width:clamp(400px,42vw,860px)}    /* home hero — now touches the bottom (sits behind the ticker strip) */
.deco--page{right:-2%;bottom:0;width:clamp(360px,50vw,760px)}   /* page heroes — flush to the section bottom */
.deco--mid{top:50%;right:-2%;width:clamp(320px,44vw,660px);transform:translateY(-50%)} /* mid sections — top:50% = centered, 35% = higher, 60% = lower */
/* LIGHT sections (cream background): darkening an image there looks muddy, so this
   override switches to fading instead — the dark text always wins. Lower = fainter. */
.section--light .deco{filter:none;opacity:.35}
@media (max-width:719px){
  /* Phones: fainter still so text stays crisp */
  .deco{opacity:.4}
  .deco--hero{right:-8%;bottom:0;top:auto;width:75vw}
  .deco--page{right:-6%;width:68vw}
  .deco--mid{right:-8%;width:72vw}
}

/* ====== SECTION HEADERS — the recurring gold-rule signature ====== */
.sec-head{display:flex;align-items:center;gap:14px;margin-bottom:clamp(20px,3vw,32px)}
.sec-head__rule{width:52px;height:1px;background:var(--gold);flex:none} /* the small gold dash beside "01 · ..." labels — delete this rule + the two light variants below to remove it everywhere */
.sec-head__label{font-size:.75rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:600}
.sec-head--light .sec-head__rule{background:var(--gold-deep)}
.sec-head--light .sec-head__label{color:var(--gold-deep)}
.sec-title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,4.5vw,3.1rem);line-height:1.12;max-width:18ch;margin-bottom:clamp(36px,5vw,56px)}

/* Multi-paragraph body copy */
.prose p{max-width:62ch}
.section--light .prose p{color:var(--stone)}
.section--dark .prose p{color:var(--muted-dark)}
.prose p + p{margin-top:1.2em}

/* "Read more"-style arrow link */
.link-more{display:inline-flex;align-items:center;gap:12px;font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-top:clamp(32px,4vw,48px)}
.section--dark .link-more{color:var(--gold)}
.link-more::after{content:"";width:34px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.link-more:hover::after{width:56px}

/* ====== BUTTONS — sharp corners, gold, light-sweep hover ====== */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 30px;font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;position:relative;overflow:hidden;border:1px solid transparent;transition:transform .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease)}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{transform:translateY(-2px)}
.btn--ghost{border-color:rgba(201,162,39,.5);color:var(--gold)}
.btn--ghost:hover{background:rgba(201,162,39,.1);transform:translateY(-2px)}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);transform:translateX(-130%);transition:transform .7s var(--ease)} /* gold-slash echo on hover */
.btn:hover::before{transform:translateX(130%)}

/* ====== NAVIGATION ====== */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .4s var(--ease),border-color .4s var(--ease);border-bottom:1px solid transparent}
.nav.is-scrolled{background:rgba(11,11,13,.92);backdrop-filter:blur(10px);border-color:var(--line-dark)}
body.admin-bar .nav{top:32px} /* keeps the fixed nav below the WP admin bar */
@media (max-width:782px){body.admin-bar .nav{top:46px}}
.nav__inner{width:min(1160px,92%);margin-inline:auto;display:flex;align-items:center;gap:24px;padding:18px 0}
.nav__brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.nav__logo{height:50px;width:auto;max-width:340px;object-fit:contain} /* wide logo — height controls size, max-width is just the safety cap */
@media (max-width:719px){.nav__logo{max-width:56vw}} /* keeps room for the burger button on phones */
.nav__wordmark{font-family:var(--font-display);font-size:1rem;letter-spacing:.2em;color:#fff;white-space:nowrap}
.nav__links{display:none} /* hidden below 1150px — the burger menu takes over */
.nav__list{display:flex;gap:18px;margin:0;padding:0;list-style:none}
.nav__list a{display:inline-block;padding:4px 0;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;position:relative;white-space:nowrap}
.nav__list a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav__list a:hover::after,.nav__list a:focus-visible::after,.nav__list .current-menu-item a::after,.nav__list .current_page_item a::after{transform:scaleX(1);transform-origin:left}
.nav__list .current-menu-item a,.nav__list .current_page_item a{color:var(--gold)}
.btn--nav{display:none;padding:12px 22px}
.nav__burger{display:flex;flex-direction:column;gap:7px;padding:10px;z-index:110}
.nav__burger span{width:26px;height:2px;background:var(--gold);transition:transform .35s var(--ease)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* Mobile menu overlay — full-screen, staggered links */
.menu{position:fixed;inset:0;z-index:105;background:var(--ink);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.menu.is-open{opacity:1;visibility:visible}
.menu__inner{display:grid;justify-items:center;text-align:center;width:min(90%,420px)}
.menu__list{list-style:none;margin:0 0 28px;padding:0}
.menu__list li{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.menu.is-open .menu__list li{opacity:1;transform:none}
.menu.is-open .menu__list li:nth-child(1){transition-delay:.08s}
.menu.is-open .menu__list li:nth-child(2){transition-delay:.16s}
.menu.is-open .menu__list li:nth-child(3){transition-delay:.24s}
.menu.is-open .menu__list li:nth-child(4){transition-delay:.32s}
.menu.is-open .menu__list li:nth-child(5){transition-delay:.4s}
.menu.is-open .menu__list li:nth-child(6){transition-delay:.48s}
.menu__list a{display:block;padding:10px;font-family:var(--font-display);font-size:1.8rem;color:var(--text-dark)}
.menu__cta{opacity:0;transition:opacity .5s var(--ease) .56s}
.menu.is-open .menu__cta{opacity:1}

/* ====== HOME HERO ====== */
/* v1.2: the diagonal gold slash across the headings was removed per client
   request. The hero keeps its ghost watermark until a hero image is set. */
.hero{min-height:100vh;min-height:100svh;position:relative;display:flex;flex-direction:column;overflow:hidden;padding-top:110px}
.hero__content{flex:1;display:grid;align-content:center;width:min(1160px,92%);margin-inline:auto;padding-bottom:40px;position:relative;z-index:2}
.hero__eyebrow{font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:clamp(18px,3vw,30px)}
.hero__title{font-family:var(--font-display);font-weight:400;color:#fff;font-size:clamp(3rem,12vw,8.2rem);line-height:.98;letter-spacing:.01em;margin-bottom:clamp(24px,4vw,40px)}
.hero__line{display:block;overflow:hidden}
.hero__line--2{margin-left:clamp(28px,7vw,110px)} /* staggered indents follow the upward angle */
.hero__line--3{margin-left:clamp(56px,14vw,220px)}
.hero__line-inner{display:block;transform:translateY(112%);animation:lineUp .9s var(--ease) forwards} /* masked line reveal */
.hero__line--2 .hero__line-inner{animation-delay:.18s}
.hero__line--3 .hero__line-inner{animation-delay:.36s}
@keyframes lineUp{to{transform:translateY(0)}}
.u-gold{color:var(--gold)}
.hero__lead{max-width:52ch;margin-bottom:clamp(28px,4vw,40px)}
.hero__lead p{color:var(--muted-dark);font-size:clamp(1rem,1.6vw,1.15rem)}
.hero__lead p + p{margin-top:1em}
.hero__cta{display:flex;flex-wrap:wrap;gap:16px}
.hero__mark{position:absolute;right:-8%;bottom:-12%;width:min(48vw,560px);opacity:.06;z-index:1;pointer-events:none;user-select:none} /* ghost "A" watermark — auto-hides once a hero image is set */

/* Trade-route ticker — CSS-only marquee */
.ticker{overflow:hidden;border-top:1px solid var(--line-dark);padding:16px 0;position:relative;z-index:2;background:rgba(11,11,13,.6)}
.ticker__track{display:flex;align-items:center;width:max-content;animation:ticker 70s linear infinite} /* 70s per loop — lower = faster, higher = slower */
.ticker__track span{font-size:.72rem;letter-spacing:.3em;color:var(--muted-dark);white-space:nowrap}
.ticker__gold{color:var(--gold)} /* the TRADE. INVEST. GROW. words in brand gold */
.ticker__track i{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);margin:0 34px;flex:none}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ====== INNER PAGE HERO ====== */
.page-hero{position:relative;overflow:hidden;padding:clamp(150px,22vh,220px) 0 clamp(72px,9vw,110px)}
.page-hero--tall{padding-top:clamp(170px,28vh,260px)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero__eyebrow{font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:18px}
.page-hero__title{font-family:var(--font-display);font-weight:400;color:#fff;font-size:clamp(2.2rem,5.5vw,4.2rem);line-height:1.08;max-width:18ch;margin-bottom:22px}
.page-hero__lead{color:var(--muted-dark);max-width:52ch;font-size:clamp(1rem,1.5vw,1.15rem)}

/* ====== HOME — WHO WE ARE ====== */
.about__grid{display:grid;gap:clamp(40px,6vw,72px)}
.pillars{border-top:1px solid var(--line-light)}
.pillar{display:grid;grid-template-columns:64px 1fr;gap:6px 18px;padding:26px 0;border-bottom:1px solid var(--line-light);align-items:baseline}
.pillar__num{font-family:var(--font-display);color:var(--gold-deep);font-size:1rem;letter-spacing:.2em}
.pillar__title{font-family:var(--font-display);font-weight:400;font-size:1.35rem;color:var(--slate)}
.pillar__text{grid-column:2;color:var(--stone);font-size:.95rem}

/* ====== HOME — WHY AFRIAURUM (offset editorial grid) ====== */
.why{display:grid;gap:clamp(32px,5vw,56px)}
.why__num{font-family:var(--font-display);color:var(--gold);font-size:.95rem;letter-spacing:.3em;display:block;margin-bottom:10px}
.why__title{font-family:var(--font-display);font-weight:400;font-size:1.45rem;color:#fff;margin-bottom:10px}
.why__text{color:var(--muted-dark);font-size:.95rem;max-width:44ch}

/* ====== HOME — SERVICES GRID — all six services visible, two columns ====== */
.svc-grid{display:grid;border-top:1px solid var(--line-light)}
.svc{display:grid;grid-template-columns:52px 1fr;gap:4px 14px;padding:24px 0;border-bottom:1px solid var(--line-light)}
.svc__num{font-family:var(--font-display);color:var(--gold-deep);font-size:1rem;letter-spacing:.2em}
.svc__title{font-family:var(--font-display);font-weight:400;font-size:1.3rem;color:var(--slate);margin-bottom:4px;transition:color .3s var(--ease)}
.svc:hover .svc__title{color:var(--gold-deep)}
.svc__text{color:var(--stone);font-size:.92rem;max-width:42ch}
@media (min-width:720px){
  .svc-grid{grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,72px)} /* the two-column table */
}

/* ====== HOME — RESPONSIBLE STATEMENT ====== */
.resp__pull{font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.3;max-width:26ch;color:#fff;border-left:2px solid var(--gold);padding-left:clamp(20px,3vw,32px);margin-top:clamp(36px,5vw,56px)}

/* ====== CTA BANDS ====== */
.cta__inner{display:grid;gap:24px;justify-items:start;max-width:640px}
.cta--center .cta__inner{justify-items:center;text-align:center;margin-inline:auto}
.cta__title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,4.5vw,3rem);line-height:1.12}
.cta__text{max-width:48ch}
.section--light .cta__text{color:var(--stone)}
.section--dark .cta__text{color:var(--muted-dark)}
/* ====== CTA BACKGROUND IMAGE — set via the Services page "CTA background image" field ====== */
.cta__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.cta__bg::before{content:"";position:absolute;inset:0;background:rgba(11,11,13,.78)} /* dark overlay so text stays readable — raise to darken, lower to reveal more image */

/* ====== ABOUT PAGE — statement & split ====== */
.statement{display:grid;gap:28px;justify-items:center;text-align:center}
.statement__title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.8rem,4.2vw,3rem);line-height:1.18;max-width:26ch}
.statement__title--sm{text-align:left;font-size:clamp(1.35rem,2.6vw,1.8rem);max-width:32ch}
.statement__title--mission{font-size:clamp(1.55rem,3.2vw,2.3rem);max-width:36ch;margin-inline:auto} /* sized for the longer mission statement */
.section--dark .statement__title{color:#fff}
.statement__body{max-width:62ch}
.split{display:grid;gap:clamp(32px,5vw,56px)}
.split > div:first-child{display:grid;align-content:start}

/* ====== ABOUT PAGE — core values ====== */
.values{display:grid;gap:0 0;border-top:1px solid var(--line-dark)}
.value{display:grid;grid-template-columns:70px 1fr;gap:8px 20px;padding:26px 0;border-bottom:1px solid var(--line-dark);align-items:baseline}
.value__num{font-family:var(--font-display);color:var(--gold);font-size:1rem;letter-spacing:.2em}
.value__title{font-family:var(--font-display);font-weight:400;font-size:1.35rem;color:#fff}
.value__text{grid-column:2;color:var(--muted-dark);font-size:.95rem}

/* ====== SERVICES PAGE — alternating editorial rows ====== */
.srow{display:grid;gap:18px;padding:clamp(44px,6vw,76px) 0;border-top:1px solid var(--line-light);align-items:start}
.srow__num{font-family:var(--font-display);font-size:clamp(3rem,7vw,5.2rem);line-height:.9;color:rgba(140,109,20,.25)} /* ghost numeral — raise opacity for more presence */
.srow__title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--slate);margin-bottom:8px}
.srow__tag{color:var(--gold-deep);font-weight:600;font-size:.95rem;margin-bottom:16px;letter-spacing:.02em}

/* ====== RESPONSIBLE PAGE — commitments grid ====== */
.commitments{display:grid;gap:clamp(28px,4vw,44px)}
.commit{position:relative;border-left:1px solid var(--line-dark);padding-left:26px}
.commit::before{content:"";position:absolute;left:-5px;top:9px;width:9px;height:9px;background:var(--gold);transform:rotate(45deg)} /* gold diamond on the hairline */
.commit__title{font-family:var(--font-display);font-weight:400;font-size:1.3rem;color:#fff;margin-bottom:8px}
.commit__text{color:var(--muted-dark);font-size:.95rem}

/* ====== DILIGENCE PAGE — framework sequence & checklist ====== */
.frame{border-top:1px solid var(--line-light);padding:clamp(40px,6vw,64px) 0;display:grid;gap:18px}
.frame__num{font-family:var(--font-display);color:var(--gold-deep);font-size:.9rem;letter-spacing:.34em}
.frame__title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--slate)}
.frame__text{max-width:64ch;color:var(--stone)}
.kyc{display:grid;gap:14px 40px;margin-top:8px}
.kyc li{position:relative;padding-left:26px;color:var(--slate)}
.kyc li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--gold-deep);transform:rotate(45deg)}

/* ====== CONTACT PAGE ====== */
.contact__grid{display:grid;gap:clamp(48px,6vw,80px)}
.contact__details{display:grid;gap:18px}
.contact__details li{display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line-light);padding-bottom:16px}
.contact__details li > span:first-child{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.contact__details a,.contact__val{color:var(--slate);font-weight:500}
.contact__details a:hover{color:var(--gold-deep)}

/* ====== FORMS — Contact Form 7 / Fluent Forms inherit these ====== */
.form{display:grid;gap:20px}
.form form{display:grid;gap:20px}
.form p{margin:0}
.form label{display:block;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin-bottom:9px}
.form input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.form select,.form textarea{width:100%;background:#fff;border:1px solid rgba(140,109,20,.35);color:var(--slate);padding:15px 16px;font:inherit;font-size:.95rem;border-radius:0;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 1px var(--gold-deep)}
.form textarea{resize:vertical;min-height:120px}
.form input[type=submit],.form button[type=submit],.form .wpcf7-submit{background:var(--gold);color:var(--ink);border:0;padding:15px 30px;font:inherit;font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:transform .35s var(--ease)}
.form input[type=submit]:hover,.form button[type=submit]:hover,.form .wpcf7-submit:hover{transform:translateY(-2px)}
.form .wpcf7-not-valid-tip{color:#B0432F;font-size:.8rem;margin-top:6px}
.form .wpcf7-response-output{border:1px solid var(--line-light);padding:12px;font-size:.85rem;color:var(--stone);margin:0}
.notice-admin{border:1px dashed var(--gold-deep);padding:18px;color:var(--stone);font-size:.9rem}

/* ====== BUILT-IN MAILTO FORM (shows when no form shortcode is set) ====== */
.form label em{font-style:normal;letter-spacing:0;text-transform:none;font-weight:400;color:var(--stone)}
.field__msg{font-size:.8rem;color:#B0432F;margin-top:7px;min-height:0}
.field--error input,.field--error select,.field--error textarea{border-color:#B0432F}
.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px}
.select::after{content:"";position:absolute;right:17px;top:50%;width:9px;height:9px;border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);transform:translateY(-70%) rotate(45deg);pointer-events:none} /* the little gold chevron */
.mailto-form__hint{font-size:.75rem;color:var(--stone);text-align:center;margin:0}

/* ====== FOOTER ====== */
.footer{background:var(--ink);border-top:1px solid var(--line-dark);padding:clamp(56px,7vw,84px) 0 32px}
.footer__top{display:grid;gap:36px;justify-items:center;text-align:center;padding-bottom:clamp(40px,5vw,64px)}
.footer__logo{width:280px;max-width:100%;height:auto} /* footer logo width — raise 220px for bigger, lower it if the links get crowded again */
.footer__nav{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center}
.footer__nav a{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dark);transition:color .3s}
.footer__nav a:hover{color:var(--gold)}
.footer__motto{font-family:var(--font-display);font-size:.9rem;letter-spacing:.3em;color:var(--gold)}
.footer__motto span{color:var(--muted-dark);margin:0 6px}
.footer__bar{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line-dark);padding-top:26px;text-align:center}
.footer__copy{font-size:.8rem;color:var(--muted-dark)}
.footer__credit{font-size:.8rem;color:var(--muted-dark);letter-spacing:.06em}
.footer__credit a{color:inherit;text-decoration:none;transition:color .3s}
.footer__credit a:hover{color:var(--gold)}

/* ====== SCROLL REVEALS (only when JS is running) ====== */
html.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
html.js [data-reveal].is-in{opacity:1;transform:none}

/* ====== TABLET ≥ 700px — kyc checklist goes 2-up ====== */
@media (min-width:700px){
  .kyc{grid-template-columns:1fr 1fr}
}

/* ====== TABLET ≥ 720px ====== */
@media (min-width:720px){
  .about__grid{grid-template-columns:1.1fr 1fr;align-items:start}
  .why{grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,72px)}
  .commitments{grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,72px)}
  .contact__grid{grid-template-columns:1fr 1.1fr;align-items:start}

}

/* ====== DESKTOP-LITE ≥ 860px — mission split ====== */
@media (min-width:860px){
  .split{grid-template-columns:minmax(260px,340px) 1fr;gap:clamp(48px,6vw,88px)}
}

/* ====== DESKTOP ≥ 900px — values grid & service rows ====== */
@media (min-width:900px){
  .values{grid-template-columns:1fr 1fr;column-gap:clamp(48px,7vw,88px)}
  .value:nth-child(even){margin-top:44px} /* staggered second column — editorial offset */
  .srow{grid-template-columns:minmax(150px,230px) 1fr;gap:clamp(28px,5vw,72px)}
  .srow--flip{grid-template-columns:1fr minmax(150px,230px)}
  .srow--flip .srow__num{order:2;text-align:right} /* flipped rows only flip on desktop */
}

/* ====== LARGE DESKTOP ≥ 1150px — full nav appears (below this, burger menu) ====== */
@media (min-width:1150px){
  .nav__links{display:block}
  .nav__burger{display:none}
}

/* ====== WIDE ≥ 1280px — header CTA appears ====== */
@media (min-width:1280px){
  .btn--nav{display:inline-flex}
}

/* ====== REDUCED MOTION — everything settles instantly ====== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
  .hero__line-inner{transform:none;animation:none}
  html.js [data-reveal]{opacity:1!important;transform:none!important}
  .ticker__track{animation:none}
}

/* ====== ULTRAWIDE ≥ 1600px — caps line lengths & composition ====== */
@media (min-width:1600px){
  .wrap{width:min(1280px,88%)}
  .hero__title{font-size:8.2rem}
}