/* Awards & Recognition page styles.
   Everything is scoped under .awards-page (the wrapper the template puts around
   its own content) on purpose — this theme loads Bootstrap + several global
   stylesheets sitewide (bootstrap.css, new-style.css, styles.css) that already
   define .btn, .row, h1/h2/h3, a, etc. Scoping avoids fighting the cascade with
   any of that instead of relying on load order. Enqueued only on
   page-awards-template.php (see functions-snippet.php).

   Not included here (on purpose): nav and footer styling, and the Outfit font
   import — the real site nav/footer render via get_header()/get_footer() and
   Outfit is already loaded sitewide in header.php. */

.awards-page{
  /* seoplus+ design tokens — verified against Brand Guide 2026 */
  --red:#f1574a;           /* "Orange" per brand guide — reserved for CTAs, alerts, callouts, key data points */
  --red-tint:rgba(241,87,74,.12);
  --navy:#323f50;          /* Dark Blue / Greyscale 90 */
  --black:#0a0e13;         /* Black — primary dark tone */
  --nav-link:#0e2b5c;      /* matches the live site's nav-link colour */
  --blue-light:#7baddd;    /* seoplus+ Blue — reserved for accents, icons, gradients, logo */
  --blue-tint:rgba(123,173,221,.25);
  --grey-10:#f6f7f9;
  --grey-20:#edf1f5;
  --grey-30:#e1e7ef;
  --grey-40:#d2dae4;
  --grey-50:#bfcbd9;
  --grey-60:#91a1b7;
  --grey-70:#627792;
  --white:#ffffff;
  --shadow-m:0px 16px 24px rgba(50,63,80,.24);

  display:block;
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  font-weight:400; /* Body Copy = Regular, per Typography spec (June 2025) */
  color:var(--navy);
  line-height:1.6; /* Body Copy: 160% line height */
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.awards-page a{color:inherit;text-decoration:none;}
/* Full-bleed with fixed edge padding — NOT a centered max-width box. This
   matches how the rest of the site actually lays out its sections (see
   parts/services/section-hero.php's .container-fluid + offset-lg-1, and
   .new-hero-wrapper/.service-hero-wrapper in new-style.min.css, which use
   padding:15rem 10rem 2.5rem rather than a centered container). A centered
   max-width box reads as "centered" on wide screens because it puts equal
   empty space on both sides — this keeps content left-leaning like every
   other page instead.

   Each value below is the intended visual inset PLUS 15px: this template's
   <main> sits directly inside the theme's outer <div class="row">, and
   Bootstrap's .row applies margin:-15px on both sides expecting a .col
   child's own padding:15px to cancel it out. Since main isn't a .col, that
   -15px is never cancelled and eats into whatever padding .wrap sets — put
   here (on the content wrap) rather than on .awards-page itself, so the
   correction doesn't also inset the full-bleed section backgrounds (.hero,
   .cta, .jumpnav), which should still reach the true page edge. */
.awards-page .wrap{max-width:1800px;padding:0 39px;}   /* 24px + 15px */
@media (min-width:768px){ .awards-page .wrap{padding:0 63px;} }   /* 48px + 15px */
@media (min-width:1200px){ .awards-page .wrap{padding:0 calc(10rem + 15px);} }   /* 160px + 15px */

/* Headings + Titles = Semi-Bold, 100% line height. -2% tracking above ~32px, 0% at/below it.
   h1/h2 = primary headings; h3 = a smaller step in the same Semi-Bold heading ladder (card/item
   titles), not the separate Light "Subhead" style — that's reserved for a large companion line
   paired with a heading (e.g. the hero intro), sized 8–10 type-scale steps below it. */
.awards-page h1,.awards-page h2,.awards-page h3{font-family:'Outfit',sans-serif;font-weight:600;line-height:1;color:var(--black);margin:0;}

/* Buttons — Interactive Elements = Medium. Namespaced (not the theme's global
   .btn-orange-header / .btn-orange-outline components) so this page's buttons
   stay exactly brand-guide-spec without inheriting unrelated nav-link hover rules. */
.awards-page .btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Outfit',sans-serif;font-weight:500;font-size:16px;
  letter-spacing:.32px;text-transform:uppercase;
  padding:20px 40px;border-radius:4px;
  white-space:nowrap;cursor:pointer;border:none;
  transition:filter .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.awards-page .btn-primary{background:var(--red);color:var(--white);box-shadow:0 10px 24px rgba(241,87,74,.28);}
.awards-page .btn-primary:hover{filter:brightness(0.94);transform:translateY(-2px);box-shadow:0 14px 28px rgba(241,87,74,.38);}
.awards-page .btn-secondary{background:var(--grey-10);color:var(--navy);border:1px solid var(--navy);}
.awards-page .btn-secondary:hover{background:var(--grey-20);transform:translateY(-2px);}

/* ===== HERO ===== */
.awards-page .hero{
  position:relative;
  /* !important needed: the theme's own style.css has a blanket
     `section{padding:100px 0px !important}` rule that applies to every
     <section> tag sitewide (this one included) and otherwise wins over any
     non-important rule here regardless of specificity. */
  padding:96px 0 80px !important;
  overflow:hidden;
  background:
    radial-gradient(circle at 90% 2%, rgba(123,173,221,.24), transparent 45%),
    var(--white);
}
.awards-page .hero::before{
  content:'';
  position:absolute;inset:0;z-index:0;
  /* small-scale, low-contrast plus texture, per Brand Guide "The Plus: Usage
     Guidelines" — never a standalone icon, and it must fade out behind copy/UI. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M15 8h2v6h6v2h-6v6h-2v-6H9v-2h6z' fill='%23e1e7ef'/%3E%3C/svg%3E");
  background-size:32px 32px;
  opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 640px 420px at 30% 40%, transparent 60%, black 100%);
  mask-image:radial-gradient(ellipse 640px 420px at 30% 40%, transparent 60%, black 100%);
}
.awards-page .hero .wrap{position:relative;z-index:1;}
.awards-page .hero-inner{max-width:760px;}
/* Pre-Title/Mini-Heading: Bold, all-caps, single line, 8–40% tracking */
.awards-page .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--navy);margin-bottom:24px;
}
.awards-page .eyebrow::before{content:'';width:24px;height:4px;background:var(--blue-light);display:inline-block;}
/* Heading 1: Semi-Bold, 100% line height, -2% tracking at this size */
.awards-page .hero h1{
  font-size:clamp(36px,6vw,72px);letter-spacing:-1.4px;
  margin-bottom:28px;
}
/* Subhead: Light, 120% line height, sized 8–10 steps (32–40px) below the paired H1 */
.awards-page .hero .lede{
  font-size:clamp(24px,3vw,36px);font-weight:300;color:var(--navy);letter-spacing:0;line-height:1.2;
  max-width:680px;margin-bottom:40px;
}
.awards-page .hero .lede p{margin:0 0 12px;}
.awards-page .hero .lede p:last-child{margin-bottom:0;}

