/* NAAL — site-wide base
   Consolidated from legacy nav.css + hero-watermark.css.
   Watermark rules are resolved: the legacy file redeclared .naal-heromark three
   times, each block correcting the previous one. Only the final computed values
   are kept here. */

/* ---------- Navigation ----------
   Rendered by the Xpro Horizontal Menu widget from the WordPress menu
   "NAAL Main Menu", so items are editable in wp-admin. Underline + active
   state follow the reference .navlink spec. Font family, size, weight and
   colour are set on the widget itself so they stay editable in Elementor; only
   the underline lives here. */
.xpro-elementor-horizontal-navbar-nav{gap:28px;align-items:center}
.xpro-elementor-nav-link{position:relative;text-decoration:none!important}
.xpro-elementor-nav-link::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:#B99146;transition:width 260ms cubic-bezier(0.2,0,0,1)}
.xpro-elementor-nav-link:hover::after,
.menu-item.current-menu-item > .xpro-elementor-nav-link::after,
.menu-item.active > .xpro-elementor-nav-link::after{width:100%}
/* One mobile navigation only: Xpro's built-in toggler is suppressed in
   favour of the reference-matched drawer driven from base.js. */
.xpro-elementor-horizontal-menu-toggler,
.xpro-elementor-horizontal-menu-close{display:none!important}

/* ---------- Hero watermark ---------- */
#naal-hero,#about-hero{position:relative}
#naal-hero > .elementor-element:not(.nm-wm),
#about-hero > .elementor-element:not(.nm-wm){position:relative;z-index:2}
#naal-hero .nm-wm,#about-hero .nm-wm{position:static!important}
#naal-hero > .e-con-inner,#about-hero > .e-con-inner{position:static}

