/*
Theme Name: Ali Raza Murad
Theme URI: https://alirazamurad.com
Author: Ali Raza Murad
Description: Custom theme for Ali Raza Murad — graphic designer & creative studio. Shared header/footer across all pages; Cabinet Grotesk, GSAP + Lenis motion, light/dark themes.
Version: 4.3
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aliraza
*/


/* ============================================================
   1. GLOBAL DESIGN TOKENS  — derived from the approved comps
   In production these are printed into :root by theme options,
   so every value below is admin-editable without touching CSS.
   ============================================================ */
:root{
  /* — Brand core — */
  --c-black:      #0A0A0A;
  --c-white:      #FFFFFF;
  --c-orange:     #FF7A18;
  --c-orange-dk:  #E86A0C;
  --c-orange-sf:  #FFF1E5;
  --c-yellow:     #FFC83D;
  --c-green:      #2FC26B;
  --c-green-dk:   #25A85A;

  /* — Semantic: light theme (default) — */
  --c-bg:            #FFFFFF;
  --c-bg-2:          #F7F7F7;
  --c-surface:       #F1F1F1;
  --c-surface-2:     #E9E9E9;
  --c-ink:           #0A0A0A;
  --c-ink-2:         #55555A;
  --c-ink-3:         #8A8A90;
  --c-border:        #E4E4E6;
  --c-border-strong: #CFCFD2;
  --c-accent:        var(--c-orange);
  --c-accent-soft:   var(--c-orange-sf);
  --c-accent-ink:    #FFFFFF;
  --c-invert-bg:     #000000;
  --c-invert-ink:    #FFFFFF;
  --c-invert-ink-2:  #B4B4B8;
  --c-invert-border: #232326;
  --c-success:       var(--c-green);
  --c-warning:       #C98A12;
  --c-error:         #D6453C;

  /* — Typography — */
  --f-display: 'Cabinet Grotesk', system-ui, sans-serif;
  --f-body:    'Cabinet Grotesk', system-ui, sans-serif;

  --t-display-xl: clamp(1.95rem, 5.6vw, 4.5rem);
  --t-display-l:  clamp(2.1rem, 4.6vw, 3.9rem);
  --t-h1:         clamp(1.9rem, 3.8vw, 3.1rem);
  --t-h2:         clamp(1.7rem, 3vw, 2.6rem);
  --t-h3:         clamp(1.2rem, 1.9vw, 1.5rem);
  --t-h4:         1.0625rem;
  --t-body-l:     1.0625rem;
  --t-body:       0.9375rem;
  --t-caption:    0.8125rem;
  --t-label:      0.6875rem;

  --w-black: 800;
  --w-bold:  700;
  --w-semi:  600;
  --w-med:   500;

  --lh-tight: 1.02;
  --lh-snug:  1.14;
  --lh-body:  1.62;
  --ls-tight: -0.035em;
  --ls-snug:  -0.02em;
  --ls-label: 0.1em;

  /* — Spacing (4px base) — */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;  --s-7:3rem;   --s-8:4rem;
  --s-9:6rem;   --s-10:8rem; --s-11:10rem;

  --section-y: clamp(4rem, 8vw, 8rem);
  --container: 1280px;
  --gutter:    clamp(1.15rem, 4vw, 2.75rem);
  --grid-gap:  clamp(.85rem, 1.6vw, 1.35rem);

  /* — Visual — */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-2xl:36px; --r-full:999px;
  --sh-1: 0 1px 2px rgba(10,10,10,.05);
  --sh-2: 0 6px 18px -6px rgba(10,10,10,.12), 0 2px 5px rgba(10,10,10,.04);
  --sh-3: 0 20px 50px -14px rgba(10,10,10,.2), 0 6px 14px rgba(10,10,10,.06);
  --sh-nav: 0 8px 28px -10px rgba(10,10,10,.16), 0 2px 6px rgba(10,10,10,.05);
  --sh-accent: 0 8px 22px -8px rgba(255,122,24,.5);
  --sh-green: 0 8px 22px -8px rgba(47,194,107,.45);

  /* — Motion tokens — */
  --d-fast:.16s; --d-base:.32s; --d-slow:.65s; --d-reveal:.85s;
  --e-out:  cubic-bezier(.22,1,.36,1);
  --e-soft: cubic-bezier(.4,0,.2,1);
  --e-pop:  cubic-bezier(.34,1.4,.5,1);
  --reveal-y:24px; --stagger:.07s; --theme-fade:.26s;
}

[data-theme="dark"]{
  --c-bg:            #0A0A0A;
  --c-bg-2:          #101012;
  --c-surface:       #16161A;
  --c-surface-2:     #1E1E23;
  --c-ink:           #FFFFFF;
  --c-ink-2:         #B4B4B8;
  --c-ink-3:         #7E7E86;
  --c-border:        #232326;
  --c-border-strong: #33333A;
  --c-accent-soft:   #2A1908;
  --c-invert-bg:     #16161A;
  --c-invert-ink:    #FFFFFF;
  --c-invert-ink-2:  #B4B4B8;
  --c-invert-border: #2C2C32;
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 6px 18px -6px rgba(0,0,0,.6);
  --sh-3:0 20px 50px -14px rgba(0,0,0,.7);
  --sh-nav:0 8px 28px -10px rgba(0,0,0,.7);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

body{
  background:var(--c-bg);color:var(--c-ink);
  font-family:var(--f-body);font-size:var(--t-body);
  font-weight:var(--w-med);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  transition:background-color var(--theme-fade) var(--e-soft),
             color var(--theme-fade) var(--e-soft);
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
ul{list-style:none;padding:0}
:focus-visible{outline:2.5px solid var(--c-orange);outline-offset:3px;border-radius:var(--r-sm)}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:absolute;inset-block-start:-100%;inset-inline-start:var(--s-4);z-index:300;
  background:var(--c-ink);color:var(--c-bg);padding:var(--s-3) var(--s-5);border-radius:var(--r-full)}
.skip-link:focus{inset-block-start:var(--s-4)}

/* ============================================================
   3. TYPOGRAPHY SYSTEM
   ============================================================ */
.t-display-xl,.t-display-l,.t-h1,.t-h2{
  font-family:var(--f-display);font-weight:var(--w-black);
  letter-spacing:var(--ls-tight);line-height:var(--lh-snug);
}
.t-display-xl{font-size:var(--t-display-xl);line-height:var(--lh-tight)}
.t-display-l{font-size:var(--t-display-l);line-height:var(--lh-tight)}
.t-h1{font-size:var(--t-h1)}
.t-h2{font-size:var(--t-h2)}
.t-h3{font-size:var(--t-h3);font-weight:var(--w-bold);letter-spacing:var(--ls-snug);line-height:1.25}
.t-h4{font-size:var(--t-h4);font-weight:var(--w-bold);letter-spacing:var(--ls-snug);line-height:1.35}
.t-body-l{font-size:var(--t-body-l);color:var(--c-ink-2)}
.t-body{font-size:var(--t-body);color:var(--c-ink-2)}
.t-caption{font-size:var(--t-caption);color:var(--c-ink-3)}
.t-label{font-size:var(--t-label);font-weight:var(--w-bold);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--c-ink-3)}

/* Inline highlight device from the comps — orange primary, yellow secondary */
.hl{color:var(--c-orange);font-weight:var(--w-semi)}
.hl--y{color:var(--c-yellow);font-weight:var(--w-semi)}

/* ============================================================
   4. SELECTION-HANDLE DEVICE
   The design-tool motif from the hero. Reused as a brand
   accent — never decorative filler.
   ============================================================ */
.selected{position:relative;display:block;width:min(540px,100%);margin-inline:auto}
.selected__box{
  display:block;
  border:2px solid var(--c-orange);
  padding:clamp(.6rem,1.2vw,.85rem);
}
/* Corner handles — hollow squares centred on the box corners */
.selected i{
  position:absolute;width:11px;height:11px;
  background:var(--c-bg);border:1.5px solid var(--c-orange);
  z-index:2;
}
.selected i:nth-of-type(1){inset-block-start:-6px;inset-inline-start:-6px}
.selected i:nth-of-type(2){inset-block-start:-6px;inset-inline-end:-6px}
.selected i:nth-of-type(3){inset-block-end:-6px;inset-inline-start:-6px}
.selected i:nth-of-type(4){inset-block-end:-6px;inset-inline-end:-6px}
/* Detached cursor, sitting just outside the bottom-right handle */
.cursor-mark{
  position:absolute;
  inset-block-end:-39px;inset-inline-end:-38px;
  width:38px;height:38px;color:var(--c-orange);
}
[dir="rtl"] .cursor-mark{transform:scaleX(-1)}
@media (max-width:640px){
  /* Inset the box so the handles and cursor stay inside the viewport */
  .selected{width:calc(100% - 2.25rem)}
  .selected i{width:9px;height:9px;inset-inline-start:-5px}
  .selected i:nth-of-type(1),.selected i:nth-of-type(2){inset-block-start:-5px}
  .selected i:nth-of-type(3),.selected i:nth-of-type(4){inset-block-end:-5px}
  .selected i:nth-of-type(2),.selected i:nth-of-type(4){inset-inline-start:auto;inset-inline-end:-5px}
  .cursor-mark{width:30px;height:30px;inset-block-end:-26px;inset-inline-end:-14px}
}

