/* NAAL — home page. Nav rules removed: consolidated into base.css. */


/* ---------- 2. Opening animation (preloader) ---------- */
#naal-pre{position:fixed;inset:0;z-index:99999;background:#161616;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity 600ms ease,visibility 600ms}
#naal-pre.done{opacity:0;visibility:hidden}
#naal-pre .word{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(40px,9vw,96px);letter-spacing:0.06em;color:#F7F5F2;opacity:0;animation:naalPreIn 800ms cubic-bezier(0.2,0,0,1) 120ms forwards}
#naal-pre .rule{width:0;height:1px;background:#B99146;animation:naalPreRule 900ms cubic-bezier(0.2,0,0,1) 500ms forwards}
@keyframes naalPreIn{to{opacity:1}}
@keyframes naalPreRule{to{width:min(280px,60vw)}}

/* ---------- 3. Hero media block ---------- */
/* R8: reference grid uses align-items:normal; align-items:start was added by
   the migration. Both render identically because each cell sets its own
   aspect-ratio, but normal is the reference value. */
#naal-hero-media{position:relative;z-index:1;display:grid;grid-template-columns:1.7fr 1fr;gap:22px;margin-top:72px}
#naal-hero-media .zoomer{position:relative;border-radius:24px;overflow:hidden;background:#0E3B36}
#naal-hero-media .zoomer.arch{background:#F7F5F2}
#naal-hero-media .zoomer.left{aspect-ratio:16/10}
#naal-hero-media .zoomer.right{aspect-ratio:4/5}
#naal-hero-media .zoomer img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 900ms cubic-bezier(0.2,0,0,1)}
#naal-hero-media .zoomer:hover img{transform:scale(1.05)}
/* R9: reference badge is a STATIC inline-flex inside its own absolutely
   positioned wrapper. Making the badge itself absolute caused CSS to blockify
   it (inline-flex -> flex) and removed the wrapper's 25px line box. */
#naal-hero-media .badge-pin{position:absolute;left:22px;bottom:22px;z-index:2;pointer-events:none}
#naal-hero-media .badge{position:static;display:inline-flex;align-items:center;gap:5px;background:#161616;color:#fff;font-size:12px;font-weight:500;line-height:1;padding:5px 9px;border:1px solid transparent;border-radius:8px}
/* R10/R11: reference seal wrapper is a block containing an INLINE svg, so its
   line box adds a 7.2px descender (128x135.2). display:flex removed that box. */
