/* ===========================================================
   Merged scoped styles for the About/Services/Our Work/Contact
   views. Each block is copied verbatim from the original page's
   inline <style> tag and is scoped by its own class prefix
   (.services-hero / .work-hero / .contact-hero / .cx-*, etc.) so
   nothing here overrides shared styles from style.css.
   =========================================================== */

/* ---------------- SERVICES VIEW ---------------- */
  /* ===========================================================
     SERVICES PAGE — scoped styles only (no shared classes touched)
     =========================================================== */

  /* ---------- Premium hero: image background, matches home cinematic-hero system ---------- */
  .services-hero{
    position:relative;
    padding:0;
    min-height:78vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:var(--ink-2);
    isolation:isolate;
    border-bottom:none;
  }
  .services-hero-media{position:absolute;inset:0;z-index:0;}
  .services-hero-media img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    object-position:center 30%;
  }
  .services-hero-overlay{
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(6,8,10,.5) 0%, rgba(6,8,10,.48) 55%, rgba(6,8,10,.5) 100%);
  }
  .services-hero .container{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:150px 24px 110px;
  }
  .services-hero .eyebrow{margin-bottom:22px;justify-content:center;}
  .services-hero h1{
    max-width:820px;
    font-size:clamp(1.75rem,4.4vw,3.4rem);
    color:var(--paper);
    font-weight:800;
    letter-spacing:-0.025em;
    line-height:1.1;
    text-shadow:0 4px 26px rgba(0,0,0,.4);
  }
  .services-hero-subtitle{
    max-width:620px;
    margin-top:20px;
    font-size:1.08rem;
    line-height:1.6;
    color:#E9E6DC;
    text-shadow:0 2px 16px rgba(0,0,0,.35);
  }
  .services-hero-actions{margin-top:38px;}

  @media (max-width:960px){
    .services-hero{min-height:70vh;}
    .services-hero .container{padding:130px 24px 80px;}
  }
  @media (max-width:640px){
    .services-hero{min-height:64vh;}
    .services-hero .container{padding:110px 20px 64px;}
  }

  /* ---------- Every Capability section: white background (scoped to this page only) ---------- */
  #digital-marketing{background:var(--paper);}
  #digital-marketing .section-head p,
  #digital-marketing .industries-subtitle{color:var(--ink-soft);}
  #digital-marketing h2,
  #digital-marketing .industry-body h3{color:var(--ink);}
  #digital-marketing .industry-body p{color:var(--ink-soft);}
  #digital-marketing .eyebrow-light{color:var(--gold-700);}
  #digital-marketing .eyebrow-light::before{background:var(--gold-500);}
  #digital-marketing .industry-card{
    background:var(--paper-warm);
    border:1px solid var(--line);
  }
  #digital-marketing .industry-card:hover{
    background:var(--paper-deep);
    border-color:var(--gold-500);
  }

  /* ---------- Grouped capability sections (Digital Marketing / UKG WFM Integration) ---------- */
  .capability-group{margin-bottom:60px;}
  .capability-group:last-child{margin-bottom:0;}
  .capability-group-head{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-bottom:30px;
    max-width:740px;
  }
  .capability-group-num{
    flex-shrink:0;
    font-family:'Open Sans',sans-serif;
    font-size:0.78rem;
    font-weight:800;
    letter-spacing:.06em;
    color:var(--gold-700);
    border:1.5px solid var(--gold-500);
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    margin-top:2px;
  }
  .capability-group-head h3{
    color:var(--ink);
    font-size:1.45rem;
    font-weight:800;
    letter-spacing:-0.01em;
    margin-bottom:8px;
  }
  .capability-group-head p{
    color:var(--ink-soft);
    font-size:0.98rem;
    line-height:1.6;
    margin:0;
  }
  @media (max-width:640px){
    .capability-group-head{flex-direction:column;gap:10px;}
  }

