/* ==========================================================
   CALLNDONE — PREMIUM PASS
   Loads AFTER style.css. Do not edit style.css for these.
   ========================================================== */

:root{
  --o-500:#FF7C1F;
  --o-600:#E85F02;
  --navy-900:#06214F;
  --ink-soft:#41537A;
  --line-soft:rgba(10,46,110,.07);
  --sh-1:0 1px 2px rgba(10,46,110,.05);
  --sh-2:0 12px 28px -18px rgba(10,46,110,.22);
  --sh-3:0 26px 48px -22px rgba(10,46,110,.34);
  --r-lg:16px;
  --r-md:12px;
}

/* ---------- Typography ---------- */
h2{ letter-spacing:-.025em; line-height:1.08; }
.sec-head .lead,.hero .lead{ line-height:1.62; max-width:60ch; }
.label{ letter-spacing:.16em; font-weight:700; }
.sec-head{ margin-bottom:clamp(30px,4vw,48px); }

/* ---------- Buttons ---------- */
.btn{ border-radius:var(--r-md); transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s; }
.btn-primary{
  background:linear-gradient(180deg,var(--o-500),var(--o-600));
  border:0;color:#fff;
  font-weight:650;letter-spacing:.005em;
  padding:15px 28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),
             0 10px 24px -8px rgba(232,95,2,.55);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),
             0 18px 34px -10px rgba(232,95,2,.65);
}
.hero-ctas .btn-outline{
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.05);
  padding:15px 26px;color:#fff;
}
.hero-ctas .btn-outline:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.45);
}

/* ---------- Cards ---------- */
.svc-card,.ai-agent,.review-card,.growth-card{
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1),var(--sh-2);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s;
}
.svc-card:hover,.ai-agent:hover,.review-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-1),var(--sh-3);
}
.svc-icon{ border-radius:14px; width:52px; height:52px; }

/* ---------- AI agents — six distinct identities ---------- */
.ai-avatar{ width:68px;height:68px;border-radius:20px;margin:0 auto 18px; }
.ai-avatar svg{ width:32px;height:32px;filter:none;animation:none; }
.ai-ring{ display:none; }
.ai-agent{ text-align:center;padding:30px 24px; }
.ai-role{ font-weight:650;letter-spacing:.01em; }