.awards-page .stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media (min-width:820px){ .awards-page .stat-row{grid-template-columns:repeat(4,1fr);} }
.awards-page .stat-card{
  background:linear-gradient(181deg,var(--grey-20) 0%,var(--grey-10) 100%);
  border-radius:24px;padding:28px 24px;
  position:relative;overflow:hidden;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease, transform .5s ease, box-shadow .2s ease;
}
.awards-page .stat-card.in-view{opacity:1;transform:translateY(0);}
.awards-page .stat-card:hover{box-shadow:var(--shadow-m);}
.awards-page .stat-icon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.awards-page .stat-icon svg{width:20px;height:20px;}
.awards-page .stat-icon.red{background:var(--red-tint);color:var(--red);}
.awards-page .stat-icon.navy{background:rgba(50,63,80,.10);color:var(--navy);}
.awards-page .stat-card .num{display:block;font-size:32px;font-weight:700;color:var(--black);letter-spacing:-.5px;} /* Special Emphasis (Bold+): key statistics */
.awards-page .stat-card .label{display:block;font-size:16px;color:var(--grey-70);margin-top:8px;line-height:1.4;}

/* ===== JUMP NAV ===== */
.awards-page .jumpnav{position:sticky;top:0;z-index:30;border-top:1px solid var(--grey-30);border-bottom:1px solid var(--grey-30);background:rgba(255,255,255,.92);backdrop-filter:blur(6px);}
/* padding-top/bottom only (not the shorthand) so this still inherits the
   base .wrap rule's left/right padding above — keeps the jump-nav's links
   aligned with the hero and award-grid content instead of reverting to its
   own fixed, unscaled horizontal inset. */
.awards-page .jumpnav .wrap{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:16px;padding-bottom:16px;}
.awards-page .jumpnav .label{font-size:12px;font-weight:600;color:var(--grey-70);text-transform:uppercase;letter-spacing:.5px;margin-right:8px;}
.awards-page .jumpnav a{
  font-size:12px;font-weight:500;padding:8px 16px;border-radius:8px;
  background:var(--grey-10);color:var(--navy);border:1px solid transparent;
  transition:all .15s ease;
}
.awards-page .jumpnav a:hover{border-color:var(--red);color:var(--red);background:var(--red-tint);}
.awards-page .jumpnav a.active{background:var(--red);color:var(--white);}

