/* GrabbyHost brand foundation. Existing icon fonts are intentionally untouched. */
@font-face {
    font-family: 'Grabby Sans';
    src: url('../../../assets/fonts/open-sans-family/open-sans-family-regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Grabby Sans';
    src: url('../../../assets/fonts/open-sans-family/open-sans-family-600.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
:root {
    --gh-font-family: 'Grabby Sans', 'Segoe UI', Arial, sans-serif;
    --gh-brand-container: 2088px;
    --gh-brand-gutter: 40px;
    --gh-container: var(--gh-brand-container);
    --gh-content: var(--gh-brand-container);
}
body.grabby-modern-page,
body.grabby-modern-page :is(h1,h2,h3,h4,h5,h6,p,a,button,input,select,textarea) {
    font-family: var(--gh-font-family);
}
body.grabby-modern-page .gh-home-container,
body.grabby-modern-page .gm-hosting > .container,
body.grabby-modern-page .gh-footer-grid,
body.grabby-modern-page .gh-footer-bottom {
    width: min(var(--gh-brand-container), calc(100% - var(--gh-brand-gutter) * 2));
    max-width: none;
    margin-inline: auto;
}
body.grabby-modern-page #header.gh-header {
    background: radial-gradient(circle at 15% 0, #2c5bc059, #0000 17rem), linear-gradient(#101d3b 0%, #091329 100%);
}
body.grabby-modern-page #header .gh-top-header {
    width: min(var(--gh-brand-container), calc(100% - var(--gh-brand-gutter) * 2));
    min-height: 96px;
    margin-inline: auto;
    padding: 14px 0;
    gap: 28px;
    background: transparent;
}
#header .gh-brand img { height: auto; width: 230px; max-width: 230px; }
#header .gh-category-nav { gap: 12px; }
#header .gh-category-link { font-size: 17px; font-weight: 700; padding-inline: 6px; }
#header .gh-header-actions { gap: 20px; }
#header .gh-header-action { flex-direction: row; align-items: center; gap: 12px; }
#header .gh-header-action strong, #header .gh-cart-action strong { font-size: 14px; font-weight: 600; }
#header .gh-header-service-icon { font-size: 23px; color: #d8dfe9; }
#header .gh-theme-toggle-desktop { border-right: 1px solid #ffffff33; border-radius: 0; padding-right: 26px; }

/* Only the real homepage hero: other landing-page hero classes are preserved. */
.gh-home .gh-reference-hero {
    background: radial-gradient(ellipse at 105% 90%, #ffdf9f99, transparent 40%), linear-gradient(110deg, #dfedfb 0%, #f5f8fb 49%, #fff4e6 100%);
}
.gh-reference-hero .gh-home-hero-centered {
    min-width: 0;
    padding: 48px 0 64px;
    text-align: center;
}
.gh-hero-origin { display: inline-flex; align-items: center; gap: 14px; padding: 9px 18px; margin-bottom: 16px; border: 1px solid #e8ebf0; border-radius: 999px; background: #ffffffd9; box-shadow: 0 2px 3px #14203306; color: #667085; font-size: 16px; font-weight: 600; }
.gh-hero-origin > i { color: #9aa6b5; font-size: 15px; }
.gh-uae-flag { display: inline-block; width: 24px; height: 18px; border-left: 6px solid #ef3340; background: linear-gradient(#009a49 0 33.333%, #fff 33.333% 66.666%, #111 66.666%); }
.gh-reference-hero h1 { color: #070e1b; font-size: clamp(42px, 3.55vw, 76px); font-weight: 900; -webkit-text-stroke: .35px currentColor; line-height: 1.08; letter-spacing: -.035em; margin: 0; }
.gh-reference-hero h1 .gh-home-hero-accent { color: #ff9500; }
.gh-reference-hero .gh-home-hero-sub { max-width: 780px; margin: 13px auto 16px; font-size: 22px; line-height: 1.45; color: #5b6575; font-weight: 600; }
.gh-reference-hero .gh-home-domain-form { width: min(1060px, 100%); max-width: 1060px; min-height: 76px; margin: 16px auto 18px; padding: 10px 13px 10px 30px; gap: 20px; border-radius: 999px; background: #fff; box-shadow: 0 12px 24px #1f2f3f1f; }
.gh-reference-hero .gh-home-domain-form-icon { font-size: 29px; color: #8a96a8; }
.gh-reference-hero .gh-home-domain-form input { height: 52px; font-size: 19px; color: #142033; background: transparent; }
.gh-reference-hero .gh-home-domain-form input::placeholder { color: #8590a1; opacity: 1; }
.gh-reference-hero .gh-home-domain-form button { height: 55px; padding-inline: 30px; font-size: 18px; background: #ff9900; color: white; }
.gh-reference-hero .gh-home-domain-form:focus-within { outline: 3px solid #2563eb55; outline-offset: 3px; }
.gh-reference-hero .gh-home-tld-row { display: flex; max-width: 1035px; width: 100%; gap: 28px; margin: 0 auto; }
.gh-reference-hero .gh-home-tld-chip { flex: 1 1 150px; justify-content: center; padding: 12px 14px 14px; min-height: 110px; border: 1px solid #f0f1f5; border-radius: 18px; background: #fffffff2; text-align: center; box-shadow: 0 3px 3px #1720331a; }
.gh-reference-hero .gh-home-tld-chip b { color: #111827; font-size: 25px; font-weight: 900; -webkit-text-stroke: .3px currentColor; line-height: 1.3; }
.gh-reference-hero .gh-home-tld-chip b::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2586f4; margin-right: 2px; }
.gh-reference-hero .gh-home-tld-chip[data-tld='ae'] b { color: #ff9500; }
.gh-reference-hero .gh-home-tld-chip[data-tld='ae'] b::before { display: none; }
.gh-reference-hero .gh-home-tld-chip[data-tld='net'] b::before { background: #10b981; }
.gh-reference-hero .gh-home-tld-chip[data-tld='org'] b::before { background: #6d28a3; }
.gh-reference-hero .gh-home-tld-chip[data-tld='me'] b::before { background: #ed1740; }
.gh-reference-hero .gh-home-tld-chip small { margin-top: 4px; color: #667085; font-size: 15px; }
.gh-hero-domain-price { display: block; font-size: 17px; line-height: 1.4; color: #334155; }
.gh-hero-domain-price strong { font-weight: 700; color: #346cff; }
.gh-hero-assurances { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px 48px; margin: 28px auto 0; color: #374151; font-size: 14px; font-weight: 600; }
.gh-hero-assurances > span { display: inline-flex; gap: 11px; align-items: center; }
.gh-hero-assurances i { color: #94a0b1; font-size: 21px; }
body.gh-dark-mode .gh-reference-hero { background: radial-gradient(circle at 85% 90%, #ff990012, transparent 45%), linear-gradient(#101d3b, #091329); }
body.gh-dark-mode .gh-reference-hero h1 { color: #f8fafc; }
body.gh-dark-mode .gh-reference-hero .gh-home-hero-sub, body.gh-dark-mode .gh-hero-assurances { color: #cbd5e1; }
body.gh-dark-mode .gh-reference-hero .gh-home-tld-chip { background: #15233a; border-color: #304059; }
body.gh-dark-mode .gh-reference-hero .gh-home-tld-chip b, body.gh-dark-mode .gh-hero-domain-price { color: #eef2ff; }
body.gh-dark-mode .gh-reference-hero .gh-home-tld-chip small { color: #aab4c3; }
/* Preserve the approved desktop design while prioritising primary navigation.
   The header shares the site's 85% content measure, so secondary support links
   progressively step down before the category navigation is collapsed. */
@media (min-width: 1800px) {
    /* Keep Contact and Knowledgebase available as labelled icon controls. */
    #header .gh-header-action.d-xl-flex strong { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    #header .gh-header-action.d-xl-flex { min-width: 44px; min-height: 44px; justify-content: center; }
}
@media (min-width: 1200px) and (max-width: 1799.98px) {
    /* These destinations remain available in the navigation and footer. */
    #header .gh-header-action.d-none.d-xl-flex { display: none !important; }
}
@media (max-width: 1700px) {
    #header .gh-brand img { width: 184px; }
    #header .gh-category-nav { gap: 2px; }
    #header .gh-category-link { font-size: 14px; }
    #header .gh-header-actions { gap: 10px; }
    body.grabby-modern-page #header .gh-top-header { gap: 16px; }
}
@media (min-width: 1440px) and (max-width: 1499.98px) {
    /* Final compact desktop step before the existing mobile-navigation mode. */
    #header .gh-brand img { width: 160px; }
    #header .gh-category-nav { gap: 0; }
    #header .gh-category-link { padding-inline: 4px; font-size: 13px; }
    body.grabby-modern-page #header .gh-top-header { gap: 10px; }
}
@media (max-width: 1100px) {
    :root { --gh-brand-gutter: 20px; }
    .gh-reference-hero .gh-home-hero-sub { font-size: 18px; }
    .gh-reference-hero .gh-home-tld-row { gap: 12px; }
}
/* Explicit tracks prevent long currency values and input defaults widening the page. */
.gh-reference-hero .gh-home-domain-form { box-sizing: border-box; }
.gh-reference-hero .gh-home-tld-chip { min-width: 0; box-sizing: border-box; overflow-wrap: anywhere; }
.gh-reference-hero .gh-home-tld-chip > div { min-width: 0; }
.gh-uae-flag { flex-shrink: 0; }
.gh-reference-hero .gh-home-domain-form button:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
@media (max-width: 1439.98px) {
    body.grabby-modern-page #header .gh-top-header { min-height: 76px; padding-block: 10px; gap: 12px; }
    #header .gh-brand { margin-right: 0; flex-shrink: 0; }
    #header .gh-category-nav > .gh-category-link { display: none; }
    #header .gh-mobile-nav-toggle { min-width: 44px; min-height: 44px; }
}
@media (max-width: 900px) {
    .gh-reference-hero .gh-home-hero-centered { padding-block: 40px 48px; }
    .gh-reference-hero .gh-home-tld-chip { flex: 0 1 calc((100% - 24px) / 3); }
    .gh-hero-assurances { gap: 18px 28px; }
    #header .gh-header-action { display: none; }
}
@media (max-width: 767.98px) {
    body.grabby-modern-page #header .gh-top-header { min-height: 68px; gap: 8px; padding-block: 8px; }
    #header .gh-brand img { width: 155px; max-width: 155px; height: auto; }
    #header .gh-header-actions { gap: 6px; padding: 0; margin-left: auto; border: 0; box-shadow: none; }
    #header .gh-category-nav { margin-left: 0; }
    #header .gh-cart-action, #header .gh-currency-toggle { min-height: 44px; }
    .gh-reference-hero h1 { font-size: clamp(32px, 5.8vw, 44px); line-height: 1.15; }
    .gh-reference-hero .gh-home-domain-form { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; border-radius: 22px; padding: 14px; }
    .gh-reference-hero .gh-home-domain-form-icon { grid-column: 1; grid-row: 1; font-size: 24px; }
    .gh-reference-hero .gh-home-domain-form input:not([type='hidden']) { grid-column: 2; grid-row: 1; width: 100%; height: 48px; font-size: 16px; }
    .gh-reference-hero .gh-home-domain-form button { grid-column: 1 / -1; grid-row: 2; justify-content: center; width: 100%; margin: 0; height: 50px; font-size: 16px; }
    .gh-hero-origin { font-size: 14px; gap: 8px; padding: 9px 12px; }
    .gh-hero-assurances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; gap: 16px; max-width: 450px; }
    .gh-hero-assurances > span { gap: 8px; }
    .gh-hero-assurances i { flex-shrink: 0; font-size: 18px; }
}
@media (max-width: 575.98px) {
    :root { --gh-brand-gutter: 16px; }
    #header .gh-brand img { width: 138px; max-width: 138px; }
    #header .gh-cart-action { min-width: 36px; padding-inline: 4px; }
    #header .gh-currency-toggle { padding-inline: 6px; }
    .gh-reference-hero .gh-home-hero-centered { padding-block: 32px 40px; }
    .gh-reference-hero h1 { font-size: clamp(28px, 7vw, 38px); }
    .gh-reference-hero .gh-home-hero-sub { font-size: 16px; margin-block: 16px 20px; }
    .gh-reference-hero .gh-home-tld-chip { flex-basis: calc((100% - 12px) / 2); padding-inline: 10px; }
    .gh-reference-hero .gh-home-tld-chip b { font-size: 24px; }
    .gh-hero-origin { max-width: 100%; box-sizing: border-box; font-size: 12px; }
    .gh-hero-assurances { font-size: 13px; margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .gh-reference-hero *, #header .gh-brand img { animation: none !important; transition: none !important; }
}