.ai-team-grid .ai-agent:nth-child(1) .ai-avatar{background:linear-gradient(140deg,#FFE3CB,#FFC59A);color:#B04704;}
.ai-team-grid .ai-agent:nth-child(2) .ai-avatar{background:linear-gradient(140deg,#DCE9FF,#B9D2FF);color:#0A4C96;}
.ai-team-grid .ai-agent:nth-child(3) .ai-avatar{background:linear-gradient(140deg,#FFE0DC,#FFBDB5);color:#A32B1C;}
.ai-team-grid .ai-agent:nth-child(4) .ai-avatar{background:linear-gradient(140deg,#E2E0FF,#C4BFFF);color:#3B2FA8;}
.ai-team-grid .ai-agent:nth-child(5) .ai-avatar{background:linear-gradient(140deg,#FFF0C7,#FFDE8A);color:#8A5B00;}
.ai-team-grid .ai-agent:nth-child(6) .ai-avatar{background:linear-gradient(140deg,#D6F5E6,#A8E9C9);color:#0B6B45;}

.ai-status{ border-radius:999px;font-size:10.5px;letter-spacing:.14em;padding:4px 11px; }

/* ---------- Growth steps ---------- */
.gs-ico{
  width:44px;height:44px;border-radius:13px;
  background:linear-gradient(140deg,#FFF1E6,#FFD9BC);
  color:var(--o-600);
}
.gstep{ gap:16px;align-items:flex-start; }

/* ---------- Pricing tables ---------- */
.price-table th{ font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; }
.price-table td{ padding:16px 20px; }
.price-table tr:hover{ background:#F7FAFF; }

/* ---------- Reviews ---------- */
.rev-av{
  background:linear-gradient(135deg,var(--o-500),var(--navy-900));
  color:#fff;
  display:grid !important; place-items:center;
  width:48px; height:48px; flex:none; border-radius:50%;
  font-weight:700; font-size:14px; letter-spacing:.03em;
  box-shadow:0 4px 12px -4px rgba(10,46,110,.5);
  overflow:hidden;
}
.rev-av b{
  color:#fff; font-weight:700; font-size:14px; line-height:1;
  margin:0; display:block; text-align:center;
}

/* ---------- Motion ---------- */
.reveal{ transform:translateY(14px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.3,1); }
.reveal.reveal-in{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal *{ opacity:1;transform:none;animation:none; }
}

/* ==========================================================
   SERVICE / INNER PAGES
   ========================================================== */
.page-hero{
  background:linear-gradient(160deg,#06214F,#0A2E6E 60%,#0B3A85);
  padding:130px 0 70px;position:relative;overflow:hidden;
}
.page-hero .label{ color:#7FB4FF; }
.page-hero h1{ color:#fff;margin:14px 0 18px;line-height:1.05;font-size:clamp(32px,5vw,54px); }
.page-hero .lead{ color:rgba(255,255,255,.8);max-width:62ch; }
.page-hero .btn-outline{
  border:1px solid rgba(255,255,255,.3);color:#fff;background:rgba(255,255,255,.06);
}
.crumbs{ font-size:12.5px;color:rgba(255,255,255,.55);margin-bottom:6px; }
.crumbs a{ color:rgba(255,255,255,.75);text-decoration:none; }
.crumbs a:hover{ color:#fff;text-decoration:underline; }

.prose{ max-width:74ch; }
.prose h2{ margin:38px 0 14px;font-size:clamp(22px,2.6vw,30px); }
.prose h3{ margin:26px 0 8px;font-size:17px;color:var(--heading); }
.prose p{ margin:0 0 16px;line-height:1.7;color:var(--muted); }
.prose ul{ margin:0 0 18px;padding-left:20px; }
.prose li{ margin-bottom:9px;line-height:1.6;color:var(--muted); }
.prose strong{ color:var(--heading); }

.svc-points{ display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:26px 0 6px; }
.svc-point{
  background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:18px 20px;
  box-shadow:var(--sh-1);
}
.svc-point b{ display:block;color:var(--heading);font-size:15px;margin-bottom:5px; }
.svc-point span{ font-size:13.5px;color:var(--muted);line-height:1.55; }
@media (max-width:700px){ .svc-points{ grid-template-columns:1fr; } }

.cta-band{
  background:linear-gradient(135deg,#0A2E6E,#06214F);
  border-radius:20px;padding:38px 32px;text-align:center;margin:44px 0 0;
}
.cta-band h2{ color:#fff;margin:0 0 10px; }
.cta-band p{ color:rgba(255,255,255,.75);margin:0 auto 22px;max-width:52ch; }

.svc-links{ display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px; }
.svc-link{
  display:block;padding:16px 18px;border-radius:13px;text-decoration:none;
  background:var(--card);border:1px solid var(--rule);transition:all .2s;
}
.svc-link:hover{ border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--sh-2); }
.svc-link b{ display:block;color:var(--heading);font-size:14.5px;margin-bottom:3px; }
.svc-link span{ font-size:12.5px;color:var(--muted); }
@media (max-width:860px){ .svc-links{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .svc-links{ grid-template-columns:1fr; } }

/* ---------- Service cards link to their own pages ---------- */
.svc-card h3 a{
  color:inherit;text-decoration:none;
}
.svc-card h3 a:hover{ color:var(--blue); }
.svc-more{
  display:inline-block;margin-top:10px;font-size:13px;font-weight:700;
  color:var(--blue);text-decoration:none;letter-spacing:.01em;
}
.svc-more:hover{ color:var(--o-600); }
.svc-card{ display:flex;flex-direction:column; }
.svc-card .svc-more{ margin-top:auto;padding-top:10px; }

/* ══════════════════════════════════════════════════
   REAL PHOTOGRAPHY — founder, AI team, client logos
   ══════════════════════════════════════════════════ */

/* ---- Client logo strip ---- */
.client-strip-sec{ padding:clamp(34px,4vw,54px) 0 !important; background:var(--white); }
.client-strip-head{
  text-align:center; font-size:11px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:0 0 22px;
}
.client-strip{
  display:flex; flex-wrap:wrap; justify-content:center; gap:16px;
}
.client-logo{
  width:132px; height:92px; border:1px solid var(--rule); border-radius:14px; background:#fff;
  display:flex; align-items:center; justify-content:center; padding:12px; overflow:hidden;
  box-shadow:var(--sh-1); transition:transform .25s, box-shadow .25s, border-color .25s;
}
.client-logo:hover{ transform:translateY(-3px); border-color:var(--blue); box-shadow:var(--sh-2); }
.client-logo img{ max-width:100%; max-height:100%; object-fit:contain; display:block; border-radius:8px; }
@media (max-width:520px){
  .client-logo{ width:104px; height:76px; padding:9px; }
}

/* ---- Founder panel in the story section ----
   The photo is the opening image of the section and carries the story
   headline across its lower half, so the heading and the picture read as
   one piece instead of a small portrait tile with a name label. ---- */
.founder-panel{
  position:relative; margin:22px 0 26px; max-width:440px;
  aspect-ratio:4/5; border-radius:20px; overflow:hidden;
  border:1px solid var(--rule); background:#0B1B33;
  box-shadow:var(--sh-1),var(--sh-3);
}
.founder-panel img{
  width:100%; height:100%; object-fit:cover; object-position:center 18%;
  display:block; transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.founder-panel:hover img{ transform:scale(1.03); }
.founder-panel figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 24px 24px;
  background:linear-gradient(to top,
    rgba(6,16,34,.94) 0%, rgba(6,16,34,.82) 42%, rgba(6,16,34,0) 100%);
}
.founder-panel figcaption h2{
  margin:0; color:#fff; font-size:clamp(23px,2.6vw,31px);
  line-height:1.18; letter-spacing:-.015em;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
@media (max-width:900px){ .founder-panel{ max-width:100%; } }
@media (max-width:520px){ .founder-panel{ aspect-ratio:4/4.6; border-radius:16px; } }

/* ---- AI team lead block ---- */
.ai-lead{
  display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(22px,3vw,44px); align-items:center; margin:34px 0 6px;
}
.ai-lead-photo{ border-radius:20px; overflow:hidden; box-shadow:var(--sh-2); }
.ai-lead-photo img{ width:100%; height:auto; display:block; }
.ai-lead-text h3{
  font-family:var(--ff-display); font-size:clamp(21px,2.4vw,29px);
  letter-spacing:-.02em; color:var(--heading); margin:12px 0 14px; line-height:1.15;
}
.ai-lead-text p{ color:var(--muted); font-size:15px; line-height:1.68; margin:0; }
[data-theme="dark"] .ai-lead-text h3{ color:#fff; }
[data-theme="dark"] .ai-lead-text p{ color:rgba(255,255,255,.7); }
@media (max-width:860px){
  .ai-lead{ grid-template-columns:1fr; gap:22px; }
  .ai-lead-photo{ max-width:420px; margin:0 auto; }
}

/* ══════════════════════════════════════════════════
   OUR WORK — creative strip, service shots, gallery
   ══════════════════════════════════════════════════ */

/* ---- Scrolling creative strip under the hero ---- */
.creative-strip-sec{ padding:0; background:var(--paper); border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule); overflow:hidden; }
.cw-marquee{ overflow:hidden; padding:18px 0; }
.cw-track{ display:flex; gap:14px; width:max-content; animation:cwScroll 60s linear infinite; }
.creative-strip-sec:hover .cw-track{ animation-play-state:paused; }
@keyframes cwScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.cw-tile{ width:200px; height:130px; border-radius:12px; overflow:hidden; flex:none;
  border:1px solid var(--rule); background:#fff; box-shadow:var(--sh-1); }
.cw-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:700px){
  .cw-tile{ width:150px; height:100px; }
  .cw-track{ animation-duration:42s; }
}
@media (prefers-reduced-motion:reduce){ .cw-track{ animation:none; } }

/* ---- Creative shot inside each service card ---- */
.svc-shot{ margin:-4px 0 16px; border-radius:12px; overflow:hidden; border:1px solid var(--rule);
  aspect-ratio:16/10; background:var(--paper); }
.svc-shot img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s cubic-bezier(.2,.7,.3,1); }
.svc-card:hover .svc-shot img{ transform:scale(1.05); }
.svc-card .svc-icon{ margin-bottom:12px; }

/* ---- Our Work preview on the home page ---- */
.ow-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:34px; }
.ow-card{ display:block; border-radius:14px; overflow:hidden; border:1px solid var(--rule);
  aspect-ratio:1/1; background:#fff; box-shadow:var(--sh-1); transition:transform .3s, box-shadow .3s; }
.ow-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); }
.ow-card img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:760px){ .ow-grid{ grid-template-columns:1fr 1fr; } }

/* ---- Full gallery page ---- */
.wk-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; }
.wk-card{ margin:0; border-radius:18px; overflow:hidden; background:var(--card);
  border:1px solid var(--rule); box-shadow:var(--sh-1),var(--sh-2);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; }
.wk-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-1),var(--sh-3); }
.wk-card img{ width:100%; height:auto; display:block; }
.wk-card figcaption{ padding:16px 18px 18px; }
.wk-tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; background:var(--navy); padding:4px 10px;
  border-radius:100px; margin-bottom:9px; }
.wk-card figcaption p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--muted); }

/* ---- shared inner-page head ---- */
.page-top{
  padding:clamp(104px,11vw,140px) 0 clamp(26px,3vw,40px);
  background:var(--paper); border-bottom:1px solid var(--rule);
}
.page-top .crumbs{ font-size:12.5px; color:var(--muted); margin:0 0 14px; }
.page-top .crumbs a{ color:var(--blue); text-decoration:none; }
.page-top .crumbs a:hover{ text-decoration:underline; }
.page-top .sec-head{ margin-bottom:0; }
.page-top .sec-head h2{ color:var(--heading); }
.page-top .sec-head .lead{ color:var(--muted); }
.page-top .label{ color:var(--o-600); }

/* the real .page-head (dark hero) needs breathing room above its orange line */
.page-head{ padding-bottom:clamp(56px,6vw,80px) !important; }
.page-hero{ padding-bottom:clamp(72px,7vw,92px); }


/* ---- Review footer: keep the source badge inside the card ---- */
.rev-who{ flex-wrap:wrap; row-gap:8px; align-items:center; }
.rev-src{
  margin-left:auto; flex:none; white-space:nowrap;
  font-size:9.5px; letter-spacing:.08em;
  background:var(--blue-soft); color:var(--navy-900);
  padding:3px 9px; border-radius:100px;
}
@media (max-width:520px){
  .rev-src{ margin-left:0; }
}

/* ---- Short contact teaser on the front page ---- */
.contact-mini{
  text-align:center; margin:22px 0 0; font-size:13px; font-weight:600;
  color:rgba(255,255,255,.65); letter-spacing:.01em;
}
.contact .sec-head{ text-align:center; }
.contact .sec-head .lead{ margin-left:auto; margin-right:auto; }


/* ---- Header must always be readable ----
   Pages with a dark hero keep the transparent header (body.dark-top).
   Every other page gets a solid header so the nav never sits
   dark-on-dark or white-on-white. */
body:not(.dark-top) .header{
  background:var(--glass);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 1px 0 var(--rule);
}
body:not(.dark-top) .nav-links a{ color:var(--heading); }
body:not(.dark-top) .brand-name{ color:var(--heading); }


/* ---- Shared bottom CTA on inner pages ---- */
.inner-cta{ background:linear-gradient(160deg,#06214F,#0A2E6E 65%,#0B3A85); color:#fff; }
.inner-cta .label{ color:#FF9A4D; }
.inner-cta h2{ color:#fff; }
.inner-cta .lead{ color:rgba(255,255,255,.75); max-width:56ch; }
.inner-cta .btn-outline{ border:1px solid rgba(255,255,255,.3); color:#fff; background:rgba(255,255,255,.06); }
.inner-cta .btn-outline:hover{ background:rgba(255,255,255,.13); }
.inner-cta-mini{ text-align:center; margin:20px 0 0; font-size:13px; font-weight:600; color:rgba(255,255,255,.6); }
.inner-cta-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin-top:22px;
  padding-top:20px; border-top:1px solid rgba(255,255,255,.14); }
.inner-cta-links a{ color:rgba(255,255,255,.8); font-size:13.5px; font-weight:600; text-decoration:none; }
.inner-cta-links a:hover{ color:#fff; text-decoration:underline; }

/* ---- Before / after client results ---- */
.ba-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px; margin-top:34px; }
.ba-grid:empty{ display:none; }
.ba-card{ background:var(--card); border:1px solid var(--rule); border-radius:18px;
  padding:22px; box-shadow:var(--sh-1),var(--sh-2); }
.ba-biz{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); margin:0 0 4px; }
.ba-cat{ font-size:12.5px; color:var(--muted); margin:0 0 18px; }
.ba-row{ display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center;
  padding:14px 0; border-top:1px solid var(--rule); }
.ba-row:first-of-type{ border-top:0; }
.ba-side{ text-align:center; }
.ba-side span{ display:block; font-size:9.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.ba-side b{ display:block; font-family:var(--ff-display); font-size:24px; font-weight:800;
  letter-spacing:-.02em; line-height:1.1; }
.ba-before b{ color:var(--muted); }
.ba-after b{ color:#0a9a3f; }
.ba-arrow{ color:var(--o-600); font-size:18px; font-weight:800; }
.ba-metric{ grid-column:1/-1; text-align:center; font-size:12px; font-weight:600;
  color:var(--heading); margin-top:-6px; }
.ba-period{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--rule);
  font-size:12px; color:var(--muted); }
.ba-note{ margin:26px 0 0; font-size:12.5px; color:var(--muted); text-align:center;
  max-width:64ch; margin-left:auto; margin-right:auto; line-height:1.6; }

/* ---- Growth chart: never leave the line invisible ---- */
.growth-svg{ width:100%; height:auto; display:block; overflow:visible; }
.gr-line{ stroke-dasharray:1200; stroke-dashoffset:1200;
  animation:drawLine 2.2s cubic-bezier(.16,1,.3,1) .3s forwards; }
.gr-area{ opacity:0; animation:fadeArea 1.2s ease 1.5s forwards; }
.gr-dots circle{ opacity:0; animation:popDot .4s ease forwards; }
.gr-dots circle:nth-child(1){ animation-delay:.9s; }
.gr-dots circle:nth-child(2){ animation-delay:1.2s; }
.gr-dots circle:nth-child(3){ animation-delay:1.5s; }
.gr-dots circle:nth-child(4){ animation-delay:1.8s; }
.gr-dots circle:nth-child(5){ animation-delay:2.1s; }
@media (prefers-reduced-motion:reduce){
  .gr-line{ stroke-dashoffset:0; animation:none; }
  .gr-area, .gr-dots circle{ opacity:1; animation:none; }
}

/* ══════════════════════════════════════════════════
   Creatives carry text — never crop them
   ══════════════════════════════════════════════════ */
/* All creatives are supplied as 1:1 squares, so every frame is locked to a
   square. object-fit:contain keeps the text inside the artwork uncropped. */
.svc-shot{ aspect-ratio:1/1; background:#fff; padding:0; }
.svc-shot img{ width:100%; height:100%; object-fit:contain; }
.cw-tile{ width:190px; height:190px; background:#fff; padding:0; }
.cw-tile img{ width:100%; height:100%; object-fit:contain; }
.ow-card{ aspect-ratio:1/1; background:#fff; }
.ow-card img{ width:100%; height:100%; object-fit:contain; }
.wk-card img{ width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff; }
@media (max-width:700px){ .cw-tile{ width:150px; height:150px; } }

/* ══════════════════════════════════════════════════
   Growth strategy photo cards + photo hero
   ══════════════════════════════════════════════════ */
.g-card-photo{ display:flex; flex-direction:column; padding:0 !important; overflow:hidden;
  text-decoration:none; border-radius:18px; border:1px solid var(--rule); background:var(--card);
  box-shadow:var(--sh-1),var(--sh-2); transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; }
.g-card-photo:hover{ transform:translateY(-5px); box-shadow:var(--sh-1),var(--sh-3); }
.g-photo{ position:relative; overflow:hidden; }
.g-photo img{ width:100%; height:auto; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.g-card-photo:hover .g-photo img{ transform:scale(1.04); }
.g-photo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,33,79,0) 35%, rgba(6,33,79,.85) 100%); }
.g-photo-cap{ position:absolute; left:0; right:0; bottom:0; padding:20px 22px; z-index:1; }
.g-kicker{ display:block; font-size:10px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:#FF9A4D; margin-bottom:6px; }
.g-photo-cap h3{ color:#fff !important; margin:0; font-size:clamp(19px,2.1vw,25px);
  letter-spacing:-.02em; line-height:1.15; }
.g-body{ padding:20px 22px 22px; }
.g-body p{ margin:0 0 14px; font-size:14px; line-height:1.65; color:var(--muted); }
.g-more{ font-size:13px; font-weight:700; color:var(--blue); }
.g-card-photo:hover .g-more{ color:var(--o-600); }

/* photo hero on the two strategy pages */
.page-hero-photo{ position:relative; overflow:hidden; }
.page-hero-photo .ph-bg{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.28; }
.page-hero-photo .wrap{ position:relative; z-index:1; }

/* ---- Enquiry form on the front page (light section) ---- */
.home-form-wrap{ max-width:560px; margin:0 auto; }
.home-form-wrap .form{
  background:var(--card); border:1px solid var(--rule);
  border-radius:18px; padding:24px; box-shadow:var(--sh-1),var(--sh-2);
}
.home-form-wrap label{ color:var(--heading); }
.home-form-wrap input, .home-form-wrap select, .home-form-wrap textarea{
  background:#fff; border:1px solid var(--rule); color:var(--ink);
}
.home-form-wrap input::placeholder, .home-form-wrap textarea::placeholder{ color:#8FA0BF; }
.home-form-wrap .form-note{ color:var(--muted); }
.home-form-wrap .btn-primary{ width:100%; justify-content:center; }

/* the front-page contact block sits on a light background */
.contact .sec-head h2{ color:var(--heading); }
.contact .sec-head .lead{ color:var(--muted); }
.contact .btn-outline{
  border:1px solid var(--rule); color:var(--heading); background:var(--card);
}
.contact .btn-outline:hover{ border-color:var(--blue); color:var(--blue); }
.contact-mini{ color:var(--muted) !important; }
.contact-mini a{ color:var(--o-600) !important; }

/* ══════════════════════════════════════════════════
   Growth strategy photo cards + photo hero
   ══════════════════════════════════════════════════ */
.g-card-photo{ display:flex; flex-direction:column; padding:0 !important; overflow:hidden;
  text-decoration:none; border-radius:18px; border:1px solid var(--rule); background:var(--card);
  box-shadow:var(--sh-1),var(--sh-2); transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; }
.g-card-photo:hover{ transform:translateY(-5px); box-shadow:var(--sh-1),var(--sh-3); }
.g-photo{ position:relative; overflow:hidden; }
.g-photo img{ width:100%; height:auto; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.g-card-photo:hover .g-photo img{ transform:scale(1.04); }
.g-photo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,33,79,0) 35%, rgba(6,33,79,.85) 100%); }
.g-photo-cap{ position:absolute; left:0; right:0; bottom:0; padding:20px 22px; z-index:1; }
.g-kicker{ display:block; font-size:10px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:#FF9A4D; margin-bottom:6px; }
.g-photo-cap h3{ color:#fff !important; margin:0; font-size:clamp(19px,2.1vw,25px);
  letter-spacing:-.02em; line-height:1.15; }
.g-body{ padding:20px 22px 22px; }
.g-body p{ margin:0 0 14px; font-size:14px; line-height:1.65; color:var(--muted); }
.g-more{ font-size:13px; font-weight:700; color:var(--blue); }
.g-card-photo:hover .g-more{ color:var(--o-600); }

/* photo hero on the two strategy pages */
.page-hero-photo{ position:relative; overflow:hidden; }
.page-hero-photo .ph-bg{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.28; }
.page-hero-photo .wrap{ position:relative; z-index:1; }

/* ---- Enquiry form on the front page ----
   NOTE: an older duplicate of this block styled the form for a DARK
   background (white labels, transparent inputs). The contact section is
   light, so the whole form was invisible. Light styling lives higher up in
   this file; only the dark-theme override belongs here. ---- */
[data-theme="dark"] .home-form-wrap .form{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); }
[data-theme="dark"] .home-form-wrap label{ color:rgba(255,255,255,.8); }
[data-theme="dark"] .home-form-wrap input,
[data-theme="dark"] .home-form-wrap select,
[data-theme="dark"] .home-form-wrap textarea{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); color:#fff; }
[data-theme="dark"] .home-form-wrap input::placeholder,
[data-theme="dark"] .home-form-wrap textarea::placeholder{ color:rgba(255,255,255,.4); }
[data-theme="dark"] .home-form-wrap select option{ color:#0B1B33; }
[data-theme="dark"] .home-form-wrap .form-note{ color:rgba(255,255,255,.55); }

/* the enquiry form must never be hidden by the scroll-reveal script */
.home-form-wrap, .home-form-wrap .form{ opacity:1 !important; transform:none !important; }

/* ---- Footer brand: dark background, so the mark needs a light tile ---- */
.foot-brand img{
  background:#fff; border-radius:10px; padding:5px; box-sizing:content-box;
}
.foot-brand .brand-name{ color:#fff !important; }
.foot-brand .brand-name i{ color:var(--o-500) !important; font-style:normal; }
.footer .foot-col h4{ color:#fff; }
.footer .foot-blurb{ color:rgba(255,255,255,.7); }

/* ══════════════════════════════════════════════════
   Brand slider — three creatives, one at a time
   ══════════════════════════════════════════════════ */
.brand-slider-sec{ background:var(--white); padding:clamp(38px,4.5vw,64px) 0; }
.bs-head{ text-align:center; margin-bottom:22px; }
.bs-head .label{ margin-bottom:8px; }
.bs-head h2{ margin:0; font-size:var(--fs-h2); color:var(--heading); }
.bs-head .lead{ margin:10px auto 0; max-width:560px; color:var(--muted); }

.bs-stage{
  position:relative; width:100%; max-width:560px; margin:0 auto;
  aspect-ratio:1/1; border-radius:20px; overflow:hidden; background:#fff;
  border:1px solid var(--rule); box-shadow:var(--sh-1),var(--sh-2);
}
.bs-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .45s ease; will-change:opacity;
}
.bs-slide.on{ opacity:1; visibility:visible; }
.bs-slide img{ width:100%; height:100%; object-fit:contain; display:block; background:#fff; }

.bs-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--rule);
  background:rgba(255,255,255,.92); color:var(--heading);
  display:grid; place-items:center; cursor:pointer; padding:0;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.bs-nav:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.bs-nav svg{ width:17px; height:17px; }
.bs-prev{ left:12px; } .bs-next{ right:12px; }

.bs-dots{ display:flex; justify-content:center; gap:9px; margin-top:18px; }
.bs-dot{
  width:9px; height:9px; border-radius:50%; padding:0; cursor:pointer;
  border:0; background:var(--rule); transition:background .2s ease, width .2s ease;
}
.bs-dot.on{ background:var(--o-500); width:26px; border-radius:5px; }

@media (max-width:700px){
  .bs-stage{ max-width:100%; border-radius:16px; }
  .bs-nav{ width:32px; height:32px; }
  .bs-prev{ left:8px; } .bs-next{ right:8px; }
}
@media (prefers-reduced-motion:reduce){ .bs-slide{ transition:none; } }

/* ══════════════════════════════════════════════════
   Client results — highlight line + 4th metric
   ══════════════════════════════════════════════════ */
.ba-highlight{
  margin:0 0 16px; padding:11px 13px; border-radius:11px;
  background:rgba(251,93,4,.08); border:1px solid rgba(251,93,4,.22);
  font-size:12.5px; font-weight:600; line-height:1.5; color:var(--o-600);
}
[data-theme="dark"] .ba-highlight{ background:rgba(251,93,4,.12); color:#FF9A4D; }

/* ══════════════════════════════════════════════════
   Blog
   ══════════════════════════════════════════════════ */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:22px; margin-top:34px; }
.blog-card{
  display:flex; flex-direction:column; text-decoration:none; overflow:hidden;
  background:var(--card); border:1px solid var(--rule); border-radius:18px;
  box-shadow:var(--sh-1),var(--sh-2);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.blog-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-1),var(--sh-3); }
.blog-cover{ width:100%; aspect-ratio:16/9; overflow:hidden; background:#EEF2F8; }
.blog-cover img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.blog-card:hover .blog-cover img{ transform:scale(1.04); }
.blog-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.blog-date{ font-size:10px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--o-600); margin:0 0 8px; }
.blog-card h3{ margin:0 0 10px; font-size:19px; line-height:1.28;
  letter-spacing:-.01em; color:var(--heading); }
.blog-card p{ margin:0; font-size:14px; line-height:1.65; color:var(--muted); }
.blog-more{ margin-top:14px; font-size:13px; font-weight:700; color:var(--blue); }
.blog-card:hover .blog-more{ color:var(--o-600); }
.blog-empty{ margin-top:30px; padding:34px 22px; text-align:center;
  border:1px dashed var(--rule); border-radius:16px; color:var(--muted); font-size:14px; }

/* single post */
.post-wrap{ max-width:760px; margin:0 auto; }
.post-cover{ width:100%; aspect-ratio:16/9; border-radius:18px; overflow:hidden;
  border:1px solid var(--rule); background:#EEF2F8; margin-bottom:30px; }
.post-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-body{ font-size:16.5px; line-height:1.8; color:var(--ink); }
.post-body p{ margin:0 0 20px; }
.post-body h2{ margin:34px 0 14px; font-size:26px; color:var(--heading); }
.post-body h3{ margin:28px 0 12px; font-size:20px; color:var(--heading); }
.post-body ul{ margin:0 0 20px; padding-left:22px; }
.post-body li{ margin-bottom:9px; }
.post-back{ display:inline-block; margin-top:34px; font-size:13.5px; font-weight:700;
  color:var(--blue); text-decoration:none; }
.post-back:hover{ color:var(--o-600); }

/* ══════════════════════════════════════════════════
   Blocks added from the admin panel's Edit Website screen
   ══════════════════════════════════════════════════ */
.ce-block{
  margin:26px 0; padding:24px; border-radius:18px;
  background:var(--card); border:1px solid var(--rule);
  box-shadow:var(--sh-1),var(--sh-2);
  display:grid; gap:20px; align-items:center;
}
.ce-block:has(.ce-block-img){ grid-template-columns:minmax(0,320px) minmax(0,1fr); }
.ce-block-img img{ width:100%; height:auto; border-radius:12px; display:block; }
.ce-block-body h3{ margin:0 0 10px; font-size:21px; color:var(--heading); }
.ce-block-body p{ margin:0 0 12px; color:var(--muted); line-height:1.7; font-size:15px; }
.ce-block-body p:last-of-type{ margin-bottom:0; }
.ce-block-body .btn{ margin-top:14px; }
@media (max-width:760px){
  .ce-block, .ce-block:has(.ce-block-img){ grid-template-columns:1fr; padding:20px; }
}

/* an unearned star is outlined rather than filled */
.rev-top .stars .star-empty{ fill:none; stroke:currentColor; stroke-width:1.6; opacity:.45; }

/* ---- Hero headline loading state ----
   Shown only to a browser that has not seen the site before, while the
   headline text is fetched. It occupies the headline's place so the layout
   does not jump, and it means a visitor never reads one headline and then
   sees it change. */
.h1-waiting{ position:relative; }
.h1-skel{
  position:absolute; left:0; right:0; top:0;
  pointer-events:none; overflow:hidden;
  /* height is set from JS to match the real headline exactly, so the bars
     can never spill over the paragraph underneath */
}
.h1-skel span{
  display:block; height:44%; min-height:22px; margin-bottom:10px; border-radius:10px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.07) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.07) 100%);
  background-size:200% 100%;
  animation:h1Shimmer 1.4s ease-in-out infinite;
}
.h1-skel span:first-child{ width:min(560px,88%); }
.h1-skel span:last-child{  width:min(340px,60%); }
@keyframes h1Shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
@media (prefers-reduced-motion:reduce){ .h1-skel span{ animation:none; } }

/* ══════════════════════════════════════════════════════════════
   BUTTONS — final, authoritative definition (v204)

   style.css and earlier parts of this file each define .btn-primary
   more than once, so the look was whichever rule happened to come
   last. Everything below is the single source of truth: a deep blue
   with real depth, a soft sheen, and a restrained hover. Any future
   button change belongs HERE, not in another block.
   ══════════════════════════════════════════════════════════════ */

.btn{
  padding:15px 30px;
  border-radius:13px;
  font-weight:700;
  font-size:14.5px;
  letter-spacing:.005em;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),
             box-shadow .3s cubic-bezier(.2,.8,.3,1),
             background .3s ease, color .3s ease, border-color .3s ease;
}
.btn:active{ transform:translateY(0) scale(.985); }

/* ---- Primary: deep blue, layered like polished metal ---- */
.btn-primary{
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(135deg, #1B7BE0 0%, #0A66C2 42%, #084C93 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 -1px 0 rgba(0,0,0,.18) inset,
    0 2px 5px -1px rgba(6,40,86,.34),
    0 12px 26px -12px rgba(10,102,194,.62);
}
.btn-primary:hover{
  transform:translateY(-2.5px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(135deg, #2287EE 0%, #0B6FD0 42%, #0A57A4 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.34) inset,
    0 -1px 0 rgba(0,0,0,.2) inset,
    0 4px 10px -2px rgba(6,40,86,.36),
    0 22px 44px -16px rgba(10,102,194,.72);
}

/* one slow sheen across the face on hover — luxury, not disco */
.btn-primary::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, transparent 34%,
             rgba(255,255,255,.32) 50%, transparent 66%);
  transform:translateX(-120%);
  transition:transform .85s cubic-bezier(.2,.7,.3,1);
}
.btn-primary:hover::after{ transform:translateX(120%); }

/* ---- Outline: fills with the same blue ---- */
.btn-outline{
  color:var(--heading);
  background:rgba(255,255,255,.55);
  border:1.5px solid rgba(10,102,194,.32);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 1px 2px rgba(10,46,110,.06);
}
.btn-outline:hover{
  transform:translateY(-2.5px);
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,#1B7BE0,#0A66C2 60%,#084C93);
  box-shadow:0 18px 36px -16px rgba(10,102,194,.6);
}

/* ---- On the dark hero and other dark bands ---- */
.hero .btn-outline, .cta-band .btn-outline{
  color:#fff;
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.3);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.hero .btn-outline:hover, .cta-band .btn-outline:hover{
  background:linear-gradient(135deg,#1B7BE0,#0A66C2 60%,#084C93);
  border-color:transparent; color:#fff;
}

/* ---- Dark mode ---- */
[data-theme="dark"] .btn-primary{
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 -1px 0 rgba(0,0,0,.3) inset,
    0 14px 34px -14px rgba(27,123,224,.7);
}
[data-theme="dark"] .btn-outline{
  color:#fff; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22);
}
[data-theme="dark"] .btn-outline:hover{ color:#fff; }

@media (prefers-reduced-motion:reduce){
  .btn, .btn-primary::after{ transition:none; }
  .btn:hover{ transform:none; }
}

/* ══════════════════════════════════════════════════════════════
   Remaining orange buttons brought into the blue scheme (v205)

   Three older rules used !important or an extra selector, so they
   survived the button block above:
     .hero .btn-primary        — its own blue gradient + an orange pulse
     .drawer .dlink-login      — solid orange "Client Login"
     .mbar .call               — orange call bar on mobile
   All three now use the same deep blue.
   ══════════════════════════════════════════════════════════════ */

.hero .btn-primary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(135deg, #1B7BE0 0%, #0A66C2 42%, #084C93 100%) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  animation:none;                       /* the orange pulse is gone */
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -1px 0 rgba(0,0,0,.2) inset,
    0 14px 40px -12px rgba(10,102,194,.72);
}
.hero .btn-primary:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.36) inset,
    0 -1px 0 rgba(0,0,0,.22) inset,
    0 22px 52px -14px rgba(10,102,194,.8);
}

/* Client Login in the mobile menu */
.drawer .dlink-login{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(135deg, #1B7BE0 0%, #0A66C2 42%, #084C93 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -1px 0 rgba(0,0,0,.2) inset,
    0 12px 30px -10px rgba(10,102,194,.65) !important;
}
.drawer .dlink-login::after{
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.32),transparent);
}
/* the old rule set the label colour with !important against an orange fill;
   on the blue fill it must stay white and stay above the sheen */
/* `[data-theme="light"] .drawer .dlink` sets a navy colour with !important and
   beats a plain .dlink-login rule, so the theme selector has to be matched. */
[data-theme="light"] .drawer .dlink-login,
[data-theme="dark"]  .drawer .dlink-login,
.drawer .dlink-login{ color:#fff !important; }
.drawer .dlink-login{ position:relative; z-index:1; }

/* Mobile bottom call bar */
.mbar .call{
  background:linear-gradient(135deg,#1B7BE0,#0A66C2 60%,#084C93) !important;
  box-shadow:0 10px 24px -12px rgba(10,102,194,.9) !important;
}

/* ══════════════════════════════════════════════════════════════
   The last two orange buttons (v207)

   A full scan of all 46 public pages at desktop AND mobile width
   caught two the earlier pass missed:

   .nav-cta on a dark-hero page — `body.dark-top .header:not(.is-stuck)
     .nav-cta` painted the header's "Request a Consultation" orange, and
     it is hidden behind the burger on a phone, so a mobile-only check
     never saw it.
   .float-call — the round call button pinned bottom-right of every page.
   ══════════════════════════════════════════════════════════════ */

body.dark-top .header:not(.is-stuck) .nav-cta{
  background:linear-gradient(135deg,#1B7BE0,#0A66C2 60%,#084C93) !important;
  color:#fff !important;
  box-shadow:0 10px 26px -12px rgba(10,102,194,.8);
}
body.dark-top .header:not(.is-stuck) .nav-cta:hover{
  background:linear-gradient(135deg,#2287EE,#0B6FD0 60%,#0A57A4) !important;
  color:#fff !important;
}

.float-call{
  background:linear-gradient(140deg,#1B7BE0,#0A66C2 58%,#084C93) !important;
  box-shadow:0 16px 32px -10px rgba(10,102,194,.75),
             inset 0 1px 0 rgba(255,255,255,.24) !important;
}
.float-call:hover{
  box-shadow:0 20px 40px -10px rgba(10,102,194,.85),
             inset 0 1px 0 rgba(255,255,255,.3) !important;
}
/* the pulsing ring around it was orange too */
.float-call .ring{ border-color:#2287EE !important; }