/* ===== MAIN CONTENT ===== */
/* padding-top only (not the shorthand) — this element also carries the
   .wrap class, which sets the horizontal padding. The shorthand form used
   to set padding-left/right:0 here too, silently overriding .wrap's
   horizontal inset (same specificity, later in the cascade = wins outright)
   and dragging the year headings + award grid flush to the edge. */
.awards-page .awards-main{padding-top:64px;position:relative;}
.awards-page .intro{max-width:760px;color:var(--grey-70);font-size:16px;font-weight:400;line-height:1.6;margin:0 0 64px;}
.awards-page .intro p{margin:0;}
.awards-page .intro strong{color:var(--navy);font-weight:500;}

/* padding:0 !important reclaims this from the theme's blanket
   `section{padding:100px 0px !important}` rule (style.css) — .year-block
   is a <section>, so without this it silently gets 100px of padding
   stacked on top AND bottom of every year group, on top of margin-bottom
   below. That's the real source of the oversized gap between years. */
.awards-page .year-block{margin-bottom:24px;padding:0 !important;}
.awards-page .year-heading{display:flex;align-items:center;gap:24px;margin-bottom:16px;}
.awards-page .year-heading h2{
  font-size:clamp(32px,4vw,40px);letter-spacing:-1px;white-space:nowrap;
  position:relative;padding-bottom:16px;
}
.awards-page .year-heading h2::after{
  content:'';position:absolute;left:0;bottom:0;width:48px;height:4px;background:var(--red);
}
.awards-page .year-heading .rule{flex:1;height:1px;background:linear-gradient(to right, var(--grey-30), transparent);}

.awards-page .award-grid{display:grid;gap:24px;}
@media (min-width:860px){ .awards-page .award-grid{grid-template-columns:repeat(2,1fr);} }
.awards-page .award-grid.single{grid-template-columns:1fr;}

.awards-page .award{
  border:1px solid var(--grey-30);
  border-left:4px solid var(--grey-40);
  border-radius:24px;
  padding:32px 32px 32px 28px;
  background:var(--white);
  position:relative;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease, transform .5s ease, box-shadow .2s ease, border-color .2s ease;
}
.awards-page .award.in-view{opacity:1;transform:translateY(0);}
.awards-page .award.in-view:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--grey-40);}
.awards-page .award.wide{grid-column:1/-1;}

.awards-page .award:has(.badge.winner){border-left-color:var(--red);}
.awards-page .award.in-view:has(.badge.winner):hover{box-shadow:0 20px 34px rgba(241,87,74,.20);}
.awards-page .award:has(.badge.shortlisted){border-left-color:var(--blue-light);}
.awards-page .award.in-view:has(.badge.shortlisted):hover{box-shadow:0 20px 34px rgba(123,173,221,.30);}
.awards-page .award:has(.badge.finalist){border-left-color:var(--grey-60);}
.awards-page .award:has(.badge.recognition){border-left-color:var(--grey-50);}

.awards-page .award.featured{
  background:linear-gradient(135deg, rgba(123,173,221,.12), var(--white) 55%);
  border-left-width:8px;
  overflow:hidden;
}
.awards-page .award.featured::after{
  content:'';position:absolute;right:-48px;top:-48px;width:240px;height:240px;
  background:radial-gradient(circle, rgba(241,87,74,.14), transparent 70%);
  pointer-events:none;
}
.awards-page .award.featured h3{font-size:28px;position:relative;}

/* Badges: "Orange"/red is explicitly permitted for callouts + key data points,
   so status flags like Winner are on-brand; radius follows the guide's small-UI
   tag scale (4/8/12px) rather than a full pill. */
