/* =============================================================
   Tee Print Vibe: page-level styles
   Homepage UK map, locations, printing services, quote form,
   contact and about pages. Loaded after site.css (uses its tokens).
   ============================================================= */

/* ---------------- Homepage: UK map with city pins ---------------- */

.ukband .usa-copy .section-sub { max-width: 560px; }
.ukband-links { max-height: none; }
.ukband-links a.is-lit { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.ukband-links .ukband-all { background: transparent; border-style: dashed; }

.ukmap { display: flex; justify-content: center; }
.ukmap-frame {
    position: relative;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 613 / 921;
    margin: 0 auto;
}
.usa-map.ukmap .ukmap-frame img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; max-height: none;
    object-fit: contain;
}
.ukmap-pin {
    position: absolute;
    width: 22px; height: 22px;
    margin: -11px 0 0 -11px;
    display: grid; place-items: center;
    z-index: 2;
    border-radius: 50%;
    outline: none;
}
.ukmap-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--navy-deep);
    box-shadow: 0 0 0 3px rgba(252, 169, 12, .28);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ukmap-pin.is-hq .ukmap-dot { width: 14px; height: 14px; background: #fff; box-shadow: 0 0 0 4px rgba(252, 169, 12, .55), 0 0 18px rgba(252, 169, 12, .6); }
.ukmap-pin:hover, .ukmap-pin:focus-visible, .ukmap-pin.is-lit { z-index: 5; }
.ukmap-pin:hover .ukmap-dot,
.ukmap-pin:focus-visible .ukmap-dot,
.ukmap-pin.is-lit .ukmap-dot { transform: scale(1.55); background: #fff; box-shadow: 0 0 0 4px var(--gold); }
.ukmap-tip {
    position: absolute;
    left: 50%; bottom: calc(100% + 4px);
    transform: translate(-50%, 4px);
    white-space: nowrap;
    background: #fff;
    color: var(--navy);
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    padding: .3rem .6rem;
    border-radius: 6px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
.ukmap-tip::after {
    content: ""; position: absolute; left: 50%; top: 100%;
    margin-left: -5px; border: 5px solid transparent; border-top-color: #fff;
}
.ukmap-pin.tip-left .ukmap-tip { left: auto; right: -4px; transform: translate(0, 4px); }
.ukmap-pin.tip-left .ukmap-tip::after { left: auto; right: 10px; }
.ukmap-pin:hover .ukmap-tip,
.ukmap-pin:focus-visible .ukmap-tip,
.ukmap-pin.is-lit .ukmap-tip { opacity: 1; transform: translate(-50%, 0); }
.ukmap-pin.tip-left:hover .ukmap-tip,
.ukmap-pin.tip-left:focus-visible .ukmap-tip,
.ukmap-pin.tip-left.is-lit .ukmap-tip { transform: translate(0, 0); }

@media (max-width: 820px) {
    .ukmap-frame { max-width: 280px; }
}

/* ---------------- Location page ---------------- */

.lp-hero {
    position: relative;
    background: var(--navy-deep);
    color: #fff;
    padding: 3.5rem 0 4rem;
    overflow: hidden;
}
.lp-hero-bg { position: absolute; inset: 0; }
.lp-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.lp-hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(6, 32, 33, .96) 0%, rgba(5, 105, 107, .78) 60%, rgba(6, 32, 33, .55) 100%);
}
.lp-hero-inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 3rem; align-items: center;
}
.lp-hero-title { color: #fff; font-size: clamp(2rem, 4.2vw, 3.3rem); text-transform: uppercase; margin: 0 0 .9rem; line-height: 1.05; }
.lp-hero-title span { color: var(--gold); }
.lp-hero-sub { color: #d3e3e3; font-size: 1.05rem; max-width: 620px; margin: 0 0 1.6rem; }
.lp-hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; }
.lp-hero-ticks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.lp-hero-ticks li { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600; color: #eaf5f5; }
.lp-hero-ticks svg { color: var(--gold); }

.lp-hero-card {
    background: rgba(255, 255, 255, .97);
    color: var(--text);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    box-shadow: var(--shadow-lg);
    border-top: 4px solid var(--gold);
}
.lp-hero-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--text-strong); text-transform: uppercase; margin: 0 0 1rem; }
.lp-hero-card-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .75rem; }
.lp-hero-card-list li { display: flex; gap: .65rem; align-items: flex-start; font-size: .92rem; line-height: 1.45; }
.lp-hero-card-list svg { color: var(--blue); flex: 0 0 auto; margin-top: .15rem; }
.lp-hero-card-list a { color: var(--text-strong); font-weight: 600; word-break: break-word; }
.lp-hero-card-btn { width: 100%; justify-content: center; }

