/* =========================================================
     FORMAT FIX — BRAND COLOR SYSTEM
     Warm, editorial palette: cream backgrounds, near-black text,
     and a single confident orange accent. Use these tokens on
     every page — do not introduce new colors ad hoc.
     ========================================================= */
  :root{
    /* Backgrounds */
    --bg-cream:#faf6f2;      /* primary page background */
    --bg-band:#f2e6da;       /* alternating section band 1 */
    --bg-band-2:#eeded0;     /* alternating section band 2 (slightly deeper) */
    --white:#ffffff;

    /* Text */
    --text-dark:#181818;     /* headings — slightly deeper than before for stronger contrast */
    --text-body:#3f3f40;     /* body copy — darkened from #494a4b for WCAG AA on cream */
    --text-muted:#7a7a7a;    /* captions, meta text, timestamps */

    /* Primary (brand navy) — the dominant color: buttons, nav, links, icons */
    --primary:#1c2733;
    --primary-dark:#10161e;
    --primary-light:#3a4a5c;

    /* Accent (secondary — orange) — used sparingly for small highlights */
    --accent:#c9a13d;        /* warm gold — secondary accent, pairs with navy */
    --accent-dark:#a37f28;   /* hover / pressed state */
    --accent-light:#f3e6c8;  /* soft accent tint for backgrounds/badges */

    /* Borders / dividers */
    --border-light:#e6d9ca;

    /* Footer */
    --footer-dark:#181818;

    /* Type */
    --font-head:'Rubik', sans-serif;
    --font-body:'Roboto', sans-serif;

    /* Layout */
    --max-width:1140px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--text-body);
    background:var(--bg-cream);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  ul{margin:0;padding:0;}
  .container{max-width:var(--max-width);margin:0 auto;padding:0 24px;}

  h1,h2,h3{
    font-family:var(--font-head);
    font-weight:600;
    color:var(--text-dark);
    margin:0 0 20px;
    line-height:1.3;
  }
  h1{font-size:clamp(2rem, 4vw, 2.9rem); color:#fff;}
  h2{font-size:clamp(1.75rem, 3.2vw, 2.5rem);}
  h3{font-size:1.25rem; margin-bottom:10px;}
  p{margin:0 0 16px;}

  .eyebrow{
    display:block;
    color:var(--accent);
    font-weight:700;
    font-size:13px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin-bottom:12px;
  }

  /* ---------- Header ---------- */
  header.site-header{
    background:#fff;
    border-bottom:1px solid #f0f0f0;
    position:sticky;
    top:0;
    z-index:100;
  }
  .header-inner{
    max-width:var(--max-width);
    margin:0 auto;
    padding:16px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .brand{display:flex;align-items:center;gap:10px;}
  .brand img{height:40px;width:auto;}
  .brand .site-title{
    font-family:var(--font-head);
    font-weight:700;
    font-size:1.35rem;
    color:var(--text-dark);
    margin:0;
  }
  nav.main-nav > ul{display:flex;gap:32px;list-style:none;}
  nav.main-nav a{
    font-weight:500;
    font-size:15px;
    color:var(--text-dark);
    position:relative;
    transition:color .2s ease;
  }
  nav.main-nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:2px;
    background:var(--accent-dark);
    transition:width .25s ease;
  }
  nav.main-nav a:hover, nav.main-nav a.active-hover{color:var(--accent-dark);}
  nav.main-nav a:hover::after, nav.main-nav a.active-hover::after{width:100%;}

  /* Services dropdown — "Services" is a plain label, not a link */
  .has-dropdown{position:relative;}
  .dropdown-toggle{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-weight:500;
    font-size:15px;
    color:var(--text-dark);
    cursor:default;
    user-select:none;
  }
  .has-dropdown:hover .dropdown-toggle, .has-dropdown.dropdown-open .dropdown-toggle{color:var(--accent-dark);}
  .caret{
    display:inline-block;
    width:7px;height:7px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);
    transition:transform .2s ease;
  }
  .has-dropdown.dropdown-open .caret{transform:rotate(225deg);}
  .dropdown{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    min-width:260px;
    box-shadow:0 12px 30px rgba(0,0,0,0.12);
    border-radius:8px;
    padding:8px;
    gap:0;
    z-index:20;
  }
  /* Hover opens the dropdown on devices that support real hover (desktop/mouse) */
  @media (hover:hover) and (pointer:fine){
    .has-dropdown:hover .dropdown,
    .dropdown:focus-within{display:block;}
  }
  /* Tap opens it everywhere, including hover-capable devices, via JS toggling this class */
  .has-dropdown.dropdown-open .dropdown{display:block;}
  .dropdown li{border-bottom:none;}
  .dropdown a{
    display:block;
    padding:10px 14px;
    font-size:14px;
    color:var(--text-dark);
    border-radius:6px;
    white-space:nowrap;
  }
  .dropdown a::after{display:none;}
  .dropdown a:hover{background:var(--bg-cream); color:var(--accent-dark);}

  .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px; z-index:110;}
  .nav-toggle span{display:block;width:24px;height:2px;background:var(--text-dark);margin:5px 0; transition:transform .2s ease, opacity .2s ease;}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.is-open span:nth-child(2){opacity:0;}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  @media (max-width:960px){
    .nav-toggle{display:block;}
    nav.main-nav{
      display:block;
      position:fixed;
      top:73px;
      left:0;
      right:0;
      bottom:0;
      background:#fff;
      padding:24px;
      overflow-y:auto;
      transform:translateX(100%);
      transition:transform .25s ease;
      z-index:99;
    }
    nav.main-nav.is-open{transform:translateX(0);}
    nav.main-nav > ul{flex-direction:column; gap:0; width:100%;}
    nav.main-nav > ul > li{border-bottom:1px solid rgba(28,39,51,0.08);}
    nav.main-nav > ul > li > a{display:block; padding:16px 4px; font-size:16px;}
    nav.main-nav a::after{display:none;}
    .has-dropdown{position:static;}
    .dropdown-toggle{display:flex; justify-content:space-between; padding:16px 4px; font-size:16px; cursor:pointer;}
    .dropdown{
      display:none;
      position:static;
      box-shadow:none;
      border-radius:0;
      padding:0 0 8px 16px;
      min-width:0;
      background:transparent;
    }
    .has-dropdown.dropdown-open .dropdown{display:block;}
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    background:
      linear-gradient(120deg, rgba(16,22,30,0.88) 0%, rgba(28,39,51,0.78) 100%),
      url('assets/hero.jpg') center/cover no-repeat;
    padding:100px 0;
    min-height:640px;
    display:flex;
    align-items:center;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:64px;
    align-items:start;
    width:100%;
  }
  .enquiry-wrap{align-self:center;}
  @media (max-width:960px){
    .hero-grid{grid-template-columns:1fr; gap:40px;}
    .hero{min-height:auto; padding:60px 0 50px;}
  }
  @media (max-width:480px){
    .hero{padding:48px 0 40px;}
  }
  .hero-inner{max-width:none; align-self:center;}
  .hero-solo{max-width:760px;}
  .hero-solo .lead{max-width:none;}
  .hero-inner > p{
    color:#fff;
    font-size:1.15rem;
    font-weight:400;
    max-width:600px;
    margin-bottom:32px;
  }
  .btn-row{display:flex;gap:16px;flex-wrap:wrap;}
  .hero-trust{
    color:rgba(255,255,255,0.75);
    font-size:13px;
    margin-top:20px;
    margin-bottom:0;
    max-width:560px;
  }
  /*
    Button system — 4 variants. Base shape/spacing lives directly on each
    variant class (not a separate .btn class) so a button always renders
    correctly with a single class, e.g. class="btn-primary".
  */
  .btn-primary, .btn-light, .btn-outline{
    display:inline-block;
    padding:14px 28px;
    border-radius:4px;
    font-weight:700;
    font-size:15px;
    font-family:var(--font-body);
    text-decoration:none;
    transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
    cursor:pointer;
    border:2px solid transparent;
    line-height:1.2;
  }
  .btn-primary{background:var(--primary); color:#fff;}
  .btn-primary:hover{background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 6px 18px rgba(28,39,51,0.35);}

  .btn-light{background:#fff; color:var(--text-dark);}
  .btn-light:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.15);}

  /* Outline — secondary CTA that needs visible weight without full-fill */
  .btn-outline{background:transparent; border-color:currentColor; color:var(--primary);}
  .btn-outline:hover{background:var(--primary); color:#fff; transform:translateY(-2px);}

  /* A navy/dark button is invisible on a navy or hero background — swap to gold there */
  .section-navy .btn-primary,
  .hero-inner .btn-primary{background:var(--accent); color:var(--primary);}
  .section-navy .btn-primary:hover,
  .hero-inner .btn-primary:hover{background:var(--accent-dark); color:#fff;}
  .section-navy .btn-outline,
  .hero-inner .btn-outline{border-color:var(--accent); color:var(--accent);}
  .section-navy .btn-outline:hover,
  .hero-inner .btn-outline:hover{background:var(--accent); color:var(--primary);}
  .section-navy .btn-textlink,
  .hero-inner .btn-textlink{color:var(--accent); border-bottom-color:rgba(255,255,255,0.5);}
  .section-navy .btn-textlink:hover,
  .hero-inner .btn-textlink:hover{color:#fff;}

  /* ---------- Enquiry Form Card ---------- */
  .enquiry-wrap{
    width:100%;
  }
  .enquiry-card{
    background:var(--bg-cream);
    border-radius:8px;
    box-shadow:0 20px 50px rgba(0,0,0,0.25);
    padding:28px 32px;
    width:100%;
    max-width:420px;
    margin-left:auto;
  }
  @media (max-width:960px){
    .enquiry-card{max-width:520px; margin-left:0; margin-right:auto;}
  }
  @media (max-width:480px){
    .enquiry-card{padding:22px;}
  }
  .enquiry-card h2{font-size:1.5rem; margin-bottom:8px;}
  .enquiry-card > p{color:var(--text-body); font-size:14px; margin-bottom:20px;}
  .form-row{margin-bottom:12px;}
  .form-row label{
    display:block;
    font-size:13px;
    color:var(--text-body);
    margin-bottom:4px;
  }
  .form-row label .req{color:var(--accent);}
  .form-row input,
  .form-row textarea{
    width:100%;
    border:none;
    border-bottom:1px solid #d8cfc4;
    background:transparent;
    padding:8px 4px;
    font-family:var(--font-body);
    font-size:14px;
    color:var(--text-dark);
  }
  .form-row input:focus,
  .form-row textarea:focus{outline:none; border-bottom-color:var(--accent);}
  .form-row textarea{resize:vertical; min-height:60px;}

  /* ---------- Sections ---------- */
  section{padding:70px 0; position:relative;}
  .section-alt{background:var(--bg-band);}
  .section-alt-2{background:var(--bg-band-2);}
  .section-white{background:#fff;}
  .section-center{text-align:center;}

  /* Distinct per-block themed backgrounds so neighboring sections never
     share the same tone. Each block also gets a hairline top border to
     make the seam between blocks crisp rather than blended. */
  .section-cream{background:var(--bg-cream);}
  .section-tint-orange{background:var(--accent-light);}

  /* Client work & portfolio — text + image side by side, taller block */
  .section-portfolio{padding:110px 0;}
  .portfolio-grid{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    gap:56px;
    align-items:center;
  }
  .portfolio-text{min-width:0;}
  .portfolio-image{
    min-width:0;
    display:flex;
    gap:20px;
    align-items:center;
    justify-content:center;
  }
  .portfolio-image img{
    flex:1 1 0;
    min-width:0;
    width:100%;
    height:auto;
    max-height:420px;
    object-fit:contain;
    display:block;
    margin:0 auto;
    filter:drop-shadow(0 20px 40px rgba(0,0,0,0.18));
  }
  @media (max-width:900px){
    .section-portfolio{padding:70px 0;}
    .portfolio-grid{grid-template-columns:1fr; gap:32px;}
    .portfolio-image img{max-height:300px;}
  }
  @media (max-width:560px){
    .portfolio-image{flex-direction:column; gap:24px;}
  }
  .section-navy{background:#1c2733; color:#fff;}
  .section-navy h2, .section-navy h3, .section-navy .eyebrow{color:#fff;}
  .section-navy p, .section-navy li{color:#c9d2da;}
  .section-navy .card, .section-navy .faq-item{background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.12);}

  /* Gold closing-CTA variant — used instead of .section-navy specifically
     when a navy CTA would sit directly above the navy footer with no
     visible seam between them (e.g. a page's final section). */
  .section-cta-gold{background:linear-gradient(120deg, var(--accent) 0%, var(--accent-dark) 100%); color:#fff;}
  .section-cta-gold h2, .section-cta-gold h3, .section-cta-gold .eyebrow{color:#fff;}
  .section-cta-gold p, .section-cta-gold li{color:rgba(255,255,255,0.9);}
  .section-cta-gold .btn-light{color:var(--primary);}

  section[class*="section-"]{border-top:1px solid var(--border-light);}
  section.hero{border-top:none;}
  .section-navy{border-top:1px solid rgba(255,255,255,0.08);}
  .section-center h2, .section-center .eyebrow, .section-center p.lead{margin-left:auto;margin-right:auto;}
  .lead{font-size:1.1rem; max-width:760px;}

  /* Client logos — infinite left-scrolling marquee */
  .client-logos-marquee{
    margin-top:40px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .client-logos-track{
    display:flex;
    align-items:center;
    gap:64px;
    width:max-content;
    filter:grayscale(20%);
    opacity:0.85;
    animation:logo-scroll 28s linear infinite;
  }
  .client-logos-track img{
    height:48px;
    width:auto;
    object-fit:contain;
    flex-shrink:0;
  }
  .client-logos-marquee:hover .client-logos-track{
    animation-play-state:paused;
  }
  @keyframes logo-scroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  @media (prefers-reduced-motion: reduce){
    .client-logos-track{animation:none;}
  }

  /* Two-col text block */
  .two-col{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
  @media (max-width:760px){.two-col{grid-template-columns:1fr;}}

  /* Stats */
  .stats-row{display:flex; gap:60px; margin-top:32px; flex-wrap:wrap;}
  .stat{text-align:left;}
  .stat .num{font-family:var(--font-head); font-size:2.75rem; font-weight:700; color:var(--primary); line-height:1;}
  .stat .label{font-size:13px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-body); margin-top:6px;}

  /* Services list */
  .services-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:36px; margin-top:48px;}
  @media (max-width:760px){.services-grid{grid-template-columns:1fr;}}
  .service-item h3{color:var(--text-dark); font-size:1.15rem;}
  .service-item h3 a{color:inherit; text-decoration:none; border-bottom:2px solid transparent; transition:border-color 0.2s;}
  .service-item h3 a:hover{border-bottom-color:var(--accent);}
  .service-item p{font-size:15px; color:var(--text-body);}
  .service-item p a{font-weight:400; border-bottom:0;}
  .service-item p a:hover{color:var(--accent-dark);}

  /* Table */
  .table-wrap{overflow-x:auto; margin-top:24px;}
  table.numerals,
  table.pain-table,
  table.compare-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 2px 12px rgba(0,0,0,0.05);
  }
  table.numerals th, table.numerals td,
  table.pain-table th, table.pain-table td,
  table.compare-table th, table.compare-table td{
    padding:16px 20px;
    text-align:left;
    border-bottom:1px solid #eee2d6;
    font-size:15px;
    vertical-align:top;
  }
  table.numerals th,
  table.pain-table th,
  table.compare-table th{
    background:var(--primary);
    color:#fff;
    font-family:var(--font-head);
    font-weight:600;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.04em;
  }
  table.numerals tr:last-child td,
  table.pain-table tr:last-child td,
  table.compare-table tr:last-child td{border-bottom:none;}
  table.numerals .sample{font-size:20px; letter-spacing:2px;}
  table.compare-table td:first-child{font-weight:600; color:var(--text-dark); white-space:nowrap;}

  /* Check list — used for scannable feature/benefit lists */
  .check-list{list-style:none; margin:24px 0 0; padding:0; text-align:left; max-width:720px; margin-left:auto; margin-right:auto;}
  .check-list li{
    position:relative;
    padding:10px 0 10px 30px;
    font-size:16px;
    border-bottom:1px solid var(--border-light);
  }
  .check-list li:last-child{border-bottom:none;}
  .check-list li::before{
    content:"\2713";
    position:absolute;
    left:0;
    top:10px;
    color:var(--accent);
    font-weight:700;
  }

  /* Case studies */
  .case-study-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    margin-top:48px;
    text-align:left;
  }
  @media (max-width:960px){.case-study-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:640px){.case-study-grid{grid-template-columns:1fr;}}
  .case-study-card{
    background:#fff;
    border-radius:10px;
    padding:28px;
    box-shadow:0 4px 20px rgba(0,0,0,0.06);
    border-top:4px solid var(--primary);
  }
  .case-study-tag{
    display:inline-block;
    background:var(--accent-light);
    color:var(--accent-dark);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.03em;
    padding:5px 12px;
    border-radius:20px;
    margin-bottom:14px;
  }
  .case-study-card h3{font-size:1.15rem; margin-bottom:16px;}
  .case-study-card .case-label{
    font-family:var(--font-head);
    font-weight:700;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--primary);
    margin:18px 0 6px;
  }
  .case-study-card p{font-size:14px; margin-bottom:0;}
  .case-study-card ul{margin:0; padding-left:20px; font-size:14px;}
  .case-study-card li{margin-bottom:6px;}

  /* Audience + hyper-local two column section */
  .audience-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:start;
    text-align:left;
  }
  @media (max-width:900px){.audience-grid{grid-template-columns:1fr; gap:32px;}}
  .audience-grid h2{font-size:1.6rem;}

  /* Founder / About */
  .about-grid{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:32px;
    align-items:center;
    max-width:880px;
    margin:0 auto;
  }
  @media (max-width:600px){.about-grid{grid-template-columns:1fr; text-align:center;}}
  .about-avatar{
    width:100px;
    height:100px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    font-family:var(--font-head);
    font-weight:700;
    font-size:2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    margin:0 auto;
  }
  .about-grid h2{font-size:1.5rem; margin-bottom:12px;}

  /* Process timeline note */
  .process-timeline{
    color:rgba(255,255,255,0.75);
    font-size:14px;
    margin-top:16px;
    margin-bottom:0;
  }

  /* Form confidentiality note */
  .form-confidentiality{
    font-size:12px;
    color:var(--text-muted);
    text-align:center;
    margin:14px 0 0;
  }

  /* Low-commitment text link CTA */
  .btn-textlink{
    color:var(--primary);
    font-weight:700;
    text-decoration:none;
    border-bottom:2px solid var(--accent);
    padding-bottom:2px;
    transition:color .2s ease;
  }
  .btn-textlink:hover{color:var(--accent-dark);}

  /* Glossary list */
  .glossary-list{list-style:none; margin-top:24px;}
  .glossary-list li{
    padding:14px 0;
    border-bottom:1px solid #e6d8ca;
    font-size:16px;
  }
  .glossary-list li:last-child{border-bottom:none;}
  .glossary-list strong{color:var(--text-dark); font-family:var(--font-head); font-weight:600;}

  /* Testimonials */
  .testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:48px;}
  @media (max-width:900px){.testimonial-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:640px){.testimonial-grid{grid-template-columns:1fr;}}
  .testimonial-card{background:#fff; border-radius:8px; padding:28px; box-shadow:0 4px 16px rgba(0,0,0,0.05);}
  .testimonial-card p{font-style:italic; color:var(--text-body); margin-bottom:20px;}
  .testimonial-person{display:flex; align-items:center; gap:12px;}
  .avatar{
    width:48px;height:48px;border-radius:50%;
    background:var(--primary);
    display:flex;align-items:center;justify-content:center;
    color:#fff; font-family:var(--font-head); font-weight:700;
    flex-shrink:0;
  }
  .avatar-img{
    object-fit:cover;
    background:#eee;
  }
  .testimonial-person .name{font-weight:700; color:var(--text-dark); font-size:14px;}
  .testimonial-person .role{font-size:13px; color:var(--text-body);}

  /* Process steps */
  .process-steps{display:grid; grid-template-columns:repeat(5,1fr); gap:24px; margin-top:48px; text-align:left;}
  @media (max-width:900px){.process-steps{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.process-steps{grid-template-columns:1fr;}}
  .step{background:#fff; border-radius:8px; padding:24px; border-top:3px solid var(--primary);}
  .step .step-num{font-family:var(--font-head); font-weight:700; color:var(--primary); font-size:14px; margin-bottom:8px;}
  .step h3{font-size:1rem; margin-bottom:8px; color:var(--text-dark);}
  .step p{font-size:14px; margin-bottom:0; color:var(--text-body);}

  /* Entity chip row — hero scope tags */
  .chip-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
  .chip-row .chip{display:inline-block; padding:6px 14px; border:1px solid rgba(255,255,255,0.3); border-radius:999px; font-size:13px; color:rgba(255,255,255,0.9); background:rgba(255,255,255,0.06);}

  /* Capability grid — outlined cards, distinct from .step */
  .capability-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px;}
  @media (max-width:900px){.capability-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:600px){.capability-grid{grid-template-columns:1fr;}}
  .capability-card{border:1px solid rgba(28,39,51,0.12); border-radius:10px; padding:24px; background:#fff;}
  .cap-num{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--primary); color:#fff; font-weight:700; font-size:14px; margin-bottom:14px;}
  .capability-card h3{font-size:1rem; margin-bottom:8px; color:var(--text-dark);}
  .capability-card p{font-size:14px; margin-bottom:0; color:var(--text-body);}

  /* Insight callout — root-cause box */
  .insight-callout{border-left:4px solid var(--accent); background:var(--accent-light); border-radius:0 8px 8px 0; padding:20px 24px; margin-top:24px;}
  .insight-callout .insight-label{display:block; font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent-dark); margin-bottom:8px;}
  .insight-callout p{margin-bottom:0; color:var(--text-dark); font-size:15px;}

  /* Decision box — if/then pairing */
  .decision-box{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(28,39,51,0.1); border-radius:10px; overflow:hidden; margin-top:24px;}
  @media (max-width:640px){.decision-box{grid-template-columns:1fr;}}
  .decision-box .decision-cell{background:#fff; padding:22px;}
  .decision-box .decision-tag{display:block; font-size:12px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--primary); margin-bottom:8px;}
  .decision-box p{margin-bottom:0; font-size:14px; color:var(--text-body);}

  /* Mini stat pair — inline turnaround/revision badges */
  .mini-stat-pair{display:flex; flex-wrap:wrap; gap:16px; margin-top:20px;}
  .mini-stat-pair .mini-stat{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid rgba(28,39,51,0.1); border-radius:8px; padding:12px 18px;}
  .mini-stat-pair .mini-stat .mini-stat-num{font-family:var(--font-head); font-weight:700; color:var(--primary); font-size:1.1rem;}
  .mini-stat-pair .mini-stat .mini-stat-label{font-size:12px; color:var(--text-body);}

  /* Reference-titles strip — real proof-of-work examples */
  .reference-strip{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px;}
  .reference-strip .reference-tag{background:var(--bg-cream); border:1px solid rgba(28,39,51,0.08); border-radius:8px; padding:10px 16px; font-size:14px; color:var(--text-dark); font-weight:600;}
  .reference-strip .reference-tag span{display:block; font-size:12px; font-weight:400; color:var(--text-body); margin-top:2px;}

  /* Who we work with */
  .audience-list{list-style:none; margin-top:20px; text-align:left;}
  .audience-list li{
    padding:10px 0 10px 28px;
    position:relative;
    font-size:16px;
    break-inside:avoid;
  }
  .audience-list li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:var(--accent);
    font-weight:700;
  }
  @media (max-width:600px){.audience-list{columns:1;}}

  /* FAQ */
  .faq-item{
    border-bottom:1px solid #e6d8ca;
    padding:20px 0;
  }
  .faq-item summary{
    cursor:pointer;
    font-family:var(--font-head);
    font-weight:600;
    font-size:1.05rem;
    color:var(--text-dark);
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:"+";
    font-size:1.5rem;
    color:var(--accent);
    font-weight:400;
    margin-left:16px;
    flex-shrink:0;
  }
  .faq-item[open] summary::after{content:"–";}
  .faq-item p{margin-top:14px; margin-bottom:0; font-size:15px;}

  /* CTA band */
  .cta-band{
    background:linear-gradient(120deg, var(--accent) 0%, var(--accent-dark) 100%);
    text-align:center;
    padding:64px 0;
  }
  .cta-band h2{color:#fff;}
  .cta-band p{color:rgba(255,255,255,0.9); max-width:600px; margin-left:auto; margin-right:auto;}
  .cta-band .btn-light{margin-top:12px;}

  /* Footer */
  footer.site-footer{background:var(--primary); padding:64px 0 0;}
  .footer-top{padding-bottom:40px;}
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:40px;
  }
  .footer-col{min-width:0;}
  .footer-logo{
    font-family:var(--font-head);
    font-weight:700;
    font-size:3.2rem;
    line-height:1.05;
    color:#fff;
    margin-bottom:20px;
  }
  .footer-logo span{color:var(--accent);}
  .footer-tagline{color:#b9b9b9; font-size:14px; line-height:1.6; max-width:320px;}
  .footer-contact{list-style:none; margin:20px 0 0; padding:0;}
  .footer-contact li{margin-bottom:10px;}
  .footer-contact a{
    display:flex;
    align-items:center;
    gap:10px;
    color:#d8d8d8;
    font-size:14px;
    text-decoration:none;
    transition:color .2s ease;
  }
  .footer-contact a:hover{color:#fff;}
  .footer-contact svg{width:16px; height:16px; flex-shrink:0; fill:var(--accent);}
  .footer-contact-btn{margin-top:16px; padding:10px 22px; font-size:14px; border-color:var(--accent); color:var(--accent);}
  .footer-contact-btn:hover{background:var(--accent); color:var(--primary);}
  .footer-heading{
    font-family:var(--font-head);
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--accent);
    margin-bottom:18px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,0.15);
  }
  .footer-links{list-style:none; margin:0; padding:0;}
  .footer-links li{
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .footer-links a{
    display:block;
    padding:10px 0;
    color:#d8d8d8;
    font-size:14px;
    text-decoration:none;
    transition:color .2s ease, padding-left .2s ease;
  }
  .footer-links a:hover{color:#fff; padding-left:6px;}
  .footer-links-icon a{display:flex; align-items:center; gap:10px;}
  .footer-links-icon svg{
    width:16px;
    height:16px;
    flex-shrink:0;
    fill:var(--accent);
  }
  .footer-bottom{
    color:#b9b9b9;
    text-align:center;
    padding:24px;
    font-size:13px;
    border-top:1px solid rgba(255,255,255,0.1);
    margin-top:16px;
  }

  .last-updated{font-size:13px; color:#8a8a8a; margin-top:8px;}

  @media (max-width:900px){
    .footer-grid{grid-template-columns:1fr 1fr; gap:32px 24px;}
  }
  @media (max-width:560px){
    .footer-grid{grid-template-columns:1fr;}
  }

  /* =========================================================
     QURANIC TEXT FORMATTING PAGE — distinct component set
     Built so this page reads differently from other service
     pages: ayah-style numbering, tab strip, margin-note layout,
     vertical connected timeline, stacked comparison rows.
     ========================================================= */

  /* Ayah-marker grid — replaces .capability-grid for this page.
     Diamond/ornament badge references end-of-verse markers instead
     of a plain circle-numbered card. */
  .verse-marker-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(28,39,51,0.1); border-radius:12px; overflow:hidden; margin-top:32px;}
  @media (max-width:700px){.verse-marker-grid{grid-template-columns:1fr;}}
  .verse-marker-item{background:#fff; padding:28px 26px; display:flex; gap:18px;}
  .verse-badge{
    flex-shrink:0;
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--accent);
    transform:rotate(45deg);
    color:var(--accent-dark);
    font-family:var(--font-head);
    font-weight:700;
    font-size:13px;
  }
  .verse-badge span{transform:rotate(-45deg);}
  .verse-marker-item h3{font-size:1rem; margin-bottom:6px; color:var(--text-dark);}
  .verse-marker-item p{font-size:14px; margin-bottom:0; color:var(--text-body);}

  /* Tab strip — replaces a plain bullet list for the definition section */
  .def-tab-strip{display:flex; flex-wrap:wrap; gap:0; margin-top:28px; border:1px solid var(--border-light); border-radius:10px; overflow:hidden;}
  .def-tab{flex:1 1 220px; padding:20px 22px; border-right:1px solid var(--border-light); border-bottom:1px solid var(--border-light);}
  .def-tab:last-child{border-right:none;}
  @media (max-width:760px){.def-tab{border-right:none; flex:1 1 100%;}}
  .def-tab-label{display:block; font-family:var(--font-head); font-weight:700; font-size:13px; color:var(--primary); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px;}
  .def-tab p{font-size:14px; margin-bottom:0; color:var(--text-body);}

  /* Margin-note layout — two-column: main content + narrow sticky side notes.
     Replaces full-width .insight-callout for the pain-points section. */
  .margin-note-layout{display:grid; grid-template-columns:1fr 260px; gap:40px; margin-top:28px; align-items:start;}
  @media (max-width:860px){.margin-note-layout{grid-template-columns:1fr;}}
  .margin-note-main table{width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.05);}
  .margin-note-main th, .margin-note-main td{padding:14px 18px; text-align:left; border-bottom:1px solid #eee2d6; font-size:14px; vertical-align:top;}
  .margin-note-main th{background:var(--primary); color:#fff; font-family:var(--font-head); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.04em;}
  .margin-note-main tr:last-child td{border-bottom:none;}
  .margin-note-side{position:sticky; top:100px; background:var(--primary); color:#fff; border-radius:10px; padding:22px 20px;}
  .margin-note-side .note-label{display:block; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); margin-bottom:10px;}
  .margin-note-side p{font-size:14px; color:#c9d2da; margin-bottom:0;}

  /* Vertical connected timeline — replaces .process-steps grid cards */
  .timeline-vertical{position:relative; margin-top:48px; padding-left:50px;}
  .timeline-vertical::before{content:""; position:absolute; left:17px; top:6px; bottom:6px; width:2px; background:rgba(255,255,255,0.15);}
  .timeline-item{position:relative; padding-bottom:36px;}
  .timeline-item:last-child{padding-bottom:0;}
  .timeline-dot{position:absolute; left:-50px; top:2px; width:36px; height:36px; border-radius:50%; background:var(--accent); color:var(--primary); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:14px;}
  .timeline-item h3{font-size:1.05rem; margin-bottom:6px; color:#fff;}
  .timeline-item p{font-size:14px; margin-bottom:0; color:#c9d2da;}

  /* Stacked comparison rows — replaces .compare-table + .decision-box combo */
  .stacked-comparison{margin-top:28px;}
  .stacked-row{display:grid; grid-template-columns:200px 1fr 1fr; gap:0; border:1px solid var(--border-light); border-radius:8px; overflow:hidden; margin-bottom:12px;}
  @media (max-width:760px){.stacked-row{grid-template-columns:1fr;}}
  .stacked-row-label{background:var(--primary); color:#fff; padding:18px 20px; font-family:var(--font-head); font-weight:600; font-size:14px; display:flex; align-items:center;}
  .stacked-row-does, .stacked-row-not{padding:18px 20px; font-size:14px; background:#fff;}
  .stacked-row-does{border-right:1px solid var(--border-light);}
  @media (max-width:760px){.stacked-row-does{border-right:none; border-bottom:1px solid var(--border-light);}}
  .stacked-row-does::before{content:"Does: "; font-weight:700; color:var(--primary);}
  .stacked-row-not::before{content:"Doesn't: "; font-weight:700; color:var(--text-muted);}

  /* =========================================================
     QURANIC TEXT FORMATTING PAGE — audit-pass additions
     Term glossary cards, audience grid, trust banner, and a
     quote-style callout to replace leftover running paragraphs.
     ========================================================= */

  /* Term glossary — entity-rich definitions, card-per-term rather
     than a dictionary-style list, each with its own accent rule marker */
  .term-glossary{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px;}
  @media (max-width:860px){.term-glossary{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.term-glossary{grid-template-columns:1fr;}}
  .term-card{background:#fff; border-radius:8px; padding:20px; border-top:3px solid var(--accent); box-shadow:0 2px 10px rgba(0,0,0,0.04);}
  .term-card .term-name{display:block; font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--text-dark); margin-bottom:4px;}
  .term-card .term-native{font-size:13px; color:var(--accent-dark); font-weight:600; margin-left:6px;}
  .term-card p{font-size:13px; color:var(--text-body); margin-bottom:0; line-height:1.55;}

  /* Color-convention note strip — swatches + explanation, not a fixed
     color-to-rule claim (conventions vary by mushaf/publisher) */
  .color-note-strip{display:flex; align-items:flex-start; gap:20px; background:#fff; border:1px solid var(--border-light); border-radius:10px; padding:22px 26px; margin-top:28px;}
  @media (max-width:640px){.color-note-strip{flex-direction:column;}}
  .color-swatch-set{display:flex; gap:8px; flex-shrink:0;}
  .color-swatch{width:22px; height:22px; border-radius:50%; border:2px solid rgba(0,0,0,0.08);}
  .color-note-strip p{font-size:14px; color:var(--text-body); margin-bottom:0;}

  /* Audience grid — who this service is built for, icon + label,
     distinct from .audience-list (checklist) used elsewhere on site */
  .client-type-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:32px;}
  @media (max-width:860px){.client-type-grid{grid-template-columns:repeat(2,1fr);}}
  .client-type-card{text-align:center; padding:26px 16px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:10px;}
  .client-type-icon{width:44px; height:44px; margin:0 auto 14px; border-radius:50%; background:var(--accent); color:var(--primary); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:16px;}
  .client-type-card h3{font-size:0.95rem; margin-bottom:6px; color:#fff;}
  .client-type-card p{font-size:13px; margin-bottom:0; color:#c9d2da;}

  /* Trust banner — addresses the #1 objection (text alteration) head-on,
     visually distinct from .insight-callout / .margin-note-side */
  .trust-banner{display:flex; align-items:center; gap:24px; background:linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius:12px; padding:32px 36px; margin-top:32px;}
  @media (max-width:700px){.trust-banner{flex-direction:column; text-align:center; gap:16px;}}
  .trust-banner-icon{flex-shrink:0; width:56px; height:56px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:24px;}
  .trust-banner h3{color:#fff; font-size:1.1rem; margin-bottom:6px;}
  .trust-banner p{color:#c9d2da; font-size:14px; margin-bottom:0;}

  /* Pull-quote callout — replaces a leftover running paragraph with a
     single-statement visual break; distinct from .insight-callout (which
     has a label + is left-border only) */
  .pull-statement{text-align:center; max-width:680px; margin:32px auto 0; padding:28px 8px 0; border-top:2px solid var(--accent);}
  .pull-statement p{font-family:var(--font-head); font-size:1.15rem; font-weight:500; color:var(--text-dark); line-height:1.5; margin-bottom:0;}

  /* =========================================================
     BILINGUAL ARABIC-ENGLISH PAGE — new component set.
     This page's central problem (two opposing reading directions
     meeting in one physical object) doesn't fit any existing
     block, so five new components below are purpose-built for it.
     ========================================================= */

  /* Direction-conflict split — visualizes RTL vs LTR meeting in the
     middle of one page, used for the "why this is different" block */
  .direction-conflict{display:flex; align-items:stretch; margin-top:28px; border-radius:10px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.05);}
  @media (max-width:700px){.direction-conflict{flex-direction:column;}}
  .conflict-side{flex:1; padding:26px 24px; background:#fff;}
  .conflict-side.is-rtl{text-align:right; border-right:3px solid var(--primary);}
  .conflict-side.is-ltr{text-align:left; border-left:3px solid var(--accent);}
  @media (max-width:700px){.conflict-side.is-rtl, .conflict-side.is-ltr{text-align:left; border-left:3px solid var(--primary); border-right:none;}}
  .conflict-side .conflict-arrow{font-size:20px; display:block; margin-bottom:8px; color:var(--text-muted);}
  .conflict-side h3{font-size:0.95rem; margin-bottom:6px;}
  .conflict-side p{font-size:14px; margin-bottom:0; color:var(--text-body);}
  .conflict-meet{flex:0 0 auto; width:6px; background:repeating-linear-gradient(180deg, var(--accent) 0 8px, var(--primary) 8px 16px);}
  @media (max-width:700px){.conflict-meet{width:100%; height:4px;}}

  /* Format diagram grid — three layout formats, each with a tiny
     pure-CSS book icon showing spine/page orientation, for the
     format-comparison section (this page's centerpiece) */
  .format-diagram-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px;}
  @media (max-width:860px){.format-diagram-grid{grid-template-columns:1fr;}}
  .format-card{background:#fff; border:1px solid var(--border-light); border-radius:12px; padding:26px 22px; text-align:center;}
  .book-diagram{width:76px; height:56px; margin:0 auto 18px; position:relative; display:flex;}
  .book-diagram .page{flex:1; background:var(--bg-cream); border:1px solid rgba(28,39,51,0.15);}
  .book-diagram .spine{width:4px; background:var(--primary);}
  .book-diagram.diagram-sidebyside .page:first-child{border-radius:4px 0 0 4px;}
  .book-diagram.diagram-sidebyside .page:last-child{border-radius:0 4px 4px 0;}
  .book-diagram.diagram-flip{gap:10px;}
  .book-diagram.diagram-flip .page{border-radius:4px; transform:scaleX(-1);}
  .book-diagram.diagram-flip .page:last-child{transform:none;}
  .book-diagram.diagram-alternating .page{border-radius:4px;}
  .book-diagram.diagram-alternating .page:first-child{background:var(--accent-light);}
  .format-card h3{font-size:1rem; margin-bottom:8px;}
  .format-card p{font-size:14px; color:var(--text-body); margin-bottom:10px;}
  .format-card .format-fit{display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--accent-dark); margin-top:14px;}

  /* Sequence-pair — paired numbering strips showing single vs dual
     page-number sequences, for the page-numbering sub-section */
  .sequence-pair{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px;}
  @media (max-width:640px){.sequence-pair{grid-template-columns:1fr;}}
  .sequence-block{background:#fff; border-radius:8px; padding:20px; border:1px solid var(--border-light);}
  .sequence-block .sequence-label{display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--primary); margin-bottom:12px;}
  .sequence-strip{display:flex; gap:4px; margin-bottom:12px;}
  .sequence-strip span{flex:1; background:var(--bg-cream); border:1px solid var(--border-light); border-radius:4px; padding:6px 0; text-align:center; font-size:11px; font-weight:700; color:var(--text-muted);}
  .sequence-strip.dual-a span{color:var(--primary); border-color:rgba(28,39,51,0.2);}
  .sequence-strip.dual-b span{color:var(--accent-dark); border-color:rgba(201,161,61,0.3);}
  .sequence-block p{font-size:13px; margin-bottom:0; color:var(--text-body);}

  /* Manifest list — scope/inclusions list, numbered squares on a
     connecting rule; distinct from capability-grid (cards) and
     verse-marker-grid (diamond badges) used on other service pages */
  .manifest-list{margin-top:32px; border-left:2px solid var(--border-light); padding-left:0;}
  .manifest-row{display:flex; gap:20px; padding:18px 0 18px 26px; position:relative; border-bottom:1px solid var(--border-light);}
  .manifest-row:last-child{border-bottom:none;}
  .manifest-row::before{content:""; position:absolute; left:-7px; top:24px; width:12px; height:12px; background:var(--accent); border-radius:2px; transform:rotate(45deg);}
  .manifest-row h3{font-size:1rem; margin-bottom:4px;}
  .manifest-row p{font-size:14px; margin-bottom:0; color:var(--text-body);}

  /* Symptom rows — pain-point section: symptom → root cause, with
     an arrow connector; distinct from pain-table (editorial page)
     and margin-note-layout (Quranic page) */
  .symptom-list{margin-top:28px;}
  .symptom-row{display:grid; grid-template-columns:1fr 40px 1fr; align-items:center; gap:0; background:#fff; border-radius:8px; padding:18px 20px; margin-bottom:10px; box-shadow:0 1px 6px rgba(0,0,0,0.04);}
  @media (max-width:700px){.symptom-row{grid-template-columns:1fr; gap:8px; text-align:left;}}
  .symptom-text{font-size:14px; font-weight:600; color:var(--text-dark);}
  .symptom-arrow{text-align:center; color:var(--accent); font-size:18px;}
  @media (max-width:700px){.symptom-arrow{display:none;}}
  .cause-text{font-size:14px; color:var(--text-body);}
  .cause-text::before{content:"Cause: "; font-weight:700; color:var(--text-muted); font-size:12px; text-transform:uppercase; letter-spacing:0.03em;}

  /* Root-cause band — closing insight for the pain-points section on
     this page specifically, since .insight-callout is already the
     signature closer on both other service pages */
  .root-cause-band{display:flex; align-items:center; gap:20px; background:var(--primary); border-radius:10px; padding:26px 28px; margin-top:20px;}
  @media (max-width:640px){.root-cause-band{flex-direction:column; text-align:center;}}
  .root-cause-band .root-cause-mark{flex-shrink:0; font-family:var(--font-head); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.05em; color:var(--accent); border:1px solid var(--accent); border-radius:20px; padding:6px 14px;}
  .root-cause-band p{color:#c9d2da; font-size:14px; margin-bottom:0;}

  /* Process ribbon — horizontal connected steps with arrow
     connectors; a third distinct process treatment (cards on
     homepage, vertical timeline on the Quranic page) */
  .process-ribbon{display:flex; align-items:stretch; gap:0; margin-top:40px; flex-wrap:wrap;}
  .ribbon-step{flex:1 1 150px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:8px; padding:20px 16px; text-align:left; position:relative;}
  .ribbon-step .ribbon-num{display:inline-block; font-family:var(--font-head); font-weight:700; color:var(--accent); font-size:13px; margin-bottom:8px;}
  .ribbon-step h3{font-size:0.9rem; margin-bottom:6px; color:#fff;}
  .ribbon-step p{font-size:12.5px; margin-bottom:0; color:#c9d2da;}
  .ribbon-connector{flex:0 0 28px; display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:16px;}
  @media (max-width:860px){.process-ribbon{flex-direction:column;} .ribbon-connector{display:none;}}

  /* Disambiguation grid — bilingual formatting vs. translation vs.
     single-script typesetting; a card set with a "not this" accent,
     distinct from stacked-comparison (Quranic page) and decision-box
     (used on both other pages) */
  .disambig-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px;}
  @media (max-width:860px){.disambig-grid{grid-template-columns:1fr;}}
  .disambig-card{border-radius:10px; padding:22px; background:#fff;}
  .disambig-card.is-target{border:2px solid var(--accent); box-shadow:0 4px 16px rgba(201,161,61,0.15);}
  .disambig-card.is-other{border:1px solid var(--border-light);}
  .disambig-card .disambig-tag{display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:10px;}
  .disambig-card.is-target .disambig-tag{color:var(--accent-dark);}
  .disambig-card.is-other .disambig-tag{color:var(--text-muted);}
  .disambig-card h3{font-size:1rem; margin-bottom:8px;}
  .disambig-card p{font-size:13px; margin-bottom:0; color:var(--text-body);}

  /* Breadcrumb trail — visible hierarchy strip below the header,
     mirrors the BreadcrumbList schema already emitted per page */
  .breadcrumb-trail{background:var(--bg-cream); border-bottom:1px solid var(--border-light); padding:12px 0;}
  .breadcrumb-trail ol{list-style:none; display:flex; flex-wrap:wrap; align-items:center; margin:0; padding:0; font-size:13px;}
  .breadcrumb-trail li{display:flex; align-items:center; color:var(--text-muted);}
  .breadcrumb-trail li + li::before{content:"/"; margin:0 8px; color:var(--border-light); color:#c9bda9;}
  .breadcrumb-trail a{color:var(--text-body); text-decoration:none;}
  .breadcrumb-trail a:hover{color:var(--accent-dark);}
  .breadcrumb-trail li[aria-current="page"]{color:var(--text-dark); font-weight:600;}

  /* =========================================================
     ARABIC EBOOK FORMATTING PAGE (EPUB/KDP/KINDLE) — new
     component set. This page's content is fact/requirement-driven
     (KDP's own stated rules and rejection reasons) rather than
     conceptual, so it needed its own visual language distinct
     from the three service pages built before it.
     ========================================================= */

  /* EPUB diff grid — paired "Latin-script EPUB" vs "Arabic EPUB"
     comparison per feature, used in the "why it's different" block */
  .epub-diff-grid{margin-top:28px; border:1px solid var(--border-light); border-radius:10px; overflow:hidden;}
  .epub-diff-row{display:grid; grid-template-columns:160px 1fr 1fr; border-bottom:1px solid var(--border-light);}
  .epub-diff-row:last-child{border-bottom:none;}
  .epub-diff-row:first-child{background:var(--primary);}
  .epub-diff-row:first-child .epub-diff-cell{color:#fff; font-family:var(--font-head); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; padding:12px 16px;}
  @media (max-width:700px){.epub-diff-row{grid-template-columns:1fr; }}
  .epub-diff-cell{padding:16px; font-size:14px;}
  .epub-diff-row:not(:first-child) .epub-diff-cell:first-child{background:var(--bg-cream); font-weight:700; color:var(--text-dark); font-size:13px;}
  .epub-diff-row:not(:first-child) .epub-diff-cell:not(:first-child){color:var(--text-body); background:#fff;}

  /* Fact-answer band — a direct, bolded answer to a yes/no factual
     question (Arabic paperback on KDP), distinct from trust-banner
     (which is a reassurance statement, not a factual verdict) */
  .fact-answer-band{display:flex; align-items:center; gap:22px; background:#fff; border:2px solid var(--primary); border-radius:10px; padding:24px 28px; margin-top:24px;}
  @media (max-width:640px){.fact-answer-band{flex-direction:column; text-align:center;}}
  .fact-answer-verdict{flex-shrink:0; font-family:var(--font-head); font-weight:700; font-size:1.1rem; color:var(--primary); border:2px solid var(--primary); border-radius:8px; padding:10px 18px; text-align:center; white-space:nowrap;}
  .fact-answer-band p{margin-bottom:0; font-size:14px; color:var(--text-body);}

  /* Requirement checklist — KDP-sourced settings, each tagged with
     its source so the claim reads as verifiable, not asserted */
  .requirement-checklist{margin-top:24px;}
  .requirement-item{display:flex; align-items:flex-start; gap:14px; background:#fff; border-radius:8px; padding:16px 18px; margin-bottom:10px; box-shadow:0 1px 6px rgba(0,0,0,0.04);}
  .requirement-check{flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--accent-light); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;}
  .requirement-body{flex:1;}
  .requirement-body strong{display:block; font-size:14px; color:var(--text-dark); margin-bottom:2px;}
  .requirement-body span{font-size:13px; color:var(--text-body);}
  .requirement-source{display:inline-block; margin-top:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--accent-dark); background:var(--accent-light); padding:2px 8px; border-radius:4px;}

  /* Rejection grid — KDP's own stated rejection reasons, styled
     like flagged review cards; distinct from symptom-list (which
     pairs symptom→cause, not a flagged-reason format) */
  .rejection-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:28px;}
  @media (max-width:700px){.rejection-grid{grid-template-columns:1fr;}}
  .rejection-card{background:#fff; border-left:4px solid #c0392b; border-radius:0 8px 8px 0; padding:18px 20px; box-shadow:0 1px 6px rgba(0,0,0,0.04);}
  .rejection-card .rejection-flag{display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:#c0392b; margin-bottom:8px;}
  .rejection-card h3{font-size:0.95rem; margin-bottom:6px;}
  .rejection-card p{font-size:13px; margin-bottom:0; color:var(--text-body);}

  /* Layout compare — fixed-layout vs reflowable EPUB, the page's
     centerpiece technical section; two large panels with a
     best-for/tradeoff split, distinct from every comparison
     format used on the three prior service pages */
  .layout-compare{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:32px;}
  @media (max-width:760px){.layout-compare{grid-template-columns:1fr;}}
  .layout-panel{border-radius:12px; padding:28px 26px; background:#fff; border:1px solid var(--border-light);}
  .layout-panel.is-recommended{border:2px solid var(--accent); box-shadow:0 6px 20px rgba(201,161,61,0.15);}
  .layout-panel .layout-panel-tag{display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--accent-dark); margin-bottom:10px;}
  .layout-panel h3{font-size:1.1rem; margin-bottom:10px;}
  .layout-panel p{font-size:14px; color:var(--text-body);}
  .layout-panel-split{display:flex; gap:16px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border-light);}
  .layout-panel-split div{flex:1;}
  .layout-panel-split .split-label{display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--text-muted); margin-bottom:4px;}
  .layout-panel-split p{font-size:13px; margin-bottom:0;}

  /* Scope tile grid — icon tiles for What's Included, distinct from
     capability-grid (rounded cards), verse-marker-grid (diamond
     badges), and manifest-list (rail with square markers) */
  .scope-tile-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px;}
  @media (max-width:860px){.scope-tile-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.scope-tile-grid{grid-template-columns:1fr;}}
  .scope-tile{background:var(--primary); border-radius:10px; padding:22px 20px; color:#fff;}
  .scope-tile-icon{width:38px; height:38px; border-radius:8px; background:var(--accent); color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-head); margin-bottom:14px;}
  .scope-tile h3{font-size:0.95rem; margin-bottom:6px; color:#fff;}
  .scope-tile p{font-size:13px; margin-bottom:0; color:#c9d2da;}
  .scope-tile h3 a, .scope-tile p a{color:#fff; text-decoration:underline;}
  .scope-tile h3 a:hover, .scope-tile p a:hover{color:var(--accent);}

  /* Light variant — soft gold tint with a gold top rule, for white sections
     where navy tiles would feel heavy (used on the contact page). */
  .scope-tile-light{background:var(--accent-light); border-top:3px solid var(--accent); color:var(--text-dark);}
  .scope-tile-light h3{color:var(--primary);}
  .scope-tile-light p{color:var(--text-body);}
  .scope-tile-light h3 a, .scope-tile-light p a{color:var(--primary); text-decoration:underline; text-decoration-color:var(--accent);}
  .scope-tile-light h3 a:hover, .scope-tile-light p a:hover{color:var(--accent-dark);}

  /* Process stack — vertical rail with bordered step cards; a 4th
     distinct process treatment (cards on homepage, timeline on the
     Tajweed page, horizontal ribbon on the bilingual page) */
  .process-stack{margin-top:36px; border-left:2px solid var(--border-light); max-width:760px;}
  .stack-step{position:relative; padding:0 0 28px 32px; margin-left:-1px;}
  .stack-step:last-child{padding-bottom:0;}
  .stack-step::before{content:attr(data-step); position:absolute; left:-19px; top:0; width:36px; height:36px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:13px;}
  .stack-step h3{font-size:1rem; margin-bottom:4px;}
  .stack-step p{font-size:14px; margin-bottom:0; color:var(--text-body);}

  /* Scope-compare grid — "this vs that" disambiguation, a 4th
     distinct treatment (decision-box, stacked-comparison, and
     disambig-grid already used on the three prior pages) */
  .scope-compare-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:28px; border-radius:10px; overflow:hidden; border:1px solid var(--border-light);}
  @media (max-width:760px){.scope-compare-grid{grid-template-columns:1fr;}}
  .scope-compare-col{padding:22px 20px; border-right:1px solid var(--border-light); background:#fff;}
  .scope-compare-col:last-child{border-right:none;}
  @media (max-width:760px){.scope-compare-col{border-right:none; border-bottom:1px solid var(--border-light);} .scope-compare-col:last-child{border-bottom:none;}}
  .scope-compare-col.is-this{background:var(--accent-light);}
  .scope-compare-col .scope-compare-bar{display:block; height:4px; width:32px; background:var(--border-light); border-radius:2px; margin-bottom:14px;}
  .scope-compare-col.is-this .scope-compare-bar{background:var(--accent);}
  .scope-compare-col h3{font-size:0.95rem; margin-bottom:8px;}
  .scope-compare-col p{font-size:13px; margin-bottom:0; color:var(--text-body);}

/* =========================================================
   ARABIC EBOOK PAGE — audit-pass additions
   ========================================================= */

/* Jargon strip — compact term definitions, lighter-weight than
   .term-glossary (Tajweed page's card grid) since this page only
   needs quick definitions, not a full glossary section */
.jargon-strip{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border-light); border:1px solid var(--border-light); border-radius:10px; overflow:hidden; margin-top:24px;}
@media (max-width:700px){.jargon-strip{grid-template-columns:1fr;}}
.jargon-item{background:#fff; padding:16px 18px;}
.jargon-item strong{display:block; font-family:var(--font-head); font-size:13px; color:var(--text-dark); margin-bottom:3px;}
.jargon-item span{font-size:13px; color:var(--text-body);}

/* Source-tagged fact — same sourcing pattern as .requirement-source,
   applied to fact bands for consistency */
.fact-answer-band .requirement-source{margin-top:10px;}

/* Process arrow-chain — a genuinely distinct process visual:
   numbered circles on a horizontal connecting line with no card
   borders, unlike .requirement-checklist's bordered rows */
.process-chain{margin-top:36px;}
.chain-row{display:flex; align-items:flex-start; gap:0; position:relative;}
@media (max-width:760px){.chain-row{flex-direction:column; gap:24px;}}
.chain-node{flex:1; text-align:center; position:relative; padding:0 10px;}
.chain-node .chain-circle{width:44px; height:44px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:14px; margin:0 auto 14px; position:relative; z-index:2;}
.chain-node::before{content:""; position:absolute; top:22px; left:-50%; width:100%; height:2px; background:var(--border-light); z-index:1;}
.chain-node:first-child::before{display:none;}
@media (max-width:760px){.chain-node::before{display:none;} .chain-node{text-align:left; padding-left:60px;} .chain-node .chain-circle{position:absolute; left:0; top:0; margin:0;}}
.chain-node h3{font-size:0.9rem; margin-bottom:6px;}
.chain-node p{font-size:12.5px; color:var(--text-body); margin-bottom:0;}

/* Early trust stat strip — quantifiable credibility placed right
   after the hero, since the dropped case-study section left no
   proof point until the very end of the page */
.stat-strip{display:flex; flex-wrap:wrap; gap:0; margin-top:0; border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light);}
.stat-strip-item{flex:1 1 200px; text-align:center; padding:20px 16px; border-right:1px solid var(--border-light);}
.stat-strip-item:last-child{border-right:none;}
@media (max-width:640px){.stat-strip-item{flex:1 1 50%; border-bottom:1px solid var(--border-light);}}
.stat-strip-num{display:block; font-family:var(--font-head); font-weight:700; font-size:1.5rem; color:var(--primary);}
.stat-strip-label{display:block; font-size:12px; color:var(--text-muted); margin-top:4px;}

/* =========================================================
   URDU BOOK FORMATTING PAGE — new components
   ========================================================= */

/* Step-card grid — bordered cards with a large corner number,
   a 6th distinct process treatment (alongside process-timeline,
   process-steps, timeline-vertical, process-stack, process-chain,
   process-ribbon): no rail or connecting line, cards sit independently
   on a 3-up grid so the step count doesn't force an awkward rail length */
.step-card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px;}
@media (max-width:900px){.step-card-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.step-card-grid{grid-template-columns:1fr;}}
.step-card{background:#fff; border:1px solid var(--border-light); border-radius:10px; padding:22px 20px; position:relative;}
.step-card-num{display:block; font-family:var(--font-head); font-weight:700; font-size:1.6rem; color:var(--accent); margin-bottom:10px;}
.step-card h3{font-size:1rem; margin-bottom:6px;}
.step-card p{font-size:13.5px; margin-bottom:0; color:var(--text-body);}

/* Font table — 4-column variant of the same striped-row pattern as
   .epub-diff-grid, which is hardcoded to 3 columns and can't be reused
   directly for a font/style/use-case/licensing comparison */
.font-table{margin-top:28px; border:1px solid var(--border-light); border-radius:10px; overflow:hidden;}
.font-table-row{display:grid; grid-template-columns:1.1fr 0.7fr 1.4fr 1.6fr; border-bottom:1px solid var(--border-light);}
.font-table-row:last-child{border-bottom:none;}
.font-table-row:first-child{background:var(--primary);}
.font-table-row:first-child .font-table-cell{color:#fff; font-family:var(--font-head); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; padding:12px 16px;}
@media (max-width:800px){.font-table-row{grid-template-columns:1fr;}}
.font-table-cell{padding:16px; font-size:13.5px;}
.font-table-row:not(:first-child) .font-table-cell:first-child{background:var(--bg-cream); font-weight:700; color:var(--text-dark); font-size:13px;}
.font-table-row:not(:first-child) .font-table-cell:not(:first-child){color:var(--text-body); background:#fff;}

/* Bilingual page — wide container modifier for the 2-card case-study
   instance. The shared .case-study-grid is a 3-column grid built for
   the homepage's 3 case studies; with only 2 cards on this page, the
   standard 1140px container leaves visible side margins. This modifier
   widens just this section's container so the two cards stretch across
   more of the page, without touching the shared .container or
   .case-study-grid used elsewhere on the site. */
.container-wide{max-width:1400px; margin:0 auto; padding:0 24px;}
.case-study-grid-wide{grid-template-columns:repeat(2,1fr);}
@media (max-width:640px){.case-study-grid-wide{grid-template-columns:1fr;}}

/* =========================================================
   ENGLISH ISLAMIC BOOK FORMATTING PAGE — new components
   ========================================================= */

/* Before/after pair — a concrete two-column comparison for a single
   worked example, distinct from .layout-compare (which compares two
   options, not a correction) and .stacked-comparison (does/doesn't
   rows). Red-tinted "before" vs. green-tinted "after" gives an
   immediate visual read before the text is even parsed. */
.before-after-pair{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px;}
@media (max-width:760px){.before-after-pair{grid-template-columns:1fr;}}
.before-after-col{border-radius:10px; padding:22px 22px 20px; border:1px solid var(--border-light);}
.before-after-col.is-before{background:#fdf3f0;}
.before-after-col.is-after{background:#f1f7f0;}
.before-after-tag{display:inline-block; font-family:var(--font-head); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:0.04em; padding:3px 10px; border-radius:4px; margin-bottom:12px;}
.before-after-col.is-before .before-after-tag{background:#e8c4ba; color:#7a3324;}
.before-after-col.is-after .before-after-tag{background:#c7ddc2; color:#2f5a28;}
.before-after-col p{font-size:14px; margin-bottom:10px; color:var(--text-dark); line-height:1.6;}
.before-after-note{display:block; font-size:12.5px; color:var(--text-muted); font-style:italic;}

/* Reader-audience grid — light-mode variant for a light section, since
   the site's existing .client-type-grid is styled for a dark/navy
   background and can't be reused directly here. Named distinctly from
   the homepage's own .audience-grid (a 2-column text layout) to avoid
   a class-name collision between the two very different components. */
.reader-audience-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:28px;}
@media (max-width:860px){.reader-audience-grid{grid-template-columns:repeat(2,1fr);}}
.reader-audience-card{text-align:center; padding:22px 16px; background:var(--bg-cream); border:1px solid var(--border-light); border-radius:10px;}
.reader-audience-card-icon{width:36px; height:36px; border-radius:50%; background:var(--accent-light); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; margin:0 auto 12px; font-size:14px;}
.reader-audience-card h3{font-size:0.9rem; margin-bottom:6px;}
.reader-audience-card p{font-size:12.5px; margin-bottom:0; color:var(--text-body);}

/* Calligraphy style cards — new block, built for the calligraphy-covers
   page. No existing component shows four distinct visual/artistic styles
   side by side with an actual sample glyph; .reader-audience-grid and
   .scope-tile-grid are icon-plus-text only, not built to carry a large
   script sample as the card's visual anchor. Each card leads with the
   Arabic word for that style rendered large, then a genre-fit label, then
   the description — the glyph is the point of the block, not decoration. */
.calligraphy-style-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:860px){.calligraphy-style-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.calligraphy-style-grid{grid-template-columns:1fr;}}
.calligraphy-style-card{background:#fff; border:1px solid var(--border-light); border-radius:10px; padding:24px 20px; text-align:center;}
.calligraphy-style-glyph{display:block; font-size:2.4rem; line-height:1; color:var(--primary); margin-bottom:14px; direction:rtl;}
.calligraphy-style-card h3{font-size:1rem; margin-bottom:6px;}
.calligraphy-style-fit{display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--accent-dark); margin-bottom:10px;}
.calligraphy-style-card p{font-size:12.5px; margin-bottom:0; color:var(--text-body); text-align:left;}

/* Pricing-complexity comparison — makes explicit that citation density
   and transliteration volume drive cost, not manuscript length alone.
   Reuses the striped-row table pattern (like .font-table) at 3 columns. */
.complexity-table{margin-top:24px; border:1px solid var(--border-light); border-radius:10px; overflow:hidden;}
.complexity-row{display:grid; grid-template-columns:1.2fr 1fr 1.6fr; border-bottom:1px solid var(--border-light);}
.complexity-row:last-child{border-bottom:none;}
.complexity-row:first-child{background:var(--primary);}
.complexity-row:first-child .complexity-cell{color:#fff; font-family:var(--font-head); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; padding:12px 16px;}
@media (max-width:700px){.complexity-row{grid-template-columns:1fr;}}
.complexity-cell{padding:16px; font-size:13.5px;}
.complexity-row:not(:first-child) .complexity-cell:first-child{background:var(--bg-cream); font-weight:700; color:var(--text-dark); font-size:13px;}
.complexity-row:not(:first-child) .complexity-cell:not(:first-child){color:var(--text-body); background:#fff;}

/* =========================================================
   HOMEPAGE — "Who We Work With" redesign
   ========================================================= */

/* Hyper-local band — full-width follow-up under the 4-column audience
   grid, replacing the old side-by-side .audience-grid layout (which
   squeezed a short list against a full paragraph and left visible
   empty space on wide screens). The three confirmation points sit in
   their own row instead of a plain checklist, matching the more
   structured, professional feel of the audience cards above it. */
.hyper-local-band{margin-top:48px; padding-top:40px; border-top:1px solid var(--border-light);}
.hyper-local-band h3{font-size:1.3rem; margin-bottom:14px;}
.hyper-local-band > p{max-width:820px; font-size:15px;}
.hyper-local-points{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px;}
@media (max-width:760px){.hyper-local-points{grid-template-columns:1fr;}}
.hyper-local-points > div{padding:18px 20px; background:#fff; border:1px solid var(--border-light); border-radius:10px;}
.hyper-local-points strong{display:block; font-family:var(--font-head); font-size:14px; color:var(--text-dark); margin-bottom:6px;}
.hyper-local-points span{font-size:13.5px; color:var(--text-body);}

/* =========================================================
   PORTFOLIO — category jump-nav pills
   New component: the existing .chip-row/.chip pair is styled for
   translucent-white text on a dark hero background only (see the hero
   chip usage across service pages) and reads illegibly on a white
   section. Portfolio needs a light-background anchor-nav row to jump
   to a project category, so this is a separate, light-mode pill
   component rather than overloading .chip for a background it wasn't
   built for. */
.portfolio-filter-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px;}
.portfolio-filter-pill{display:inline-block; padding:9px 18px; border:1px solid var(--border-light); border-radius:999px; font-size:13.5px; font-weight:600; color:var(--text-dark); background:var(--bg-cream); text-decoration:none; transition:background 0.15s, color 0.15s;}
.portfolio-filter-pill:hover{background:var(--accent); color:var(--primary);}

/* Mistake block — new for the KDP-rejection-mistakes page. Each mistake
   needs a repeated Why-It-Happens / How-To-Tell / The-Fix three-part
   breakdown, distinct from .rejection-card (single flagged line, no
   sub-structure) and .symptom-list (2-column symptom→cause pairing,
   not a 3-stage diagnostic). Numbered header ties it to the page's
   "Mistake 1–7" heading pattern. */
.mistake-block{margin-top:28px; border:1px solid var(--border-light); border-radius:12px; overflow:hidden; background:#fff;}
.mistake-panels{display:grid; grid-template-columns:repeat(3,1fr);}
@media (max-width:760px){.mistake-panels{grid-template-columns:1fr;}}
.mistake-panel{padding:22px 22px; border-right:1px solid var(--border-light);}
.mistake-panel:last-child{border-right:none;}
@media (max-width:760px){.mistake-panel{border-right:none; border-bottom:1px solid var(--border-light);} .mistake-panel:last-child{border-bottom:none;}}
.mistake-panel-label{display:block; font-family:var(--font-head); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:10px;}
.mistake-panel.why .mistake-panel-label{color:#c0392b;}
.mistake-panel.detect .mistake-panel-label{color:var(--accent-dark);}
.mistake-panel.fix .mistake-panel-label{color:var(--primary);}
.mistake-panel p{font-size:13.5px; color:var(--text-body); margin-bottom:0;}

/* Sign list — new for the "10 Signs" listicle page. Each sign needs a
   large number badge beside a full-width paragraph with room for inline
   cross-links to other diagnostic pages, distinct from .step-card
   (compact grid card, too narrow for a real paragraph with links) and
   .mistake-block (3-column diagnostic breakdown, wrong shape for a
   single scannable listicle row). */
.sign-list{margin-top:32px;}
.sign-row{display:flex; gap:22px; align-items:flex-start; background:#fff; border:1px solid var(--border-light); border-radius:10px; padding:22px 24px; margin-bottom:14px;}
.sign-num{flex-shrink:0; width:44px; height:44px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:1.1rem;}
.sign-body h3{font-size:1.05rem; margin-bottom:8px;}
.sign-body p{font-size:14px; color:var(--text-body); margin-bottom:0;}
@media (max-width:600px){.sign-row{flex-direction:column; gap:12px;}}

/* Portfolio sample-page galleries — page-scan thumbnails (all ~1:1.41
   portrait), click opens the full-size page in a new tab. */
.sample-heading{margin-top:32px; font-size:1.05rem;}
.sample-page-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:16px;}
@media (max-width:900px){.sample-page-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.sample-page-grid{grid-template-columns:repeat(2,1fr); gap:10px;}}
.sample-page{display:block; background:#fff; border-radius:6px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.12); transition:transform .2s ease, box-shadow .2s ease;}
.sample-page:hover{transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,0.18);}
.sample-page img{display:block; width:100%; height:auto;}
.sample-page-wide{grid-column:span 2;}
.sample-caption{display:block; padding:9px 10px 11px; font-size:12.5px; line-height:1.35; color:var(--text-body); text-align:center; border-top:1px solid #eee;}
@media (max-width:560px){.sample-page-wide{grid-column:span 2;}}

/* Portfolio hero: light banner background with dark text */
.hero.hero-banner{
  background:
    linear-gradient(90deg, rgba(247,242,233,0.88) 0%, rgba(247,242,233,0.6) 45%, rgba(247,242,233,0.05) 100%),
    url('assets/portfolio/format-fix-portfolio-hero-banner.webp') center/cover no-repeat;
  min-height:max(300px, calc(40vw - 200px)); padding:50px 0;
}
.hero.hero-banner h1{color:#16202b;}
.hero.hero-banner .lead{color:#3a4654 !important;}

/* Portfolio case-study rows: inline 2-col grid must stack on mobile */
.case-study-grid > *{min-width:0;}
@media (max-width:768px){
  .case-study-grid[style]{grid-template-columns:1fr !important;}
}

@media (max-width:640px){
  .fact-answer-verdict{white-space:normal; flex-shrink:1; max-width:100%; box-sizing:border-box;}
  .fact-answer-band{min-width:0;}
}

/* Compact 2-column variant of .font-table */
.font-table-compact{max-width:760px;}
.font-table-compact .font-table-row{grid-template-columns:230px 1fr;}
.font-table-compact .font-table-cell{padding:8px 14px; font-size:13.5px; line-height:1.4;}
.font-table-compact .font-table-row:first-child .font-table-cell{padding:9px 14px;}
@media (max-width:560px){.font-table-compact .font-table-row{grid-template-columns:130px 1fr;}}

/* In-content text links: visibly underlined and link-coloured */
section p a:not([class]),
section li a:not([class]),
section td a:not([class]),
section details p a:not([class]),
.breadcrumb-trail a,
.site-footer p a:not([class]){
  color:#1a5fb4;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
section p a:not([class]):hover,
section li a:not([class]):hover,
section td a:not([class]):hover,
.breadcrumb-trail a:hover{color:#0e3d7a; text-decoration-thickness:2px;}
.section-navy p a:not([class]), .section-navy li a:not([class]),
.section-cta-gold p a:not([class]), .hero p a:not([class]){color:#fff; text-decoration:underline;}

/* Contact tile icons */
.scope-tile .tile-icon{width:20px;height:20px;vertical-align:-4px;margin-right:8px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* Testimonial carousel: one row, scroll with arrows */
.testimonial-carousel{position:relative; margin-top:48px; text-align:left;}
.testimonial-carousel .testimonial-grid{display:flex; gap:32px; margin-top:0; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:6px 2px 14px;}
.testimonial-carousel .testimonial-grid::-webkit-scrollbar{display:none;}
.testimonial-carousel .testimonial-card{flex:0 0 calc((100% - 64px) / 3); scroll-snap-align:start; text-align:left;}
@media (max-width:900px){.testimonial-carousel .testimonial-card{flex-basis:calc((100% - 32px) / 2);}}
@media (max-width:640px){.testimonial-carousel .testimonial-card{flex-basis:100%;}}
.tc-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:40px; height:40px; border-radius:50%; border:1px solid #d9cdbd; background:#fff; color:var(--primary); font-size:26px; line-height:1; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.12);}
.tc-arrow:hover{background:var(--primary); color:#fff;}
.tc-prev{left:-18px;} .tc-next{right:-18px;}
@media (max-width:640px){.tc-prev{left:-8px;} .tc-next{right:-8px;}}

/* About page founder photo */
.about-photo{width:160px; height:160px; border-radius:50%; object-fit:cover; object-position:center top; display:block; margin:0 auto; border:4px solid #fff; box-shadow:0 4px 16px rgba(0,0,0,0.15);}

/* Arabic Editorial Formatting hero banner (light image, dark text) */
.hero.hero-banner.hero-banner-editorial{
  background:
    linear-gradient(90deg, rgba(250,246,238,0.94) 0%, rgba(250,246,238,0.85) 55%, rgba(250,246,238,0.35) 100%),
    url('assets/arabic-editorial-formatting-hero-banner.webp') center/cover no-repeat;
  min-height:0; padding:70px 0;
}
.hero.hero-banner p{color:#3a4654 !important;}
.hero.hero-banner p a:not([class]){color:#1a5fb4; text-decoration:underline;}
.hero.hero-banner .chip-row .chip{border-color:rgba(22,32,43,0.3); color:#16202b; background:rgba(255,255,255,0.6);}

/* Bilingual page proof of work: case study left, sample images right */
.proof-split{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:32px; align-items:start; margin-top:32px;}
.proof-split .case-study-grid{display:block; margin:0;}
.proof-split .sample-page-grid{grid-template-columns:repeat(3,1fr); margin-top:0;}
.proof-split .sample-page-wide{grid-column:1 / -1;}
@media (max-width:900px){.proof-split{grid-template-columns:1fr;}}
@media (max-width:560px){.proof-split .sample-page-grid{grid-template-columns:repeat(2,1fr);}}

/* Links inside the white enquiry card stay blue even when the card sits in a dark hero */
.enquiry-card p a:not([class]), .hero .enquiry-card p a:not([class]){color:#1a5fb4; text-decoration:underline;}
.enquiry-card p a:not([class]):hover, .hero .enquiry-card p a:not([class]):hover{color:#0e3d7a;}

.pull-answer{margin:24px 0 0; padding:4px 0 4px 24px; border-left:4px solid var(--gold,#c9a23f);}
.pull-answer strong{display:block; font-size:1.35rem; line-height:1.35; margin-bottom:10px;}
.pull-answer p{margin:0; font-size:1.05rem; line-height:1.7; max-width:760px;}
.answer-lead{margin:20px 0 0; font-size:1.15rem; line-height:1.7; max-width:820px;}
.answer-lead strong{color:#1c2733;}
.answer-note{margin:24px 0 0; padding:18px 22px; background:rgba(201,162,63,0.12); border-radius:10px; max-width:820px;}
.answer-note span{display:block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8a6a1c; margin-bottom:6px;}
.answer-note p{margin:0; line-height:1.7;}
.answer-rule{margin:24px 0 0; padding-top:16px; border-top:2px solid #1c2733; max-width:820px;}
.answer-rule h3{margin:0 0 8px; font-size:1.25rem; line-height:1.35;}
.answer-rule p{margin:0; line-height:1.7;}
.answer-side{display:grid; grid-template-columns:minmax(180px,260px) 1fr; gap:28px; margin:24px 0 0; padding:4px 0; align-items:start;}
.answer-side strong{font-size:1.3rem; line-height:1.3; padding-right:24px; border-right:3px solid #c9a23f;}
.answer-side p{margin:0; line-height:1.7;}
.answer-kicker{margin:24px 0 0; max-width:820px;}
.answer-kicker span{display:inline-block; background:#1c2733; color:#fff; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:4px; margin-bottom:10px;}
.answer-kicker p{margin:0; font-size:1.1rem; line-height:1.7;}
@media (max-width:700px){.answer-side{grid-template-columns:1fr; gap:10px;} .answer-side strong{border-right:0; border-left:3px solid #c9a23f; padding:0 0 0 12px;}}
.pull-answer,.answer-lead,.answer-note,.answer-side,.answer-kicker,.answer-rule{margin-bottom:32px;}
.pull-answer + .stat-strip,.answer-lead + .stat-strip,.answer-note + .stat-strip,.answer-side + .stat-strip,.answer-kicker + .stat-strip,.answer-rule + .stat-strip{margin-top:64px;}
.answer-check{display:flex; gap:18px; align-items:flex-start; margin:24px 0 32px; max-width:820px;}
.answer-check-icon{flex:0 0 40px; height:40px; border-radius:50%; background:#c9a23f; color:#fff; font-size:20px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.answer-check strong{display:block; font-size:1.25rem; line-height:1.35; margin-bottom:6px;}
.answer-check p{margin:0; line-height:1.7;}
.answer-big{margin:24px 0 32px; max-width:860px;}
.answer-big strong{display:block; font-size:clamp(1.6rem,3.2vw,2.3rem); line-height:1.2; font-weight:800; color:#c9a23f; margin-bottom:12px;}
.answer-big p{margin:0; font-size:1.05rem; line-height:1.75;}
.answer-bar{margin:24px 0 32px; max-width:860px; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.08);}
.answer-bar strong{display:block; background:#1c2733; color:#fff; padding:12px 22px; font-size:1.05rem;}
.answer-bar p{margin:0; padding:18px 22px; line-height:1.7;}
.pull-answer p,.pull-answer,.answer-lead,.answer-note,.answer-side,.answer-kicker,.answer-kicker p,.answer-rule,.answer-check,.answer-big,.answer-bar{max-width:none;}
.font-table-row:has(> .font-table-cell:nth-child(3):last-child){grid-template-columns:1fr 1.2fr 1.6fr;}
.font-table-row:has(> .font-table-cell:nth-child(2):last-child){grid-template-columns:1fr 2fr;}
@media (max-width:800px){.font-table-row:has(> .font-table-cell:nth-child(3):last-child),.font-table-row:has(> .font-table-cell:nth-child(2):last-child){grid-template-columns:1fr;}}
.reader-audience-grid:has(> .reader-audience-card:nth-child(3):last-child){grid-template-columns:repeat(3,1fr);}
.reader-audience-grid:has(> .reader-audience-card:nth-child(2):last-child){grid-template-columns:repeat(2,1fr);}
@media (max-width:700px){.reader-audience-grid:has(> .reader-audience-card:nth-child(3):last-child),.reader-audience-grid:has(> .reader-audience-card:nth-child(2):last-child){grid-template-columns:1fr;}}
.term-glossary:has(> .term-card:nth-child(2):last-child),.term-glossary:has(> .term-card:nth-child(4):last-child){grid-template-columns:repeat(2,1fr);}
.term-glossary:has(> .term-card:nth-child(1):last-child){grid-template-columns:1fr;}
@media (max-width:560px){.term-glossary:has(> .term-card:nth-child(2):last-child),.term-glossary:has(> .term-card:nth-child(4):last-child){grid-template-columns:1fr;}}
.jump-index{padding-top:32px; padding-bottom:32px;}
.jump-index .chip-row .chip{border-color:rgba(22,32,43,0.25); color:#16202b; background:#fff;}
.jump-index .chip-row a.chip:hover{border-color:var(--accent,#c9a23f); background:rgba(201,162,63,0.15);}
.ar-word{text-align:center; font-size:30pt; line-height:2; margin:8px 0 12px; font-family:"Amiri","Scheherazade New","Noto Naskh Arabic",serif;}
.before-after-col p.ar-word{font-size:30pt; line-height:1.9; text-align:center; margin:8px 0 12px; color:var(--text-dark,#16202b);}
.margin-note-layout > *{min-width:0;}
.margin-note-main{overflow-x:auto;}
@media (max-width:860px){
  .margin-note-layout{width:100%; max-width:100%; margin-left:auto; margin-right:auto; box-sizing:border-box;}
  .margin-note-main,.margin-note-side{width:100%; box-sizing:border-box; margin:0 auto;}
  .margin-note-side{position:static;}
}
.hero-with-covers{max-width:var(--max-width); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:48px; align-items:center;}
.hero-with-covers .lead{max-width:none;}
.hero-covers{display:flex; gap:20px; align-items:flex-end;}
.hero-covers figure{margin:0; text-align:center;}
.hero-covers img{display:block; width:190px; height:auto; border-radius:4px; box-shadow:0 14px 34px rgba(0,0,0,0.45);}
.hero-covers figcaption{margin-top:10px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,0.75);}
@media (max-width:900px){.hero-with-covers{grid-template-columns:1fr; gap:28px;} .hero-covers{justify-content:center;} .hero-covers img{width:140px;}}
/* Arabic Ebook Formatting hero banner (light image, dark text) */
.hero.hero-banner.hero-banner-ebook{
  background:
    linear-gradient(90deg, rgba(250,246,238,0.9) 0%, rgba(250,246,238,0.78) 50%, rgba(250,246,238,0.2) 100%),
    url('assets/arabic-ebook-formatting.webp') center/cover no-repeat;
  min-height:0; padding:70px 0;
}
/* Urdu Sharia Standards hero: full-bleed bg image (covers on the right), text on the left */
.hero.hero-banner.hero-banner-sharia{
  background:
    linear-gradient(90deg, rgba(246,241,231,1) 0%, rgba(246,241,231,0.9) 30%, rgba(246,241,231,0) 52%),
    url('assets/sharia-standards-urdu-hero-bg.webp') right center/cover no-repeat #f6f1e7;
  min-height:min(43vw,560px); padding:140px 0; display:flex; align-items:center;
}
.hero.hero-banner.hero-banner-sharia > .container{width:100%;}
.hero-text-right{display:grid; grid-template-columns:minmax(0,45%) 1fr; max-width:var(--max-width);}
.hero-text-right > div{grid-column:1;}
@media (max-width:1500px) and (min-width:901px){.hero.hero-banner.hero-banner-sharia{background-position:0 0, calc(100% + 190px) center;}}
@media (max-width:1300px) and (min-width:901px){.hero.hero-banner.hero-banner-sharia{background-position:0 0, calc(100% + 260px) center;}}
@media (max-width:900px){
  .hero.hero-banner.hero-banner-sharia{min-height:0; display:block; padding:48px 0;
    background:linear-gradient(rgba(246,241,231,0.93),rgba(246,241,231,0.88)),url('assets/sharia-standards-urdu-hero-bg.webp') right center/cover no-repeat #f6f1e7;}
  .hero-text-right{grid-template-columns:1fr;}
}
.hero-text-right h1{font-size:clamp(1.7rem,2.8vw,2.3rem); line-height:1.25;}
.hero-text-right .lead{font-size:1rem;}
.hero.hero-banner p a[style]{color:#1a5fb4 !important;}

/* Founder photo in place of AR circle */
.about-avatar-img{object-fit:cover; object-position:center top; background:none; border:3px solid #fff; box-shadow:0 4px 16px rgba(0,0,0,0.15);}