/* Contact and About pages on the v2 design (Mohamed, 5 Oct 2026: "do the main menu pages and contact and about first").
   Loaded after site-v2.css and site-v2-pages.css by pages/contact-v2-body and pages/about-v2-body only; every rule is
   scoped under .sv2-pg-contact or .sv2-pg-about. */

/* hero trust points (about): a small orange dot between items, as in the homepage call to action badges */
.sv2-pg-about .sv2-pg-points li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-inline:0 10px}
.sv2-pg-about .sv2-pg-points{gap:8px 24px}

/* ===== about ===== */
.sv2-pg-about .sv2-pga-hero .sv2-hero-media picture{display:block;width:100%;height:100%}
/* the outline button of the closing photo band on a dark fill, as in the hero (its words stay readable on every crop) */
.sv2-pg-about .sv2-cta .sv2-btn-outline-light{background:rgba(4,16,33,.55)}
.sv2-pg-about .sv2-cta .sv2-btn-outline-light:hover{background:#fff}
/* key figures: big orange numbers between hairlines */
.sv2-pg-about .sv2-pga-figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-strong)}
.sv2-pg-about .sv2-pga-figures li{position:relative;display:flex;flex-direction:column;padding:30px 32px 4px}
.sv2-pg-about .sv2-pga-figures li:first-child{padding-inline-start:0}
.sv2-pg-about .sv2-pga-figures li+li{border-inline-start:1px solid var(--line)}
.sv2-pg-about .sv2-pga-figures li::before{content:"";position:absolute;top:-2px;inset-inline-start:0;width:40px;height:3px;background:var(--accent)}
.sv2-pg-about .sv2-pga-figures li+li::before{inset-inline-start:32px}
.sv2-pg-about .sv2-pga-figures strong{font:600 clamp(48px,4.6vw,72px)/1 Poppins,"Poppins Fallback",sans-serif;letter-spacing:-.045em;color:var(--orange)}
.sv2-pg-about .sv2-pga-figures span{margin-top:12px;font-size:16px;line-height:1.45;color:var(--muted)}

/* our story: one row per year, the year a big orange number in its own column */
.sv2-pg-about .sv2-pga-timeline{border-top:1px solid var(--line-strong)}
.sv2-pg-about .sv2-pga-timeline li{position:relative;min-height:150px;padding-block:36px;padding-inline-start:clamp(220px,22vw,320px);border-bottom:1px solid var(--line-strong)}
.sv2-pg-about .sv2-pga-badge{display:block;font:600 12px/1.5 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.sv2-pg-about .sv2-pga-timeline h3{margin-top:8px}
/* the year box: a small script narrows it to the digits, so the separator after the year (a comma or a dash) stays in
   the heading text for screen readers and search while the column edge takes its place on screen */
.sv2-pg-about .sv2-pga-year{position:absolute;top:30px;inset-inline-start:0;display:block;direction:ltr;unicode-bidi:isolate;overflow:hidden;white-space:nowrap;font:600 clamp(64px,6vw,92px)/1 Poppins,"Poppins Fallback",sans-serif;letter-spacing:0;color:var(--orange)}
/* the year box runs left to right, so its own inline start is the left edge: on Arabic pages it is pinned to the right */
[dir="rtl"] .sv2-pg-about .sv2-pga-year{left:auto;right:0;line-height:1.05}
.sv2-pg-about .sv2-pga-ttl{display:block;font-size:clamp(22px,1.9vw,28px);line-height:1.25;color:var(--ink)}
.sv2-pg-about .sv2-pga-timeline p{margin-top:10px;max-width:720px;font-size:17px;line-height:1.7;color:var(--muted)}
.sv2-pg-about .sv2-pga-timeline p.sv2-pga-press{margin-top:14px;font-size:15px;line-height:1.6;color:var(--soft)}
.sv2-pg-about .sv2-pga-press a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:rgba(199,66,13,.55);text-underline-offset:4px}
.sv2-pg-about .sv2-pga-press a:hover{color:var(--orange)}

/* our approach: the intro under the heading on navy */
.sv2-pg-about .sv2-howit-main>h2{margin-bottom:18px}
.sv2-pg-about .sv2-pga-approach-intro{max-width:620px;margin-bottom:40px;font-size:18px;line-height:1.7;color:var(--on-dark)}