.lp-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.lp-intro .section-title { margin-bottom: 1rem; }
.lp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lp-fact {
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.2rem;
    display: flex; flex-direction: column; gap: .35rem;
}
.lp-fact:nth-child(1), .lp-fact:nth-child(4) { background: var(--blue); border-color: var(--blue); }
.lp-fact:nth-child(1) .lp-fact-label, .lp-fact:nth-child(4) .lp-fact-label { color: #d6ecec; }
.lp-fact:nth-child(1) .lp-fact-num, .lp-fact:nth-child(4) .lp-fact-num { color: var(--gold); }
.lp-fact-num { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--blue); }
.lp-fact-label { font-size: .88rem; color: var(--text-muted); font-weight: 500; }

.lp-svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.lp-svc {
    display: flex; flex-direction: column; gap: .45rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.3rem;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lp-svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(5, 105, 107, .35); color: var(--text); }
.lp-svc-icon {
    width: 50px; height: 50px; border-radius: 12px;
    display: grid; place-items: center;
    background: rgba(5, 105, 107, .09); color: var(--blue);
    margin-bottom: .3rem;
}
.lp-svc-icon svg { width: 26px; height: 26px; }
.lp-svc-name { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); font-size: 1.05rem; text-transform: uppercase; }
.lp-svc-text { font-size: .88rem; color: var(--text-muted); line-height: 1.55; flex: 1; }
.lp-svc-link { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .88rem; color: var(--blue); margin-top: .3rem; }
.lp-svc:hover .lp-svc-link { color: var(--gold-dark); }

