/* =========================================================
   SERVICES + SERVICE DETAIL PAGES
   Builds on about.css so every inner page looks the same
   ========================================================= */

/* hero buttons */
.sv-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.sv-hero-actions .ab-btn,.sv-work-text .ab-btn{display:inline-flex;align-items:center;gap:16px;padding:18px 28px}

/* ---------- Overview: service cards ---------- */
.sv-list{padding:130px 0}
.sv-list-head{margin-bottom:70px}
.sv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 32px}
.sv-card{display:block;color:inherit}
.sv-card figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:#f7f2ea}
.sv-card img{width:100%;height:114% !important;position:relative;top:-7%;object-fit:cover;transition:transform .9s var(--ease)}
.sv-card:hover img{transform:scale(1.06)}
.sv-card-body{padding-top:24px;border-top:0}
.sv-card-no{display:block;font-size:var(--t-label);font-weight:500;letter-spacing:.18em;color:#c6a75e;margin-bottom:12px}
.page-services main .sv-card h3{color:var(--blue);margin:0 0 10px;font-size:var(--t-h3)}
.page-services main .sv-card p{font-size:var(--t-small) !important;color:#111111;margin:0 0 10px}
.page-services main .sv-card .sv-card-tag{color:var(--ink);font-weight:500 !important}
.sv-card-link{display:inline-flex;gap:12px;align-items:center;margin-top:10px;font-size:var(--t-label);font-weight:600;letter-spacing:.18em;color:var(--blue);padding-bottom:6px;border-bottom:1px solid var(--blue)}
.sv-card-link b{font-weight:400;transition:transform .35s var(--ease)}
.sv-card:hover .sv-card-link b{transform:translateX(6px)}

/* ---------- Detail: numbered "what we do" items ---------- */
.sv-what .ab-what-grid{border-top:0;padding-top:0}
.sv-what{padding-top:130px}
.sv-num{display:block;font-size:var(--t-label);font-weight:500;letter-spacing:.18em;color:#c6a75e;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}

/* ---------- Detail: why (blue) ---------- */
.sv-why{padding:130px 0}
.sv-why-head{max-width:760px;margin-bottom:70px}
.page-services main .sv-why h2{color:#fff}
.page-services .sv-why .eyebrow{color:rgba(255,255,255,.62) !important;opacity:1}
.sv-why-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.22);border-left:1px solid rgba(255,255,255,.22)}
.sv-why-grid article{padding:40px 34px 44px;border-right:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22);transition:background .35s var(--ease)}
.sv-why-grid article:hover{background:rgba(255,255,255,.05)}
.sv-why-grid span{display:block;font-size:var(--t-label);font-weight:500;letter-spacing:.18em;color:#c6a75e;margin-bottom:40px}
.page-services main .sv-why-grid h3{color:#fff;margin:0 0 12px}
.page-services main .sv-why-grid p{color:rgba(255,255,255,.72) !important;font-size:var(--t-small) !important;margin:0}

/* ---------- Selected work ---------- */
.sv-work{padding:130px 0;border-top:1px solid var(--line)}
.sv-work-head{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:end;margin-bottom:60px}
.page-services main .sv-work-head h2{margin:0 !important}
.page-services main .sv-work-text p{color:#111111;margin:0 0 26px !important}
.sv-work-strip{display:grid;grid-template-columns:1.2fr .8fr 1fr .8fr 1.2fr;gap:14px;align-items:end}
.sv-work-strip figure{margin:0;overflow:hidden;background:#f7f2ea}
.sv-work-strip figure:nth-child(odd){aspect-ratio:3/4}
.sv-work-strip figure:nth-child(even){aspect-ratio:3/5}
.sv-work-strip img{width:100%;height:114% !important;position:relative;top:-7%;object-fit:cover}

/* ---------- FAQ ---------- */
.sv-faq{padding:130px 0;border-top:1px solid var(--line)}
.sv-faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:7vw;align-items:start}
.sv-faq-lead{position:sticky;top:120px}
.page-services main .sv-faq-lead p:not(.eyebrow){color:#111111}
.sv-faq-lead a{color:var(--blue);font-weight:600;border-bottom:1px solid currentColor}
.page-services main .sv-faq .why-plus-title{font-size:clamp(17px,1.25vw,20px) !important;color:var(--blue)}
.sv-faq .why-plus-answer p{padding-left:68px}

/* ---------- Other services ---------- */
.sv-more{padding:0 0 110px}
.sv-more-links{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(31,42,68,.3)}
.sv-more-links a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:26px 18px 26px 0;border-bottom:1px solid rgba(31,42,68,.3);color:var(--blue);font-weight:600;font-size:var(--t-body);transition:padding .4s var(--ease),color .3s}
.sv-more-links a b{font-weight:400;transition:transform .35s var(--ease)}
.sv-more-links a:hover{padding-left:10px;color:#c6a75e}
.sv-more-links a:hover b{transform:translate(3px,-3px)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .sv-cards{grid-template-columns:1fr 1fr}
  .sv-why-grid{grid-template-columns:1fr 1fr}
  .sv-more-links{grid-template-columns:1fr 1fr 1fr}
  .sv-faq-grid{grid-template-columns:1fr;gap:40px}
  .sv-faq-lead{position:static}
}
@media (max-width:760px){
  .sv-list,.sv-why,.sv-work,.sv-faq{padding:80px 0}
  .sv-list-head{margin-bottom:44px}
  .sv-cards{grid-template-columns:1fr;gap:48px}
  .sv-why-head{margin-bottom:44px}
  .sv-why-grid{grid-template-columns:1fr}
  .sv-why-grid article{padding:30px 22px}
  .sv-why-grid span{margin-bottom:22px}
  .sv-work-head{grid-template-columns:1fr;gap:20px;margin-bottom:40px}
  .sv-work-strip{grid-template-columns:1fr 1fr}
  .sv-work-strip figure:nth-child(5){display:none}
  .sv-faq .why-plus-answer p{padding-left:52px}
  .sv-more{padding-bottom:80px}
  .sv-more-links{grid-template-columns:1fr}
  .sv-hero-actions .ab-btn{width:100%;justify-content:space-between}
}
@media (max-width:760px){.sv-what{padding-top:80px}}

/* =========================================================
   V26 — tidier sections, header dropdown
   ========================================================= */
/* one calmer heading size for every section on every page */
:root{--t-h2:clamp(34px,3.5vw,56px)}
@media(max-width:760px){:root{--t-h2:32px}}

/* ---- What we do: header row + 4-column grid ---- */
.sv-what .ab-what-grid{grid-template-columns:1fr;gap:64px}
.sv-what .ab-what-lead{display:grid;grid-template-columns:1fr 1fr;column-gap:7vw;align-items:end}
.sv-what .ab-what-lead .eyebrow{grid-column:1}
.page-services main .sv-what .ab-what-lead h2{grid-column:1;margin:0 !important}
.page-services main .sv-what .ab-what-lead>p:not(.eyebrow){grid-column:2;grid-row:2;margin:0 !important;max-width:520px}
.sv-what .ab-what-items{grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.sv-what .ab-what-items>*{padding:34px 28px 38px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .35s var(--ease)}
.sv-what .ab-what-items article:hover{background:#f7f2ea}
.sv-what .sv-num{border-bottom:0;padding-bottom:0;margin-bottom:34px}
.page-services main .sv-what .ab-what-items p{font-size:var(--t-small) !important}
.sv-what-cta{display:flex;flex-direction:column;background:var(--blue);color:#fff;transition:background .35s var(--ease)}
.sv-what-cta:hover{background:#161e31}
.sv-what-cta .sv-num{color:#c6a75e}
.page-services main .sv-what-cta h3{color:#fff !important}
.page-services main .sv-what-cta p{color:rgba(255,255,255,.72) !important}
.sv-what-cta b{margin-top:auto;padding-top:24px;font-size:var(--t-label);font-weight:600;letter-spacing:.18em;display:flex;gap:10px}
.sv-what-cta b i{font-style:normal;transition:transform .35s var(--ease)}
.sv-what-cta:hover b i{transform:translate(3px,-3px)}

/* ---- Selected work: balanced header + even image row ---- */
.sv-work-head{grid-template-columns:1.1fr .9fr;align-items:end}
.page-services main .sv-work-head h2{max-width:640px}
.sv-work-strip{grid-template-columns:repeat(5,1fr);gap:14px;align-items:stretch}
.sv-work-strip figure,.sv-work-strip figure:nth-child(odd),.sv-work-strip figure:nth-child(even){aspect-ratio:3/4}
.sv-work-strip figure:nth-child(even){transform:translateY(40px)}
.sv-work{padding-bottom:170px}

/* ---- Other services: boxed links ---- */
.sv-more-links{grid-template-columns:repeat(5,1fr);gap:12px;border-top:0}
.sv-more-links a{justify-content:space-between;padding:22px 22px;border:1px solid rgba(31,42,68,.22);border-radius:0;background:#fbf8f3;font-size:var(--t-small);gap:14px}
.sv-more-links a b{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(31,42,68,.25);font-size:13px}
.sv-more-links a:hover{padding-left:22px;background:var(--blue);color:#fff;border-color:var(--blue)}
.sv-more-links a:hover b{border-color:rgba(255,255,255,.5);transform:rotate(45deg)}
.sv-more .eyebrow{margin-bottom:22px !important}

@media (max-width:1100px){
  .sv-what .ab-what-items{grid-template-columns:repeat(2,1fr)}
  .sv-more-links{grid-template-columns:repeat(3,1fr)}
  .sv-work-strip{grid-template-columns:repeat(3,1fr)}
  .sv-work-strip figure:nth-child(n+4){display:none}
}
@media (max-width:760px){
  .sv-what .ab-what-lead{grid-template-columns:1fr;row-gap:18px}
  .page-services main .sv-what .ab-what-lead>p:not(.eyebrow){grid-column:1;grid-row:auto}
  .sv-what .ab-what-items{grid-template-columns:1fr}
  .sv-what .ab-what-items>*{padding:26px 20px 28px}
  .sv-what .sv-num{margin-bottom:16px}
  .sv-work-head{grid-template-columns:1fr}
  .sv-work-strip{grid-template-columns:1fr 1fr}
  .sv-work-strip figure:nth-child(n+3){display:none}
  .sv-work-strip figure:nth-child(even){transform:translateY(24px)}
  .sv-work{padding-bottom:110px}
  .sv-more-links{grid-template-columns:1fr}
}

/* V105: show entire Red Velvet packaging without clipping or scroll zoom */
.page-services .graphic-pouch-full{background:#f3e4d5 !important;}
.page-services .graphic-pouch-full img{width:100% !important;height:100% !important;top:0 !important;left:0 !important;object-fit:contain !important;object-position:center center !important;transform:none !important;}