/* Manara Studio — service pages (/web-design/, /id/jasa-pembuatan-website/,
   /ar/web-design/). Loaded after styles.css, which gives the tokens, the
   header, the hero (frame, seal, stickers), the cards and their skylines, the
   buttons, "Say hi" and the footer.

   The page speaks the homepage's grammar (2026-10-05, his pick): a hero with
   the display headline and its marker phrase, then one full-screen card per
   chapter in the brand's colours, each climbing in behind its skyline. What
   this file adds is the chapters: their grounds, their type (a big question
   to open each one, then readable answers), the price table, the step tiles,
   the work screenshots and the questions list. Every word stays on the page,
   visible: the questions and their two-sentence answers are the SEO. */

/* ─── the hero: the homepage's, with a longer headline ─────────────────── */
.svc-hero .display{font-size:clamp(2.4rem,5.6vw,5.2rem);}
.svc-hero .display em{font-size:.66em;}
.svc-hero .lead{max-width:44ch;}
.svc-hero .reach{margin-block-start:.25rem;}
.svc-hero .lead a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em;text-decoration-color:var(--marigold);}
.svc .reach__wa,.svc-hero .reach__wa{background:var(--cream);}

/* ─── the chapters' grounds (the homepage's own pairs) ─────────────────── */
.card--g-cream{--bg:var(--cream);--fg:var(--ink);--soft:var(--soft-on-cream);--accent:var(--forest);--focus:var(--ink);}
.card--g-forest{--bg:var(--forest);--fg:var(--cream);--soft:var(--soft-on-forest);--accent:var(--marigold);--focus:var(--marigold);}
.card--g-tomato{--bg:var(--tomato);--fg:var(--ink);--soft:var(--ink);--accent:var(--ink);--focus:var(--ink);--lamp:var(--cream);}
.card--g-marigold{--bg:var(--marigold);--fg:var(--ink);--soft:var(--soft-on-marigold);--accent:var(--ink);--focus:var(--ink);--lamp:var(--cream);}
.card--g-ink{--bg:var(--ink);--fg:var(--cream);--soft:var(--soft-on-ink);--accent:var(--tomato);--focus:var(--tomato);--lamp:var(--tomato);}

.svc-ch{justify-content:flex-start;}
/* room at the bottom for the next card's skyline, as on the homepage */
.js .svc-ch{padding-block-end:calc(clamp(4.5rem,10vh,6rem) + var(--crest-lead) * .8);}

/* ─── type ─────────────────────────────────────────────────────────────── */
.svc{position:relative;max-width:1100px;}
.svc > p,.svc > .svc__h2{max-width:46rem;}
.svc__h2{
  margin:clamp(2.6rem,6vh,3.6rem) 0 1rem;
  font:600 clamp(1.4rem,2.4vw,1.95rem)/1.15 var(--font-display);letter-spacing:-.02em;
  text-wrap:balance;
  scroll-margin-top:calc(var(--header-h) + 1.25rem);
}
/* each chapter opens on its big question */
.svc__h2--lead{
  margin-block-start:0;max-width:21ch !important;
  font-size:clamp(2rem,4.6vw,3.9rem);line-height:1.02;letter-spacing:-.03em;
}
.svc p{margin:0 0 1.1rem;font-size:clamp(1.02rem,1.2vw,1.12rem);line-height:1.65;}
/* the answer straight under each question is the part people (and AI
   answers) lift, so it reads a touch firmer than the detail after it */
.svc__h2 + p{font-weight:500;}
.svc__h2--lead + p{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.55;}
/* links: the ground's own text colour, underlined in its accent — readable
   on all five grounds */
.svc a:not(.btn){
  color:var(--fg);font-weight:600;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em;
  text-decoration-color:var(--accent);
}
.svc a:not(.btn):hover{text-decoration-thickness:3px;}

/* stickers: in the chapter's empty corner, only where there is a corner to
   spare beside the reading column */
@media (max-width:74.99rem){.svc-ch .sticker{display:none;}}
/* sized to the corner the 46rem column leaves free (at least 360px) */
.svc-ch .sticker--diamond{width:clamp(150px,13vw,190px);}
.svc-ch .sticker--pass{width:clamp(200px,17vw,250px);}
.svc-ch .sticker--search{width:clamp(220px,19vw,280px);}

