/* /domain-names: views/pages/domain-names.php + js/domains.js. Plain CSS, prefix .dn-.
   Every element's BASE style is its finished state, so no-JS and reduced motion
   show a complete page. Entrances run only once domains.js puts .dn-live on <html>. */

:root {
    --dn-ink: #142a50; --dn-navy: #224685; --dn-mist: #eef1f8; --dn-line: #e2e8f0;
    --dn-green: #22c55e; --dn-green-ink: #14532d; --dn-slate: #475569;
}
[x-cloak] { display: none !important; }

/* ================================================= HERO */
.dn-hero { position: relative; isolation: isolate; overflow: clip; color: #fff;
    background: linear-gradient(135deg, #1b386a 0%, #142a50 60%, #0f2140 100%); }
.dn-hero__tex { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(700px 480px at 85% 30%, rgba(59,130,246,.22), transparent 70%),
        radial-gradient(520px 380px at 70% 100%, rgba(34,197,94,.14), transparent 70%),
        radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px) 0 0 / 24px 24px;
    animation: dn-drift 40s linear infinite; }
@keyframes dn-drift { to { background-position: 0 0, 0 0, 240px 120px; } }
.dn-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; margin-top: 1.4rem; }
.dn-hero__grid .dn-hero__lede { margin-top: 0; }
.dn-hero__grid > * { min-width: 0; }
@media (min-width: 1024px) { .dn-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3.5rem; } }
/* Full width above the two columns, one line on desktop (Lee, 2026-11-11). */
.dn-hero h1 { color: #fff; /* the site's global heading colour is navy */ font-size: clamp(2.3rem, 3.95vw, 3.55rem); font-weight: 900; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; margin: 0 0 .4rem; }
@media (min-width: 1024px) { .dn-hero h1 { white-space: nowrap; } }
/* Scrolling to the search, results or order form clears the sticky header. */
#search, #results, #order { scroll-margin-top: 96px; }
@media (max-width: 1023px) { #search, #results, #order { scroll-margin-top: 76px; } }
.dn-hero h1 em { font-style: normal; color: #86efac; }
.dn-hero__lede { margin-top: 1.1rem; font-size: 1.15rem; line-height: 1.6; color: #dbe2ee; text-wrap: pretty; }
.dn-search { margin-top: 1.8rem; display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 640px) { .dn-search { flex-direction: row; } }
.dn-search input { flex: 1; min-width: 0; border: 0; background: #fff; color: #0f172a; font-size: 1.25rem; font-weight: 600;
    padding: 1.05rem 1.25rem; outline: none; box-shadow: 0 0 0 0 rgba(134,239,172,0); transition: box-shadow .2s; }
.dn-search input:focus { box-shadow: 0 0 0 4px rgba(134,239,172,.6); }
.dn-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 0; cursor: pointer;
    background: var(--dn-green); color: var(--dn-ink); font-weight: 800; font-size: 1.1rem; padding: 1rem 2rem;
    transition: background-color .2s, transform .2s, box-shadow .2s; text-decoration: none; }
.dn-btn:hover { background: #4ade80; box-shadow: 0 10px 24px -10px rgba(34,197,94,.7); }
.dn-btn:disabled { opacity: .8; cursor: progress; }
.dn-spin { width: 1.1rem; height: 1.1rem; border: 3px solid rgba(15,23,42,.25); border-top-color: #0f172a; border-radius: 50%; animation: dn-spin .8s linear infinite; }
@keyframes dn-spin { to { transform: rotate(360deg); } }
.dn-hero__chips { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.dn-hero__chips li { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); padding: .45rem .8rem; font-size: .9rem; color: #dbe2ee; }
.dn-hero__chips b { color: #fff; font-weight: 800; }
.dn-hero__chips s { color: #92a8cc; margin-right: .25rem; }
.dn-hero__more { margin-top: 1rem; font-size: .92rem; color: #b7c5dd; }
.dn-test { margin-bottom: 2rem; background: #fef3c7; color: #78350f; border-left: 4px solid #f59e0b; padding: .8rem 1.1rem; font-size: .9rem; font-weight: 600; }
.dn-flash { margin-bottom: 1.5rem; background: #fff1f2; color: #be123c; border-left: 4px solid #f43f5e; padding: 1rem; font-weight: 600; }

/* Address bar scene: types example names, the price ticket follows */
.dn-scene { position: relative; min-height: 400px; display: flex; flex-direction: column; justify-content: flex-start; gap: 1.1rem; padding: 3.6rem 0 3.4rem; }
.dn-bar { position: relative; z-index: 2; background: #fff; color: #0f172a; display: flex; align-items: center; gap: .7rem;
    padding: 1.1rem 1.25rem; box-shadow: 0 30px 60px -25px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.4);
    font-size: clamp(1.1rem, 2.2vw, 1.6rem); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; }
.dn-bar__lock { flex: none; width: 1.3em; height: 1.3em; }
.dn-bar__www { color: #94a3b8; font-weight: 600; }
.dn-bar__name { color: var(--dn-ink); }
.dn-bar__tld { color: var(--dn-c1, var(--dn-navy)); transition: color .3s; }
.dn-bar__caret { display: inline-block; width: 3px; height: 1.1em; background: var(--dn-navy); margin-left: 2px; vertical-align: -.15em; animation: dn-blink 1s steps(1) infinite; }
@keyframes dn-blink { 50% { opacity: 0; } }
.dn-bar__tag { margin-left: auto; flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b; background: #f1f5f9; padding: .3rem .55rem; }
@media (max-width: 559px) { .dn-bar__tag { display: none; } }
.dn-ticket { position: relative; z-index: 2; align-self: flex-end; width: min(100%, 360px); color: #fff;
    background: linear-gradient(135deg, var(--dn-c1, #224685), var(--dn-c2, #3b82f6)); padding: 1.1rem 1.3rem 1.2rem;
    box-shadow: 0 24px 50px -24px rgba(0,0,0,.6); transition: background .5s; }
.dn-ticket__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.dn-ticket__tld { font-size: 2.2rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.dn-ticket__half { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: #86efac; color: var(--dn-green-ink); padding: .25rem .5rem; }
.dn-ticket__price { margin-top: .6rem; font-size: 2.6rem; font-weight: 900; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dn-ticket__price small { font-size: .95rem; font-weight: 600; letter-spacing: 0; opacity: .85; }
.dn-ticket__then { margin-top: .35rem; font-size: .92rem; opacity: .9; }
.dn-ticket.is-swap { animation: dn-pop .45s cubic-bezier(.2,.9,.3,1.3); }
@keyframes dn-pop { from { transform: translateY(10px) rotate(-1.5deg); opacity: .4; } }
.dn-orbit { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dn-orbit span { position: absolute; font-weight: 800; color: rgba(255,255,255,.28); font-size: 1.05rem; border: 1px solid rgba(255,255,255,.14);
    padding: .3rem .6rem; animation: dn-float 9s ease-in-out infinite; transition: color .3s, border-color .3s, background-color .3s; }
.dn-orbit span.is-on { color: #fff; border-color: #86efac; background: rgba(134,239,172,.16); }
@keyframes dn-float { 50% { transform: translateY(-12px); } }
@media (max-width: 1023px) { .dn-scene { min-height: 0; padding: 0; } .dn-orbit { display: none; } .dn-ticket { align-self: stretch; width: auto; } }

/* ================================================= RESULTS */
.dn-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1.25rem; align-items: center; }
@media (min-width: 640px) { .dn-row { grid-template-columns: minmax(0, 1fr) auto auto; } }
.dn-main { grid-column: 1 / -1; }
@media (min-width: 640px) { .dn-main { grid-column: auto; } }
.dn-name { font-weight: 800; font-size: 1.15rem; color: #0f172a; }
.dn-name span { overflow-wrap: anywhere; }
.dn-name b { color: var(--dn-navy); white-space: nowrap; }
.dn-was { color: #94a3b8; font-size: .85rem; text-decoration: line-through; margin-right: .3rem; }

/* ================================================= SECTION SHARED */
.dn-sec { padding: 4.5rem 0; position: relative; isolation: isolate; }
@media (min-width: 1024px) { .dn-sec { padding: 6rem 0; } }
.dn-h2 { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.08; color: var(--dn-ink); text-wrap: balance; margin: 0; }
.dn-intro { margin-top: 1rem; font-size: 1.15rem; line-height: 1.65; color: var(--dn-slate); text-wrap: pretty; }
.dn-dots { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(rgba(34,70,133,.11) 1px, transparent 1.4px) 0 0 / 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%); }

/* ================================================= TILES */
.dn-tiles { margin-top: 2.75rem; display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 560px) { .dn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dn-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dn-tile { position: relative; overflow: hidden; isolation: isolate; color: #fff; text-align: left; cursor: pointer; border: 0;
    display: flex; flex-direction: column; min-height: 300px; padding: 1.4rem 1.4rem 1.3rem;
    background: linear-gradient(150deg, var(--dn-c1), var(--dn-c2)); font: inherit;
    transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s; }
.dn-tile:hover, .dn-tile:focus-visible { transform: translateY(-6px); box-shadow: 0 28px 50px -24px var(--dn-c1); }
.dn-tile:focus-visible { outline: 3px solid #86efac; outline-offset: 3px; }
/* the ending as a huge drifting watermark behind the tile */
.dn-tile::before { content: attr(data-tld); position: absolute; z-index: -1; right: -.15em; bottom: -.32em; font-size: 9rem; font-weight: 900;
    letter-spacing: -.06em; line-height: 1; color: rgba(255,255,255,.09); white-space: nowrap; animation: dn-water 14s ease-in-out infinite; }
@keyframes dn-water { 50% { transform: translateX(-18px); } }
/* a light sweep on hover */
.dn-tile::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .8s; }
.dn-tile:hover::after { transform: translateX(120%); }
.dn-tile__ribbon { align-self: flex-start; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    background: #86efac; color: var(--dn-green-ink); padding: .3rem .6rem; }
.dn-tile__tld { margin-top: 1.1rem; font-size: clamp(2.4rem, 3.4vw, 3.1rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.dn-tile__use { margin-top: .5rem; font-size: .92rem; line-height: 1.45; color: rgba(255,255,255,.85); }
.dn-tile__price { margin-top: auto; padding-top: 1.2rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.dn-tile__price b { font-size: 2.4rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.dn-tile__price s { font-size: 1rem; color: rgba(255,255,255,.65); }
.dn-tile__then { margin-top: .3rem; font-size: .88rem; color: rgba(255,255,255,.85); }
.dn-tile__go { margin-top: 1rem; display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .95rem; }
.dn-tile__go svg { transition: transform .25s; }
.dn-tile:hover .dn-tile__go svg { transform: translateX(4px); }
.dn-tilenote { margin-top: 1.5rem; color: var(--dn-slate); font-size: .95rem; }

/* ================================================= COMPARISON */
.dn-compare { background: linear-gradient(160deg, #142a50, #0f2140); color: #fff; overflow: clip; }
.dn-compare .dn-h2 { color: #fff; }
.dn-compare .dn-intro { color: #b7c5dd; }
.dn-compare__tex { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 120px),
                radial-gradient(600px 400px at 10% 0%, rgba(34,197,94,.14), transparent 70%); }
.dn-table-wrap { margin-top: 2.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dn-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; background: #fff; color: #0f172a; }
.dn-table th, .dn-table td { padding: 1.1rem 1rem; text-align: center; border-bottom: 1px solid var(--dn-line); }
.dn-table thead th { font-size: .95rem; font-weight: 800; color: var(--dn-ink); background: #f8fafc; vertical-align: bottom; }
.dn-table tbody th { text-align: left; font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; color: var(--dn-ink); }
.dn-table td { font-size: 1.15rem; font-weight: 700; color: #334155; font-variant-numeric: tabular-nums; }
.dn-table td small { display: block; font-size: .75rem; font-weight: 500; color: #94a3b8; }
.dn-table .is-us { background: #f0fdf4; position: relative; box-shadow: inset 2px 0 0 var(--dn-green), inset -2px 0 0 var(--dn-green); }
.dn-table thead .is-us { background: var(--dn-green); color: var(--dn-ink); }
.dn-table thead .is-us span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem; }
.dn-table td.is-us { color: var(--dn-green-ink); font-size: 1.45rem; font-weight: 900; }
.dn-table td.is-na { color: #94a3b8; font-size: .85rem; font-weight: 500; }
.dn-table tr:last-child td, .dn-table tr:last-child th { border-bottom: 0; }
.dn-table tbody tr:last-child .is-us { box-shadow: inset 2px 0 0 var(--dn-green), inset -2px 0 0 var(--dn-green), inset 0 -2px 0 var(--dn-green); }
/* phones: one ranked list per ending instead of the wide table */
.dn-mlist { display: none; margin-top: 2rem; gap: 1rem; }
@media (max-width: 759px) { .dn-table-wrap { display: none; } .dn-mlist { display: grid; } }
.dn-mlist__end { background: #fff; color: #0f172a; }
.dn-mlist__end h3 { margin: 0; padding: .9rem 1.1rem; font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; color: var(--dn-ink); border-bottom: 1px solid var(--dn-line); }
.dn-mlist__end ol { list-style: none; margin: 0; padding: 0; }
.dn-mlist__end li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--dn-line); font-weight: 700; color: #334155; font-variant-numeric: tabular-nums; }
.dn-mlist__end li:last-child { border-bottom: 0; }
.dn-mlist__end li.is-us { background: #f0fdf4; color: var(--dn-green-ink); font-size: 1.15rem; font-weight: 900; box-shadow: inset 4px 0 0 var(--dn-green); }
.dn-mlist__end li.is-us small { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #15803d; }
.dn-mlist__end li.is-na span:last-child { color: #94a3b8; font-weight: 500; font-size: .85rem; }
.dn-compare__also { margin-top: 1.5rem; font-size: 1.02rem; color: #dbe2ee; line-height: 1.6; }
.dn-compare__note { margin-top: .9rem; font-size: .82rem; color: #92a8cc; line-height: 1.55; }
.dn-compare__note a { color: #b7c5dd; text-decoration: underline; }
.dn-compare__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.dn-compare__cta a.dn-tel { color: #fff; font-weight: 800; font-size: 1.15rem; text-decoration: none; }

/* ================================================= FEATURES */
.dn-feats { margin-top: 2.75rem; display: grid; gap: 1.25rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 700px) { .dn-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dn-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dn-feat { background: #fff; border: 1px solid var(--dn-line); padding: 1.6rem 1.6rem 1.7rem; display: flex; flex-direction: column; }
.dn-feat__art { width: 128px; height: 104px; margin: 0 auto 1.2rem; }
.dn-feat h3 { font-size: 1.25rem; font-weight: 800; color: var(--dn-ink); letter-spacing: -.01em; text-align: center; text-wrap: balance; margin: 0; }
.dn-feat p { margin-top: .6rem; color: var(--dn-slate); line-height: 1.6; text-align: center; text-wrap: pretty; }
/* illustration movement (ambient, gentle loops) */
.dn-a-spin { transform-box: fill-box; transform-origin: center; animation: dn-rot 8s linear infinite; }
@keyframes dn-rot { to { transform: rotate(360deg); } }
.dn-a-swing { transform-box: fill-box; transform-origin: 50% 0; animation: dn-swing 4s ease-in-out infinite; }
@keyframes dn-swing { 50% { transform: rotate(6deg); } }
.dn-a-pulse { transform-box: fill-box; transform-origin: center; animation: dn-pulse 2.4s ease-in-out infinite; }
@keyframes dn-pulse { 50% { transform: scale(1.12); opacity: .6; } }
.dn-a-rise { animation: dn-rise 3s ease-in-out infinite; }
@keyframes dn-rise { 50% { transform: translateY(-5px); } }
.dn-a-wave { animation: dn-wave 2s ease-in-out infinite; }
.dn-a-wave.d2 { animation-delay: .3s; } .dn-a-wave.d3 { animation-delay: .6s; }
@keyframes dn-wave { 50% { opacity: .2; } }

/* ================================================= STEPS */
.dn-steps { margin-top: 2.75rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; list-style: none; padding: 0; }
@media (min-width: 900px) { .dn-steps { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 1rem; } }
.dn-step { background: var(--dn-mist); padding: 1.6rem; height: 100%; }
.dn-step__n { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: var(--dn-navy); color: #fff; font-weight: 900; font-size: 1.3rem; }
.dn-step h3 { margin: 1rem 0 0; font-size: 1.25rem; font-weight: 800; color: var(--dn-ink); }
.dn-step p { margin-top: .5rem; color: var(--dn-slate); line-height: 1.6; }
.dn-step__link { display: none; }
@media (min-width: 900px) { .dn-step__link { display: block; width: 48px; height: 3px; margin-top: 3.1rem; background: linear-gradient(90deg, var(--dn-navy) 50%, #b7c5dd 50%) 0 0 / 200% 100%; animation: dn-flow 2.4s linear infinite; } }
@keyframes dn-flow { to { background-position: -100% 0; } }

/* ================================================= CHOOSING */
.dn-choose { display: grid; gap: 2rem; margin-top: 2.5rem; }
@media (min-width: 1024px) { .dn-choose { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; } }
.dn-card { background: #fff; border: 1px solid var(--dn-line); padding: 1.8rem; }
.dn-card h3 { margin: 0 0 1rem; font-size: 1.35rem; font-weight: 800; color: var(--dn-ink); }
.dn-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.dn-tips li { position: relative; padding-left: 2rem; line-height: 1.6; color: #334155; }
/* bullets are the dot of a domain name: a green dot on a navy square */
.dn-tips li::before { content: ''; position: absolute; left: 0; top: .15em; width: 1.3rem; height: 1.3rem;
    background: radial-gradient(circle at 50% 50%, #22c55e 0 .26rem, transparent .29rem), var(--dn-ink); }
.dn-which { display: grid; gap: .1rem; }
.dn-which div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--dn-line); align-items: baseline; }
.dn-which div:last-child { border-bottom: 0; }
.dn-which b { font-size: 1.2rem; font-weight: 900; color: var(--dn-navy); letter-spacing: -.02em; }
.dn-which span { color: #334155; line-height: 1.55; }

/* ================================================= CLOSING BAND */
.dn-close { background: var(--dn-mist); }
.dn-close__box { background: linear-gradient(135deg, #224685, #1b386a); color: #fff; padding: 2.5rem 1.5rem; position: relative; overflow: hidden; isolation: isolate; }
@media (min-width: 768px) { .dn-close__box { padding: 3.5rem; } }
.dn-close__box::before { content: '.co.uk  .com  .uk  .org.uk  .net  .online  .shop  .co.uk  .com  .uk'; position: absolute; z-index: -1; left: 0; top: 50%;
    transform: translateY(-50%); white-space: nowrap; font-size: 7rem; font-weight: 900; letter-spacing: -.04em; color: rgba(255,255,255,.05);
    animation: dn-marquee 50s linear infinite; }
@keyframes dn-marquee { to { transform: translate(-50%, -50%); } }
.dn-close__box h2 { color: #fff; }
.dn-close__box p { color: #dbe2ee; margin-top: .8rem; font-size: 1.1rem; }
.dn-close__tel { margin-top: 1.2rem; color: #dbe2ee; font-size: .95rem; }
.dn-close__tel a { color: #fff; font-weight: 800; text-decoration: none; }

/* ================================================= ENTRANCES (only with JS) */
.dn-live .dn-rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1); transition-delay: var(--dn-d, 0s); }
.dn-live .dn-rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .dn-hero__tex, .dn-orbit span, .dn-tile::before, .dn-close__box::before, .dn-step__link,
    .dn-a-spin, .dn-a-swing, .dn-a-pulse, .dn-a-rise, .dn-a-wave, .dn-bar__caret { animation: none !important; }
    .dn-live .dn-rv { opacity: 1; transform: none; transition: none; }
    .dn-spin { animation-duration: 2.4s; }
}