/* ============================================================
   5. BUTTON SYSTEM
   ============================================================ */
.btn{
  --btn-py:.85rem;--btn-px:1.6rem;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding:var(--btn-py) var(--btn-px);
  font-size:var(--t-body);font-weight:var(--w-bold);letter-spacing:-.01em;
  border:1.5px solid transparent;border-radius:var(--r-full);
  cursor:pointer;position:relative;white-space:nowrap;
  transition:background-color var(--d-fast) var(--e-soft),
             color var(--d-fast) var(--e-soft),
             border-color var(--d-fast) var(--e-soft),
             transform var(--d-fast) var(--e-out),
             box-shadow var(--d-base) var(--e-out);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn--primary{background:var(--c-black);color:var(--c-white)}
.btn--primary:hover{background:var(--c-orange);box-shadow:var(--sh-accent)}
[data-theme="dark"] .btn--primary{background:var(--c-white);color:var(--c-black)}
[data-theme="dark"] .btn--primary:hover{background:var(--c-orange);color:var(--c-white)}
.btn--accent{background:var(--c-orange);color:var(--c-white)}
.btn--accent:hover{background:var(--c-orange-dk);box-shadow:var(--sh-accent)}
.btn--green{background:var(--c-green);color:var(--c-white)}
.btn--green:hover{background:var(--c-green-dk);box-shadow:var(--sh-green)}
.btn--secondary{background:var(--c-bg);color:var(--c-ink);border-color:var(--c-border-strong)}
.btn--secondary:hover{border-color:var(--c-ink)}
.btn--ghost{background:transparent;border-color:var(--c-border-strong);color:var(--c-ink)}
.btn--ghost:hover{background:var(--c-surface);border-color:var(--c-ink-3)}
.btn--sm{--btn-py:.55rem;--btn-px:1.1rem;font-size:var(--t-caption)}
.btn--lg{--btn-py:1.05rem;--btn-px:2.1rem;font-size:var(--t-body-l)}
.btn__arrow{transition:transform var(--d-base) var(--e-out)}
.btn:hover .btn__arrow{transform:translateX(3px)}
[dir="rtl"] .btn:hover .btn__arrow{transform:translateX(-3px)}
.btn svg{width:15px;height:15px;flex:0 0 auto}

/* On inverted (black) sections */
.invert .btn--secondary{background:transparent;color:var(--c-invert-ink);border-color:var(--c-invert-border)}
.invert .btn--secondary:hover{border-color:var(--c-invert-ink)}
.invert .btn--primary{background:var(--c-white);color:var(--c-black)}
.invert .btn--primary:hover{background:var(--c-orange);color:var(--c-white)}

/* ============================================================
   6. BADGE / PILL SYSTEM
   ============================================================ */
.badge{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.4em .8em;font-size:var(--t-label);font-weight:var(--w-bold);
  letter-spacing:.06em;text-transform:uppercase;
  border-radius:var(--r-full);border:1.5px solid var(--c-border-strong);
  background:var(--c-bg);color:var(--c-ink-2);white-space:nowrap;
}
.badge--premium{background:var(--c-orange);border-color:transparent;color:#fff}
.badge--free{background:var(--c-green);border-color:transparent;color:#fff}
.badge--new{background:var(--c-black);border-color:transparent;color:#fff}
[data-theme="dark"] .badge--new{background:var(--c-white);color:var(--c-black)}
.badge--popular{background:var(--c-yellow);border-color:transparent;color:var(--c-black)}
.badge--soft{background:var(--c-surface);border-color:transparent}

/* Proof pill from hero — avatars + label */
.proof-pill{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.45rem 1.35rem .45rem .55rem;
  background:var(--c-bg);border:1.5px solid var(--c-border-strong);
  border-radius:var(--r-full);
}
.proof-pill__text{font-size:.9375rem;font-weight:var(--w-semi);color:var(--c-ink);
  letter-spacing:-.01em;line-height:1.35;text-align:start}
.avatars{display:flex}
.avatars span{
  width:30px;height:30px;border-radius:var(--r-full);
  border:2px solid var(--c-bg);background:var(--c-surface-2);
  margin-inline-start:-11px;background-size:cover;background-position:center;
}
.avatars span:first-child{margin-inline-start:0}
/* Placeholder client faces — replace with the ACF avatar repeater */
.avatars span:nth-child(1){background-image:url("https://alirazamurad.com/wp-content/uploads/2026/08/badge-patch-design.webp")}
.avatars span:nth-child(2){background-image:url("https://alirazamurad.com/wp-content/uploads/2026/08/5-portfolio.webp")}
.avatars span:nth-child(3){background-image:url("https://alirazamurad.com/wp-content/uploads/2026/08/4-portfolio.webp")}

/* ============================================================
   7. FLOATING PILL NAVIGATION
   One unified pill track holding the brand mark and the nav
   items. Each item is its own raised pill; the current page
   takes the orange fill. Matches the approved header comp.
   ============================================================ */
.header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:200;
  padding-block:clamp(1rem,2.2vw,1.75rem);
  pointer-events:none;
  transition:padding var(--d-base) var(--e-soft);
}
.header.is-stuck{padding-block:.7rem}
.header .container{display:flex;justify-content:center}

.headerbar{
  pointer-events:auto;
  display:flex;align-items:center;
  gap:clamp(.9rem,2.2vw,1.9rem);
  width:fit-content;max-width:100%;
  padding:7px 11px;
  border-radius:var(--r-full);
  background:var(--c-surface);
  border:1px solid transparent;
  transition:box-shadow var(--d-base) var(--e-out),
             background-color var(--theme-fade) var(--e-soft),
             border-color var(--d-base) var(--e-soft);
}
.header.is-stuck .headerbar{
  background:color-mix(in srgb, var(--c-surface) 86%, transparent);
  backdrop-filter:blur(18px) saturate(1.7);
  border-color:var(--c-border);
  box-shadow:var(--sh-nav);
}

/* Brand mark — two assets so the logo stays legible in both themes */
.brand{display:flex;align-items:center;flex:0 0 auto;padding-inline-start:.5rem}
.brand img{height:27px;width:auto;display:block}
[data-theme="light"] .brand__dark{display:none}
[data-theme="dark"]  .brand__light{display:none}

.navpill{display:flex;align-items:center;gap:11px}
.navpill__link{
  display:inline-flex;align-items:center;gap:.42rem;
  padding:.52rem 1.15rem;border-radius:var(--r-full);line-height:1.35;
  font-size:.9rem;font-weight:var(--w-bold);letter-spacing:-.014em;
  color:var(--c-ink);background:var(--c-bg);
  box-shadow:var(--sh-1);
  transition:background-color var(--d-fast) var(--e-soft),
             color var(--d-fast) var(--e-soft),
             transform var(--d-fast) var(--e-out),
             box-shadow var(--d-base) var(--e-out);
}
.navpill__link svg{width:14px;height:14px;flex:0 0 auto}
.navpill__link:hover{background:var(--c-orange);color:#fff;transform:translateY(-1px);box-shadow:var(--sh-accent)}
.navpill__link:hover svg{color:#fff}
.navpill__link[aria-current="page"]{
  background:var(--c-orange);color:#fff;box-shadow:var(--sh-accent);
}
.navpill__link[aria-current="page"]:hover{background:var(--c-orange-dk)}

.burger{
  display:none;background:var(--c-bg);border:0;border-radius:var(--r-full);
  padding:.78rem;cursor:pointer;box-shadow:var(--sh-1);
}
.burger span{display:block;width:17px;height:2px;background:var(--c-ink);border-radius:2px}
.burger span+span{margin-block-start:4px}

/* Mobile sheet */
.mobile-nav{
  position:fixed;inset:0;z-index:190;display:none;
  padding:calc(var(--s-9) + 1rem) var(--gutter) var(--s-6);
  background:var(--c-bg);
}
.mobile-nav[data-open="true"]{display:block}
.mobile-nav ul{display:flex;flex-direction:column;gap:var(--s-2)}
.mobile-nav a{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-4);border-radius:var(--r-md);
  font-size:var(--t-h4);font-weight:var(--w-bold);
  background:var(--c-surface);
}
.mobile-nav a svg{width:17px;height:17px;color:var(--c-ink-3)}
.mobile-nav a[aria-current="page"]{background:var(--c-orange);color:#fff}
.mobile-nav a[aria-current="page"] svg{color:#fff}
.mobile-nav a:hover{background:var(--c-orange);color:#fff}
.mobile-nav a:hover svg{color:#fff}
.mobile-nav .btn{width:100%;margin-block-start:var(--s-4)}

/* ============================================================
   8. HERO
   ============================================================ */
.hero{position:relative;padding-block:clamp(7rem,11vw,8.5rem) var(--section-y);overflow:hidden}
/* Hero sits on a plain background, as per the comp — no glow. */
.hero__inner{position:relative;z-index:1;text-align:center;max-width:1000px;margin-inline:auto}
.hero__title{margin-block-end:var(--s-7)}
.hero__sub{margin-block-end:clamp(2rem,3.6vw,2.6rem)}
.hero__sub p{
  font-family:var(--f-display);
  font-size:clamp(1rem,1.9vw,1.35rem);
  font-weight:var(--w-black);letter-spacing:var(--ls-snug);
  line-height:1.3;color:var(--c-ink);
}
.hero__cta{--btn-py:.72rem;--btn-px:1.75rem;font-size:1rem}
.hero__cta svg{width:16px;height:16px}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;align-items:center;
  margin-block-start:clamp(1.5rem,2.8vw,2.1rem)}

/* ============================================================
   9. STATS — animate once
   ============================================================ */
.stats{border-block:1.5px solid var(--c-border);background:var(--c-bg-2)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);padding-block:var(--s-7)}
.stat{text-align:center;padding-inline:var(--s-4);position:relative}
.stat+.stat::before{content:"";position:absolute;inset-inline-start:0;inset-block:18%;
  width:1.5px;background:var(--c-border)}
.stat__num{
  font-family:var(--f-display);font-weight:var(--w-black);
  font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1;
  letter-spacing:var(--ls-tight);display:block;margin-block-end:var(--s-2);
  font-variant-numeric:tabular-nums;
}
.stat__num em{font-style:normal;color:var(--c-orange)}

/* ============================================================
   10. SECTION FURNITURE
   ============================================================ */
.section{padding-block:var(--section-y)}
.section--alt{background:var(--c-bg-2)}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s-6);margin-block-end:var(--s-7)}
.section__head--center{justify-content:center;text-align:center}
.section__head--center .section__head-text{margin-inline:auto}
.section__head-text{max-width:58ch}
.section__label{display:block;margin-block-end:var(--s-3)}
.section__title{margin-block-end:var(--s-4)}

/* Inverted black band — the "Why Trust" treatment */
.invert{background:var(--c-invert-bg);color:var(--c-invert-ink);
  transition:background-color var(--theme-fade) var(--e-soft)}
.invert .t-body,.invert .t-body-l{color:var(--c-invert-ink)}
.invert .hl,.invert .hl--y{color:var(--c-invert-ink)}
.invert .t-caption{color:#8A8A90}
.invert .t-label{color:#8A8A90}
.invert .badge{background:transparent;border-color:var(--c-invert-border);color:var(--c-invert-ink-2)}
.invert .card{background:#141417;border-color:var(--c-invert-border)}

/* ============================================================
   11. CARD SYSTEM — one radius, border, spacing, hover language
   ============================================================ */
.grid{display:grid;gap:var(--grid-gap)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  position:relative;background:var(--c-surface);
  border:1.5px solid transparent;border-radius:var(--r-xl);overflow:hidden;
  transition:border-color var(--d-base) var(--e-out),
             box-shadow var(--d-base) var(--e-out),
             transform var(--d-base) var(--e-out),
             background-color var(--theme-fade) var(--e-soft);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--c-border-strong)}
.card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--c-surface-2);
  border-radius:calc(var(--r-xl) - 2px)}
.card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--d-slow) var(--e-out)}
.card:hover .card__img{transform:scale(1.04)}
.card__badges{position:absolute;inset-block-start:var(--s-3);inset-inline-start:var(--s-3);
  z-index:2;display:flex;gap:var(--s-2)}
.card__body{padding:var(--s-5)}
.card__title{margin-block-end:var(--s-2)}
.card__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  margin-block-start:var(--s-4);padding-block-start:var(--s-4);
  border-block-start:1.5px solid var(--c-border)}
.invert .card__meta{border-block-start-color:var(--c-invert-border)}
.card__tags{display:flex;gap:var(--s-2);flex-wrap:wrap}
.card__link{position:absolute;inset:0;z-index:3}
.card__link:focus-visible{outline-offset:-4px}

.card--pad{padding:var(--s-6)}
.card--portfolio .card__media{aspect-ratio:3/2}
.icon-tile{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--c-orange);color:#fff;margin-block-end:var(--s-5)}
.icon-tile svg{width:19px;height:19px}
.icon-tile--soft{background:var(--c-orange-sf);color:var(--c-orange)}
[data-theme="dark"] .icon-tile--soft{background:var(--c-accent-soft)}

/* Check list (used in featured work + plans) */
.checks{display:flex;flex-direction:column;gap:var(--s-3)}
.checks li{display:flex;gap:var(--s-3);align-items:flex-start;font-size:var(--t-body);
  font-weight:var(--w-med);color:var(--c-ink-2)}
.checks svg{width:15px;height:15px;flex:0 0 auto;margin-block-start:.3em;color:var(--c-green)}
.invert .checks li{color:var(--c-invert-ink-2)}
.checks li[data-off]{color:var(--c-ink-3)}
.checks li[data-off] svg{color:var(--c-ink-3);opacity:.55}

/* ============================================================
   12. TRUST / ABOUT SPLIT
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:start}
.split__copy>p+p{margin-block-start:var(--s-4)}
.split__media{position:relative;border-radius:var(--r-2xl);overflow:hidden;
  background:#141417;aspect-ratio:4/3.4}
.split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ============================================================
   12b. RESOURCE CLICK-CAROUSEL (Section 4)
   Three existing cards; middle active by default. Active grows
   (wider/taller via scale) and centres; sides shrink + fade.
   Two layers: .rslot handles position (FLIP translate), the inner
   .card handles scale/opacity so the two never fight over transform.
   ============================================================ */
.rcarousel{
  display:flex;justify-content:center;align-items:center;
  gap:0;
  padding-block:clamp(1.5rem,4vw,3rem);   /* room for the tilted corners */
}
.rslot{
  flex:0 0 clamp(260px, 30%, 360px);
  cursor:pointer;
  transition:transform var(--d-slow) var(--e-out);
  will-change:transform;
}
/* Inner card carries the tilt / scale / overlap so it never fights the
   slot's FLIP position transform. */
.rslot .card{
  transition:transform var(--d-slow) var(--e-out),
             opacity var(--d-slow) var(--e-soft),
             box-shadow var(--d-slow) var(--e-out);
  transform-origin:center center;
  opacity:.8;
}
.rslot .card__img{transition:transform var(--d-slow) var(--e-out)}

/* Side cards: tilted and pulled inward so they tuck BEHIND the centre. */
.rslot.is-left  .card{transform:translateX(34%) rotate(-8deg) scale(.82);z-index:1}
.rslot.is-right .card{transform:translateX(-34%) rotate(8deg) scale(.82);z-index:1}
.rslot.is-left,.rslot.is-right{z-index:1}

/* Active card: upright, largest, on top. */
.rslot.is-active{z-index:3}
.rslot.is-active .card{transform:translateX(0) rotate(0) scale(1.04);opacity:1;box-shadow:var(--sh-3);position:relative;z-index:3}
.rslot.is-active .card__img{transform:scale(1.05)}   /* active image slightly larger */

.rslot:not(.is-active):hover .card{opacity:.92}
.rslot.is-left:hover  .card{transform:translateX(30%) rotate(-6deg) scale(.85)}
.rslot.is-right:hover .card{transform:translateX(-30%) rotate(6deg) scale(.85)}
.rslot:focus-visible{outline:none}
.rslot:focus-visible .card{outline:2.5px solid var(--c-orange);outline-offset:3px}

.resources-cta{display:flex;justify-content:center;margin-block-start:var(--s-7)}
.rcarousel-nav{display:none;align-items:center;justify-content:center;gap:var(--s-4);margin-block-start:var(--s-6)}
.rcarousel-btn{
  width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;
  border:1.5px solid var(--c-border-strong);border-radius:var(--r-full);
  background:var(--c-bg);color:var(--c-ink);cursor:pointer;
  transition:border-color var(--d-fast) var(--e-soft),background-color var(--d-fast) var(--e-soft)}
.rcarousel-btn:hover{border-color:var(--c-ink)}
.rcarousel-btn svg{width:18px;height:18px}
.rcarousel-dots{display:flex;gap:var(--s-2)}
.rcarousel-dot{width:8px;height:8px;padding:0;border:0;border-radius:var(--r-full);
  background:var(--c-border-strong);cursor:pointer;transition:background-color var(--d-fast),width var(--d-fast)}
.rcarousel-dot[aria-current="true"]{background:var(--c-orange);width:22px}

@media (prefers-reduced-motion:reduce){
  .rslot,.rslot .card,.rslot .card__img{transition:none}
}

/* Tablet: same fanned deck, slightly tighter */
@media (max-width:1024px) and (min-width:641px){
  .rslot{flex-basis:clamp(200px,32%,280px)}
  .rslot.is-left  .card{transform:translateX(38%) rotate(-7deg) scale(.8)}
  .rslot.is-right .card{transform:translateX(-38%) rotate(7deg) scale(.8)}
}

/* Mobile: one active card, prev/next + swipe, no horizontal overflow */
@media (max-width:640px){
  .rcarousel{gap:0}
  .rslot{flex:0 0 100%;order:0 !important;display:none}
  .rslot.is-active{display:block;flex-basis:100%}
  .rslot .card,.rslot.is-active .card{transform:none;opacity:1}
  .rslot.is-active .card__img{transform:none}
  .rcarousel-nav{display:flex}
}

/* ============================================================
   12c. PORTFOLIO — auto-scrolling image marquee (images only)
   Continuous, hands-free scroll. Edges fade so the middle reads
   as the focus, echoing the reference. No manual controls.
   ============================================================ */
.pmarquee{
  position:relative;overflow:hidden;
  /* soft fade on both edges */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.ptrack{
  display:flex;gap:var(--grid-gap);width:max-content;
  animation:pscroll 40s linear infinite;
  will-change:transform;
}
.pmarquee:hover .ptrack{animation-play-state:paused}   /* pause on hover */
@keyframes pscroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.ptile{
  flex:0 0 auto;
  width:clamp(260px, 30vw, 420px);
  aspect-ratio:4/3;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--c-surface-2);
  border:1.5px solid var(--c-border);
}
.ptile img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:640px){
  .ptile{width:clamp(200px,72vw,300px)}
  .ptrack{animation-duration:28s}
}
@media (prefers-reduced-motion:reduce){
  /* No auto-motion: let the user scroll the row by hand instead. */
  .pmarquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .ptrack{animation:none}
}

