/* Shared readability and rhythm pass for every Saga page. */
:root {
  --type-min: 12px;
  --type-meta: 13px;
  --type-control: 15px;
}

html { text-size-adjust: 100%; }
body { font-size: 16px; line-height: 1.6; }
p { line-height: 1.65; }

.header nav { font-size: 16px !important; gap: 42px !important; }
.header .pill { font-size: 15px !important; }
.text-link { font-size: 15px !important; }
.logo small,
.steps article > span { font-size: 13px !important; line-height: 1.45; }
.eyebrow,
.small,
.service-no,
.service-number,
.service-card-number,
.service-card-link,
.service-list-modern .num,
.case-meta span,
.image-label,
.image-number,
.hero-bottom > span,
.project-open,
.project-caption span,
.portfolio-count,
.portfolio-toolbar,
.portfolio-card-caption p,
.portfolio-card-image span,
.footer-top .small,
.footer-bottom,
.form-note { font-size: var(--type-meta) !important; line-height: 1.45; }

.hero-bottom p,
.hero-side p,
.service-body p,
.service-list-modern .service-detail,
.journal-category-title p,
.portfolio-card-caption p,
.portfolio-toolbar,
.footer-top a:not(.logo),
.footer-top p,
.direct-contact { font-size: 15px !important; }

.tags span { font-size: 13px !important; }
.service-directory ul { font-size: 17px !important; line-height: 1.75; }
.source-article p,
.source-article ul { font-size: 17px !important; }

/* Keep the same breathing room across the home page and inner pages. */
.hero { padding-top: 48px; }
.intro { padding-block: 150px; }
.work { padding-bottom: 130px; }
.services { padding-block: 120px; }
.process { padding-block: 130px; }
.journal { padding-top: 120px !important; padding-bottom: 120px; }
.contact { margin-top: 0; }
.service-hero,
.about-hero { padding-block: 80px 110px; }
.service-intro,
.about-statement { padding-block: 105px 75px; }
.service-feature-grid,
.about-collage { padding-bottom: 125px; }
.service-offer,
.about-values { padding-block: 120px; }
.about-process { padding-block: 120px; }
.portfolio-hero { padding-block: 95px 70px; }
.portfolio-page { padding-bottom: 130px; }
.case-intro { padding-top: 55px; }

@media (max-width: 1000px) {
  .header nav { gap: 32px !important; }
}

@media (max-width: 680px) {
  .header nav { font-size: 14px !important; gap: 20px !important; }
  .header .pill { font-size: 13px !important; }
  .logo small,
  .steps article > span { font-size: 12px !important; }
  .eyebrow,
  .small,
  .service-no,
  .service-number,
  .service-card-number,
  .service-card-link,
  .service-list-modern .num,
  .case-meta span,
  .image-label,
  .image-number,
  .hero-bottom > span,
  .project-open,
  .project-caption span,
  .portfolio-count,
  .portfolio-toolbar,
  .portfolio-card-caption p,
  .portfolio-card-image span,
  .footer-top .small,
  .footer-bottom,
  .form-note { font-size: 12px !important; }
  .hero { padding-top: 32px; }
  .intro { padding-block: 88px; }
  .work { padding-bottom: 85px; }
  .services,
  .process { padding-block: 82px; }
  .journal { padding-block: 78px 85px !important; }
  .service-hero,
  .about-hero { padding-block: 58px 72px; }
  .service-intro,
  .about-statement { padding-block: 68px 50px; }
  .service-feature-grid,
  .about-collage { padding-bottom: 75px; }
  .service-offer,
  .about-values { padding-block: 72px; }
  .about-process { padding-block: 74px; }
  .portfolio-hero { padding-block: 58px 45px; }
  .portfolio-page { padding-bottom: 80px; }
  .case-intro { padding-top: 36px; }
}