#naal-hero-media .naal-seal-wrap{position:absolute;left:calc(63.5% - 64px);top:-40px;z-index:5;background:#F7F5F2;border-radius:50%;width:128px;display:block}
#naal-hero-media .naal-seal{display:inline}
.naal-seal{animation:naalSpin 26s linear infinite;color:#B99146}
@keyframes naalSpin{to{transform:rotate(360deg)}}
/* Reference at <=860px collapses .grid2 to one column and changes nothing
   else: the gap stays 22px and the seal keeps left:calc(63.5% - 64px).
   The previous rule invented gap:16px and right-aligned the seal. */
@media(max-width:860px){#naal-hero-media{grid-template-columns:1fr}}

/* ---------- 4. Portfolio card animation + hover ---------- */
.pf-item .zoomer{overflow:hidden}
/* Elementor's font-family control can only append one generic keyword, so it
   emits '"Playfair Display", sans-serif' where the design system specifies a
   full fallback stack. Re-point these at the tokens (ID beats Elementor's
   per-widget rule); the family choice itself stays editable in Elementor. */
/* The reference Wrap is a plain block. Elementor's .e-con-inner is a flex
   column, so the tile grid is a flex item and Chrome measures its intrinsic
   height with an indefinite width; the lazy-loaded images have no intrinsic
   size, so the .zoomer aspect-ratio boxes contribute zero and the section
   collapses to just the tiles' margins. Blocking the inner matches the
   reference and removes the cyclic measurement. */
/* Reference wraps the trust label in <Wrap>: 1240 of content plus 32px
   gutters (content-box, so 1304 overall), centred. The marquee beside it
   stays full-bleed, so this belongs on the label widget, not the section. */
#naal-trust .elementor-element-55c17bb{max-width:1304px;margin-left:auto;margin-right:auto}

/* Reference left column is maxWidth:660 on a flex item that shrinks to its
   content. Elementor only offers a fixed width, which made the header row wrap
   early at tablet widths and pushed the arrow link onto its own line. */
#naal-portfolio .elementor-element-b71c9a5{width:auto;max-width:660px}

#naal-portfolio > .e-con-inner{display:block}
#naal-portfolio h2{font-family:var(--naal-serif)}
/* Reference site.css collapses .grid2 to one column at <=860, which is not an
   Elementor breakpoint (its tablet range is 768-1024). Drive the collapse from
   the reference's own breakpoint instead of Elementor's. */
@media (max-width:860px){
  #naal-about .elementor-element-2d7adec{flex-direction:column}
  #naal-about .elementor-element-1b1979e,
  #naal-about .elementor-element-7a0c42b{width:100%}
}
#naal-about h2{font-family:var(--naal-serif)}

/* Reference Process band sets color:#fff on the section so descendants inherit
   white; Elementor left it inheriting the dark body colour. */
#naal-process{color:#fff}
/* Reference Process header is a grid of `1fr auto`: the heading column shrinks
   to leave the 280px intro beside it, capped at 660. Elementor only offers a
   fixed width, which forced an early wrap at tablet widths. Below 860 the
   reference stacks them, which is not an Elementor breakpoint. */
#naal-process .elementor-element-d3b4c14{width:auto;max-width:660px;flex:1 1 0;min-width:0}
#naal-process .elementor-element-9d2134a{flex:0 0 auto}
@media (max-width:860px){
  /* align-items:flex-end is a cross-axis rule: once the row becomes a column it
     would push both children to the right, so reset it with the direction. */
  #naal-process .elementor-element-be58d2f{flex-direction:column;align-items:stretch}
  #naal-process .elementor-element-d3b4c14{flex:none;width:100%}
}

/* Reference CTA heading: maxWidth 760, centred, margin 18 auto 20. Elementor's
   heading widget has no max-width control, and its margin control targets the
   widget wrapper rather than the h2. */
#naal-cta h2{max-width:760px;margin:18px auto 20px}
/* Reference CTA button keeps its intrinsic pill width and overflows the card at
   narrow widths rather than wrapping onto two lines. */
#naal-cta .elementor-button{white-space:nowrap}
#naal-cta h2,#naal-testimonials h2{font-family:var(--naal-serif)}
#naal-cta .naal-eyebrow .elementor-heading-title,#naal-testimonials .naal-eyebrow .elementor-heading-title{font-family:var(--naal-mono)}
#naal-process h2,#naal-process h3{font-family:var(--naal-serif)}
#naal-process .naal-eyebrow .elementor-heading-title{font-family:var(--naal-mono)}
/* Reference site.css: .grid3 collapses to a single column at <=860. The rule
   needs !important because the track list is an inline style, as in the
   reference. */
@media (max-width:860px){#naal-about .elementor-element-ffcab58 > div{grid-template-columns:1fr!important}}
#naal-about .naal-eyebrow .elementor-heading-title{font-family:var(--naal-mono)}
/* Reference site.css: .pf collapses to a single column at <=860. */
@media (max-width:860px){#naal-portfolio .pf{column-count:1!important}}
#naal-portfolio .naal-eyebrow .elementor-heading-title{font-family:var(--naal-mono)}
.pf-item .zoomer img{transition:transform 900ms cubic-bezier(0.2,0,0,1)}
.pf-item .zoomer:hover img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){#naal-hero-media .zoomer img,.pf-item .zoomer img{transition:none}.naal-seal{animation:none}#naal-pre .word,#naal-pre .rule{animation:none}#naal-pre .word{opacity:1}}

/* ---------- Who We Are image hover/zoom (matches reference Media .zoomer) ---------- */
/* Reference <Media ratio="4/5" radius={24} bg=carbon>: the wrapper carries the
   ratio and the image covers it. */
/* This Elementor build renders no .elementor-widget-container, so the ratio,
   radius and placeholder background go on the widget element itself. */
.elementor-element-a377f58{aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:#161616}
.elementor-element-a377f58 img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 900ms cubic-bezier(0.2,0,0,1)}
.elementor-element-a377f58:hover img{transform:scale(1.05)}


/* ============================================================
   HERO — reference-fidelity corrections (measured at 1536px against
   index.html / site/common.jsx). Scoped to #naal-hero only.

   The reference hero is a plain block flow: each element carries its own
   margin. The Elementor container adds a 20px flex gap and the watermark
   widget occupies a flow slot, which together pushed every hero element
   down by 36-47px. The gap is zeroed and the reference margins restored,
   so each widget's spacing stays visible and editable in Elementor.
   ============================================================ */

/* Watermark box. base.css already pins .nm-wm to position:static so the
   watermark is positioned against #naal-hero; with the flex gap zeroed the
   zero-height widget no longer displaces the column.

   The reference box is the text block itself (content top -> action row
   bottom) with the glyph centred inside it, which puts the glyph at y 312.6
   for a text block of 566px. Measured at 1536px; re-derived per breakpoint. */
/* Fallback only; base.js sizes the box to the hero text block at runtime,
   which is what the reference gets structurally from inset:0 on that block. */
#naal-hero .naal-heromark{top:80px;height:567px}

/* Reference rhythm, measured: eyebrow 212.8 -> h1 259.6 -> lede 603.8
   -> actions 726.2 -> media 847.8, from a content top of 208.8. */
#naal-hero > .e-con-inner{gap:0}

/* Eyebrow: reference line-height is the inherited 1.55 (18.6px at 12px),
   which sets the 24.8px line box the h1 margin is measured from. */
#naal-hero .elementor-heading-title:not(h1){line-height:1.55}

/* Reference h1: margin 26px auto 0, max-width 1080. */
#naal-hero .elementor-widget-heading{margin-top:0}
#naal-hero h1{margin-top:26px;max-width:1080px;margin-left:auto;margin-right:auto}

/* Reference: the italic word is gold-600. Only weight 400 italic exists in
   the reference webfont, so 500 italic renders 14px wider than the original. */
/* font-weight is NOT forced here any more: fonts.css declares italic at 400
   only (as the reference does), so the inherited 500 renders the 400 face. */
#naal-hero h1 em{color:#9C7734}

/* Reference lede: margin 26px auto 0, max-width 640. The paragraph carries
   its own inline margin (widget content, editable in Elementor), so the
   26px is applied to the widget wrapper instead of overriding the content. */
/* The 26px now lives on the paragraph itself (widget content), matching the
   reference, so the wrapper carries no margin. */

/* Reference action row: margin-top 34, gap 14. */
#naal-hero > .e-con-inner > .e-con{gap:14px}

/* Reference buttons. Primary = Button size="lg"; secondary = the
   "secondary" variant, which is underlined text, not a bordered pill. */
#naal-hero .elementor-button[href*="/contact"]{
  padding:15px 28px;font-size:16px;line-height:1;
  border:1px solid transparent;
}
#naal-hero .elementor-button[href*="/expertise"]{
  padding:15px 2px;font-size:16px;line-height:1;
  background-color:transparent;border:0;border-radius:0;color:#161616;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
}
#naal-hero .elementor-button[href*="/expertise"]:hover{
  color:#B99146;text-decoration-thickness:2px;background-color:transparent;
}

/* Reference primary CTA carries an 18px arrow after the label, with an 8px
   gap. The reference row is a plain flex row, so its default stretch makes
   the secondary button match the primary's height (49.6px). */
#naal-hero .elementor-button[href*="/contact"] .elementor-button-content-wrapper{
  gap:8px;align-items:center;
}
#naal-hero .elementor-button[href*="/contact"] .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;
}
#naal-hero > .e-con-inner > .e-con{align-items:stretch}
#naal-hero .elementor-widget-button{display:flex}
#naal-hero .elementor-widget-button .elementor-widget-container{display:flex;width:100%}
#naal-hero .elementor-button{display:inline-flex;align-items:center;justify-content:center}