/* ============================================================
   12d. GOOGLE REVIEWS
   ============================================================ */
.reviews-eyebrow{display:inline-flex;align-items:center;gap:.5rem;margin-block-end:var(--s-4);
  font-size:var(--t-caption);font-weight:var(--w-bold);color:var(--c-ink-2);
  background:var(--c-bg);border:1.5px solid var(--c-border);border-radius:var(--r-full);
  padding:.4rem .9rem}
.reviews-link{display:inline-flex;align-items:center;gap:.4rem;margin-block-start:var(--s-4);
  font-size:var(--t-body);font-weight:var(--w-bold);color:var(--c-ink);
  transition:color var(--d-fast) var(--e-soft)}
.reviews-link:hover{color:var(--c-orange)}
.reviews-link svg{width:16px;height:16px;flex:0 0 auto}
.reviews-link:hover .btn__arrow{transform:translateX(3px)}
.reviews-embed{margin-block-start:var(--s-7)}
.review__top{display:flex;align-items:center;gap:var(--s-3)}
.review__avatar{width:40px;height:40px;border-radius:var(--r-full);flex:0 0 auto;
  display:grid;place-items:center;background:var(--c-surface-2);color:var(--c-ink);
  font-weight:var(--w-bold);font-size:1rem}
.card--review blockquote{margin-block-start:var(--s-2)}