.naal-heromark{position:absolute;top:0;left:0;right:0;bottom:auto;width:100%;height:clamp(580px,54vw,800px);display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1;user-select:none;overflow:visible;will-change:transform}
.naal-heromark span{font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-weight:500;line-height:.78;letter-spacing:.03em;font-size:clamp(170px,30vw,480px);white-space:nowrap;background:linear-gradient(100deg,rgba(22,22,22,.10) 0%,rgba(22,22,22,.10) 43%,rgba(185,145,70,.46) 50%,rgba(22,22,22,.10) 57%,rgba(22,22,22,.10) 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:naalsheen 9s linear infinite}
/* Subpage heroes: the reference watermark box IS the hero Wrap, with the glyph
   centred in it, so it tracks the hero at every width. (#about-hero is the
   shared hook the subpage hero sections carry.) */
/* The watermark's containing block was the HTML widget wrapper, which is
   position:relative and zero-height (it holds nothing but the absolutely
   positioned mark), so height:100% resolved to 0 and the flex-centred word sat
   161px too high. The reference .herofound is inset:0 of the hero Wrap, i.e.
   the word is centred on the whole hero band. Make the wrapper fill the hero
   so the mark inherits the right box. */
/* Applies to every hero that hosts a watermark, including the single-article
   template (.naal-article__hero), which is not #about-hero. Home is unaffected:
   #naal-hero .nm-wm{position:static!important} still wins there, which is what
   lets base.js size that mark against the hero itself. */
.elementor-widget-html:has(> .naal-heromark){position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}
#about-hero .naal-heromark,
.naal-article__hero .naal-heromark{top:0;height:100%;text-align:center}
@keyframes naalsheen{to{background-position:-140% 0}}

/* No mobile watermark override exists in the reference: the glyph keeps
   clamp(170px,30vw,480px) at every width (170px is the floor below ~567px),
   and the box is sized to the hero's text block by base.js. The overrides
   removed here rendered the glyph at 132.7px instead of 170px at 390px. */

@media (prefers-reduced-motion:reduce){
  .naal-heromark span{animation:none}
}

/* ---------- Client marquee ----------
   Restored from the reference (.marquee / .marquee__track / @keyframes scrollX).
   The site emitted .naal-marquee markup with NO stylesheet anywhere, leaving the
   track unclipped and unanimated — the cause of ~2,000px of horizontal overflow. */
.naal-marquee{overflow:hidden;white-space:nowrap;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.naal-marquee__track{display:inline-flex;gap:64px;padding-right:64px;animation:naalScrollX 34s linear infinite}
@keyframes naalScrollX{to{transform:translateX(-50%)}}

/* ---------- Focus visibility ----------
   Reference spec. The site previously had zero :focus rules. */
:focus-visible{outline:2px solid #B99146;outline-offset:2px;border-radius:2px}

@media (prefers-reduced-motion:reduce){
  .naal-marquee__track{animation:none}
}

/* ---------- Mobile navigation ----------
   The site had no mobile menu of any kind. Built to the reference spec:
   at <=860px the desktop nav and header CTA are hidden and a burger appears.
   Markup is injected by base.js from the EXISTING nav links, so menu items stay
   editable in the Elementor header template and are never duplicated here.
   Geometry now follows the reference exactly: an in-header panel expanding to
   80vh, NOT the full-screen dark overlay this file previously carried. */
.naal-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;border:1px solid #D9D9D6;border-radius:12px;cursor:pointer;color:#161616}
.naal-burger svg{display:block;width:22px;height:22px}

/* Reference drawer: an in-header panel that expands from max-height 0 to 80vh
   over 420ms. It is NOT a full-screen dark overlay - it shares the header's
   ivory surface, and the header takes its scrolled background while open. */
.naal-drawer{max-height:0;overflow:hidden;transition:max-height 420ms cubic-bezier(0.2,0,0,1)}
.naal-drawer.open{max-height:80vh}
.naal-drawer__wrap{width:100%;max-width:1240px;margin-inline:auto;padding:0 32px}
.naal-drawer.open .naal-drawer__wrap{padding:12px 32px 28px}
.naal-drawer__nav{display:flex;flex-direction:column}
.naal-drawer__nav a{display:block;font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-weight:500;font-size:26px;padding:14px 0;border-bottom:1px solid #EFEDE9;color:#161616;text-decoration:none}
.naal-drawer__nav a[aria-current="page"]{color:#9C7734}
.naal-drawer__cta{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:8px;margin-top:20px;padding:12px 22px;font-family:'Inter',system-ui,sans-serif;font-size:15px;font-weight:500;line-height:1;border:1px solid transparent;border-radius:999px;background:#161616;color:#fff;text-decoration:none;box-sizing:border-box}
.naal-drawer__cta:hover{background:#B99146;color:#161616}
.naal-drawer__cta svg{width:16px;height:16px;flex:none}
body.naal-drawer-open{overflow:hidden}

@media (max-width:860px){
  .elementor-widget-xpro-horizontal-menu{display:none!important}
  .naal-navcta{display:none!important}
  .naal-burger{display:flex}
}

@media (prefers-reduced-motion:reduce){
  .naal-drawer{transition:none}
}

/* ---------- Contact page announcement ----------
   The reference sets the top bar text per page (common.jsx default, overridden
   on Contact). Contact keeps its own bar as page content, so the global header's
   default bar is suppressed there to avoid showing two. */
.naal-topbar--contact{display:none}
body.page-id-51 .naal-topbar--default{display:none}
body.page-id-51 .naal-topbar--contact{display:flex}

/* ---------- Column blocks ----------
   Shared by the home process/testimonial rows and the footer. The reference
   collapses all three below 1024px (process 4>2, testimonials 3>1, footer 4>2),
   so the column counts live here rather than inline in each widget. */
.naal-cols{display:grid}
.naal-cols--4{grid-template-columns:repeat(4,1fr);gap:28px}
.naal-cols--3{grid-template-columns:repeat(3,1fr);gap:22px}
.naal-cols--foot{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
/* Reference footer link stacks are a flex column with gap:11px, so there is
   no trailing space under the last link. The markup carried margin-bottom on
   every link instead; the adjacent-sibling rule reproduces the gap exactly. */
.naal-cols--foot > div > a + a{margin-top:11px}
@media (max-width:1023px){
  .naal-cols--4,.naal-cols--foot{grid-template-columns:repeat(2,1fr)}
  .naal-cols--3{grid-template-columns:1fr}
}

/* ---------- Global typography defaults ----------
   Elementor's global kit ships Roboto and Xpro's widget CSS reads those same
   variables, so anything without an explicit family (nav links, text-editor
   copy) rendered in Roboto. The reference uses Inter for body and Playfair
   Display for display type; both are already self-hosted, so the kit variables
   are redirected here rather than in Elementor Site Settings, which would
   enqueue Google Fonts. The attribute selector avoids hard-coding the kit id. */
body[class*="elementor-kit-"]{font-family:var(--naal-sans);
  --e-global-typography-primary-font-family:'Inter';
  --e-global-typography-secondary-font-family:'Playfair Display';
  --e-global-typography-text-font-family:'Inter';
  --e-global-typography-accent-font-family:'Inter';
  /* Full design-system stack (tokens/typography.css --font-body). Elementor's
     font control emits only `"Family", sans-serif`, dropping the fallbacks. */
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  /* Reference body line-height is the design system's --t-body-lh: 1.55.
     Elementor's kit ships 1.5, which shortened every inherited line box by
     ~1.2px at 24px and ~0.8px at 16px throughout the page. */
  line-height:1.55
}


/* ============================================================
   REFERENCE-FIDELITY CORRECTIONS - global chrome
   Every value below is read from the reference implementation
   (site/common.jsx and the design-system AnnouncementBar/Button CSS).
   ============================================================ */

/* ---------- Announcement bar ----------
   Reference .naal-announce: background #000 (--naal-black), min-height 36px in
   a content box plus 8px/48px padding = 52px, gap 12px, colour #fff, link
   text-underline-offset 2px. */
.naal-topbar--default,
.naal-topbar--contact{
  background-color:#000;
  min-height:52px;
  padding:8px 48px;
  gap:12px;
}
.naal-topbar--default .elementor-widget-html > div,
.naal-topbar--contact .elementor-widget-html > div{color:#fff}
.naal-topbar--default a,
.naal-topbar--contact a{text-underline-offset:2px}
.naal-topbar__close{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:rgba(255,255,255,.7);cursor:pointer;
  display:flex;padding:4px;line-height:0;
}
.naal-topbar__close:hover{color:#fff}
.naal-topbar__close svg{width:16px;height:16px}

/* ---------- Sticky header ----------
   The reference header is sticky at top:0 with the announcement bar above it in
   normal flow. Here both live inside one Xpro header element, so the element
   sticks at minus the bar's height: the bar scrolls away and the 76px row pins
   at 0, which is the reference result. base.js measures --naal-topbar-h because
   the bar's text wraps at narrow widths. */
.xpro-theme-builder-header{
  position:sticky;
  top:calc(-1 * var(--naal-topbar-h,52px));
  z-index:200;
}
/* Logged-in admins only: keep the pinned row clear of the WP admin bar.
   Public visitors have no admin bar, so the reference result is unchanged. */
body.admin-bar .xpro-theme-builder-header{top:calc(32px - var(--naal-topbar-h,52px))}
@media screen and (max-width:782px){
  body.admin-bar .xpro-theme-builder-header{top:calc(46px - var(--naal-topbar-h,52px))}
}
.naal-header__row{
  background-color:rgba(247,245,242,0);
  border-bottom:1px solid transparent;
  transition:background-color 320ms ease,border-color 320ms ease;
}
body.naal-scrolled .naal-header__row{
  background-color:rgba(247,245,242,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom-color:#EFEDE9;
}

/* ---------- Header row geometry ----------
   Reference Wrap: max-width 1240, padding-inline 32, height 76,
   grid 1fr auto 1fr, gap 24 - logo left, nav centred, CTA right. */
.naal-header__row > .e-con-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  min-height:76px;
  padding-top:0;
  padding-bottom:0;
}
.naal-header__row > .e-con-inner > .elementor-widget-xpro-horizontal-menu{justify-self:center}
.naal-header__row > .e-con-inner > .naal-navcta{justify-self:end}

/* ---------- Navigation links ----------
   Reference: plain inline links, no padding, gap 34, 15px/500, underline 4px
   under the text and only as wide as the text. Xpro's own padding and margin
   would push the underline 24px below the text and widen it by 20px. */
.xpro-elementor-horizontal-navbar-nav{gap:34px;justify-content:center}
.xpro-elementor-horizontal-navbar-nav > li{margin:0}
.xpro-elementor-horizontal-navbar-nav > li > .xpro-elementor-nav-link{
  padding:0;
  margin:0;
  line-height:1.55;
  display:inline-block;
}

/* ---------- Header CTA ----------
   Reference Button size="sm": padding 8px 16px, 14px/1, 1px transparent
   border, gold hover. */
.naal-navcta a{
  padding:8px 16px;
  font-size:14px;
  line-height:1;
  border:1px solid transparent;
  transition:background-color 140ms cubic-bezier(.2,0,0,1),color 140ms cubic-bezier(.2,0,0,1);
}
.naal-navcta a:hover{background-color:#B99146;color:#161616}
.naal-navcta a svg{width:16px;height:16px;flex:none}

/* ---------- Scroll progress bar ----------
   Reference #progress: fixed, 2px, gold, z-index 300, width tracks scroll. */
#naal-progress{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:#B99146;z-index:300;pointer-events:none;
}

/* ---------- Reveal on scroll ----------
   Reference .reveal/.clip: 760ms cubic-bezier(0.2,0,0,1), translateY(16px). */
/* Fail-safe, exactly as the reference does it: the resting state is VISIBLE and
   the rise is layered on only when JS is present (html.js). Defaulting to
   opacity:0 and relying on JS to add .in leaves whole sections blank whenever
   the script is cached stale, deferred or blocked. */
.naal-reveal{opacity:1;transform:none}
/* The end state is declared, not left to the animation: if animations are
   disabled or throttled the block must still be visible. */
.naal-reveal.in{opacity:1;transform:none}
html.js .naal-reveal{animation:naalRise 760ms cubic-bezier(0.2,0,0,1) both}
@keyframes naalRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .naal-reveal,.naal-reveal.in{opacity:1;transform:none;animation:none}
}

/* ---------- Mobile header ---------- */
@media (max-width:860px){
  .naal-header__row > .e-con-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
}


/* ---------- Reference arrow glyph ----------
   The reference draws its arrows as inline Lucide SVG
   (path "M5 12h14" + "m12 5 7 7-7 7", stroke 1.75, round caps). Elementor
   Free's icon control offers only Font Awesome, which is both the wrong glyph
   and an extra font dependency, so the arrow is drawn as a CSS mask instead:
   no extra request, no plugin, and the button label stays editable in
   Elementor. Reuse it by adding "naal-arrow" in Advanced > CSS Classes. */
:root{
  --naal-arrow-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}
.naal-arrow::after{
  content:"";
  display:inline-block;
  flex:none;
  width:var(--naal-arrow-size,16px);
  height:var(--naal-arrow-size,16px);
  background-color:currentColor;
  -webkit-mask:var(--naal-arrow-img) no-repeat center/contain;
  mask:var(--naal-arrow-img) no-repeat center/contain;
}


/* ---------- CTA band button ----------
   The carbon CTA band is the same reference component on Home, About,
   Expertise, Work and Insights and shares its Elementor element ids, so this
   lives in base.css. Reference Button size="lg" onDark: gold fill, carbon
   label, 1px transparent border, 18px arrow after the label with an 8px gap. */
.elementor-element-a997cb5 .elementor-button{border:1px solid transparent}
.elementor-element-a997cb5 .elementor-button-content-wrapper{gap:8px;align-items:center}
.elementor-element-a997cb5 .elementor-button-content-wrapper::after{
  content:"";display:inline-block;flex:none;width:18px;height:18px;
  background-color:currentColor;
  -webkit-mask:var(--naal-arrow-img) no-repeat center/contain;
  mask:var(--naal-arrow-img) no-repeat center/contain;
}


/* ---------- Font stacks ----------
   Elementor appends only "sans-serif" to a self-hosted family because it has
   no category for it, and exposes no control for a fallback list. These tokens
   carry the design-system stacks from tokens/typography.css. */
:root{
  --naal-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --naal-sans:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --naal-mono:'Space Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}

/* ---------- Arrow link (reference site.css .arrow-link) ----------
   Inline text link with a trailing 16px arrow that slides on hover. Shared by
   several sections, so it lives here rather than in a per-page sheet. */
/* Reference site.css global image reset. */
img{display:block;max-width:100%}

/* ---------- Eyebrow (reference common.jsx <Eyebrow>) ----------
   Small uppercase mono label above a section heading. Elementor's heading
   widget has no display/gap control, so the box shape lives here; the family,
   size, spacing and colour stay editable on the widget. */
/* The class sits on the Elementor widget wrapper, so shape the title element:
   a flex parent would blockify an inline-flex wrapper and eat its line box. */
/* Elementor's kit typography emits '"Inter", Sans-serif' - a shorter fallback
   stack than the design system's. Re-point the widget default at the token;
   the family choice itself stays editable in Elementor. */
body[class*="elementor-kit-"] .elementor-widget-text-editor{font-family:var(--naal-sans)}

.naal-eyebrow .elementor-heading-title{display:inline-flex;align-items:center;gap:12px}

.naal-arrow-link{display:inline-flex;align-items:center;gap:8px;font-weight:500}
.naal-arrow-link svg{transition:transform 320ms cubic-bezier(0.2,0,0,1)}
.naal-arrow-link:hover svg{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){.naal-arrow-link svg{transition:none}}

/* Elementor's per-widget typography CSS is (0,4,0) and hardcodes the wrong
   fallback tail (", Sans-serif"). The CTA band carries the CSS ID #naal-cta on
   every page that uses it, and one id outranks any class chain, so the design
   system stacks are restored here for the whole shared component. */
#naal-cta .elementor-heading-title{font-family:var(--naal-serif)}
#naal-cta .elementor-button{font-family:var(--naal-sans)}
/* Reference .naal-btn is an inline-flex row that never wraps; Elementor's
   anchor is inline-block with white-space:normal, so a narrow viewport could
   break the label onto two lines where the reference keeps it on one. */
#naal-cta .elementor-button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
/* Reference .naal-btn--on-dark.naal-btn--primary:hover swaps gold-500 for
   gold-300. Elementor's button widget had no hover background set at all, so a
   real pointer hover left the CTA inert - the rule LOOKED fine because there
   simply was no rule. Transition matched to the design system's --motion-hover
   (140ms ease-standard) instead of Elementor's blanket 0.3s. */
#naal-cta .elementor-button{transition:background-color 140ms cubic-bezier(0.2,0,0,1),color 140ms cubic-bezier(0.2,0,0,1),border-color 140ms cubic-bezier(0.2,0,0,1),box-shadow 140ms cubic-bezier(0.2,0,0,1),transform 80ms cubic-bezier(0.2,0,0,1)}
#naal-cta .elementor-button:hover,
#naal-cta .elementor-button:focus-visible{background-color:#DBC28C;color:#161616}
#naal-cta .elementor-button:active{transform:translateY(0.5px)}

/* ---------- Mobile drawer surface (reference parity) ----------
   Reference common.jsx paints the HEADER itself when scrolled OR when the drawer is
   open: background rgba(247,245,242,0.92), backdrop blur(14px), 1px border-subtle at
   the bottom. This file previously applied that surface to the 76px .naal-header__row
   only, and keyed it to body.naal-scrolled only - so the expanded drawer had no
   background and page content read through the open menu. Paint only: no position,
   size, spacing, z-index or layout property is touched. Added 2026-08-24. */
.naal-drawer{background-color:rgba(247,245,242,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.naal-drawer-open .naal-header__row{background-color:rgba(247,245,242,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:transparent}
.naal-drawer.open{border-bottom:1px solid #EFEDE9}
/* Elementor's global kit rule .elementor-kit-5 a{color:#0E3B36} is (0,2,0) and was
   beating .naal-drawer__cta{color:#fff} (0,1,0), so the drawer CTA label and its
   arrow (stroke:currentColor) rendered forest green instead of the reference white.
   One drawer-scoped rule at (0,2,1) restores reference parity. Added 2026-08-24. */
.naal-drawer a.naal-drawer__cta{color:#fff}