.lp-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.lp-why-card {
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 1.6rem 1.5rem; background: #fff; box-shadow: var(--shadow-sm);
}
.lp-why-icon {
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(145deg, var(--blue), #078A8C); color: #fff;
    margin-bottom: 1rem;
}
.lp-why-title { font-size: 1.08rem; text-transform: uppercase; margin-bottom: .45rem; }
.lp-why-text { font-size: .92rem; color: var(--text-muted); margin: 0; }

.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; counter-reset: none; }
.lp-step {
    position: relative;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.4rem 1.5rem;
}
.lp-step-num {
    display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--gold); color: var(--navy);
    font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
    margin-bottom: 1rem;
}
.lp-step-title { color: #fff; font-size: 1.05rem; text-transform: uppercase; margin-bottom: .4rem; }
.lp-step-text { color: rgba(255, 255, 255, .8); font-size: .9rem; margin: 0; }
.lp-steps-light .lp-step { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
.lp-steps-light .lp-step-title { color: var(--text-strong); }
.lp-steps-light .lp-step-text { color: var(--text-muted); }
.lp-steps-light .lp-step-num { background: var(--blue); color: #fff; }

.lp-deliver { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.lp-deliver .section-title { margin-bottom: 1rem; }
.lp-shop {
    background: linear-gradient(150deg, var(--navy-deep), var(--blue-dark));
    color: #fff; border-radius: var(--radius-lg);
    padding: 1.8rem; box-shadow: var(--shadow-lg);
}
.lp-shop-head { display: flex; gap: .9rem; align-items: flex-start; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, .15); margin-bottom: 1.1rem; }
.lp-shop-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--navy); display: grid; place-items: center; flex: 0 0 auto; }
.lp-shop-icon svg { width: 22px; height: 22px; }
.lp-shop-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin: 0; color: #fff; }
.lp-shop-addr { margin: .15rem 0 0; color: #cfe2e2; font-size: .92rem; }
.lp-shop-list { margin: 0; display: grid; gap: .7rem; }
.lp-shop-list div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.lp-shop-list dt { color: #a9c7c7; font-weight: 500; }
.lp-shop-list dd { margin: 0; font-weight: 600; text-align: right; color: #fff; }
.lp-shop-list a { color: #fff; }
.lp-shop-list a:hover { color: var(--gold); }

.lp-areas { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.lp-area {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #fff; border: 1px solid var(--line);
    color: var(--text-strong); font-weight: 600; font-size: .9rem;
    padding: .55rem 1rem; border-radius: 99px;
    box-shadow: var(--shadow-sm);
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.lp-area svg { color: var(--blue); }
.lp-area:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-2px); }
.lp-area:hover svg { color: var(--gold); }
.lp-area-strong { background: var(--navy); border-color: var(--navy); color: #fff; }
.lp-area-strong svg { color: var(--gold); }
.lp-areas-sm .lp-area { font-size: .84rem; padding: .45rem .9rem; }
.lp-areas-empty { text-align: center; color: var(--text-muted); }
.lp-nearby-title { text-align: center; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; margin: 2.5rem 0 1rem; color: var(--text-muted); }

.lp-cta { background: linear-gradient(120deg, var(--navy-deep) 0%, var(--blue) 100%); padding: 3.5rem 0; }
.lp-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.lp-cta-title { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2.1rem); text-transform: uppercase; margin: 0 0 .5rem; }
.lp-cta-text { color: #cfe2e2; margin: 0; max-width: 620px; }
.lp-cta-btns { display: flex; flex-wrap: wrap; gap: .75rem; flex: 0 0 auto; }

@media (max-width: 1024px) {
    .lp-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .lp-hero-inner, .lp-intro, .lp-deliver { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .lp-intro .split-ctas .btn, .lp-deliver .split-ctas .btn { white-space: normal; text-align: center; }
    .lp-why { grid-template-columns: 1fr 1fr; }
    .lp-cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
    .lp-hero { padding: 2.5rem 0 3rem; }
    .lp-hero-ctas .btn { flex: 1 1 100%; justify-content: center; }
    .lp-svc-grid, .lp-why, .lp-steps { grid-template-columns: 1fr; }
    .lp-cta-btns, .lp-cta-btns .btn { width: 100%; justify-content: center; }
    .lp-shop-list div { flex-direction: column; gap: .1rem; }
    .lp-shop-list dd { text-align: left; }
}

/* ---------------- Locations index ---------------- */

.loc-jump {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .5rem;
    margin: 0 auto 2.75rem; max-width: 1040px;
}
.loc-jump a {
    font-size: .8rem; font-weight: 600; color: var(--text-strong);
    padding: .3rem .7rem; border-radius: 99px; border: 1px solid var(--line); background: var(--mist);
}
.loc-jump a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

.loc-cities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.loc-city {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 1.35rem 1.35rem 1.2rem; box-shadow: var(--shadow-sm);
    scroll-margin-top: 110px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.loc-city:hover, .loc-city:target { box-shadow: var(--shadow-md); border-color: rgba(5, 105, 107, .35); }
.loc-city-head { display: flex; gap: .85rem; align-items: center; margin-bottom: 1rem; }
.loc-city-code {
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--blue); color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .04em;
}
.loc-city-name { font-size: 1.15rem; text-transform: uppercase; margin: 0; }
.loc-city-name a { color: var(--text-strong); }
.loc-city-name a:hover { color: var(--blue); }
.loc-city-region { margin: .1rem 0 0; font-size: .82rem; color: var(--text-muted); }
.loc-city-areas { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; flex: 1; align-content: flex-start; }
.loc-city-areas a {
    display: inline-block; font-size: .8rem; font-weight: 500; color: var(--text);
    background: var(--mist); border: 1px solid var(--line);
    padding: .22rem .6rem; border-radius: 99px;
}
.loc-city-areas a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.loc-city-link { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .88rem; color: var(--blue); border-top: 1px solid var(--line); padding-top: .85rem; }
.loc-city-link:hover { color: var(--gold-dark); }

@media (max-width: 1024px) { .loc-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .loc-cities { grid-template-columns: 1fr; }
    .loc-jump { max-height: 150px; overflow-y: auto; }
}

/* ---------------- Printing services ---------------- */

.sv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.sv-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.sv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.sv-card-media { position: relative; display: block; aspect-ratio: 16 / 10; background: linear-gradient(150deg, var(--blue-dark), var(--blue)); overflow: hidden; }
.sv-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.sv-card:hover .sv-card-media img { transform: scale(1.05); }
.sv-card-icon {
    position: absolute; left: 1.1rem; bottom: -1px;
    width: 54px; height: 54px; border-radius: 12px 12px 0 0;
    background: #fff; color: var(--blue); display: grid; place-items: center;
}
.sv-card-icon svg { width: 26px; height: 26px; }
.sv-card-body { padding: 1.2rem 1.35rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.sv-card-title { font-size: 1.2rem; text-transform: uppercase; margin-bottom: .45rem; }
.sv-card-title a { color: var(--text-strong); }
.sv-card-title a:hover { color: var(--blue); }
.sv-card-text { color: var(--text-muted); font-size: .9rem; margin-bottom: 1rem; flex: 1; }
.sv-card-meta { margin: 0 0 1rem; display: grid; gap: .35rem; font-size: .82rem; }
.sv-card-meta div { display: flex; gap: .5rem; }
.sv-card-meta dt { font-weight: 600; color: var(--navy); min-width: 84px; }
.sv-card-meta dd { margin: 0; color: var(--text-muted); }
.sv-card-link { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .9rem; color: var(--blue); }

.sv-glance-wrap { position: relative; z-index: 3; margin-top: -1.75rem; }
.sv-glance {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    border: 1px solid var(--line); overflow: hidden;
}
.sv-glance-item { display: flex; gap: .8rem; align-items: center; padding: 1.15rem 1.25rem; border-right: 1px solid var(--line); }
.sv-glance-item:last-child { border-right: 0; }
.sv-glance-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(5, 105, 107, .1); color: var(--blue); display: grid; place-items: center; flex: 0 0 auto; }
.sv-glance-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 600; }
.sv-glance-value { display: block; font-weight: 600; color: var(--text-strong); font-size: .92rem; line-height: 1.35; }

.sv-prose h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-top: 0; }
.sv-prose h3 { font-size: 1.15rem; text-transform: uppercase; color: var(--blue); }
.sv-media { position: sticky; top: 110px; }

.sv-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.sv-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); }
.sv-panel .section-title { margin-bottom: 1.2rem; }
.sv-pros { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.sv-pros li { display: flex; gap: .65rem; align-items: flex-start; font-size: .96rem; color: var(--text-strong); }
.sv-pros svg { flex: 0 0 auto; color: #fff; background: var(--blue); border-radius: 50%; padding: 3px; width: 22px; height: 22px; margin-top: .05rem; }
.sv-products { display: flex; flex-wrap: wrap; gap: .5rem; }
.sv-product { background: var(--mist); border: 1px solid var(--line); border-radius: 99px; padding: .45rem .95rem; font-size: .88rem; font-weight: 600; color: var(--text-strong); }
.sv-products-note { margin: 1.25rem 0 0; font-size: .88rem; color: var(--text-muted); }

@media (max-width: 1024px) {
    .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-glance { grid-template-columns: 1fr 1fr; }
    .sv-glance-item:nth-child(2) { border-right: 0; }
    .sv-glance-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 900px) {
    .sv-two { grid-template-columns: 1fr; }
    .sv-media { position: static; order: -1; }
}
@media (max-width: 600px) {
    .sv-grid { grid-template-columns: 1fr; }
    .sv-glance { grid-template-columns: 1fr; }
    .sv-glance-item { border-right: 0; border-bottom: 1px solid var(--line); }
    .sv-glance-item:last-child { border-bottom: 0; }
    .sv-panel { padding: 1.4rem; }
}

/* ---------------- Quote form card ---------------- */

.qpage-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }

.qcard {
    position: relative;
    background: linear-gradient(160deg, #05696B 0%, #054B55 60%, #043C44 100%);
    color: #fff;
    border-radius: 18px;
    padding: 2.4rem 2.4rem 2.2rem;
    box-shadow: 0 18px 50px rgba(5, 75, 85, .35);
    overflow: hidden;
}
.qcard::before {
    content: ""; position: absolute; right: -80px; top: -80px;
    width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(circle, rgba(252, 169, 12, .22), transparent 70%);
    pointer-events: none;
}
.qcard-head { text-align: center; margin-bottom: 1.75rem; position: relative; }
.qcard-title { color: #fff; font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 .35rem; text-transform: uppercase; letter-spacing: .02em; }
.qcard-sub { color: #bfe0e0; margin: 0; font-size: .95rem; }
.qcard .form-alert { margin-bottom: 1.25rem; }

.qcard-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; position: relative; }
.qf-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.qf-full { grid-column: 1 / -1; }
.qf-label { font-weight: 600; font-size: .9rem; color: #fff; padding: 0; }
.qf-label .req { color: var(--gold); }
.qf-input {
    width: 100%;
    font: inherit; font-size: .95rem;
    color: var(--text-strong);
    background: #fff;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: .75rem .95rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.qf-input::placeholder { color: #8a9aa0; }
.qf-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(252, 169, 12, .25); }
.qf-textarea { min-height: 130px; resize: vertical; }
.qf-error { color: #FFD27A; font-size: .82rem; font-weight: 500; }
.qf-hint { color: #a9cfcf; font-size: .8rem; }

.qf-radios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: .15rem; }
.qf-radio {
    position: relative;
    display: flex; align-items: center; gap: .6rem;
    background: rgba(255, 255, 255, .08);
    border: 1.5px solid rgba(255, 255, 255, .25);
    border-radius: 10px;
    padding: .75rem .85rem;
    font-size: .88rem; font-weight: 600; line-height: 1.3;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.qf-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qf-radio-ui {
    flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .7); position: relative;
}
.qf-radio:hover { background: rgba(255, 255, 255, .14); }
.qf-radio:has(input:checked) { background: rgba(252, 169, 12, .16); border-color: var(--gold); }
.qf-radio input:checked + .qf-radio-ui { border-color: var(--gold); }
.qf-radio input:checked + .qf-radio-ui::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold); }
.qf-radio input:focus-visible + .qf-radio-ui { box-shadow: 0 0 0 4px rgba(252, 169, 12, .35); }

.qf-date { position: relative; }
.qf-date .qf-input { padding-right: 3rem; }
.qf-date-native { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.qf-date-btn {
    position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 8px; border: 0; cursor: pointer;
    background: rgba(5, 105, 107, .1); color: var(--blue);
    display: grid; place-items: center;
}
.qf-date-btn:hover { background: var(--gold); color: var(--navy); }

.qf-file {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    background: rgba(255, 255, 255, .06);
    border: 1.5px dashed rgba(255, 255, 255, .4);
    border-radius: 10px; padding: .7rem; cursor: pointer; position: relative;
}
.qf-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.qf-file-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    background: #fff; color: var(--blue); font-weight: 600; font-size: .88rem;
    padding: .5rem .95rem; border-radius: 8px;
}
.qf-file-name { font-size: .88rem; color: #d3e8e8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.qf-file:focus-within { border-color: var(--gold); }

.qf-design-previews { display: flex; gap: .75rem; flex-wrap: wrap; }
.qf-design-previews img { width: 120px; border-radius: 8px; background: #fff; }

.qf-submit { align-items: center; margin-top: .4rem; }
.qf-send {
    min-width: 220px;
    font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: .14em;
    color: var(--navy); background: var(--gold);
    border: 0; border-radius: 10px; padding: .95rem 2.5rem;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(252, 169, 12, .38);
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.qf-send:hover { background: #FDC04A; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(252, 169, 12, .45); }
.qf-send:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 900px) {
    .qpage-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .qcard { padding: 1.8rem 1.15rem 1.6rem; border-radius: 14px; }
    .qcard-form { grid-template-columns: 1fr; }
    .qf-radios { grid-template-columns: 1fr; }
    .qf-send { width: 100%; min-width: 0; }
}

/* ---------------- Contact page ---------------- */

.ct-strip-wrap { position: relative; z-index: 3; margin-top: -1.75rem; }
.ct-strip {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); overflow: hidden;
}
.ct-item { display: flex; align-items: center; gap: .9rem; padding: 1.3rem 1.4rem; color: var(--text); border-right: 1px solid var(--line); transition: background .15s ease; min-width: 0; }
.ct-item:last-child { border-right: 0; }
.ct-item:hover { background: var(--mist); color: var(--text); }
.ct-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.ct-item:hover .ct-icon { background: var(--gold); color: var(--navy); }
.ct-label { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 600; }
.ct-value { display: block; font-weight: 600; color: var(--text-strong); font-size: .95rem; overflow-wrap: anywhere; }

.ct-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.ct-form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); }
.ct-title { font-size: 1.5rem; text-transform: uppercase; }
.ct-sub { color: var(--text-muted); font-size: .95rem; margin-bottom: 1.5rem; }
.ct-form-card .form-alert { margin-bottom: 1rem; }

.ct-shop {
    background: linear-gradient(160deg, #05696B 0%, #054B55 100%);
    color: #fff; border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-lg);
}
.ct-shop-kicker { color: var(--gold); font-family: var(--font-display); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .16em; margin: 0 0 .35rem; }
.ct-shop-title { color: #fff; font-size: 1.4rem; text-transform: uppercase; margin: 0 0 .4rem; }
.ct-shop-addr { color: #d3e8e8; margin-bottom: 1.1rem; }
.ct-shop-feats { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; }
.ct-shop-feats li { display: flex; gap: .4rem; align-items: flex-start; font-size: .86rem; color: #eaf5f5; }
.ct-shop-feats svg { color: var(--gold); flex: 0 0 auto; margin-top: .2rem; }
.ct-hours-title { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .6rem; }
.ct-hours { margin: 0 0 1.5rem; border-top: 1px solid rgba(255, 255, 255, .18); }
.ct-hours div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid rgba(255, 255, 255, .18); font-size: .9rem; }
.ct-hours dt { font-weight: 600; }
.ct-hours dd { margin: 0; color: #d3e8e8; text-align: right; }
.ct-shop-btns { display: flex; flex-wrap: wrap; gap: .7rem; }
.ct-shop .btn-primary { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.ct-shop .btn-primary:hover { background: #fff; border-color: #fff; }
.ct-socials { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .18); display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .86rem; color: #bfe0e0; }
.ct-socials a { color: #fff; font-weight: 600; }
.ct-socials a:hover { color: var(--gold); }

.ct-map { line-height: 0; background: var(--mist); }
.ct-map iframe { width: 100%; height: 440px; border: 0; display: block; filter: saturate(.9); }

@media (max-width: 900px) {
    .ct-grid { grid-template-columns: minmax(0, 1fr); }
    .ct-strip { grid-template-columns: minmax(0, 1fr); }
    .ct-item { border-right: 0; border-bottom: 1px solid var(--line); }
    .ct-item:last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
    .ct-form-card, .ct-shop { padding: 1.4rem 1.15rem; }
    .ct-shop-feats { grid-template-columns: 1fr; }
    .ct-map iframe { height: 320px; }
    .ct-form-card .form-grid { grid-template-columns: 1fr; }
}

/* ---------------- About page ---------------- */

.ab-intro { align-items: center; }
.ab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.ab-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 1.8rem 1.6rem; box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--blue);
}
.ab-card:nth-child(3n+2) { border-top-color: var(--gold); }
.ab-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center;
    background: rgba(5, 105, 107, .1); color: var(--blue);
    margin-bottom: 1rem;
}
.ab-card-title { font-size: 1.12rem; text-transform: uppercase; margin-bottom: .6rem; }
.ab-card-body p { font-size: .93rem; color: var(--text); }
.ab-card-body p:last-child { margin-bottom: 0; }

.ab-biz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.ab-biz-card { background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem 1.6rem; }
.ab-biz-card p { font-size: .93rem; margin-bottom: .6rem; }
.ab-muted { color: var(--text-muted); }
.ab-link { font-weight: 600; font-size: .9rem; }
.ab-dl { margin: 0; display: grid; gap: .55rem; }
.ab-dl div { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; border-bottom: 1px dashed var(--line); padding-bottom: .45rem; }
.ab-dl dt { color: var(--text-muted); }
.ab-dl dd { margin: 0; font-weight: 600; color: var(--text-strong); text-align: right; }

@media (max-width: 1024px) {
    .ab-grid, .ab-biz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .ab-grid, .ab-biz { grid-template-columns: 1fr; }
}