/* ─── the price table (tomato chapter) ─────────────────────────────────── */
.svc__table{
  margin:2rem 0 1.75rem;
  background:var(--cream);color:var(--ink);border:var(--edge);border-radius:var(--r-sm);box-shadow:var(--pop-lg);
  overflow:hidden;
}
.svc__table table{width:100%;border-collapse:collapse;font-size:.97rem;line-height:1.45;}
.svc__table thead th{
  padding:.85rem 1rem;text-align:start;
  background:var(--ink);color:var(--cream);
  font:600 .7rem/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
}
.svc__table tbody th,.svc__table td{padding:1rem;text-align:start;vertical-align:top;border-top:1px solid rgba(22,24,26,.16);}
.svc__table tbody th{font:700 1.1rem/1.3 var(--font-display);white-space:nowrap;}
.svc__table td:nth-child(2){white-space:nowrap;font-weight:600;}   /* "Rp 12 juta" stays one line */
/* a phone or a narrow tablet: each package becomes a small card of
   label · value lines, so nothing scrolls sideways */
@media (max-width:47.99rem){
  .svc__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  .svc__table table,.svc__table tbody,.svc__table tr,.svc__table th,.svc__table td{display:block;}
  .svc__table tr{padding:1rem 1.1rem;border-top:var(--edge);}
  .svc__table tr:first-child{border-top:0;}
  .svc__table tbody th{padding:0 0 .5rem;border:0;font-size:1.25rem;white-space:normal;}
  .svc__table td{display:grid;grid-template-columns:6.6rem minmax(0,1fr);gap:.75rem;padding:.25rem 0;border:0;}
  .svc__table td::before{
    content:attr(data-label);
    color:var(--soft-on-cream);font:600 .66rem/1.7 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  }
}

/* ─── the steps (marigold chapter): five tiles, big numbers ────────────── */
.svc__steps{
  list-style:none;counter-reset:step;margin:2rem 0 1rem;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11.5rem),1fr));gap:1rem;
}
.svc__steps li{
  counter-increment:step;
  padding:1.2rem 1.15rem 1.35rem;
  background:var(--cream);color:var(--ink);border:var(--edge);border-radius:var(--r-sm);box-shadow:var(--pop);
  font-size:clamp(1rem,1.15vw,1.06rem);font-weight:500;line-height:1.45;
}
.svc__steps li::before{
  content:counter(step,decimal-leading-zero);
  display:block;margin-block-end:.7rem;
  color:var(--tomato);font:700 clamp(2.4rem,4vw,3.3rem)/1 var(--font-display);letter-spacing:-.04em;
}

/* ─── the work (ink chapter): the screenshots, large ───────────────────── */
.svc__figs{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;margin:2rem 0 2.25rem;}
@media (min-width:40rem){.svc__figs{grid-template-columns:repeat(2,minmax(0,1fr));}}
.svc__shot{
  display:block;width:100%;height:auto;
  background:var(--ink);border:var(--edge);border-radius:var(--r-sm);box-shadow:var(--pop);
}
.card--g-ink .svc__shot{border-color:var(--cream);box-shadow:7px 7px 0 var(--tomato);}

/* ─── the questions (cream chapter): ruled, one after another ──────────── */
.card--g-cream .svc__h2:not(.svc__h2--lead){border-block-start:2px solid var(--ink);padding-block-start:1.5rem;margin-block-start:2.75rem;}

/* ─── the language links (buttons on the other pages) ──────────────────── */
.langs a{
  padding:.5rem .8rem;border-radius:var(--pill);
  color:var(--ink);text-decoration:none;font:600 .74rem/1 var(--font-mono);letter-spacing:.12em;
  transition:background .2s,color .2s;
}
.langs a:hover{background:rgba(22,24,26,.09);}
.langs a[aria-current="page"]{background:var(--ink);color:var(--cream);}
@media (max-width:47.99rem){.langs a{padding:.45rem .62rem;}}
@media (max-width:22.49rem){.langs a{padding-inline:.5rem;}}

/* ─── Arabic ─────────────────────────────────────────────────────────────
   Kufi for the questions, as for the homepage's headings: line-height up,
   no negative tracking (Kufi collapses under the Latin display settings).
   Mono labels switch to Noto Sans Arabic: JetBrains Mono has no Arabic. */
[lang="ar"] .svc__h2{font-family:var(--font-ar-display);letter-spacing:0;line-height:1.45;}
[lang="ar"] .svc__h2--lead{line-height:1.3;}
[lang="ar"] .svc p,[lang="ar"] .svc__steps li{line-height:1.85;}
[lang="ar"] .svc-ch .tag,[lang="ar"] .svc__table thead th,[lang="ar"] .svc__table td::before{font-family:var(--font-ar);letter-spacing:0;text-transform:none;}
[lang="ar"] .svc__table thead th,[lang="ar"] .svc__table td::before{font-size:.8rem;}
[lang="ar"] .svc__table tbody th{font-family:var(--font-display);}   /* Starter, Business, Booking stay Latin */
[lang="ar"] .svc__steps li::before{font-family:var(--font-display);}