/* ---------------- OUR WORK VIEW ---------------- */
  /* ===========================================================
     OUR WORK PAGE — scoped styles only (no shared classes touched)
     Hero markup/classes mirror .services-hero exactly for parity.
     =========================================================== */

  /* ---------- Premium hero: image background, matches services-hero system ---------- */
  .work-hero{
    position:relative;
    padding:0;
    min-height:78vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:var(--ink-2);
    isolation:isolate;
    border-bottom:none;
  }
  .work-hero-media{position:absolute;inset:0;z-index:0;}
  .work-hero-media img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    object-position:center 30%;
  }
  .work-hero-overlay{
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(6,8,10,.5) 0%, rgba(6,8,10,.48) 55%, rgba(6,8,10,.5) 100%);
  }
  .work-hero .container{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:150px 24px 110px;
  }
  .work-hero .eyebrow{margin-bottom:22px;justify-content:center;}
  .work-hero h1{
    max-width:820px;
    font-size:clamp(1.75rem,4.4vw,3.4rem);
    color:var(--paper);
    font-weight:800;
    letter-spacing:-0.025em;
    line-height:1.1;
    text-shadow:0 4px 26px rgba(0,0,0,.4);
  }
  .work-hero-subtitle{
    max-width:620px;
    margin-top:20px;
    font-size:1.08rem;
    line-height:1.6;
    color:#E9E6DC;
    text-shadow:0 2px 16px rgba(0,0,0,.35);
  }

  @media (max-width:960px){
    .work-hero{min-height:70vh;}
    .work-hero .container{padding:130px 24px 80px;}
  }
  @media (max-width:640px){
    .work-hero{min-height:64vh;}
    .work-hero .container{padding:110px 20px 64px;}
  }

  /* ---------- Brands We've Worked With section (scoped to this page only) ---------- */
  #brands-worked-with{background:var(--paper);padding:96px 0 108px;}
  #brands-worked-with .section-head{
    justify-content:center;text-align:center;margin-bottom:44px;
  }
  #brands-worked-with .section-head > div{width:100%;}
  #brands-worked-with .eyebrow{justify-content:center;}
  #brands-worked-with h2{color:var(--ink);}
  #brands-worked-with .brands-intro{
    max-width:700px;margin:0 auto;color:var(--ink-soft);
    font-size:1.02rem;line-height:1.75;
  }

  /* ---------- Premium portfolio cards ---------- */
  .portfolio-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    margin-top:56px;
  }

  .portfolio-card{
    position:relative;
    display:flex;
    flex-direction:column;
    padding:36px 34px 32px;
    background:rgba(253,253,252,.62);
    border:1px solid var(--line);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%);
    box-shadow:var(--shadow-sm);
    transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
  }
  .portfolio-card::before{
    content:"";
    position:absolute;top:0;left:0;right:0;height:3px;
    background:var(--gold-gradient);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .5s var(--ease);
  }
  .portfolio-card:hover{
    transform:translateY(-8px);
    background:rgba(253,253,252,.88);
    border-color:var(--gold-300);
    box-shadow:0 30px 60px -24px rgba(163,108,16,.32), var(--shadow-md);
  }
  .portfolio-card:hover::before{transform:scaleX(1);}

  .portfolio-header{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:22px;
  }
  .portfolio-logo-frame{
    flex:none;
    display:flex;align-items:center;justify-content:center;
    width:84px;height:84px;
    background:var(--paper);
    border:1px solid var(--line);
    clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
    transition:border-color .35s var(--ease);
  }
  .portfolio-logo-frame img{
    max-width:74%;
    max-height:56px;
    width:auto;height:auto;
    object-fit:contain;
    display:block;
  }
  .portfolio-heading{min-width:0;}
  .portfolio-name{
    color:var(--ink);
    font-size:1.14rem;
    line-height:1.3;
    margin:0 0 4px;
  }
  .portfolio-industry{
    color:var(--gold-700);
    font-weight:600;
    font-size:.8rem;
    letter-spacing:.03em;
    text-transform:uppercase;
  }

  .portfolio-services{
    display:flex;flex-wrap:wrap;gap:8px;
    margin-bottom:24px;
  }
  .service-pill{
    display:inline-flex;align-items:center;
    padding:6px 14px;
    background:var(--paper-warm);
    border:1px solid var(--line);
    color:var(--ink-soft);
    font-size:.76rem;
    font-weight:600;
    letter-spacing:.01em;
    border-radius:100px;
  }

  .portfolio-details{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin:0 0 8px;
    padding-top:20px;
    border-top:1px solid var(--line);
  }
  .portfolio-block dt{
    color:var(--ink);
    font-weight:700;
    font-size:.82rem;
    letter-spacing:.02em;
    margin-bottom:5px;
  }
  .portfolio-block dd{
    margin:0;
    color:var(--ink-soft);
    font-size:.9rem;
    line-height:1.6;
  }

  .portfolio-link{
    display:inline-flex;align-items:center;gap:7px;
    margin-top:22px;
    color:var(--gold-700);
    font-weight:700;
    font-size:.88rem;
    letter-spacing:.01em;
    transition:gap .3s var(--ease), color .3s var(--ease);
  }
  .portfolio-link svg{transition:transform .3s var(--ease);}
  .portfolio-link:hover{color:var(--gold-600);gap:11px;}
  .portfolio-link:hover svg{transform:translateX(2px);}

  .portfolio-stat{
    padding:12px 16px;
    margin-bottom:4px;
    background:linear-gradient(135deg, rgba(199,165,93,.08), rgba(199,165,93,.04));
    border-left:3px solid var(--gold-700);
    border-radius:0 6px 6px 0;
    color:var(--ink);
    font-weight:700;
    font-size:.88rem;
    letter-spacing:.01em;
    line-height:1.4;
  }

  @media (max-width:960px){
    .portfolio-grid{grid-template-columns:repeat(2, 1fr);gap:24px;}
  }
  @media (min-width:601px) and (max-width:960px){
    .portfolio-grid .portfolio-card:nth-child(3):last-child{
      grid-column:1 / -1;
      max-width:540px;
      justify-self:center;
      width:100%;
    }
  }
  @media (max-width:600px){
    .portfolio-grid{grid-template-columns:1fr;gap:20px;}
    #brands-worked-with{padding:72px 0 84px;}
    .portfolio-card{padding:28px 22px 26px;}
    .portfolio-header{gap:14px;}
    .portfolio-logo-frame{width:68px;height:68px;}
  }
  @media (max-width:480px){
    .portfolio-card{padding:24px 18px 22px;}
    .portfolio-header{gap:12px;}
    .portfolio-logo-frame{width:64px;height:64px;}
  }
  @media (max-width:320px){
    .portfolio-card{padding:20px 14px 18px;}
    .portfolio-logo-frame{width:56px;height:56px;}
  }