/* ---------- Process step nodes ----------
   Reference .proc-step:hover .proc-node: the node fills with gold-500, its
   border matches, the icon flips to carbon and the node lifts 3px, over
   320ms. The node itself is painted forest-500 in the widget markup so the
   connector line is masked inside the circle rather than crossing it. */
.proc-node{transition:background 320ms cubic-bezier(0.2,0,0,1),border-color 320ms cubic-bezier(0.2,0,0,1),color 320ms cubic-bezier(0.2,0,0,1),transform 320ms cubic-bezier(0.2,0,0,1)}
.proc-step:hover .proc-node{
  /* !important because the node's background, border and colour are inline
     styles on the widget markup, so an unflagged rule loses to them. The
     reference flags the same three declarations for the same reason. */
  background:#B99146!important;
  border-color:#B99146!important;
  color:#161616!important;
  transform:translateY(-3px);
}
@media (prefers-reduced-motion:reduce){
  .proc-node{transition:none}
  .proc-step:hover .proc-node{transform:none}
}


/* ---------- Hero: full-property parity with index.html ----------
   Remaining deltas found by comparing every computed property, bucketed,
   against the reference at 1536px. */

/* Reference Eyebrow is inline-flex with a 12px gap, giving an 18.6px box in a
   24.8px line box. As a plain inline it measured 17.6px, which also carried a
   0.8px offset down the whole hero column. */