/* ============================================================
   13. FEATURED WORK PANEL
   ============================================================ */
.panel{background:var(--c-surface);border-radius:var(--r-2xl);padding:clamp(1.5rem,3.5vw,3rem);
  transition:background-color var(--theme-fade) var(--e-soft)}
.panel__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.featured-label{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-display);font-weight:var(--w-black);
  font-size:1.05rem;letter-spacing:var(--ls-snug);color:var(--c-ink);
  margin-block-end:var(--s-5);
}
.featured-label__icon{
  display:grid;place-items:center;width:30px;height:30px;
  border-radius:var(--r-sm);background:var(--c-orange);color:#fff;
}
.featured-label__icon svg{width:17px;height:17px}
/* Two proof tags kept on one line together */
.featured-tags{display:flex;flex-wrap:nowrap;gap:var(--s-3);margin-block-end:var(--s-5)}
.featured-tags .badge{white-space:nowrap}
.badge__ico{width:15px;height:15px;flex:0 0 auto;color:var(--c-ink)}
@media (max-width:1024px){.featured-tags{flex-wrap:wrap}}
.panel__showcase{display:grid;gap:var(--grid-gap)}
.showpiece{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--c-bg);border:1.5px solid var(--c-border);
}
/* Show the whole image — no cropping */
.showpiece img{display:block;width:100%;height:auto}

/* ---- Sticky stacking module cards -------------------------------
   The .stack wrapper must NOT set overflow/height/transform, or it
   would create a containing block that breaks position:sticky on the
   children (see body overflow-x:clip above for the same reason).
   Tunable values: --stack-top (first offset), --stack-step (extra
   offset per card so edges peek), --stack-gap (scroll travel). */
.stack{
  --stack-top: 104px;   /* clears the fixed header */
  --stack-step: 16px;   /* each card sits 16px lower than the previous */
  --stack-gap: clamp(3rem, 9vh, 7rem); /* vertical breathing room = scroll travel */
  position:relative;
}
.stack-card{
  position:sticky;
  /* per-card offset set inline as --i (0-based) by the render script */
  top:calc(var(--stack-top) + var(--i, 0) * var(--stack-step));
  transform-origin:center top;
  will-change:transform;
}
.stack-card:not(:last-child){margin-block-end:var(--stack-gap)}
/* the module card reuses the existing .panel design verbatim */
.stack-card .panel{box-shadow:var(--sh-2)}
.stack-card__num{
  font-family:var(--f-display);font-weight:var(--w-black);
  font-size:.95rem;color:var(--c-orange);letter-spacing:.02em;
}
/* stat figures reuse existing tokens — no new design language */
.module-stats{display:flex;gap:var(--s-6);margin-block:var(--s-5) var(--s-6);flex-wrap:wrap}
.module-stat__v{font-family:var(--f-display);font-weight:var(--w-black);
  font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1;letter-spacing:var(--ls-tight);display:block}
.module-stat__l{font-size:var(--t-caption);color:var(--c-ink-3);margin-block-start:.35rem;display:block}

@media (max-width:900px){
  .stack{--stack-top:88px;--stack-step:12px;--stack-gap:clamp(2rem,6vh,4rem)}
}
@media (max-width:640px){
  .stack{--stack-top:76px;--stack-step:9px;--stack-gap:2rem}
}
@media (prefers-reduced-motion:reduce){
  /* Sticky still works; the JS simply won't apply scaling. */
  .stack-card{will-change:auto}
}

/* ============================================================
   14. PRICING — sequential reveal, calm comparison
   ============================================================ */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);align-items:start}
.plan{position:relative;background:var(--c-surface);border:1.5px solid transparent;
  border-radius:var(--r-2xl);padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-5);
  transition:border-color var(--d-base) var(--e-out),box-shadow var(--d-base) var(--e-out),
             background-color var(--theme-fade) var(--e-soft)}
.plan:hover{border-color:var(--c-border-strong);box-shadow:var(--sh-2)}
.plan--featured{background:var(--c-invert-bg);color:var(--c-invert-ink);
  border-color:var(--c-orange);box-shadow:var(--sh-3);padding-block:var(--s-7)}
.plan--featured .t-caption{color:#8A8A90}
.plan--featured .checks li{color:var(--c-invert-ink-2)}
.plan__flag{position:absolute;inset-block-start:var(--s-5);inset-inline-end:var(--s-5)}
.plan__price{display:flex;align-items:baseline;gap:.35rem}
.plan__amount{font-family:var(--f-display);font-weight:var(--w-black);
  font-size:clamp(2.3rem,4vw,3rem);line-height:1;letter-spacing:var(--ls-tight)}
.plan .btn{width:100%;margin-block-start:auto}
.pricing__note{text-align:center;margin-block-start:var(--s-6)}

/* ============================================================
   15. REVIEWS
   ============================================================ */
.card--review{padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-4)}
.card--review blockquote{font-size:1rem;font-weight:var(--w-semi);line-height:1.55;
  color:var(--c-ink);letter-spacing:-.01em}
.stars{display:flex;gap:2px;color:var(--c-orange)}
.stars svg{width:14px;height:14px}
.review__author{display:flex;align-items:center;gap:var(--s-3);margin-block-start:auto}
.review__avatar{width:38px;height:38px;border-radius:var(--r-full);background:var(--c-surface-2);flex:0 0 auto}
[data-theme="dark"] .card--review blockquote{color:var(--c-ink)}

/* ============================================================
   16. CTA
   ============================================================ */
.cta{position:relative;overflow:hidden;border-radius:var(--r-2xl);
  background:var(--c-invert-bg);color:var(--c-invert-ink);
  padding:clamp(2.5rem,6vw,5rem);text-align:center}
.cta::before{content:"";position:absolute;inset-block-start:-55%;inset-inline-start:50%;
  width:720px;aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--c-orange) 34%,transparent),transparent 64%);
  pointer-events:none}
