:root{--ink:#2d2b2a;--cream:#f7f1e8;--paper:#fffaf3;--red:#e88980;--yellow:#f0d483;--blue:#8faed0;--green:#9fc8ae;--shadow:8px 8px 0 var(--ink)}
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:var(--cream);font-family:Arial,Helvetica,sans-serif;font-weight:700;overflow-x:hidden}
    a{color:inherit}
    button,input,select,textarea{font:inherit}
    .wrap{width:min(1180px,calc(100% - 32px));margin:auto}
    .eyebrow{display:inline-block;margin:0 0 20px;padding:8px 11px;border:2px solid var(--ink);background:var(--yellow);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;transform:rotate(-1deg)}
    .section{padding:88px 0;border-bottom:3px solid var(--ink)}
    .title{max-width:920px;margin:0 0 18px;font-size:clamp(2.6rem,7vw,6rem);line-height:.88;letter-spacing:-.07em;text-transform:uppercase}
    .lead{max-width:750px;margin:0 0 36px;font-size:clamp(1rem,2vw,1.35rem);line-height:1.55}
    .services-lead{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;word-break:normal}

    .button{display:inline-block;padding:16px 22px;border:3px solid var(--ink);background:var(--yellow);box-shadow:6px 6px 0 var(--ink);text-decoration:none;text-transform:uppercase;letter-spacing:.05em;cursor:pointer}
    .button:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
    .button.red{background:var(--red);color:#fff}
    .button.blue{background:var(--blue);color:#fff}
    .header-stack{position:sticky;top:0;z-index:50;background:var(--paper)}
    .site-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:13px max(16px,calc((100vw - 1180px)/2));border-bottom:3px solid var(--ink);background:var(--paper)}
    .language-bar{display:flex;align-items:center;justify-content:center;min-height:46px;padding:5px 16px;border-bottom:2px solid var(--ink);background:var(--paper)}
    .language-bar select{display:block;width:220px;max-width:calc(100vw - 32px);height:34px;margin:0;padding:4px 34px 4px 12px;border:1px solid var(--ink);border-radius:0;background:#fff;color:var(--ink);font-size:.82rem;font-weight:700;line-height:1.2;letter-spacing:0;text-transform:none;cursor:pointer}

    .brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:.95rem;line-height:1.05}
    .brand b{display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--ink);background:var(--red);color:#fff;font-size:1.6rem;transform:rotate(-3deg)}
    .brand small{display:block;margin-top:5px;font-size:.61rem;letter-spacing:.1em;text-transform:uppercase}

    nav{display:flex;align-items:center;gap:22px;font-size:.77rem;text-transform:uppercase;letter-spacing:.06em}
    nav a{text-decoration:none}
    nav a:last-child{padding:11px 13px;border:2px solid var(--ink);background:var(--yellow)}
    .hero{position:relative;padding:74px 0 70px;background:var(--red);overflow:hidden;border-bottom:3px solid var(--ink)}
    .hero:after{content:"LONDON";position:absolute;right:-50px;bottom:-34px;font-size:clamp(7rem,18vw,15rem);line-height:1;color:transparent;-webkit-text-stroke:3px rgba(17,17,17,.23);transform:rotate(-5deg);pointer-events:none}
    .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:end}
    .hero h1{margin:0;color:#fff;font-size:clamp(4.1rem,10vw,9rem);line-height:.76;letter-spacing:-.085em;text-transform:uppercase;text-shadow:5px 5px 0 var(--ink)}
    .hero h1 span{display:block;color:var(--yellow)}
    .hero-copy{padding:22px;border:3px solid var(--ink);background:var(--paper);box-shadow:var(--shadow);font-size:1.04rem;line-height:1.48;transform:rotate(1deg)}
    .hero-copy strong{display:block;margin-bottom:10px;font-size:1.6rem;line-height:1.05;text-transform:uppercase}
    .hero-offer-text{display:block;text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;word-break:normal}
    .hero-actions{display:flex;flex-wrap:wrap;gap:18px;margin-top:28px}
    .signals{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:3px solid var(--ink);background:var(--yellow)}
    .signal{padding:22px 18px;border-right:3px solid var(--ink);text-align:center;text-transform:uppercase}
    .signal:last-child{border-right:0}
    .signal b{display:block;font-size:1.5rem;letter-spacing:-.04em}
    .signal small{font-size:.66rem;letter-spacing:.09em}
    .services{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
    .service{min-height:240px;padding:28px;border:3px solid var(--ink);background:var(--paper);box-shadow:var(--shadow)}
    .service:nth-child(2){background:var(--yellow)}
    .service:nth-child(3){background:var(--blue);color:#fff}
    .service:nth-child(4){background:var(--green)}
    .service i{font-style:normal;font-size:3.1rem;line-height:1}
    .service h3{margin:42px 0 12px;font-size:2rem;line-height:.95;text-transform:uppercase}
    .service p{margin:0;line-height:1.48;text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;word-break:normal}
    .manifesto{background:var(--blue);color:#fff}
    .manifesto-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:56px;align-items:start}
    .manifesto blockquote{margin:0;font-size:clamp(3rem,7vw,6.3rem);line-height:.85;letter-spacing:-.065em;text-transform:uppercase}
    .manifesto .note{padding:26px;border:3px solid var(--ink);background:var(--yellow);box-shadow:var(--shadow);color:var(--ink);font-size:1.05rem;line-height:1.55;transform:rotate(-1deg)}
    .growth-copy{display:block;text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;word-break:normal}

    .pricing{background:var(--yellow)}
    .packages{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
    .package{position:relative;display:flex;flex-direction:column;padding:27px;border:3px solid var(--ink);background:var(--paper);box-shadow:var(--shadow)}
    .package.featured{background:var(--blue);color:#fff;transform:translateY(-12px)}
    .package.featured:before{content:"BEST BALANCE";position:absolute;right:-13px;top:-18px;padding:8px;border:2px solid var(--ink);background:var(--red);color:#fff;font-size:.7rem;letter-spacing:.09em;transform:rotate(4deg)}
    .package h3{margin:0;text-transform:uppercase;font-size:2.1rem}
    .price{margin:14px 0 4px;font-size:4.1rem;letter-spacing:-.08em;line-height:1}
    .price sup{font-size:1.4rem;vertical-align:top}
    .package .strap{min-height:48px;line-height:1.35}
    .package ul{flex:1;margin:18px 0 25px;padding-left:20px;font-size:.9rem;line-height:1.65}
    .package .button{width:100%;text-align:center}
    .fineprint{margin:30px 0 0;padding:18px;border:2px solid var(--ink);background:var(--paper);font-size:.85rem;line-height:1.5}
    .proof{background:var(--paper)}
    .proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .proof-card{display:flex;flex-direction:column;min-height:285px;padding:25px;border:3px solid var(--ink);box-shadow:var(--shadow)}
    .proof-card:nth-child(1){background:var(--yellow)}
    .proof-card:nth-child(2){background:var(--blue);color:#fff}
    .proof-card:nth-child(3){background:var(--green)}
    .proof-card small{text-transform:uppercase;letter-spacing:.1em}
    .proof-card h3{margin:30px 0 14px;font-size:2rem;line-height:.95;text-transform:uppercase}
    .proof-card p{flex:1;line-height:1.45;text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;word-break:normal}
    .proof-card a{align-self:start;text-transform:uppercase}
    .areas{background:var(--red)}
    .areas .title,.areas .lead{color:#fff}
    .areas-lead{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;word-break:normal}

    .area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    .area-grid a{padding:15px 13px;border:2px solid var(--ink);background:var(--paper);box-shadow:4px 4px 0 var(--ink);text-decoration:none;text-transform:uppercase;font-size:.8rem}
    .area-grid a:hover{background:var(--yellow);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
    .guardrail{margin-top:26px;padding:18px;border:2px solid var(--ink);background:var(--yellow);line-height:1.48}
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .step{padding:23px;border:3px solid var(--ink);background:var(--paper)}
    .step b{display:block;margin-bottom:24px;color:var(--red);font-size:3.2rem;line-height:1}
    .step h3{text-transform:uppercase}
    .step p{font-size:.9rem;line-height:1.5;text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;word-break:normal}
    .start{background:var(--green)}
    .order-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:35px;align-items:start}
    .selection{position:sticky;top:90px;padding:28px;border:3px solid var(--ink);background:var(--ink);box-shadow:var(--shadow);color:#fff}
    .selection small{text-transform:uppercase;letter-spacing:.1em;color:var(--yellow)}
    .selection strong{display:block;margin:12px 0;font-size:3.2rem;text-transform:uppercase}
    .selection .selected-price{font-size:4rem;color:var(--yellow)}
    .invoice-copy{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;word-break:normal}

    form{padding:28px;border:3px solid var(--ink);background:var(--paper);box-shadow:var(--shadow)}
    .choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:23px}
    .choice{padding:12px;border:2px solid var(--ink);background:#fff;cursor:pointer;text-align:center}
    .choice.active{background:var(--yellow)}
    label{display:block;margin-bottom:16px;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
    input,select,textarea{display:block;width:100%;margin-top:7px;padding:13px;border:2px solid var(--ink);background:#fff;border-radius:0;color:var(--ink)}
    textarea{min-height:120px;resize:vertical}
    .form-note{font-size:.75rem;line-height:1.45}
    .success{display:none;margin-top:18px;padding:15px;border:2px solid var(--ink);background:var(--yellow)}
    .faq{background:var(--paper)}
    details{border-top:2px solid var(--ink);padding:20px 0}
    details:last-child{border-bottom:2px solid var(--ink)}
    summary{cursor:pointer;font-size:1.2rem;text-transform:uppercase}
    details p{max-width:800px;line-height:1.55;text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;word-break:normal}
    @media (max-width:900px){
      nav a:not(:last-child){display:none}
      .hero-grid,.manifesto-grid,.order-grid{grid-template-columns:1fr}
      .signals,.steps{grid-template-columns:repeat(2,1fr)}
      .signals .signal:nth-child(2){border-right:0}
      .signals .signal:nth-child(-n+2){border-bottom:3px solid var(--ink)}
      .packages,.proof-grid{grid-template-columns:1fr}
      .package.featured{transform:none}
      .area-grid{grid-template-columns:repeat(3,1fr)}
      .selection{position:static}
    }
    @media (max-width:600px){
      .section{padding:64px 0}
      .wrap{width:min(100% - 22px,1180px)}
      .hero{padding-top:52px}
      .hero h1{font-size:clamp(3.5rem,21vw,6rem)}
      .services,.signals,.steps,.area-grid,.choice-grid{grid-template-columns:1fr}
      .signal{border-right:0;border-bottom:3px solid var(--ink)!important}
      .signal:last-child{border-bottom:0!important}
    }

    @media (max-width:900px){
    }

    @media (max-width:600px){
      .footer-bottom-inner a{display:inline-block;margin-top:10px}
    }

    .site-footer{
      background:var(--ink);
      color:#fff;
    }

    .footer-top{
      display:grid;
      grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr);
      gap:60px;
      align-items:start;
      padding:54px 0 38px;
    }

    .footer-brand strong,
    .footer-trust strong{
      display:block;
      margin:0;
      font-size:1.45rem;
      line-height:1.1;
      text-transform:uppercase;
    }

    .footer-brand p,
    .footer-trust p{
      margin:16px 0 0;
      max-width:650px;
      font-size:.86rem;
      line-height:1.65;
      text-align:justify;
      text-justify:inter-word;
      hyphens:auto;
      -webkit-hyphens:auto;
    }

    .footer-links{
      display:grid;
      grid-template-columns:repeat(2,minmax(130px,1fr));
      gap:14px 24px;
      align-items:start;
      font-size:.8rem;
      text-transform:uppercase;
      letter-spacing:.06em;
    }

    .footer-links a{
      display:block;
      padding:4px 0;
      color:#fff;
      text-decoration:none;
      white-space:nowrap;
    }

    .footer-links a:hover{
      text-decoration:underline;
    }

    .footer-divider{
      height:1px;
      background:rgba(255,255,255,.22);
    }

    .footer-lower{
      display:grid;
      grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);
      gap:60px;
      align-items:end;
      padding:34px 0 28px;
    }

    .footer-legal{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:10px;
      font-size:.76rem;
      text-align:right;
    }

    .footer-legal a{
      color:#fff;
      text-decoration:none;
    }

    .footer-legal a:hover{
      text-decoration:underline;
    }

    @media (max-width:900px){
      .footer-top,
      .footer-lower{
        grid-template-columns:1fr;
        gap:30px;
      }

      .footer-links{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }

      .footer-legal{
        align-items:flex-start;
        text-align:left;
      }
    }

    @media (max-width:600px){
      .footer-top{
        padding:40px 0 28px;
      }

      .footer-lower{
        padding:28px 0 24px;
      }

      .footer-links{
        grid-template-columns:1fr;
      }
    }

/* TASK45_CANONICAL_ARABIC_RTL
   Language behaviour only.
   Responsive geometry remains canonical for every language. */

html[lang="ar"]{
    direction:rtl;
}

html[lang="ar"] body{
    direction:rtl;
    text-align:right;
}

/* RTL flow. No independent Arabic layout dimensions. */
html[lang="ar"] .site-header,
html[lang="ar"] .hero-grid,
html[lang="ar"] .manifesto-grid,
html[lang="ar"] .order-grid,
html[lang="ar"] .start-grid,
html[lang="ar"] .footer-top,
html[lang="ar"] .footer-lower{
    direction:rtl;
}

html[lang="ar"] nav,
html[lang="ar"] .hero-actions,
html[lang="ar"] .footer-links{
    direction:rtl;
}

/* Arabic typography */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .title,
html[lang="ar"] .eyebrow,
html[lang="ar"] .brand,
html[lang="ar"] button,
html[lang="ar"] .button,
html[lang="ar"] summary{
    text-align:right;
}

/* Body copy follows Arabic reading direction while preserving
   the canonical English dimensions and responsive rules. */
html[lang="ar"] .lead,
html[lang="ar"] .hero-offer-text,
html[lang="ar"] .service p,
html[lang="ar"] .growth-copy,
html[lang="ar"] .package p,
html[lang="ar"] .package li,
html[lang="ar"] .areas-lead,
html[lang="ar"] .step p,
html[lang="ar"] details p,
html[lang="ar"] .footer-brand p,
html[lang="ar"] .footer-trust p{
    text-align:justify;
    text-justify:inter-word;
    hyphens:none;
    -webkit-hyphens:none;
}

/* Lists */
html[lang="ar"] .package ul{
    padding-left:0;
    padding-right:20px;
}

/* Form controls */
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select{
    direction:rtl;
    text-align:right;
}

/* Technical/customer data remains LTR */
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="url"],
html[lang="ar"] input[type="tel"],
html[lang="ar"] input[name="requested_domain"]{
    direction:ltr;
    text-align:left;
    unicode-bidi:plaintext;
}

html[lang="ar"] input[name="requested_domain"]::placeholder{
    direction:ltr;
    text-align:left;
}

/* Prices and package values remain visually stable */
html[lang="ar"] .price,
html[lang="ar"] [data-selected-package]{
    direction:ltr;
    unicode-bidi:isolate;
}

/* Footer alignment follows RTL without changing its geometry */
html[lang="ar"] .footer-legal{
    align-items:flex-start;
    text-align:right;
}

/* Mobile Arabic uses the SAME responsive system as English.
   Only language direction is adjusted here. */
@media (max-width:600px){
    html[lang="ar"] .site-header nav{
        text-align:right;
    }
}

/* TASK47_MOBILE_VIEWPORT_SIDE_SPACE
   Tiny shared mobile breathing room for all languages. */
@media (max-width:600px){
    body{
        padding-left:5px;
        padding-right:5px;
        box-sizing:border-box;
    }
}

/* TASK50_ARABIC_VISIBLE_PSEUDO_TEXT
   Visible words only. No geometry or layout changes. */
html[lang="ar"] .hero:after{
    content:"لندن";
}

html[lang="ar"] .package.featured:before{
    content:"أفضل توازن";
}