#naal-hero .elementor-heading-title:not(h1){
  display:inline-flex;
  align-items:center;
  gap:12px;
}

/* Design-system font stacks (tokens/typography.css). Elementor's font control
   emits only `"Family", sans-serif`, so the reference fallbacks were absent. */
#naal-hero h1,#naal-hero h1 em{font-family:'Playfair Display',Georgia,'Times New Roman',serif}
#naal-hero .elementor-heading-title:not(h1){font-family:'Space Mono',ui-monospace,'SFMono-Regular',Menlo,monospace}

/* Reference .naal-btn and Badge both set white-space:nowrap, so the label and
   badge never wrap; without it they can break onto two lines when space is tight. */
#naal-hero .elementor-button,
#naal-hero-media .badge{white-space:nowrap}

/* Design-system body stack on the hero's Inter elements. Elementor emits only
   `"Inter", sans-serif` per widget, dropping the reference fallbacks. */
#naal-hero .elementor-widget-text-editor p,
#naal-hero .elementor-button,
#naal-hero .elementor-button span,
#naal-hero-media .badge{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}

/* Reference button is itself the flex row with an 8px gap between label and
   icon; reference Badge is inline-flex with a 5px gap. */
#naal-hero .elementor-button{gap:8px}


/* Reference inherits text-align:center into the watermark box and the eyebrow
   from the hero's centred text block. Both hug their content so this changes
   no geometry, but it keeps the computed values identical to the reference. */
#naal-hero .naal-heromark,
#naal-hero .elementor-heading-title:not(h1){text-align:center}

/* Reference action row is a plain flex row with nowrap at every width - it
   never becomes a column. Elementor switches containers to column at mobile,
   which stacked the two buttons and left the secondary at 46px instead of
   49.6px. NOTE: at 390px the reference row is wider than the viewport, so the
   reference itself clips both buttons; matching it reproduces that. */
@media(max-width:860px){
  #naal-hero > .e-con-inner > .e-con{
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:stretch;
  }
  /* The widget wrappers must not shrink, or the anchors overflow them and
     the two buttons overlap instead of overflowing the row symmetrically. */
  #naal-hero .elementor-widget-button{width:auto;flex:none}
}

/* Reference hero wrapper is position:relative + overflow:hidden. It clips the
   watermark glyph (456px wide at 390px) and, at narrow widths, the action row
   that is wider than the viewport - which is why the reference shows no
   horizontal page scroll despite both overflowing. */
#naal-hero{overflow:hidden}

/* ---------- Hero residual parity (R3, R4, R7) ---------- */

/* R3: reference Wrap is position:relative z-index:1, which is what lifts the
   text above the watermark. The build did it on the children instead. */
#naal-hero > .e-con-inner{position:relative;z-index:1}

/* R4: reference watermark box is inset:0 of the 1240 content block, not the
   full-bleed section. Expressed against #naal-hero's padding box so it tracks
   the container at every width (1240 at 1536, 326.4 at 390) without needing a
   transform, which base.js already uses for the parallax. */