.cta__inner{position:relative;max-width:50ch;margin-inline:auto}
.cta__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;margin-block-start:var(--s-6)}

/* ============================================================
   17. FOOTER
   ============================================================ */
.footer{padding-block:var(--s-6) var(--s-5);background:transparent}
.footer .container{display:flex;flex-direction:column;align-items:center;gap:var(--s-4)}
/* Centered pill, mirroring the header bar */
.footerbar{
  display:flex;align-items:center;gap:clamp(.9rem,2.2vw,1.6rem);
  width:fit-content;max-width:100%;
  padding:9px 16px;border-radius:var(--r-full);
  background:var(--c-surface);border:1px solid var(--c-border);
}
.footerbar .brand{padding-inline-start:.3rem}
.footerbar .brand img{height:26px}
.footerbar__div{width:1px;align-self:stretch;background:var(--c-border);margin-block:2px}
.footer__email{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--t-body);font-weight:var(--w-semi);color:var(--c-ink);
  transition:color var(--d-fast) var(--e-soft)}
.footer__email svg{width:16px;height:16px;flex:0 0 auto;color:var(--c-orange)}
.footer__email:hover{color:var(--c-orange)}
.footer__meta{display:flex;align-items:center;gap:var(--s-4)}
/* Theme switcher */
.theme-switch{display:inline-flex;align-items:center;gap:3px;padding:4px;
  background:var(--c-surface);border:1px solid var(--c-border-strong);border-radius:var(--r-full)}
.theme-switch__btn{
  width:34px;height:30px;display:grid;place-items:center;
  background:none;border:0;border-radius:var(--r-full);
  color:var(--c-ink-2);cursor:pointer;
  transition:background-color var(--d-fast) var(--e-soft),color var(--d-fast) var(--e-soft)}
.theme-switch__btn:hover{color:var(--c-ink);background:var(--c-bg)}
.theme-switch__btn svg{width:16px;height:16px;display:block}
.theme-switch__btn[aria-checked="true"]{background:var(--c-orange);color:#fff}
@media (max-width:560px){
  .footerbar{flex-wrap:wrap;justify-content:center;gap:var(--s-3);text-align:center}
  .footerbar__div{display:none}
}
.socials{display:flex;gap:7px}
/* Social buttons mirror the header nav pills */
.socials a{width:38px;height:34px;display:grid;place-items:center;
  border-radius:var(--r-full);color:var(--c-ink);
  background:var(--c-bg);box-shadow:var(--sh-1);
  transition:color var(--d-fast) var(--e-soft),transform var(--d-fast) var(--e-out),
             box-shadow var(--d-base) var(--e-out)}
.socials a:hover{color:var(--c-orange);transform:translateY(-1px);box-shadow:var(--sh-2)}
.socials svg{width:17px;height:17px}

/* ============================================================
   18. REVEAL — CSS baseline, GSAP enhances.
   No-JS and reduced-motion see the final state immediately.
   ============================================================ */
[data-reveal]{opacity:0;transform:translate3d(0,var(--reveal-y),0)}
html.no-js [data-reveal],.is-revealed[data-reveal]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  [data-reveal],[data-reveal-plan]{opacity:1 !important;transform:none !important}
  .card:hover,.btn:hover,.socials a:hover{transform:none}
}

/* ============================================================
   19. RESPONSIVE — planned up front
   ============================================================ */
@media (max-width:1180px){
  /* Bar is 749px wide — it still fits comfortably here, so labels stay.
     It collapses to the burger at 900px instead. */
  .headerbar{gap:1.1rem}
  .navpill__link{padding-inline:1rem}
}
@media (max-width:1024px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .panel__grid,.split{grid-template-columns:1fr}
  .split__media{aspect-ratio:16/10;order:-1}
}
@media (max-width:900px){
  .navpill{display:none}
  .burger{display:block}
  .headerbar{gap:var(--s-5)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:var(--s-6) 0}
  .stat:nth-child(3)::before{display:none}
  .pricing{grid-template-columns:repeat(2,1fr)}
  .plan--featured{grid-column:1/-1;order:-1}
  .section__head{flex-direction:column;align-items:flex-start}
  .section__head--center{align-items:center}
}
@media (max-width:640px){
  :root{--reveal-y:16px}
  .grid--2,.grid--3,.grid--4,.pricing{grid-template-columns:1fr}
  .plan--featured{order:0}
  .stats__grid{grid-template-columns:1fr;gap:0}
  .stat+.stat::before{display:none}
  .stat+.stat{padding-block-start:var(--s-5);margin-block-start:var(--s-5);
    border-block-start:1.5px solid var(--c-border)}
  .hero__actions .btn{width:100%;max-width:290px}
  .btn{--btn-py:1rem}                     /* touch targets ≥44px */
}


/* ---- Inner pages (blog posts, static pages) ---- */
.page-main{padding-block-start:clamp(7rem,11vw,9rem)}
.entry{max-width:760px;margin-inline:auto}
.entry h1,.entry h2,.entry h3{font-family:var(--f-display);font-weight:var(--w-black);letter-spacing:var(--ls-snug);margin-block:1.4em .5em;color:var(--c-ink)}
.entry h2{font-size:var(--t-h2)} .entry h3{font-size:var(--t-h3)}
.entry p{margin-block:0 1em;font-size:var(--t-body-l);color:var(--c-ink-2)}
.entry a{color:var(--c-orange);text-decoration:underline;text-underline-offset:2px}
.entry ul,.entry ol{margin:0 0 1em 1.25em;color:var(--c-ink-2)} .entry li{margin-block:.35em}
.entry img{border-radius:var(--r-lg);margin-block:1em}
.entry blockquote{border-inline-start:3px solid var(--c-orange);padding-inline-start:1rem;margin:1.5em 0;font-family:var(--f-display);font-size:1.15rem;color:var(--c-ink)}
.page-title{margin-block-end:var(--s-6)}
.post-meta{color:var(--c-ink-3);font-size:var(--t-caption);margin-block-end:var(--s-6)}
.post-list{display:grid;gap:var(--grid-gap)}
.post-list__item{padding-block:var(--s-5);border-block-end:1.5px solid var(--c-border)}
.post-list__item a{font-family:var(--f-display);font-weight:var(--w-bold);font-size:var(--t-h3);color:var(--c-ink)}
.post-list__item a:hover{color:var(--c-orange)}


/* ===== Portfolio page ===== */
/* ---------- PORTFOLIO PAGE ---------- */
.pbanner{background:var(--c-orange);border-end-start-radius:var(--r-2xl);border-end-end-radius:var(--r-2xl);
  padding-block:calc(var(--s-11) + 1.5rem) clamp(2.5rem,6vw,4.5rem);text-align:center}
.pbanner__title{font-family:var(--f-display);font-weight:var(--w-black);letter-spacing:var(--ls-tight);
  line-height:1.05;color:#0A0A0A;font-size:clamp(2rem,5.2vw,4rem);max-width:16ch;margin-inline:auto}
.pf-section{padding-block:clamp(3rem,6vw,5rem)}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.pf-card{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border:1.5px solid var(--c-border);
  border-radius:var(--r-lg);overflow:hidden;background:var(--c-surface);cursor:zoom-in;
  box-shadow:var(--sh-1);transition:transform var(--d-base) var(--e-out),box-shadow var(--d-base) var(--e-out),border-color var(--d-base) var(--e-out)}
.pf-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--c-border-strong)}
.pf-card img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform var(--d-slow) var(--e-out)}
.pf-card:hover img{transform:scale(1.04)}
.pf-card:focus-visible{outline:2.5px solid var(--c-orange);outline-offset:3px}
.pf-card__zoom{position:absolute;inset-block-end:.6rem;inset-inline-end:.6rem;width:34px;height:34px;
  display:grid;place-items:center;border-radius:var(--r-full);background:color-mix(in srgb,var(--c-bg) 85%,transparent);
  color:var(--c-ink);opacity:0;transform:scale(.9);transition:opacity var(--d-fast),transform var(--d-fast) var(--e-out)}
.pf-card:hover .pf-card__zoom{opacity:1;transform:scale(1)}
.pf-card__zoom svg{width:16px;height:16px}
@media (max-width:900px){.pf-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pf-grid{grid-template-columns:1fr}}