.awards-page .badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:8px 12px;border-radius:8px;margin-bottom:16px;
  position:relative;z-index:1;
}
.awards-page .badge::before{
  content:'';width:12px;height:12px;flex-shrink:0;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
}
.awards-page .badge.winner{background:var(--red-tint);color:var(--red);}
.awards-page .badge.winner::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4h10v3a5 5 0 0 1-4 4.9V15h2a2 2 0 0 1 2 2v1H7v-1a2 2 0 0 1 2-2h2v-3.1A5 5 0 0 1 7 7V4zM4 5h3v2a3 3 0 0 1-3-3zm17 0a3 3 0 0 1-3 3V5h3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4h10v3a5 5 0 0 1-4 4.9V15h2a2 2 0 0 1 2 2v1H7v-1a2 2 0 0 1 2-2h2v-3.1A5 5 0 0 1 7 7V4zM4 5h3v2a3 3 0 0 1-3-3zm17 0a3 3 0 0 1-3 3V5h3z'/%3E%3C/svg%3E");}
.awards-page .badge.finalist{background:var(--grey-20);color:var(--navy);border:1px solid var(--grey-40);}
.awards-page .badge.finalist::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h2v18H6zM8 5h11l-2.5 3.5L19 12H8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h2v18H6zM8 5h11l-2.5 3.5L19 12H8z'/%3E%3C/svg%3E");}
.awards-page .badge.shortlisted{background:var(--blue-tint);color:var(--nav-link);}
.awards-page .badge.shortlisted::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.7 7-6.3-3.9L5.7 21l1.7-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.7 7-6.3-3.9L5.7 21l1.7-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E");}
.awards-page .badge.recognition{background:var(--grey-20);color:var(--grey-70);}
.awards-page .badge.recognition::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 1.5 3-.3 1 2.8 2.6 1.6-.9 2.9.9 2.9-2.6 1.6-1 2.8-3-.3L12 22l-2.6-1.5-3 .3-1-2.8-2.6-1.6.9-2.9-.9-2.9 2.6-1.6 1-2.8 3 .3zm-1.2 12.6 5-5-1.4-1.4-3.6 3.6-1.4-1.4-1.4 1.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 1.5 3-.3 1 2.8 2.6 1.6-.9 2.9.9 2.9-2.6 1.6-1 2.8-3-.3L12 22l-2.6-1.5-3 .3-1-2.8-2.6-1.6.9-2.9-.9-2.9 2.6-1.6 1-2.8 3 .3zm-1.2 12.6 5-5-1.4-1.4-3.6 3.6-1.4-1.4-1.4 1.4z'/%3E%3C/svg%3E");}

.awards-page .award h3{font-size:24px;margin-bottom:8px;position:relative;z-index:1;} /* inherits Semi-Bold / 100% / 0% tracking from h1,h2,h3 */
.awards-page .award .meta{font-size:12px;font-weight:400;color:var(--grey-70);margin:0 0 16px;position:relative;z-index:1;}
.awards-page .award .meta .dot{margin:0 8px;}
.awards-page .award p.desc{margin:0;color:var(--navy);font-weight:400;font-size:16px;line-height:1.6;letter-spacing:0;position:relative;z-index:1;}
.awards-page .award p.desc + p.desc{margin-top:12px;}

/* ===== CTA ===== */
.awards-page .cta{
  position:relative;overflow:hidden;
  background:var(--black);
  /* !important for the same reason as .hero above — style.css's blanket
     section{padding:100px 0px !important} rule otherwise wins here too. */
  padding:96px 0 !important;
  text-align:center;
  margin-top:32px;
}
.awards-page .cta::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 50% -10%, rgba(123,173,221,.22), transparent 55%);
  pointer-events:none;
}
.awards-page .cta::after{
  /* small-scale, low-contrast plus texture — fades away directly behind the CTA copy */
  content:'';position:absolute;inset:0;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M15 8h2v6h6v2h-6v6h-2v-6H9v-2h6z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size:32px 32px;
  opacity:.05;
  -webkit-mask-image:radial-gradient(ellipse 420px 260px at 50% 45%, transparent 60%, black 100%);
  mask-image:radial-gradient(ellipse 420px 260px at 50% 45%, transparent 60%, black 100%);
}
.awards-page .cta-inner{position:relative;z-index:1;max-width:640px;margin:0 auto;}
.awards-page .cta h2{font-size:clamp(32px,4vw,48px);letter-spacing:-1px;color:var(--white);margin-bottom:16px;}
.awards-page .cta p{color:var(--grey-40);font-weight:400;font-size:20px;line-height:1.6;margin:0 auto 36px;max-width:520px;}

/* ===== BACK TO TOP ===== */
.awards-page .to-top{
  position:fixed;right:24px;bottom:24px;z-index:50;
  width:48px;height:48px;border-radius:50%;
  background:var(--navy);color:#fff;border:none;
  font-size:18px;cursor:pointer;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .15s ease, background .15s ease;
  box-shadow:0 10px 24px rgba(50,63,80,.3);
}
.awards-page .to-top:hover{background:var(--red);transform:translateY(-3px);box-shadow:0 10px 24px rgba(241,87,74,.4);}
.awards-page .to-top.visible{opacity:1;pointer-events:auto;}

@media (max-width:640px){
  .awards-page .hero{padding:64px 0 48px !important;}
  .awards-page .awards-main{padding-top:48px;}
  .awards-page .year-heading h2{font-size:28px;letter-spacing:0;} /* at/below ~32px, tracking returns to 0% */
  .awards-page .jumpnav{position:static;}
}

@media (prefers-reduced-motion:reduce){
  .awards-page .award, .awards-page .stat-card{transition:none;opacity:1;transform:none;}
}