/* ===== Service page (Figma 4932:3945 "02 service page") =====
   Flowing layout, desktop sizes in calc(100vw*px/1920) to match the scaled
   homepage sections. Sticky TOC + scroll-spy per comments #4/#5. */

/* solid white header on this page (no transparent-over-hero) */
.hdr.hdr--solid { background:#fff; box-shadow:0 2px 18px rgba(0,0,0,.07); }

.svc {
  background:#fff;
  padding-top: calc(100vw * 150 / 1920);   /* clear fixed header */
  direction: rtl;
}
.svc__wrap { width: calc(100vw * 1300 / 1920); margin:0 auto; padding: calc(100vw*30/1920) 0 calc(100vw*70/1920); }

/* breadcrumb */
.svc__crumb { display:flex; align-items:center; gap:8px; font-size:calc(100vw*17/1920); color:#8a8a8a; }
.svc__crumb a { display:flex; align-items:center; gap:6px; color:#8a8a8a; }
.svc__crumb-home { width:calc(100vw*15/1920); height:calc(100vw*15/1920); display:block; filter: grayscale(1) opacity(.6); }
.svc__crumb-cur { color:#161616; }

/* H1 */
.svc__h1 { font-size: calc(100vw*48/1920); font-weight:700; color:#0d2c21; text-align:right; margin: calc(100vw*16/1920) 0 calc(100vw*28/1920); }

/* two columns: main(right) + sidebar(left) */
.svc__cols { display:flex; align-items:stretch; gap: calc(100vw*81/1920); }
.svc__side { position:relative; }   /* tall column so the sticky TOC floats through the whole article */
.svc__main { flex:1 1 auto; min-width:0; }
.svc__side { flex:0 0 calc(100vw*332/1920); }

/* ---------- MAIN ---------- */
.svc__banner { width:100%; height: calc(100vw*398/1920); object-fit:cover; border-radius:10px; display:block; }
.svc__intro { font-size: calc(100vw*21/1920); line-height: calc(100vw*32/1920); color:#1a1a1a; text-align:right; margin: calc(100vw*30/1920) 0; }

.svc__sec { margin-top: calc(100vw*44/1920); scroll-margin-top: calc(100vw*170/1920); }

/* form submit buttons — arrow moves up-left on hover (#2,#9) */
.svc__inlineform-btn .circ img, .svc__sideform-btn .circ img { transition: transform .25s ease; }
.svc__inlineform-btn:hover .circ img, .svc__sideform-btn:hover .circ img { transform: translate(-4px,-4px); }
.svc__inlineform-btn, .svc__sideform-btn { transition: filter .2s ease; }
.svc__inlineform-btn:hover, .svc__sideform-btn:hover { filter: brightness(1.06); }
.acard__t, .svc__articles .acard { } /* article cards already lift on hover */
.svc__h2 {
  font-size: calc(100vw*34/1920); font-weight:700; color:#0d2c21; text-align:right;
  padding-bottom: calc(100vw*14/1920); margin-bottom: calc(100vw*20/1920); position:relative;
}
.svc__h2::after { content:""; position:absolute; right:0; bottom:0; width:100%; height:1px; background:#e2e2e2; }
.svc__sec p { font-size: calc(100vw*20/1920); line-height: calc(100vw*32/1920); color:#1a1a1a; text-align:right; margin-bottom: calc(100vw*16/1920); }
.svc__sub { font-weight:700; color:#0d2c21; }
/* marker / highlight text style (#3 "marker effect — admin can add anywhere") */
.svc-mark { background: linear-gradient(transparent 10%, rgba(229,195,139,.55) 10%); padding:0 2px; color:inherit; }

/* recommended articles (#7) */
.svc__articles { display:grid; grid-template-columns:repeat(4,1fr); gap: calc(100vw*22/1920); margin: calc(100vw*40/1920) 0; }
.acard { display:block; border-radius:10px; overflow:hidden; box-shadow:0 4px 18px rgba(7,28,55,.08); background:#fff; transition: transform .25s ease, box-shadow .25s ease; }
.acard:hover { transform: translateY(-4px); box-shadow:0 10px 26px rgba(7,28,55,.14); }
.acard img { width:100%; height: calc(100vw*147/1920); object-fit:cover; display:block; }
.acard__t { display:flex; align-items:center; min-height: calc(100vw*82/1920); background:var(--green-900); color:#fff; font-size:calc(100vw*17/1920); font-weight:600; line-height:1.3; text-align:right; padding: calc(100vw*14/1920) calc(100vw*16/1920); }

/* mid-page form banner (#8) — Figma 4941:5521 */
.svc__formbox { background:var(--green-900); border-radius:4px; padding: calc(100vw*22/1920) calc(100vw*30/1920); margin: calc(100vw*40/1920) 0;
  display:flex; align-items:center; gap: calc(100vw*28/1920); }
.svc__formbox-doc { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap: calc(100vw*6/1920); }
.svc__formbox-av { width: calc(100vw*92/1920); height: calc(100vw*92/1920); border-radius:50%; object-fit:cover; }
.svc__formbox-name { color:#fff; font-weight:700; font-size:calc(100vw*18/1920); line-height:1.15; text-align:center; }
.svc__formbox-body { flex:1 1 auto; display:flex; flex-direction:column; gap: calc(100vw*6/1920); }
.svc__formbox-t { color:#fff; font-size:calc(100vw*28/1920); font-weight:600; text-align:right; text-shadow:0 2px 0 rgba(0,0,0,.1); }
.svc__formbox-s { color:#fff; font-size:calc(100vw*20/1920); text-align:right; }
.svc__inlineform { display:flex; align-items:center; gap: calc(100vw*14/1920); margin-top: calc(100vw*8/1920); }
.svc__inlineform .field-wrap { flex:1 1 0; }
.svc__inlineform input { width:100%; height: calc(100vw*52/1920); border:0; border-bottom:1px solid #6b6b6b; border-radius:0; background:#193f32; padding:0 16px; font:inherit; font-size:calc(100vw*20/1920); color:#fff; }
.svc__inlineform input::placeholder { color:#fff; opacity:1; }
.svc__inlineform-btn, .svc__sideform-btn {
  display:flex; align-items:center; gap:10px; direction:ltr; height: calc(100vw*52/1920); padding:0 calc(100vw*22/1920) 0 6px;
  background:var(--gold); color:var(--green-900); border:0; border-radius:900px; font-weight:700; font-size:calc(100vw*17/1920); white-space:nowrap;
}
.svc__inlineform-btn .circ, .svc__sideform-btn .circ { width: calc(100vw*42/1920); height: calc(100vw*42/1920); border-radius:50%; border:1px solid rgba(13,44,33,.4); display:flex; align-items:center; justify-content:center; }
.svc__inlineform-btn .circ img, .svc__sideform-btn .circ img { width: calc(100vw*22/1920); height:auto; filter:brightness(0); }

/* reviews (#10 testimonials shortcode, #11 arrow gold hover) */
.svc__rev-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: calc(100vw*36/1920); }
.svc__rev-title { font-size: calc(100vw*40/1920); font-weight:600; color:#000; text-align:right; }
.svc__rev-brand { display:block; width: calc(100vw*210/1920); height:auto; }
.svc__reviews { position:relative; display:flex; align-items:stretch; gap:calc(100vw*18/1920); }
.svc__rev-track { display:grid; grid-template-columns:repeat(3,1fr); gap: calc(100vw*28/1920); flex:1; }
.svc__rev { background:#fff; box-shadow:0 6px 26px rgba(0,0,0,.08); min-height: calc(100vw*430/1920); padding: calc(100vw*40/1920) calc(100vw*34/1920); display:flex; flex-direction:column; align-items:flex-start; gap: calc(100vw*20/1920); }
.svc__rev-top { display:flex; direction:ltr; justify-content:space-between; align-items:flex-start; align-self:stretch; }
.svc__rev-quote { width: calc(100vw*30/1920); height:auto; }
.svc__rev-g { width: calc(100vw*34/1920); height:auto; }
.svc__rev-stars { display:flex; gap: calc(100vw*6/1920); }
.svc__rev-stars img { width: calc(100vw*25/1920); height:auto; }
.svc__rev-tx { font-size: calc(100vw*19/1920); line-height: calc(100vw*30/1920); color:#161616; text-align:right; }
.svc__rev-name { font-weight:700; color:#161616; font-size:calc(100vw*21/1920); text-align:right; margin-top:auto; }
.svc__rev-arrow { flex:0 0 auto; align-self:center; width: calc(100vw*62/1920); height: calc(100vw*62/1920); border-radius:50%; border:1px solid #ddd; background:#fff; display:flex; align-items:center; justify-content:center; transition:border-color .2s, box-shadow .2s; }
.svc__rev-arrow img { height:30%; width:auto; }
.svc__rev-arrow:hover { border-color:#e5c38b; box-shadow:0 0 0 2px rgba(229,195,139,.3); }

/* author box (#12) */
/* about section (Figma 5261:3741) — distinct heading treatment */
.svc__about-title { font-size: calc(100vw*38/1920); font-weight:600; color:#000; text-align:right; padding-top: calc(100vw*26/1920); border-top:1px solid #d9d9d9; }
.svc__about-sub { position:relative; font-size: calc(100vw*26/1920); font-weight:600; color:#000; text-align:right; margin-top: calc(100vw*18/1920); padding-bottom: calc(100vw*18/1920); }
.svc__about-sub::after { content:""; position:absolute; right:0; bottom:0; width:73%; height:1px; background:#d9d9d9; }
.svc__about-body { font-size: calc(100vw*22/1920); line-height: calc(100vw*32/1920); color:#151515; text-align:right; margin-top: calc(100vw*18/1920); }

.svc__author { margin-top: calc(100vw*48/1920); }
.svc__author-title { font-size: calc(100vw*21/1920); font-weight:700; color:#000; text-align:right; padding-bottom: calc(100vw*14/1920); border-bottom:1px solid #d9d9d9; margin-bottom: calc(100vw*24/1920); }
/* avatar on the RIGHT (RTL: first child goes right — do NOT reverse) */
.svc__author-row { display:flex; gap: calc(100vw*24/1920); align-items:flex-start; }
.svc__author-av { flex:0 0 calc(100vw*130/1920); width: calc(100vw*130/1920); height: calc(100vw*130/1920); border-radius:50%; object-fit:cover; border:1px solid #e0d8c6; }
.svc__author-name { color:#000; font-size:calc(100vw*28/1920); font-weight:400; margin-bottom: calc(100vw*10/1920); text-align:right; }
.svc__author-name b { font-weight:600; }
.svc__author-bio { font-size: calc(100vw*20/1920); line-height: calc(100vw*32/1920); color:#151515; text-align:right; }
.svc__author-more { display:inline-flex; align-items:center; gap: calc(100vw*5/1920); color:#000; font-weight:700; white-space:nowrap; vertical-align:bottom; }
.svc__author-more span { border-bottom:1px solid #000; padding-bottom:2px; }
.svc__author-more img { height: calc(100vw*16/1920); width:auto; }

/* ---------- SIDEBAR (Figma: WHITE card, only inner box is green) ---------- */
.svc__cta { background:#fff; border:1px solid #e8e8e8; border-radius:12px; box-shadow:0 8px 28px rgba(7,28,55,.07);
  padding: calc(100vw*28/1920) calc(100vw*24/1920) calc(100vw*26/1920); text-align:center; }
.svc__cta-av { width: calc(100vw*92/1920); height: calc(100vw*92/1920); border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 0 0 1px var(--gold-light); margin:0 auto; }
.svc__cta-name { color:#0d2c21; font-size: calc(100vw*22/1920); font-weight:700; margin: calc(100vw*12/1920) 0 calc(100vw*16/1920); line-height:1.3; }
.svc__cta-name span { display:block; font-size: calc(100vw*16/1920); font-weight:400; color:#8a8a8a; margin-top:3px; }
.svc__cta-box { background:var(--green-900); border-radius:8px; padding: calc(100vw*16/1920) calc(100vw*18/1920); margin-bottom: calc(100vw*14/1920); }
.svc__cta-box-t { color:#fff; font-size: calc(100vw*17/1920); font-weight:700; line-height:1.5; text-align:center; }
.svc__cta-sub { color:#444; font-size: calc(100vw*15/1920); margin-bottom: calc(100vw*16/1920); }
.svc__sideform { display:flex; flex-direction:column; gap: calc(100vw*12/1920); }
.svc__sideform input { width:100%; height: calc(100vw*52/1920); border:0; border-radius:6px; background:var(--cream); padding:0 14px; font:inherit; font-size:calc(100vw*16/1920); color:#161616; }
.svc__sideform-btn { justify-content:center; width:100%; }

/* floating / sticky TOC (#4) + reading indicator (#5) */
.svc__toc { margin-top: calc(100vw*24/1920); background:#fff; border:1px solid #ececec; border-radius:8px;
  box-shadow:0 8px 28px rgba(7,28,55,.06); padding: calc(100vw*18/1920) calc(100vw*22/1920) calc(100vw*20/1920);
  position:sticky; top: calc(100vw*150/1920 + 16px); }
.svc__toc-head { display:flex; align-items:center; justify-content:space-between; }
.svc__toc-title { font-size: calc(100vw*22/1920); font-weight:700; color:#0d2c21; }
.svc__toc-chev { width:calc(100vw*11/1920); height:calc(100vw*11/1920); border-right:2px solid #b58d41; border-bottom:2px solid #b58d41; transform:rotate(45deg); }
.svc__toc-rule { display:block; height:1px; background:#e2e2e2; margin: calc(100vw*14/1920) 0 0; }
.svc__toc-list { counter-reset:toc; list-style:none; margin-top: calc(100vw*14/1920); }
.svc__toc-list li { counter-increment:toc; position:relative; padding-right: calc(100vw*26/1920); margin-bottom: calc(100vw*13/1920);
  font-size: calc(100vw*18/1920); line-height:1.4; text-align:right; transition:color .2s, font-weight .2s; }
.svc__toc-list li::before { content: counter(toc) "."; position:absolute; right:0; color:#b58d41; font-weight:700; }
.svc__toc-list li a { color:#333; }
.svc__toc-list li:hover, .svc__toc-list li.is-reading { color:var(--gold-deep); }
.svc__toc-list li.is-reading { font-weight:700; }
.svc__toc-list li.is-reading a { color:var(--gold-deep); }

/* ============ MOBILE (Figma 4984:11297) ============ */
@media (max-width: 1024px) {
  .svc { padding-top: 72px; }
  .svc__wrap { width:auto; padding: 18px 16px 30px; }
  .svc__crumb { font-size:13px; }
  .svc__h1 { font-size:26px; margin:10px 0 18px; }
  /* interleave both columns into one flow: banner → TOC → intro → content.
     display:contents promotes children so individual order works. */
  .svc__cols { flex-direction:column; gap:0; }
  .svc__main, .svc__side { display:contents; }
  .svc__crumb { order:-2; }
  .svc__h1 { order:-1; }
  .svc__banner { order:1; }
  .svc__toc { order:2; }
  .svc__intro { order:3; }
  .svc__sec, .svc__articles, .svc__formbox { order:4; }
  .svc__cta { display:none; }   /* dark-green sidebar card hidden on mobile (mid-page form covers it) */

  .svc__banner { height:200px; margin-bottom:20px; }
  .svc__intro { font-size:16px; line-height:1.6; margin:18px 0; }
  .svc__sec { margin-top:28px; }
  .svc__h2 { font-size:22px; padding-bottom:10px; margin-bottom:14px; }
  .svc__sec p { font-size:16px; line-height:1.65; }

  .svc__articles { grid-template-columns:repeat(2,1fr); gap:12px; margin:24px 0; }
  .acard img { height:115px; }
  .acard__t { font-size:14px; min-height:64px; padding:10px 12px; }

  .svc__formbox { flex-direction:column; align-items:stretch; padding:20px; gap:16px; border-radius:8px; }
  .svc__formbox-doc { flex-direction:row; justify-content:flex-start; align-items:center; gap:12px; }
  .svc__formbox-av { width:62px; height:62px; }
  .svc__formbox-name { font-size:16px; text-align:right; }
  .svc__formbox-t { font-size:20px; }
  .svc__formbox-s { font-size:16px; }
  .svc__inlineform { flex-direction:column; align-items:stretch; margin-top:0; }
  .svc__inlineform .field-wrap { flex:none; width:100%; }
  .svc__inlineform input, .svc__sideform input { height:50px; font-size:16px; }
  .svc__inlineform-btn, .svc__sideform-btn { height:52px; justify-content:center; font-size:16px; }
  .svc__inlineform-btn .circ, .svc__sideform-btn .circ { width:40px; height:40px; }
  .svc__inlineform-btn .circ img, .svc__sideform-btn .circ img { width:20px; }

  .svc__rev-head { margin-bottom:18px; gap:10px; }
  .svc__rev-title { font-size:22px; }
  .svc__rev-brand { width:100px; }
  .svc__reviews { gap:6px; }
  .svc__rev-track { grid-template-columns:1fr; }
  .svc__rev-track .svc__rev:nth-child(n+2) { display:none; }    /* one card on mobile */
  .svc__rev { padding:22px 20px; gap:12px; }
  .svc__rev-stars img { width:20px; }
  .svc__rev-g { width:26px; }
  .svc__rev-quote { width:22px; }
  .svc__rev-tx { font-size:16px; line-height:1.6; }
  .svc__rev-name { font-size:18px; }
  .svc__rev-arrow { width:44px; height:44px; }

  .svc__about-title { font-size:25px; padding-top:18px; }
  .svc__about-sub { font-size:18px; padding-bottom:12px; }
  .svc__about-sub::after { width:100%; }
  .svc__about-body { font-size:16px; line-height:1.65; }
  .svc__author-row { gap:14px; }
  .svc__author-av { flex-basis:84px; width:84px; height:84px; }
  .svc__author-title { font-size:20px; }
  .svc__author-name { font-size:20px; }
  .svc__author-bio { font-size:16px; line-height:1.6; }

  /* sidebar card */
  .svc__cta { padding:24px 18px; margin-bottom:18px; }
  .svc__cta-av { width:82px; height:82px; }
  .svc__cta-name { font-size:20px; }
  .svc__cta-name span { font-size:15px; }
  .svc__cta-box-t { font-size:16px; }
  .svc__sideform input { height:50px; }

  /* TOC collapsible, not sticky on mobile */
  .svc__toc { position:static; margin:0 0 22px; padding:0; overflow:hidden; cursor:pointer; }
  .svc__toc-head { padding:16px 18px; }
  .svc__toc-title { font-size:18px; }
  .svc__toc-chev { transform:rotate(45deg); transition:transform .25s; }
  .svc__toc.open .svc__toc-chev { transform:rotate(225deg); }
  .svc__toc-rule { display:none; }
  .svc__toc-list { max-height:0; overflow:hidden; transition:max-height .3s ease; margin:0; padding:0 18px; }
  .svc__toc.open .svc__toc-head { border-bottom:1px solid #ececec; }
  .svc__toc.open .svc__toc-list { max-height:400px; padding:14px 18px 18px; }
  .svc__toc-list li { font-size:16px; }
}