/* Lightbox — vertical scrolling gallery (big image, next ones stacked below) */
.lightbox{position:fixed;inset:0;z-index:400;display:none;
  background:rgba(10,10,10,.9);backdrop-filter:blur(5px);overflow-y:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.lightbox[data-open="true"]{display:block}
.lightbox__track{display:flex;flex-direction:column;align-items:center;
  gap:clamp(1.5rem,4vw,3rem);padding:clamp(2.5rem,7vh,5rem) clamp(1rem,4vw,3rem) clamp(5rem,12vh,8rem)}
.lightbox__track img{width:min(880px,92vw);height:auto;display:block;
  border-radius:var(--r-lg);box-shadow:var(--sh-3);background:#fff}
.lightbox__btn{position:fixed;width:48px;height:48px;display:grid;place-items:center;
  border:0;border-radius:var(--r-full);background:rgba(255,255,255,.16);color:#fff;cursor:pointer;z-index:2;
  transition:background-color var(--d-fast)}
.lightbox__btn:hover{background:rgba(255,255,255,.3)}
.lightbox__btn svg{width:22px;height:22px}
.lightbox__close{inset-block-start:clamp(1rem,3vw,2rem);inset-inline-end:clamp(1rem,3vw,2rem)}
/* Bouncing down-arrow hint */
.lightbox__hint{position:fixed;inset-block-end:clamp(1rem,3vh,2rem);inset-inline:0;margin-inline:auto;
  width:46px;height:46px;display:grid;place-items:center;border-radius:var(--r-full);
  background:rgba(255,255,255,.16);color:#fff;pointer-events:none;
  animation:lbbounce 1.4s var(--e-soft) infinite;transition:opacity var(--d-base)}
.lightbox__hint svg{width:22px;height:22px}
.lightbox[data-scrolled="true"] .lightbox__hint{opacity:0}
@keyframes lbbounce{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media (prefers-reduced-motion:reduce){.lightbox__hint{animation:none}}

@media (prefers-reduced-motion:reduce){.pf-card,.pf-card img{transition:none}}

/* ===== Resource page ===== */
/* ---------- RESOURCE PAGE ---------- */
.pbanner__sub{font-family:var(--f-display);font-style:italic;font-weight:var(--w-bold);
  color:#0A0A0A;font-size:clamp(1.1rem,2.4vw,1.7rem);line-height:1.3;margin-block-start:var(--s-4);max-width:none;margin-inline:auto}
.res-tools{max-width:820px;margin-inline:auto;margin-block-start:calc(-1 * clamp(1rem,2vw,1.6rem));position:relative;z-index:3}
.res-search{display:flex;align-items:center;gap:.7rem;background:var(--c-bg);
  border:1.5px solid var(--c-border-strong);border-radius:var(--r-full);
  padding:.9rem 1.5rem;box-shadow:var(--sh-2)}
.res-search input{flex:1;border:0;background:none;font-size:1rem;font-weight:var(--w-med);color:var(--c-ink);outline:none}
.res-search input::placeholder{color:var(--c-ink-3)}
.res-search svg{width:20px;height:20px;color:var(--c-orange);flex:0 0 auto}
.res-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-block-start:var(--s-5)}
.res-cat{padding:.5rem 1.15rem;border-radius:var(--r-full);border:1.5px solid var(--c-border);
  background:var(--c-bg);font-size:var(--t-caption);font-weight:var(--w-bold);color:var(--c-ink-2);
  cursor:pointer;transition:background-color var(--d-fast) var(--e-soft),color var(--d-fast) var(--e-soft),border-color var(--d-fast) var(--e-soft)}
.res-cat:hover{color:var(--c-ink);border-color:var(--c-border-strong)}
.res-cat[aria-pressed="true"]{background:var(--c-orange);border-color:transparent;color:#fff}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);margin-block-start:clamp(2rem,4vw,3rem)}
.res-card{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-lg);
  border:1.5px solid var(--c-border);background:var(--c-surface-2);box-shadow:var(--sh-1);cursor:pointer;
  transition:transform var(--d-base) var(--e-out),box-shadow var(--d-base) var(--e-out),border-color var(--d-base) var(--e-out)}
.res-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--c-border-strong)}
.res-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--d-slow) var(--e-out)}
.res-card:hover img{transform:scale(1.04)}
.res-card__badge{position:absolute;inset-block-start:.7rem;inset-inline-start:.7rem;z-index:2}
.res-card__ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:.7rem;
  padding:var(--s-5);background:linear-gradient(to top,rgba(10,10,10,.82),rgba(10,10,10,.15) 55%,transparent);
  opacity:0;transition:opacity var(--d-base) var(--e-soft)}