/* trusted by: client names in a clean hairline grid */
.sv2-pg-about .sv2-pga-clientgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-strong);border-inline-start:1px solid var(--line-strong)}
.sv2-pg-about .sv2-pga-clientgrid li{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:128px;padding:26px 26px;border-inline-end:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);background:#fff}
.sv2-pg-about .sv2-pga-clientgrid strong{font:600 22px/1.25 Poppins,"Poppins Fallback",sans-serif;letter-spacing:-.02em;color:var(--ink)}
.sv2-pg-about .sv2-pga-clientgrid span{font-size:14px;line-height:1.4;color:var(--soft)}

/* ===== contact ===== */
.sv2-pg-contact .sv2-pgc-head>h2{font-size:clamp(32px,3vw,46px)}
.sv2-pg-contact .sv2-pgc-head>h2::before{content:"";display:block;width:36px;height:3px;border-radius:2px;background:var(--accent);margin-bottom:22px}
.sv2-pg-contact .sv2-pgc-head>p{margin-top:16px;max-width:560px;font-size:18px;line-height:1.7;color:var(--muted)}

/* call, email and hours: three clean columns */
.sv2-pg-contact .sv2-pgc-big{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;font:600 26px/1.25 Poppins,"Poppins Fallback",sans-serif;letter-spacing:-.02em;color:var(--orange)}
.sv2-pg-contact .sv2-pgc-big:hover{color:var(--orange-hover);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.sv2-pg-contact .sv2-pgc-mail{font-size:clamp(19px,1.6vw,22px);overflow-wrap:anywhere}
.sv2-pg-contact .sv2-pgc-hours{margin:12px 0 0;max-width:360px}
.sv2-pg-contact .sv2-pgc-hours>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding-block:11px;border-bottom:1px solid var(--line)}
.sv2-pg-contact .sv2-pgc-hours dt{font-size:17px;color:var(--muted)}
.sv2-pg-contact .sv2-pgc-hours dd{margin:0;font-size:17px;font-weight:600;color:var(--ink)}