#naal-hero .naal-heromark{
  width:min(1240px, 100% - 64px);
  left:calc((100% - min(1240px, 100% - 64px)) / 2);
  right:auto;
  z-index:0;
}

/* R7: reference action row uses margin-top:34, not padding-top:34, so its own
   box is 49.6 tall rather than 83.6. align-items:normal resolves to stretch
   for flex, which is how the reference equalises the two button heights. */
#naal-hero > .e-con-inner > .e-con{
  padding-top:0;
  margin-top:34px;
  align-items:normal;
}

/* R1: reference Wrap is content-box - max-width:1240 applies to the CONTENT,
   so the element is 1304 wide and carries the 32px padding itself. Elementor
   put that padding on the outer section and capped the inner at 1240 total.
   Same rendered content box (1240 @140.4), different element box. */
#naal-hero{padding-left:0;padding-right:0}
/* The reference Wrap is content-box: max-width:1240 on the CONTENT gives a
   1304 element box. Elementor writes an explicit used width onto .e-con-inner
   (411.112px at 390), so content-box there adds the padding on top of that and
   destroys the gutter below 1240. Border-box with max-width:1304 produces the
   IDENTICAL element and content boxes at every width (1304/1240 at 1536,
   390.4/326.4 at 390); only the declared max-width differs from the reference. */
#naal-hero > .e-con-inner{box-sizing:content-box;width:calc(100% - 64px);max-width:1240px;margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px}

/* R2/R5/R6: reference Wrap is a plain block, so each child is full-width and
   the h1/lede centre themselves with margin-inline:auto (resolving to 80 and
   300). Elementor's flex column with align-items:center shrink-wrapped every
   widget instead, which collapsed those auto margins to 0. Centring moves onto
   the text widgets, exactly as the reference's text block does it. */
#naal-hero > .e-con-inner{display:block}
#naal-hero > .e-con-inner > .elementor-widget-heading,
#naal-hero > .e-con-inner > .elementor-widget-text-editor,
#naal-hero > .e-con-inner > .e-con{text-align:center}

/* ---------- Final hero residuals ----------
   All three are Elementor container defaults that compute differently from the
   reference but cannot affect rendering. */

/* min-height:auto vs the reference's 0; flex-direction/align-items/gap are
   inert because this box is display:block, but they are reset so the computed
   values match the reference exactly. */
#naal-hero > .e-con-inner{
  min-height:0;
  flex-direction:row;
  align-items:normal;
  gap:normal;
}

/* Elementor sets position:relative on every container; the reference action
   row is static. Nothing here is positioned against it. */
#naal-hero > .e-con-inner > .e-con{position:static}

/* Elementor's .elementor-button-text sets text-decoration:inherit, so the
   label span computes underline where the reference span computes none. Both
   draw the same 1px/3px-offset underline from the anchor, so this only aligns
   the computed value. */
#naal-hero .elementor-button .elementor-button-text{text-decoration-line:none}


/* ============================================================
   TRUST band — measured against index.html Trust() at 1425px.
   Sections carry Elementor CSS IDs (Advanced > CSS ID) so child-theme rules
   out-specify Elementor's per-widget CSS, which is (0,4,0).
   ============================================================ */

/* Reference band is a plain block with 1px rules top and bottom. */
#naal-trust{
  border-top-width:1px;
  border-bottom-width:1px;
  display:block;
  position:static;
  max-width:none;
  flex-direction:row;
  gap:normal;
}

/* Reference label sits inside the 1240 Wrap: the WRAP is constrained and the
   <p> fills it, so the p keeps margin 13/0/26/0 and max-width:none. */
#naal-trust .elementor-widget-heading{
  max-width:1240px;
  margin-left:auto;
  margin-right:auto;
}
#naal-trust .elementor-heading-title{
  margin:13px 0 26px;
  max-width:none;
  font-family:'Space Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}


/* ============================================================
   SERVICES band — measured against index.html Services() at 1425px.
   ============================================================ */

#naal-services{
  color:#fff;
  display:block;
  position:static;
  max-width:none;
  flex-direction:row;
  gap:normal;
  /* Elementor sets flex-wrap:wrap on containers at mobile; the reference
     blocks keep the initial nowrap. */
  flex-wrap:nowrap;
  padding-left:0;
  padding-right:0;
}