.res-card:hover .res-card__ov,.res-card:focus-visible .res-card__ov{opacity:1}
.res-card__title{color:#fff;font-family:var(--f-display);font-weight:var(--w-bold);font-size:1.05rem;letter-spacing:-.01em}
.res-dl{align-self:flex-start;display:inline-flex;align-items:center;gap:.45rem;
  background:var(--c-orange);color:#fff;font-weight:var(--w-bold);font-size:var(--t-caption);
  padding:.5rem 1rem;border-radius:var(--r-full)}
.res-dl svg{width:15px;height:15px}
.res-empty{grid-column:1/-1;text-align:center;color:var(--c-ink-3);padding-block:var(--s-8)}
@media (max-width:900px){.res-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.res-grid{grid-template-columns:1fr}}



/* Resource banner tweaks (scoped) */
.pbanner--res{padding-block:clamp(5.5rem,8vw,7rem) clamp(2rem,4vw,3.25rem)}
.pbanner--res .pbanner__title{font-size:clamp(1.5rem,3.3vw,2.9rem);line-height:1.08;white-space:nowrap;max-width:none}
.pbanner--res .pbanner__sub{max-width:none}
@media (max-width:760px){.pbanner--res .pbanner__title{white-space:normal}}

/* ---------- RESOURCE DETAIL VIEW ---------- */
.rview{position:fixed;inset:0;z-index:400;display:none;background:rgba(10,10,10,.9);backdrop-filter:blur(9px);overflow-y:auto}
.rview[data-open="true"]{display:block}
.rview__bar{display:flex;align-items:center;gap:1rem;padding-block:clamp(1.2rem,3vw,1.8rem)}
.rview__id{display:flex;align-items:center;gap:.8rem;min-width:0}
.rview__logo{width:48px;height:48px;flex:0 0 auto;border-radius:var(--r-full);background:var(--c-orange);
  display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-weight:var(--w-black);font-size:1rem}
.rview__title{color:#fff;font-family:var(--f-display);font-weight:var(--w-bold);font-size:clamp(1rem,2vw,1.3rem);line-height:1.2}
.rview__by{color:rgba(255,255,255,.7);font-size:.9rem}
.rview__dl{margin-inline-start:auto;flex:0 0 auto;background:var(--c-orange);color:#fff;border:0;cursor:pointer;
  border-radius:var(--r-md);padding:.6rem 1.5rem;text-align:center;line-height:1.15;
  transition:background-color var(--d-fast) var(--e-soft),transform var(--d-fast) var(--e-out)}
.rview__dl:hover{background:var(--c-orange-dk);transform:translateY(-1px)}
.rview__dl b{display:block;font-family:var(--f-display);font-weight:var(--w-black);font-size:1.05rem}
.rview__dl span{display:block;font-size:.72rem;opacity:.9}
.rview__dl--locked{background:#3a3a40;cursor:default}
.rview__dl--locked:hover{background:#3a3a40;transform:none}
.rview__close{position:fixed;inset-block-start:clamp(1rem,3vw,1.8rem);inset-inline-end:clamp(1rem,3vw,1.8rem);
  width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:var(--r-full);
  background:rgba(255,255,255,.16);color:#fff;cursor:pointer;z-index:5}
.rview__close svg{width:20px;height:20px}
.rview__stage{max-width:1000px;margin-inline:auto;padding:0 var(--gutter) clamp(3rem,7vh,6rem);text-align:center}
.rview__frame{position:relative;display:inline-block;max-width:100%;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3)}
.rview__img{display:block;max-width:min(560px,90vw);max-height:58vh;width:auto;height:auto;background:#fff}
/* Premium protection: watermark + no select/drag + zoom */
.rview[data-premium="true"] .rview__img{cursor:zoom-in;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.rview[data-premium="true"] .rview__frame.is-zoom{overflow:auto;max-height:78vh}
.rview[data-premium="true"] .rview__frame.is-zoom .rview__img{max-width:none;max-height:none;width:1100px;cursor:zoom-out}
.rview__wm{position:absolute;inset:0;pointer-events:none;display:none;background-image:url("https://alirazamurad.com/wp-content/uploads/2026/08/ali-raza-murad-scaled.png");background-repeat:repeat;background-size:170px auto;opacity:.16}
.rview[data-premium="true"] .rview__wm{display:block}
.rview__desc{max-width:720px;margin:clamp(1.2rem,3vw,1.8rem) auto 0;color:rgba(255,255,255,.82);
  font-size:var(--t-body-l);line-height:1.65;text-align:center}
.rview__related{max-width:1000px;margin:clamp(2rem,5vw,3.5rem) auto 0;text-align:start}
.rview__related-title{color:#fff;font-family:var(--f-display);font-weight:var(--w-bold);font-size:1.15rem;margin-block-end:var(--s-4)}
.rrel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap)}
.rrel-card{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-md);
  border:1.5px solid rgba(255,255,255,.14);cursor:pointer;background:#222}
.rrel-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--d-slow) var(--e-out)}
.rrel-card:hover img{transform:scale(1.05)}
.rrel-card__badge{position:absolute;inset-block-start:.4rem;inset-inline-start:.4rem;font-size:.6rem}
/* countdown */
.rview__count{position:absolute;inset:0;display:none;place-items:center;padding:var(--gutter)}
.rview__count[data-on="true"]{display:grid}
.rview__pill{background:#fff;border-radius:var(--r-full);min-width:min(420px,80%);height:110px;display:grid;place-items:center;box-shadow:var(--sh-3)}
.ring{position:relative;width:76px;height:76px}
.ring svg{transform:rotate(-90deg)}
.ring__num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-weight:var(--w-black);font-size:1.5rem;color:var(--c-orange)}
@media (max-width:760px){.rrel-grid{grid-template-columns:repeat(2,1fr)}}



/* ============================================================
   SERVICES PAGE  — choice hero, catalog grid, product popup,
   WhatsApp CTA overlay. Mirrors the approved comp.
   ============================================================ */

/* — Choice hero (orange) — */
.svc-hero{background:var(--c-orange);padding-block:clamp(5.5rem,10vw,7rem) clamp(2rem,5vw,3.5rem);position:relative;overflow:hidden}
.svc-hero__title{font-family:var(--f-display);font-weight:var(--w-black);color:#0A0A0A;
  text-align:center;font-size:clamp(1.9rem,4.6vw,3.4rem);letter-spacing:var(--ls-tight);line-height:1.05;
  margin-bottom:clamp(1.8rem,4vw,3rem)}
.svc-choices{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.8rem,1.6vw,1.2rem);max-width:720px;margin-inline:auto}
.svc-choice{border:0;cursor:pointer;background:#fff;color:#0A0A0A;
  font-family:var(--f-display);font-weight:var(--w-bold);letter-spacing:var(--ls-snug);
  font-size:clamp(1rem,1.7vw,1.15rem);line-height:1.15;text-align:center;
  padding:.85rem 1.8rem;border-radius:var(--r-full);min-width:230px;
  box-shadow:var(--sh-2);transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-base) var(--e-out),background var(--d-fast),color var(--d-fast)}
.svc-choice br{display:none}
.svc-choice:hover{transform:translateY(-2px);box-shadow:var(--sh-3);background:#0A0A0A;color:#fff}
.svc-choice.is-active{background:#0A0A0A;color:#fff}
@media(max-width:520px){.svc-choice{width:100%;min-width:0}}
.svc-marquee{margin-top:clamp(2rem,4vw,3rem)}
.svc-marquee .ptile{background:#FFE7D2;border-color:rgba(255,255,255,.5)}

/* — Catalog — */
.svc-catalog{padding-block:clamp(3rem,6vw,5rem);background:var(--c-bg-2)}
.svc-catalog__head{text-align:center;max-width:820px;margin-inline:auto;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.svc-catalog__title{font-family:var(--f-display);font-weight:var(--w-black);color:var(--c-ink);
  font-size:clamp(1.7rem,3.6vw,2.8rem);letter-spacing:var(--ls-tight);line-height:1.08;margin-bottom:.6rem}
.svc-catalog__sub{font-family:var(--f-display);font-weight:var(--w-med);font-style:italic;
  color:var(--c-ink-2);font-size:clamp(1rem,1.9vw,1.35rem);line-height:1.4}
.svc-search{position:relative;max-width:660px;margin:0 auto clamp(2rem,4vw,3rem)}
.svc-search svg{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--c-ink-3)}
.svc-search input{width:100%;border:1px solid var(--c-border);background:var(--c-bg);color:var(--c-ink);
  border-radius:var(--r-full);padding:clamp(.85rem,1.6vw,1.1rem) 1.4rem clamp(.85rem,1.6vw,1.1rem) 3.2rem;
  font-size:1rem;box-shadow:var(--sh-1);transition:border-color var(--d-fast),box-shadow var(--d-fast)}
.svc-search input:focus{outline:none;border-color:var(--c-orange);box-shadow:var(--sh-accent)}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.2vw,1.9rem)}
@media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}
.svc-card{display:block;background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--sh-1);transition:transform var(--d-base) var(--e-out),box-shadow var(--d-base) var(--e-out)}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.svc-card__media{aspect-ratio:16/11;min-height:170px;overflow:hidden;display:block;
  background:var(--c-surface) linear-gradient(135deg,#f2f2f2,#e6e6e6)}
.svc-card__media img{width:100%;height:100%;object-fit:cover;display:block;background:var(--c-surface);transition:transform var(--d-slow) var(--e-out)}
.svc-card:hover .svc-card__media img{transform:scale(1.04)}
.svc-card__body{padding:.9rem 1.1rem 1.1rem}
.svc-card__row{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.svc-card__name{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-display);
  font-weight:var(--w-bold);color:var(--c-ink);font-size:1.02rem;letter-spacing:var(--ls-snug)}
.svc-card__mk{width:20px;height:20px;border-radius:50%;flex:0 0 auto;
  background:var(--c-orange) url("https://alirazamurad.com/wp-content/uploads/2026/08/ali-raza-murad-scaled.png") center/72% no-repeat}
.svc-card__rate{display:inline-flex;align-items:center;gap:.28rem;font-size:.9rem;color:var(--c-ink)}
.svc-card__rate svg{width:15px;height:15px}
.svc-card__cnt{color:var(--c-ink-3);font-size:.82rem}
.svc-card__price{color:var(--c-ink-2);font-size:.9rem;margin-top:.25rem}
.svc-empty{grid-column:1/-1;text-align:center;color:var(--c-ink-2);padding:2rem;line-height:1.6}

/* — Product detail popup — */
.pview{position:fixed;inset:0;z-index:200;background:rgba(10,10,10,.92);
  opacity:0;visibility:hidden;transition:opacity var(--d-base) var(--e-soft),visibility var(--d-base);
  display:flex;flex-direction:column}
.pview[data-open="true"]{opacity:1;visibility:visible}
.pview__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1rem;color:#fff}
.pview__id{display:flex;align-items:center;gap:.8rem;min-width:0}
.pview__logo{width:46px;height:46px;flex:0 0 auto;border-radius:50%;
  background:var(--c-orange) url("https://alirazamurad.com/wp-content/uploads/2026/08/ali-raza-murad-scaled.png") center/72% no-repeat}
.pview__title{font-family:var(--f-display);font-weight:var(--w-black);font-size:1.15rem;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pview__desc{color:#CFCFD2;font-size:.86rem;font-style:italic;max-width:620px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pview__order{flex:0 0 auto;background:var(--c-orange);color:#fff;border:0;cursor:pointer;
  font-family:var(--f-display);font-weight:var(--w-bold);font-size:1.02rem;
  padding:.8rem 1.8rem;border-radius:var(--r-full);box-shadow:var(--sh-accent);
  transition:transform var(--d-fast),background var(--d-fast)}
.pview__order:hover{transform:translateY(-2px);background:var(--c-orange-dk)}
.pview__close{position:absolute;top:1rem;right:1rem;z-index:3;width:44px;height:44px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center}
.pview__close svg{width:22px;height:22px}
.pview__close:hover{background:rgba(255,255,255,.22)}
.pview__stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;
  padding:0 clamp(1rem,6vw,5rem) clamp(1.5rem,4vw,3rem)}
.pview__track{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem);max-width:100%;
  height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:.5rem}
.pview__track::-webkit-scrollbar{display:none}
.pview__slide{flex:0 0 auto;scroll-snap-align:center;height:min(72vh,760px);
  border-radius:var(--r-lg);overflow:hidden;background:#111}
.pview__slide img{height:100%;width:auto;max-width:88vw;object-fit:contain;display:block}
.pview__slide--side{opacity:.4;transform:scale(.92)}
.pview__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border:0;cursor:pointer;
  border-radius:50%;background:#fff;color:#0A0A0A;display:grid;place-items:center;box-shadow:var(--sh-2)}
.pview__nav svg{width:24px;height:24px}
.pview__nav--prev{left:clamp(.6rem,2vw,1.6rem)}
.pview__nav--next{right:clamp(.6rem,2vw,1.6rem)}
.pview__nav:hover{background:var(--c-orange);color:#fff}
@media(max-width:640px){
  .pview__bar{flex-wrap:wrap}
  .pview__order{order:3;width:100%;text-align:center}
  .pview__desc{-webkit-line-clamp:3}
}

/* — WhatsApp CTA overlay — */
.waview{position:fixed;inset:0;z-index:210;background:rgba(10,10,10,.82);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity var(--d-base) var(--e-soft),visibility var(--d-base);
  display:grid;place-items:center;padding:var(--gutter)}
.waview[data-open="true"]{opacity:1;visibility:visible}
.waview__close{position:absolute;top:1.1rem;right:1.1rem;width:44px;height:44px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center}
.waview__close svg{width:22px;height:22px}
.waview__close:hover{background:rgba(255,255,255,.26)}
.waview__box{text-align:center;max-width:820px}
.waview__lead{font-family:var(--f-display);font-weight:var(--w-black);font-style:italic;color:#fff;
  font-size:clamp(1.5rem,4vw,2.6rem);line-height:1.2;letter-spacing:var(--ls-snug);
  margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.waview__btn{display:inline-flex;align-items:center;gap:.7rem;background:#25D366;color:#fff;
  font-family:var(--f-display);font-weight:var(--w-black);font-size:clamp(1.2rem,2.4vw,1.7rem);
  padding:clamp(.9rem,2vw,1.15rem) clamp(2.2rem,5vw,3.4rem);border-radius:var(--r-full);
  box-shadow:var(--sh-green);transition:transform var(--d-fast),background var(--d-fast)}
.waview__btn svg{width:1.3em;height:1.3em}
.waview__btn:hover{transform:translateY(-2px);background:#20bd5a}

body.pview-open,body.waview-open{overflow:hidden}

/* ============================================================
   PRELOADER — brand logo shown while the page loads
   ============================================================ */
.preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:var(--c-bg);transition:opacity .55s var(--e-soft),visibility .55s var(--e-soft)}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__logo{width:min(260px,58vw);height:auto;animation:prepulse 1.25s ease-in-out infinite}
@keyframes prepulse{0%,100%{opacity:.6;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.preloader__logo{animation:none}}

/* ============================================================
   GRAPHIC-DESIGN GIG DETAIL VIEW (Fiverr-style)
   ============================================================ */
.gview{position:fixed;inset:0;z-index:200;background:rgba(10,10,10,.94);
  opacity:0;visibility:hidden;transition:opacity var(--d-base) var(--e-soft),visibility var(--d-base);overflow:hidden}
.gview[data-open="true"]{opacity:1;visibility:visible}
.gview__scroll{position:absolute;inset:0;overflow-y:auto;padding-block:clamp(1.2rem,3vw,2.4rem)}
.gview__inner{color:#fff}
.gview__close{position:fixed;top:1rem;right:1rem;z-index:3;width:44px;height:44px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center}
.gview__close svg{width:22px;height:22px}
.gview__close:hover{background:rgba(255,255,255,.26)}
.gview__headline{font-family:var(--f-display);font-weight:var(--w-black);color:#fff;
  font-size:clamp(1.4rem,3vw,2.1rem);letter-spacing:var(--ls-snug);line-height:1.12;max-width:900px}
.gview__author{display:flex;align-items:center;gap:.7rem;margin:1rem 0 1.4rem}
.gview__logo{width:44px;height:44px;flex:0 0 auto;border-radius:50%;
  background:var(--c-orange) url("https://alirazamurad.com/wp-content/uploads/2026/08/ali-raza-murad-scaled.png") center/72% no-repeat}
.gview__by{font-family:var(--f-display);font-weight:var(--w-bold);color:#fff;font-size:1rem}
.gview__stars{color:#FFC83D;font-size:.9rem;display:flex;align-items:center;gap:.35rem}
.gview__stars b{color:#fff}
.gview__cnt{color:#B4B4B8}
.gview__body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(1rem,2.5vw,2rem);align-items:start}
.gview__stage{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#111}
.gview__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gview__track::-webkit-scrollbar{display:none}
.gview__slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;background:#f2f2f2}
.gview__slide img{width:100%;height:100%;object-fit:cover;display:block}
.gview__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border:0;cursor:pointer;
  border-radius:50%;background:#fff;color:#0A0A0A;display:grid;place-items:center;box-shadow:var(--sh-2)}
.gview__nav svg{width:22px;height:22px}
.gview__nav--prev{left:12px}.gview__nav--next{right:12px}
.gview__nav:hover{background:var(--c-orange);color:#fff}

.gcard{background:#141416;border:1px solid #2a2a30;border-radius:var(--r-lg);padding:1.4rem 1.5rem;position:sticky;top:1rem}
.gcard__title{font-family:var(--f-display);font-weight:var(--w-black);color:#fff;font-size:1.15rem;text-align:center;margin-bottom:1rem}
.gcard__tier{color:#B4B4B8;font-size:.78rem;font-weight:var(--w-bold);letter-spacing:.12em;text-transform:uppercase}
.gcard__price{color:#fff;font-family:var(--f-display);font-weight:var(--w-black);font-size:1.9rem;margin:.1rem 0 .8rem}
.gcard__delivery{color:#CFCFD2;font-size:.9rem;margin-bottom:1rem}
.gcard__files-h{color:#fff;font-weight:var(--w-bold);font-size:.92rem;margin-bottom:.4rem}
.gcard__files ul{margin:0 0 1.2rem;padding:0}
.gcard__files li{color:#B4B4B8;font-size:.88rem;line-height:1.7;list-style:none}
.gcard__cta{width:100%;background:var(--c-orange);color:#fff;border:0;cursor:pointer;
  font-family:var(--f-display);font-weight:var(--w-bold);font-size:1rem;line-height:1.2;
  padding:.9rem 1rem;border-radius:var(--r-md);box-shadow:var(--sh-accent);transition:transform var(--d-fast),background var(--d-fast)}
.gcard__cta:hover{transform:translateY(-2px);background:var(--c-orange-dk)}
@media(max-width:820px){
  .gview__body{grid-template-columns:1fr}
  .gcard{position:static}
}

/* ============================================================
   PLATFORM PICKER OVERLAY
   ============================================================ */
.platview{position:fixed;inset:0;z-index:220;background:rgba(10,10,10,.9);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity var(--d-base) var(--e-soft),visibility var(--d-base);
  display:grid;place-items:center;padding:var(--gutter)}
.platview[data-open="true"]{opacity:1;visibility:visible}
.platview__close{position:absolute;top:1.1rem;right:1.1rem;width:44px;height:44px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center}
.platview__close svg{width:22px;height:22px}
.platview__close:hover{background:rgba(255,255,255,.26)}
.platview__box{text-align:center;max-width:760px}
.platview__lead{font-family:var(--f-display);font-weight:var(--w-black);color:#fff;
  font-size:clamp(1.3rem,3vw,2rem);line-height:1.2;margin-bottom:clamp(1.6rem,4vw,2.4rem)}
.platview__icons{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,3vw,1.8rem)}
.plat{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.6);transition:transform var(--d-fast)}
.plat:hover{transform:translateY(-3px) scale(1.05)}
.plat svg{width:60%;height:60%}
.plat span{font-family:var(--f-display);font-weight:var(--w-black);font-size:1.5rem;line-height:1}
.plat--wa{background:#25D366;color:#fff}
.plat--fiverr{background:#1DBF73;color:#fff}
.plat--upwork{background:#14A800;color:#fff}
.plat--behance{background:#1769FF;color:#fff}
.plat--gmail{background:#fff}

/* Rich gig description (renders the WP editor content in the gig view) */
.gview__desc{margin-top:clamp(1.4rem,3vw,2.2rem);max-width:900px;color:#E4E4E6;
  font-size:1rem;line-height:1.7}
.gview__desc h1,.gview__desc h2,.gview__desc h3,.gview__desc h4{color:#fff;
  font-family:var(--f-display);font-weight:var(--w-black);letter-spacing:var(--ls-snug);
  line-height:1.2;margin:1.2em 0 .5em}
.gview__desc h1{font-size:1.7rem}.gview__desc h2{font-size:1.4rem}
.gview__desc h3{font-size:1.2rem}.gview__desc h4{font-size:1.05rem}
.gview__desc p{margin:0 0 1em}
.gview__desc ul,.gview__desc ol{margin:0 0 1em;padding-left:1.4em}
.gview__desc li{margin:.25em 0}
.gview__desc a{color:var(--c-orange);text-decoration:underline}
.gview__desc strong,.gview__desc b{color:#fff}
.gview__desc img{max-width:100%;height:auto;border-radius:var(--r-md);margin:.6em 0}

/* ============================================================
   OPEN TO HIRE — floating pill (sticky, every page)
   ============================================================ */
.oth{position:fixed;right:22px;bottom:22px;z-index:150;display:inline-flex;align-items:center;gap:10px;
  background:var(--c-orange);color:#fff;border:0;cursor:pointer;font-family:var(--f-display);
  font-weight:var(--w-bold);font-size:.95rem;letter-spacing:var(--ls-snug);
  padding:13px 20px;border-radius:var(--r-full);box-shadow:0 14px 30px -10px rgba(0,0,0,.5);
  transition:transform var(--d-base) var(--e-out),background var(--d-fast)}
.oth:hover{transform:translateY(-3px);background:var(--c-orange-dk)}
.oth__dot{width:10px;height:10px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:othpulse 1.8s infinite}
@keyframes othpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@media (prefers-reduced-motion:reduce){.oth__dot{animation:none}}
@media(max-width:560px){.oth{right:14px;bottom:14px;font-size:.85rem;padding:11px 16px}}