/* ---------------- CONTACT VIEW ---------------- */
  /* ===========================================================
     CONTACT PAGE — scoped styles only (no shared classes touched)
     Hero markup/classes mirror .services-hero exactly for parity.
     =========================================================== */

  /* ---------- Premium hero: image background, matches services-hero system ---------- */
  .contact-hero{
    position:relative;
    padding:0;
    min-height:78vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:var(--ink-2);
    isolation:isolate;
    border-bottom:none;
  }
  .contact-hero-media{position:absolute;inset:0;z-index:0;}
  .contact-hero-media img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    object-position:center 30%;
  }
  .contact-hero-overlay{
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(6,8,10,.5) 0%, rgba(6,8,10,.48) 55%, rgba(6,8,10,.5) 100%);
  }
  .contact-hero .container{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:150px 24px 110px;
  }
  .contact-hero .eyebrow{margin-bottom:22px;justify-content:center;}
  .contact-hero h1{
    max-width:820px;
    font-size:clamp(1.75rem,4.4vw,3.4rem);
    color:var(--paper);
    font-weight:800;
    letter-spacing:-0.025em;
    line-height:1.1;
    text-shadow:0 4px 26px rgba(0,0,0,.4);
  }
  .contact-hero-subtitle{
    max-width:620px;
    margin-top:20px;
    font-size:1.08rem;
    line-height:1.6;
    color:#E9E6DC;
    text-shadow:0 2px 16px rgba(0,0,0,.35);
  }

  @media (max-width:960px){
    .contact-hero{min-height:70vh;}
    .contact-hero .container{padding:130px 24px 80px;}
  }
  @media (max-width:640px){
    .contact-hero{min-height:64vh;}
    .contact-hero .container{padding:110px 20px 64px;}
  }

  /* ===========================================================
     PREMIUM CONTACT SECTION — scoped "cx-" classes only
     =========================================================== */
  .cx-section{
    position:relative;
    overflow:hidden;
    background:var(--paper-warm);
    padding:120px 0 100px;
  }
  .cx-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    z-index:0;
    pointer-events:none;
  }
  .cx-glow-a{width:420px;height:420px;top:-160px;right:-120px;background:radial-gradient(circle, rgba(239,191,80,.28) 0%, rgba(239,191,80,0) 70%);}
  .cx-glow-b{width:380px;height:380px;bottom:-140px;left:-140px;background:radial-gradient(circle, rgba(20,20,20,.06) 0%, rgba(20,20,20,0) 70%);}

  .cx-head{
    position:relative;
    z-index:1;
    text-align:center;
    max-width:640px;
    margin:0 auto 64px;
  }
  .cx-head .eyebrow{justify-content:center;margin-bottom:18px;}
  .cx-head p{margin-top:16px;font-size:1.05rem;}

  .cx-layout{
    position:relative;
    z-index:1;
    display:block;
  }

  .cx-form-card{
    width:100%;
    max-width:920px;
    margin:0 auto;
    background:var(--paper);
    border:1px solid rgba(20,20,20,.08);
    border-radius:24px;
    padding:48px;
    box-shadow:0 30px 70px rgba(20,20,20,.08);
    position:relative;
    overflow:hidden;
  }
  .cx-form-card::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background:var(--gold-gradient);
  }
  .cx-form-hero{
    display:block;
    padding:0 0 28px;
    margin-bottom:28px;
    border-bottom:1px solid rgba(20,20,20,.08);
  }
  .cx-intro-copy h2{margin:8px 0 10px; font-size:clamp(2rem,2.6vw,2.4rem);}
  .cx-intro-copy p{margin:0;max-width:680px;font-size:1.02rem;line-height:1.8;color:var(--ink-soft);}
  .cx-intro-highlights{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .cx-highlight-pill{
    padding:14px 16px;
    border:1px solid rgba(20,20,20,.08);
    border-radius:14px;
    background:var(--paper-warm);
  }
  .cx-highlight-pill span{
    display:block;
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--gold-700);
    margin-bottom:5px;
  }
  .cx-highlight-pill strong{
    font-size:0.95rem;
    color:var(--ink);
    line-height:1.45;
  }

  .cx-form-head{margin-bottom:36px;}
  .cx-form-head h2{margin-bottom:10px;}
  .cx-form-head p{font-size:0.98rem;}

  .cx-availability{
    background:var(--ink);
    border-radius:var(--radius-lg);
    padding:28px 26px;
    color:var(--paper);
    position:relative;
    overflow:hidden;
  }
  .cx-availability::before{
    content:"";
    position:absolute;inset:0;
    background:var(--gold-gradient);
    opacity:.08;
  }
  .cx-availability-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
    position:relative;
  }
  .cx-pulse-dot{
    width:9px;height:9px;border-radius:50%;
    background:var(--gold-300);
    box-shadow:0 0 0 0 rgba(239,191,80,.6);
    animation:cxPulse 2.2s infinite;
    flex-shrink:0;
  }
  @keyframes cxPulse{
    0%{box-shadow:0 0 0 0 rgba(239,191,80,.55);}
    70%{box-shadow:0 0 0 9px rgba(239,191,80,0);}
    100%{box-shadow:0 0 0 0 rgba(239,191,80,0);}
  }
  .cx-availability-row span{
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.09em;
    font-weight:700;
    color:var(--gold-200);
    position:relative;
  }
  .cx-availability p{
    color:#D8D5C9;
    font-size:0.92rem;
    line-height:1.65;
    position:relative;
    margin:0;
  }

  /* ---------- Form card ---------- */
  .cx-form-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:52px;
    box-shadow:var(--shadow-lg);
    position:relative;
    overflow:hidden;
  }
  .cx-form-card::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:5px;
    background:var(--gold-gradient);
  }
  .cx-form-head{margin-bottom:36px;}
  .cx-form-head h2{margin-bottom:10px;}
  .cx-form-head p{font-size:0.98rem;}

  .cx-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:22px;
    margin-bottom:30px;
  }
  .cx-field{display:flex;flex-direction:column;gap:8px;}
  .cx-field.cx-full{grid-column:1 / -1;}
  .cx-field label{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
  }
  .cx-field input,
  .cx-field textarea,
  .cx-field select{
    width:100%;
    min-height:64px;
    padding:20px 22px;
    font-size:1rem;
    color:var(--ink);
    background:var(--paper-warm);
    border:1px solid rgba(20,20,20,.12);
    border-radius:18px;
    transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  }
  .cx-field textarea{min-height:220px;}
  .cx-field select{appearance:none;}
  .cx-field input::placeholder,
  .cx-field textarea::placeholder,
  .cx-field select::placeholder{color:var(--gray-400);}  
  .cx-field input:focus,
  .cx-field textarea:focus,
  .cx-field select:focus{
    outline:none;
    border-color:var(--gold-400);
    background:var(--paper);
    box-shadow:0 0 0 4px rgba(239,191,80,.12);
  }
  .cx-field input::placeholder,
  .cx-field textarea::placeholder{color:var(--gray-400);}
  .cx-field input:focus,
  .cx-field textarea:focus{
    outline:none;
    border-color:var(--gold-400);
    background:var(--paper);
    box-shadow:0 0 0 4px rgba(239,191,80,.16);
  }
  .cx-field textarea{resize:vertical;min-height:150px;line-height:1.6;}

  .cx-submit{
    width:100%;
    justify-content:center;
    margin-top:6px;
  }
  .cx-submit svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .35s var(--ease);}
  .cx-submit:hover svg{transform:translate(3px,-2px);}
  .cx-submit:disabled{opacity:.65;cursor:not-allowed;transform:none !important;}

  .cx-note{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.82rem;
    color:var(--gray-500);
    margin-top:18px;
  }
  .cx-note svg{width:15px;height:15px;stroke:var(--gold-600);fill:none;stroke-width:2;flex-shrink:0;}

  #form-status{
    display:none;
    margin-top:20px;
    padding:14px 18px;
    border-radius:12px;
    font-size:0.9rem;
    border:1px solid var(--line);
    background:var(--paper-warm);
    color:var(--ink-soft);
  }
  #form-status.show{display:block;animation:cxFadeIn .4s var(--ease);}
  #form-status.success{border-color:var(--gold-400);color:var(--gold-700);background:var(--gold-100);}
  @keyframes cxFadeIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}

  @media (max-width:960px){
    .cx-layout{grid-template-columns:1fr;}
    .cx-sidebar{position:static;flex-direction:row;flex-wrap:wrap;}
    .cx-sidebar .cx-info-card{flex:1 1 240px;}
    .cx-sidebar .cx-availability{flex:1 1 100%;}
    .cx-form-card{padding:40px 28px;}
  }
  @media (max-width:640px){
    .cx-section{padding:80px 0 64px;}
    .cx-grid{grid-template-columns:1fr;gap:20px;}
    .cx-form-card{padding:28px 20px;border-radius:16px;}
    .cx-sidebar{flex-direction:column;}
  }
  @media (max-width:480px){
    .cx-form-card{padding:22px 16px;}
    .cx-field input,
    .cx-field textarea,
    .cx-field select{min-height:52px;padding:14px 16px;font-size:0.95rem;border-radius:14px;}
    .cx-field textarea{min-height:130px;}
  }

/* ---------------- SPA ROUTER VIEW SWITCHING ---------------- */
.view{display:none;}
.view.is-active{display:block;}