/* Reference Wrap: 1304 element box, padding 128/32, content 1240. Elementor
   splits this across an outer container and its inner, so the outer carries
   the 1304 cap and the inner carries the padding. */
#naal-services > .e-con{
  max-width:1304px;
  margin-left:auto;
  margin-right:auto;
  padding:0;
  display:block;
}
#naal-services > .e-con > .e-con-inner{
  max-width:none;
  width:auto;
  margin:0;
  padding:128px 32px;
  display:block;
  gap:0;
}

/* Reference header: flex, space-between, align-items flex-end, gap 24,
   margin-bottom 56; left column capped at 720, right at 340. */
#naal-services .e-con > .e-con-inner > .e-con:first-child{
  gap:24px;
}
/* Reference left column is a flex item that shrinks to its content (662.9),
   capped at 720. Elementor widgets are width:100%, which pushed it to the cap. */
#naal-services .e-con > .e-con-inner > .e-con:first-child > .e-con{
  max-width:720px;
  width:fit-content;
  display:block;
  gap:normal;
  flex-direction:row;
}
#naal-services .e-con > .e-con-inner > .e-con:first-child > .elementor-widget{
  max-width:340px;
}

/* Reference Eyebrow: inline-flex in a 24.8 line box, gap 12, no margin. */
#naal-services .elementor-heading-title:not(h1):not(h2):not(h3){
  display:inline-flex;
  align-items:center;
  gap:12px;
  line-height:1.55;
  margin:0;
  font-family:var(--naal-mono);
}

#naal-services h2{
  margin:18px 0 0;
  font-family:var(--naal-serif);
}
#naal-services p{
  font-family:var(--naal-sans);
}
/* Reference caps the right COLUMN at 340; its <p> has max-width:none. */
#naal-services .e-con > .e-con-inner > .e-con:first-child p{
  margin:0;
  max-width:none;
}

/* Reference card grid: 2 columns, 22px gap, 609px tracks. */
#naal-services .e-con:has(> a.e-con){
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}

/* Reference card is <a class="svc">: block, colour #fff, hover lift.
   The link comes from the container's native HTML Tag + Link controls. */
/* Reference card is a static block; Elementor makes every container relative. */
#naal-services a.e-con{
  position:static;
  color:#fff;
  display:block;
  min-height:0;
  width:auto;
  gap:normal;
  flex-direction:row;
  flex-wrap:nowrap;
  transition:background 320ms ease,transform 320ms cubic-bezier(0.2,0,0,1);
}
#naal-services a.e-con:hover{
  background-color:rgba(255,255,255,0.07);
  transform:translateY(-4px);
}
#naal-services a.e-con h3{
  font-family:var(--naal-serif);
  line-height:1.55;
  letter-spacing:-0.01em;
  margin:0 0 12px;
  color:#fff;
}
#naal-services a.e-con p{
  font-size:16px;
  line-height:1.5;
  color:rgba(255,255,255,0.72);
  margin:0 0 22px;
}

/* Reference collapses .grid2 to a single column at <=860px (site.css). */
@media(max-width:860px){
  #naal-services .e-con:has(> a.e-con){grid-template-columns:1fr}
}

/* Portfolio tile captions - DELIBERATE DEVIATION from the reference, approved by client 2026-08-24.
   Reference uses a solid ivory chip + frosted dark chip; on real photography that reads as stickers.
   Replaced with a bottom scrim + typography so the image leads. Paint only: the caption row is
   position:absolute, so tiles, grid, page height and everything below are unchanged (verified by toggle test).
   !important is required because the reference markup carries these values as inline styles. */
#naal-portfolio .pf-item .zoomer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(to top,rgba(15,15,15,0.72),rgba(15,15,15,0));pointer-events:none}
#naal-portfolio .pf-item .zoomer > div{z-index:2}
#naal-portfolio .pf-item .zoomer > div > span:first-child{background:transparent!important;color:#fff!important;padding:0!important;border-radius:0!important;font-size:15px!important;font-weight:500!important}
#naal-portfolio .pf-item .zoomer > div > span:last-child{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important;color:rgba(255,255,255,0.72)!important}