/* Site-wide navigation, legibility and motion safeguards. */
.header nav a { padding-block: 12px; }
.header nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.footer-services { display:flex; flex-wrap:wrap; gap:16px 28px; padding:24px 0; border-top:1px solid var(--line); }
.footer-services a { font-size:1rem; line-height:1.6; }
.footer-services a:hover { text-decoration:underline; text-underline-offset:4px; }
.portfolio-filters button,.tags span,.service-work-link { font-size: .9375rem !important; }
.project-caption span { font-size: .875rem !important; }
.project > p,.case-meta p,.next-project p { font-size:1rem; }
.intro h2 span { color:#64685d; }
@media(max-width:680px) {
 .header { display:grid; grid-template-columns:1fr auto; gap:4px 20px; height:auto; min-height:112px; padding:10px 18px 0; }
 .header nav { grid-row:2; grid-column:1/-1; justify-content:center; font-size:1rem !important; gap:32px !important; }
 .header nav a:last-child { display:block; }
 .header .logo { width:116px; }
 .header .pill { font-size:.9375rem !important; padding:11px 18px; }
 html { scroll-padding-top:135px; }
 .footer-services { gap:12px 22px; }
 .hero-side { flex-wrap:wrap; }
 .image-label,.image-number { max-width:calc(100% - 28px); }
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.portfolio-card-image span {font-size:.875rem!important;line-height:1.4;max-width:calc(100% - 32px)}
.portfolio-card:focus-visible .portfolio-card-image {outline:3px solid #748c14;outline-offset:5px}

/* Shared cool-grey canvas, sampled from the reference site's mist colour. */
:root { --paper: #f5f5f7 !important; --page-background: #f5f5f7; }
html, body { background-color: var(--page-background) !important; }
.header { background: rgba(255, 255, 255, .96) !important; }

/* Centre the contact link inside its circular desktop and pill mobile shapes. */
.contact .contact-circle {
 display:inline-flex;
 align-items:center;
 justify-content:center;
 text-align:center;
 box-sizing:border-box;
 padding:20px;
 line-height:1.4;
 text-decoration:none;
 flex-shrink:0;
}
.contact .contact-circle:hover { transform:none; }
@media(max-width:680px){
 .contact .contact-circle { width:auto;height:auto;min-height:52px;padding:16px 24px;max-width:100%; }
}

/* Signature bright green for link underlines, including hover states. */
a, a:hover, a:focus-visible { text-decoration-color: #c9f31d !important; }
.text-link, .text-link:hover, .text-link:focus-visible { border-bottom-color: #c9f31d !important; }
/* Keep the earlier home-page case studies on consistent text columns too. */
.case-study .case-story,.case-study .case-detail-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(32px,6vw,75px);align-items:start; }
.case-study .case-story>p,.case-study .case-story>div>p:first-child { margin-top:0; }
.case-study .case-hero img,.case-study .case-detail-grid figure img { width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain; }
@media(max-width:680px){.case-study .case-story,.case-study .case-detail-grid{grid-template-columns:1fr;gap:28px}}
/* The supplied transparent Gold pack, framed consistently on campaign purple. */
img[src="/assets/campaigns/cadbury-gold-thumbnail.webp"] {
 background:transparent !important;
 filter:drop-shadow(10px 20px 14px rgba(20,5,36,.42)) drop-shadow(3px 6px 4px rgba(20,5,36,.2));
 object-fit:cover !important;
 object-position:center !important;
 padding:clamp(16px,2vw,28px);
 box-sizing:border-box;
}

/* Soft studio lighting behind the original pack; the shadow follows its transparent outline. */
.project-img:has(>img[src="/assets/campaigns/cadbury-gold-thumbnail.webp"]),
.sg-feature-image:has(>img[src="/assets/campaigns/cadbury-gold-thumbnail.webp"]),
.sg-tile-image:has(>img[src="/assets/campaigns/cadbury-gold-thumbnail.webp"]),
.sp-work-grid figure:has(>img[src="/assets/campaigns/cadbury-gold-thumbnail.webp"]) {
 background:
 url('/assets/campaigns/halloween-source-decor-v2.webp') center / 100% 100% no-repeat,
 radial-gradient(ellipse 24% 3.5% at 51% 90%,rgba(16,3,30,.58) 0%,rgba(16,3,30,.28) 42%,transparent 100%),
 radial-gradient(ellipse at 44% 36%,#6c4898 0%,#593582 43%,#4e297c 78%,#43216d 100%) !important;
 overflow:hidden;
}