/* the message form beside the office details */
.sv2-pg-contact .sv2-pgc-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px 80px;align-items:start}
.sv2-pg-contact .sv2-pgc-success{margin-top:24px;padding:16px 20px;border-radius:12px;border-inline-start:3px solid #2f7d4a;background:#eaf5ee}
.sv2-pg-contact .sv2-pgc-success p{font-weight:600;color:#1d5130}
.sv2-pg-contact .sv2-pgc-form{position:relative;display:grid;gap:22px;margin-top:32px;padding:40px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(16,29,48,.04),0 24px 48px -32px rgba(16,29,48,.28)}
.sv2-pg-contact .sv2-pgc-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
.sv2-pg-contact .sv2-pgc-field>label{display:block;margin-bottom:8px;font:600 15px/1.4 Inter,sans-serif;color:var(--ink)}
.sv2-pg-contact .sv2-pgc-input{display:block;width:100%;min-height:54px;padding:12px 16px;border:1.5px solid #c9c6bc;border-radius:12px;background:#fff;font:400 16px/1.5 Inter,sans-serif;color:var(--ink);transition:border-color .18s,box-shadow .18s}
.sv2-pg-contact .sv2-pgc-input:hover{border-color:#a9a598}
.sv2-pg-contact .sv2-pgc-input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(199,66,13,.16)}
.sv2-pg-contact .sv2-pgc-input.is-invalid{border-color:#b42318}
.sv2-pg-contact .sv2-pgc-textarea{min-height:168px;resize:vertical}
.sv2-pg-contact .sv2-pgc-select{position:relative}
.sv2-pg-contact .sv2-pgc-select select{-webkit-appearance:none;appearance:none;padding-inline-end:48px;cursor:pointer}
.sv2-pg-contact .sv2-pgc-chev{position:absolute;top:50%;inset-inline-end:16px;width:20px;height:20px;margin-top:-10px;color:var(--soft);pointer-events:none}
.sv2-pg-contact .sv2-pgc-error{margin-top:6px;font-size:14px;line-height:1.45;font-weight:500;color:#b42318}
.sv2-pg-contact .sv2-pgc-upload{padding:22px;border:2px dashed #c9c6bc;border-radius:14px;background:#fff;transition:border-color .18s,background .18s}
.sv2-pg-contact .sv2-pgc-upload:hover,.sv2-pg-contact #uploadZone.border-orange-500{border-color:var(--orange)}
.sv2-pg-contact #uploadZone.bg-orange-50{background:#fff5ee}
.sv2-pg-contact .sv2-pgc-upload-prompt{padding-block:6px;text-align:center;cursor:pointer;border-radius:10px}
.sv2-pg-contact .sv2-pgc-upload-prompt:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.sv2-pg-contact .sv2-pgc-upload-ic{display:block;margin:0 auto 10px;color:var(--orange)}
.sv2-pg-contact .sv2-pgc-upload .text-sm{font-size:15px;line-height:1.5;color:var(--muted)}
.sv2-pg-contact .sv2-pgc-upload .text-xs{margin-top:4px;font-size:13px;line-height:1.5;color:var(--soft)}
.sv2-pg-contact .sv2-pgc-upload .text-orange-600{color:var(--orange)}
.sv2-pg-contact .sv2-pgc-submit{min-height:58px;font-size:17px}
.sv2-pg-contact .sv2-pgc-submit:disabled{opacity:.75;cursor:progress}
.sv2-pg-contact .sv2-pgc-privacy{font-size:14px;line-height:1.5;color:var(--soft);text-align:center}

/* office details, WhatsApp and a Cardiff photo */
.sv2-pg-contact .sv2-pgc-address{margin-top:32px;padding-block:22px;border-block:1px solid var(--line-strong)}
.sv2-pg-contact .sv2-pgc-address h3{font:600 12px/1.5 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.sv2-pg-contact .sv2-pgc-address p{margin-top:8px;font-size:18px;line-height:1.55;font-weight:500;color:var(--ink)}
.sv2-pg-contact .sv2-pgc-wa{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:24px}
.sv2-pg-contact .sv2-pgc-wa-btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 20px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink);font:600 15px/1.2 Inter,sans-serif;color:var(--ink);transition:background .18s,color .18s,box-shadow .18s}
.sv2-pg-contact .sv2-pgc-wa-btn svg{flex:0 0 auto;color:#128C7E}
.sv2-pg-contact .sv2-pgc-wa-btn:hover{background:var(--ink);color:#fff}
.sv2-pg-contact .sv2-pgc-wa-btn:hover svg{color:#fff}
.sv2-pg-contact .sv2-pgc-wa-copy{min-width:0;flex:1 1 200px}
.sv2-pg-contact .sv2-pgc-wa-title{font-size:16px;font-weight:600;line-height:1.4;color:var(--ink)}
.sv2-pg-contact .sv2-pgc-wa-hours{margin-top:2px;font-size:14px;line-height:1.45;color:var(--soft)}
.sv2-pg-contact .sv2-pgc-photo{margin:36px 0 0;border-radius:16px;overflow:hidden;aspect-ratio:4/4.6;background:var(--line)}
.sv2-pg-contact .sv2-pgc-photo img{width:100%;height:100%;object-fit:cover;object-position:52% 50%}

/* other ways to reach us: photo tiles, the whole tile is the link */
.sv2-pg-contact .sv2-pgc-tiles .sv2-tile{min-height:400px}
.sv2-pg-contact .sv2-pgc-tiles .sv2-tile:nth-child(2)>img{object-position:28% 50%}
.sv2-pg-contact .sv2-pgc-tilelink{color:#fff}
.sv2-pg-contact .sv2-pgc-tilelink::after{content:"";position:absolute;inset:0;z-index:1}
.sv2-pg-contact .sv2-pgc-tilelink:focus-visible{outline:none}
.sv2-pg-contact .sv2-tile:has(.sv2-pgc-tilelink:focus-visible){outline:3px solid var(--orange);outline-offset:3px}
.sv2-pg-contact .sv2-pgc-tiles .sv2-tile>img{transition:transform .4s ease}
.sv2-pg-contact .sv2-pgc-tiles .sv2-tile:hover>img{transform:scale(1.03)}
.sv2-pg-contact .sv2-pgc-tiles .sv2-tile:hover h3{color:#ffb489}
.sv2-pg-contact .sv2-pgc-tiles .sv2-tile h3{transition:color .18s}

/* follow us: heading beside three clean icon links */
.sv2-pg-contact .sv2-pgc-social-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 56px;align-items:end}
.sv2-pg-contact .sv2-pgc-socials{display:flex;flex-wrap:wrap;gap:14px}
.sv2-pg-contact .sv2-pgc-socials a{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,29,48,.04);transition:border-color .18s,translate .18s}
.sv2-pg-contact .sv2-pgc-socials a:hover{border-color:var(--orange);translate:0 -2px}

@media(max-width:1100px){
.sv2-pg-contact .sv2-pgc-grid{grid-template-columns:minmax(0,1fr)}
.sv2-pg-contact .sv2-pgc-office{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px;align-items:start}
.sv2-pg-contact .sv2-pgc-office>.sv2-pgc-head{grid-column:1/-1}
.sv2-pg-contact .sv2-pgc-photo{grid-column:2;grid-row:2/span 2;margin-top:32px}
.sv2-pg-contact .sv2-pgc-tiles .sv2-tile{min-height:360px}
}
@media(max-width:850px){
.sv2-pg-about .sv2-pga-figures{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0}
.sv2-pg-about .sv2-pga-figures li,.sv2-pg-about .sv2-pga-figures li+li{padding:26px 24px 22px 0;border-inline-start:0;border-top:1px solid var(--line-strong)}
.sv2-pg-about .sv2-pga-figures li:nth-child(even){padding-inline-start:24px;border-inline-start:1px solid var(--line)}
.sv2-pg-about .sv2-pga-figures li::before,.sv2-pg-about .sv2-pga-figures li+li::before{inset-inline-start:0}
.sv2-pg-about .sv2-pga-figures li:nth-child(even)::before{inset-inline-start:24px}
.sv2-pg-about .sv2-pga-clientgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv2-pg-about .sv2-pga-timeline li{min-height:0;padding-inline-start:0}
.sv2-pg-about .sv2-pga-year{position:static;margin-bottom:14px}
.sv2-pg-contact .sv2-pgc-ways3 li>.sv2-pgc-big{margin-top:10px}
.sv2-pg-contact .sv2-pgc-office{display:block}
.sv2-pg-contact .sv2-pgc-photo{margin-top:32px;aspect-ratio:16/10}
.sv2-pg-contact .sv2-pgc-social-grid{grid-template-columns:minmax(0,1fr);align-items:start}
}
@media(max-width:600px){
.sv2-pg-about .sv2-pga-figures strong{font-size:40px}
.sv2-pg-about .sv2-pga-figures span{font-size:14px}
.sv2-pg-about .sv2-pga-timeline li{padding-block:28px}
.sv2-pg-about .sv2-pga-year{font-size:60px}
.sv2-pg-about .sv2-pga-ttl{font-size:21px}
.sv2-pg-about .sv2-pga-timeline p{font-size:16px}
.sv2-pg-about .sv2-pga-approach-intro{font-size:16px;margin-bottom:28px}
.sv2-pg-about .sv2-pga-clientgrid li{min-height:104px;padding:18px 16px}
.sv2-pg-about .sv2-pga-clientgrid strong{font-size:18px}
.sv2-pg-about .sv2-pga-clientgrid span{font-size:13px}
.sv2-pg-contact .sv2-pgc-head>h2{font-size:clamp(30px,8.4vw,36px)}
.sv2-pg-contact .sv2-pgc-head>h2::before{width:30px;margin-bottom:18px}
.sv2-pg-contact .sv2-pgc-head>p{font-size:16px}
.sv2-pg-contact .sv2-pgc-big{font-size:24px}
.sv2-pg-contact .sv2-pgc-mail{font-size:19px}
.sv2-pg-contact .sv2-pgc-form{margin-top:26px;padding:24px 18px;gap:20px;border-radius:16px}
.sv2-pg-contact .sv2-pgc-row2{grid-template-columns:minmax(0,1fr);gap:20px}
.sv2-pg-contact .sv2-pgc-upload{padding:18px 14px}
.sv2-pg-contact .sv2-pgc-wa-btn{width:100%;justify-content:center}
.sv2-pg-contact .sv2-pgc-tiles .sv2-tile{min-height:280px}
.sv2-pg-contact .sv2-pgc-socials a{width:64px;height:64px}
}
@media(max-width:374px){
.sv2-pg-about .sv2-pga-figures strong{font-size:38px}
.sv2-pg-about .sv2-pga-clientgrid strong{font-size:16px}
}
/* Phones: contact and about heroes end with a band of photo instead of half a screen of dark city, so the contact
   details and the story start on the first screen (review 5 Oct 2026) */
@media(max-width:600px){:is(.sv2-pg-contact,.sv2-pg-about) .sv2-hero{min-height:0}:is(.sv2-pg-contact,.sv2-pg-about) .sv2-hero-inner{padding-bottom:180px}}
/* Send Message button: a soft shadow instead of the wide orange glow (Mohamed, 5 Oct 2026: "too much glow on the send
   message button on contact form"); the button itself is unchanged */
.sv2-pg-contact .sv2-pgc-submit,.sv2-pg-contact .sv2-pgc-submit:hover{box-shadow:0 4px 10px -6px rgba(199,66,13,.35)}
/* Registered office photo: Regus House, Malthouse Avenue (Mohamed, 5 Oct 2026: "the address image on the contact page is not
   right, this is cardiff bay"). The whole wide building shows; Google's credit sits right under the photo. */
.sv2-pg-contact .sv2-pgc-photo.is-office{aspect-ratio:auto;overflow:visible;background:none;border-radius:0}
.sv2-pg-contact .sv2-pgc-photo.is-office img{height:auto;aspect-ratio:1800/773;border-radius:16px;object-position:50% 50%}
.sv2-pg-contact .sv2-pgc-credit{margin-top:8px;font:500 12px/1.4 Inter,sans-serif;color:var(--muted,#5b6472)}
/* About story without dates (Mohamed, 5 Oct 2026): four numbered chapters in two columns, then the Today panel */
.sv2-pg-about .sv2-pga-chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px;margin:0;padding:0;list-style:none}
.sv2-pg-about .sv2-pga-chapters>li{position:relative;padding-block:34px;padding-inline-start:104px;border-top:1px solid var(--line-strong)}
.sv2-pg-about .sv2-pga-no{position:absolute;top:30px;inset-inline-start:0;direction:ltr;font:600 60px/1 Poppins,"Poppins Fallback",sans-serif;letter-spacing:-.03em;color:var(--orange)}
.sv2-pg-about .sv2-pga-chapters h3,.sv2-pg-about .sv2-pga-today h3{margin:0;font-size:clamp(20px,1.7vw,24px);line-height:1.3}
.sv2-pg-about .sv2-pga-chapters p{margin-top:10px;max-width:560px;font-size:17px;line-height:1.7;color:var(--muted)}
.sv2-pg-about .sv2-pga-today{margin-top:28px;padding:36px clamp(28px,4vw,56px);border-radius:18px;background:var(--deep);color:#fff}
.sv2-pg-about .sv2-pga-today h3{margin:0;color:#fff}
.sv2-pg-about .sv2-pga-today p{margin-top:10px;max-width:820px;font-size:17px;line-height:1.7;color:var(--on-dark)}
.sv2-pg-about .sv2-pga-today p.sv2-pga-press{margin-top:14px;font-size:15px;color:var(--on-dark-soft)}
.sv2-pg-about .sv2-pga-today .sv2-pga-press a{color:#fff;text-decoration-color:rgba(255,160,107,.7)}
.sv2-pg-about .sv2-pga-today .sv2-pga-press a:hover{color:var(--warm)}
@media(max-width:850px){.sv2-pg-about .sv2-pga-chapters{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.sv2-pg-about .sv2-pga-chapters>li{padding-block:26px;padding-inline-start:0}.sv2-pg-about .sv2-pga-no{position:static;display:block;margin-bottom:12px;font-size:44px}.sv2-pg-about .sv2-pga-chapters p,.sv2-pg-about .sv2-pga-today p{font-size:16px}.sv2-pg-about .sv2-pga-today{padding:28px 22px}}