/* ========================================================================= ΔΙΟΙΚΕΙΝ – ΕΠΙΧΕΙΡΕΙΝ — DESIGN PASS 02 (load AFTER style.css) Per-component deltas only. Everything here overrides the base sheet by source order (same specificity, later wins) — drop-in, reversible, AA-clean. functions.php: wp_enqueue_style('dioikein-pass02', .../pass-02.css, ['dioikein-style']); Pairs with the token updates already in theme.json (warm palette + accent-bright). ========================================================================= */ /* ---- 1 · TOKENS — warm the whole system ------------------------------------ */ :root{ --charcoal:#2a2620; /* was #222427 */ --ink:#181612; /* was #16181a — espresso, warms every dark band + body ink */ --ink-soft:#211c14; /* NEW: lifted warm surface for layering on dark */ --gray-dark:#54514a; --gray-mid:#7c7a73; /* warmed; AA preserved */ --gray-light:#f1efe8; --tint:#ebe7dd; /* deepened so section alternation registers */ --line:#e6e2d8; --line-strong:#d7d2c6; /* warmed hairlines */ --gold-bright:#caa766; /* NEW: AA gold for text on dark grounds */ --gold-rest:rgba(184,145,80,.55); /* NEW: resting gold touch on light cards */ --ovl:26,20,11; /* NEW: warm photo-overlay base (was 13,13,14) */ --grade:saturate(.82) contrast(1.04) brightness(.97); /* NEW: signature warm-neutral grade */ --sp:clamp(72px,8.5vw,132px); /* a touch more air */ --sh-md:0 16px 44px -20px rgba(28,22,12,.30); --sh-lg:0 36px 84px -32px rgba(28,22,12,.48); } /* ---- 2 · TYPE — one casing rule, positive caps line-height, no faux-italic -- */ h1,h2,h3,h4{line-height:1.14;letter-spacing:0} /* was 1.08 / -.01em — fixes jammed Greek caps */ .eyebrow{letter-spacing:.24em;white-space:normal} /* was .32em + nowrap; aligns with other labels */ .eyebrow--light{color:var(--gold-bright)} /* ENGRAVED MOTTO — the brand signature, always upright (kills the synthesized faux-italic on "Res non verba"; no extra webfont weight to self-host). */ .motto{font-family:var(--font-body);font-style:normal;font-weight:700;text-transform:uppercase; letter-spacing:.2em;color:var(--gold-ink)} .motto--light{color:var(--gold-bright)} .motto--lg{letter-spacing:.26em;font-size:.82em} .philo__quote em,.svc-intro__lead em,.bio__lead em,.comp__para em{font-style:normal} /* belt-and-braces */ /* mid-tier in-content heading — fills the H2→body dead zone (legal etc.) */ .legal__h{font-size:clamp(1.35rem,1.9vw,1.55rem)} /* ---- 3 · MOTION — ship the unused stagger; shorter, earlier; RM guards ------ */ .reveal[data-reveal]{transform:translateY(22px); transition:opacity .58s var(--ease) var(--rd,0ms),transform .58s var(--ease) var(--rd,0ms)} /* reveal.js: set per container el.style.setProperty('--rd', Math.min(i*80,480)+'ms') */ @media (prefers-reduced-motion:reduce){ .scard:hover,.tcard:hover,.offcard:hover,.insight:hover{transform:none} .tcard:hover .tcard__ph img{transform:none} .btn:hover .btn__icon,.scard:hover .scard__go svg,.tcard:hover .tcard__go svg{transform:none} .mobnav__link{animation:none;opacity:1} } .mobnav__link{opacity:1;animation-delay:calc(var(--i,0)*55ms + 80ms)} /* default visible — no stranded links */ /* ---- 4 · BUTTONS — gold becomes a real two-tier conversion CTA ------------- */ .btn--gold{background:var(--gold);color:var(--ink)} /* AA: ink on gold */ .btn--gold:hover{background:var(--gold-deep);color:#fff} .btn--gold>.wp-block-button__link{background:var(--gold);color:var(--ink)} .btn--gold>.wp-block-button__link:hover{background:var(--gold-deep);color:#fff} /* ---- 5 · HEADER — persistent contact affordance + tighter chrome ----------- */ .site-head__in{height:88px;gap:20px} .site-head.is-scrolled .site-head__in{height:68px} .nav{gap:2px}.nav__link{font-size:.92rem;padding:10px 12px} .head-contact{display:flex;align-items:center;gap:9px;font-family:var(--font-head);font-size:.9rem; color:var(--ink);padding:9px 16px;border:1.5px solid var(--gold-line);border-radius:var(--r); white-space:nowrap;transition:.3s var(--ease)} .head-contact svg{color:var(--gold-ink);flex:none} .head-contact:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .head-contact:hover svg{color:var(--gold-bright)} @media (max-width:1080px){.head-contact{padding:9px;border-radius:50%}.head-contact .head-contact__txt{display:none}} @media (max-width:860px){.head-contact{display:none}} /* lives in burger menu on mobile */ /* ---- 6 · HOME HERO — text-free interior, bottom-set, warm overlay, seal ---- */ .hero{min-height:min(90vh,840px);align-items:flex-end} .hero__bg{filter:var(--grade)} .hero__overlay{background: radial-gradient(78% 58% at 80% 10%,rgba(184,145,80,.20),transparent 56%), linear-gradient(90deg,rgba(var(--ovl),.58) 0%,rgba(var(--ovl),.22) 52%,transparent 82%), linear-gradient(180deg,rgba(var(--ovl),.26) 0%,rgba(var(--ovl),.38) 38%,rgba(var(--ovl),.90) 100%)} .hero__content{text-align:left;max-width:780px;padding-block:clamp(56px,9vh,104px)} .hero__title{font-size:clamp(2.5rem,5.6vw,4.6rem);letter-spacing:-.01em;line-height:1.06;text-wrap:balance} .hero__sub{max-width:600px;margin-inline:0} .hero__cta{justify-content:flex-start} .hero__est{left:auto;right:clamp(20px,5vw,64px);transform:none} /* debossed wax-seal mark (markup: see hero.php) */ .hero__seal{position:absolute;z-index:1;right:clamp(20px,5vw,72px);top:clamp(96px,15vh,150px); color:rgba(255,255,255,.10);width:clamp(140px,18vw,230px);pointer-events:none} .hero__seal svg{width:100%;height:auto} @media (max-width:860px){.hero__seal{display:none}} /* ---- 7 · PHILOSOPHY — warmer wash, gold seams, motto upright -------------- */ .philo__tint{background: radial-gradient(90% 120% at 18% -10%,rgba(184,145,80,.22),transparent 55%), radial-gradient(80% 120% at 100% 120%,rgba(184,145,80,.12),transparent 50%)} .philo__attr{color:var(--gold-bright)} .philo,.ctaband,.stats{position:relative} .philo::before,.philo::after,.ctaband::before,.ctaband::after,.stats::before,.stats::after{ content:"";position:absolute;left:0;right:0;height:1px;z-index:3; background:linear-gradient(90deg,transparent,var(--gold-line),transparent)} .philo::before,.ctaband::before,.stats::before{top:0} .philo::after,.ctaband::after,.stats::after{bottom:0} /* ---- 8 · FEATURE ROWS — more air + hairline gold rule + unified grade ------ */ .frow{gap:clamp(44px,6vw,100px);padding-block:clamp(56px,7vw,92px)} .frow+.frow{border-top:1px solid var(--gold-line)} .frow__img{filter:var(--grade)} @media (max-width:860px){.frow+.frow{border-top:0}} /* ---- 9 · STATS — promoted to a full band, self-contained, baseline dividers */ .stats{background:var(--ink);overflow:hidden} .stats__tint{position:absolute;inset:0;background:radial-gradient(80% 130% at 50% -30%,rgba(184,145,80,.14),transparent 60%)} .stats__in{position:relative;padding-block:clamp(60px,7vw,96px)} .stat{border-left:0;padding:0 18px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative} .stat+.stat::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:rgba(255,255,255,.14)} .stat__v{font-size:clamp(2.6rem,4.4vw,3.6rem);color:var(--gold-bright);line-height:1} .stat__l{font-size:.95rem;color:rgba(255,255,255,.82);max-width:18ch;margin-top:0} @media (max-width:860px){.stat:nth-child(3)::before{display:none}} /* COPY (provide both langs in the pattern): 30+ χρόνια εμπειρίας · 3 γραφεία στην Αττική · 12 τομείς υπηρεσιών · ~400 ενεργοί πελάτες / 30+ years · 3 offices in Attica · 12 service areas · ~400 active clients (drop the referent-less "100%") */ /* ---- 10 · INSIGHTS — firm's own notes (replaces away-sending RSS) ---------- */ .insights__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .insight-w{display:flex} .insight{flex:1;display:flex;flex-direction:column;gap:14px;padding:30px 28px 26px;background:var(--base); border:1px solid var(--line);border-radius:var(--r-lg);position:relative;overflow:hidden;text-align:left; transition:.4s var(--ease)} .insight::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--gold-rest); opacity:.5;transition:.45s var(--ease)} .insight:hover{border-color:var(--gold-line);box-shadow:var(--sh-md);transform:translateY(-4px)} .insight:hover::before{opacity:1} .insight__meta{display:flex;align-items:center;gap:12px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold-ink)} .insight__meta span{color:var(--gray-mid)} .insight__title{font-family:var(--font-head);font-weight:700;font-size:1.18rem;line-height:1.28;color:var(--ink)} .insight__sum{color:var(--gray-dark);font-size:.98rem;flex:1} .insight__more{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink)} .insight__more svg{transition:transform .4s var(--ease)}.insight:hover .insight__more svg{transform:translateX(5px)} @media (max-width:860px){.insights__grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.insights__grid{grid-template-columns:1fr}} /* ---- 11 · SERVICE CARDS — gold AT REST + arrow-only affordance ------------- */ .scard{padding:32px 30px 28px} .scard::before{transform:scaleX(1);opacity:.32;transition:opacity .45s var(--ease),transform .45s var(--ease)} /* resting gold rule */ .scard:hover::before{opacity:1} .scard__icon{color:var(--gold-ink);width:54px;height:54px;padding:13px} /* gold glyph at rest */ .scard:hover .scard__icon{background:var(--gold);color:#fff} .scard__num{color:var(--gold-ink);opacity:.55} /* gold number at rest */ .scard:hover .scard__num{color:var(--gold);opacity:1} .scard__go{width:34px;height:34px;justify-content:center;border:1px solid var(--gold-line);border-radius:50%; color:var(--gold-ink);margin-top:4px} .scard:hover .scard__go{background:var(--gold);border-color:var(--gold);color:#fff} /* MARKUP: drop the 12× identical "Περισσότερα/Read more" label in services-grid.php — keep the whole-card link + the arrow glyph only (see pattern note). */ /* ---- 12 · TEAM — reads as a deliberate trio, unified grade, resting tick ---- */ .tcards{max-width:1000px;margin-inline:auto} .tcard__ph{aspect-ratio:4/4.6} .tcard__ph img{filter:var(--grade)} .tcard:hover .tcard__ph img{filter:saturate(.95)} .tcard__body{position:relative} .tcard__body::before{content:"";position:absolute;left:26px;top:0;width:30px;height:2px;background:var(--gold-rest)} /* ---- 13 · CTA BAND — warm overlay, gold wash, parallax-safe wrapper -------- */ .ctaband__bgw{position:absolute;inset:-6% 0;z-index:0;overflow:hidden} /* markup: wrap the bg (see cta-band.php) */ .ctaband__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:var(--grade);will-change:transform} .ctaband__ov{position:absolute;inset:0;z-index:1;background: radial-gradient(70% 80% at 50% 0,rgba(184,145,80,.20),transparent 55%), linear-gradient(180deg,rgba(var(--ovl),.82),rgba(var(--ovl),.90))} .ctaband__in{position:relative;z-index:2} .ctaband .stampmark{color:var(--gold-bright)} /* ---- 14 · OFFICES — designed, intentional map skeleton (never a dark box) -- */ .offcard__map{height:178px;background:radial-gradient(120% 120% at 70% 20%,#33302a,#211f1b)} .offcard__mapgrid{opacity:.55;background-size:30px 30px} .offcard__map::before{content:"";position:absolute;left:-15%;top:62%;width:130%;height:6px;background:var(--gold);opacity:.5;transform:rotate(-10deg)} .offcard__map::after{content:"";position:absolute;left:8%;top:-10%;width:5px;height:130%;background:rgba(255,255,255,.08);transform:rotate(8deg)} .offcard__pin{top:46%;width:42px;height:42px;border-radius:50% 50% 50% 2px;rotate:45deg;color:var(--gold-deep)} .offcard__pin svg{rotate:-45deg} .offcard__maptag{position:absolute;left:14px;bottom:12px;z-index:2;font-size:.62rem;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7)} /* live OSM iframe still wins when present: .offcard__map--live hides the skeleton (already in base). */ /* ---- 15 · PAGE HERO / SINGLES — warm grade, softer seam, capped measure ---- */ .phero--cover{min-height:clamp(420px,56vh,600px)} /* Left-scrim treatment so the photo stays bright on the right while the breadcrumb/eyebrow/title (left-aligned) stay legible on any image; soft text-shadow as belt-and-braces. */ .phero--cover .phero__in{text-shadow:0 1px 14px rgba(0,0,0,.38)} .phero__bg{filter:var(--grade)} .phero__overlay{background: radial-gradient(70% 60% at 80% 10%,rgba(184,145,80,.16),transparent 55%), linear-gradient(180deg,rgba(var(--ovl),.30),rgba(var(--ovl),.82))} .phero__in{padding-block:clamp(56px,8vw,96px)} /* more bottom air → softer seam into first band */ .phero__lead{max-width:600px} .svc-intro__lead{max-width:30ch} /* ~58ch of body — was uncapped */ .svc-aside__icon{color:var(--gold-ink)} .comp__para--lead{max-width:34ch} /* and WIRE this class onto the company lead ¶ */ .contact__in{grid-template-columns:1fr 1.1fr} /* was .8fr 1.2fr — stop starving the info column */ .contact__ico{color:var(--gold-ink)} @media (max-width:1024px){.svc-aside__rule{display:none}} /* drop stranded rule in the compact CTA bar */ /* ---- 16 · GALLERY / FOOTER — one grade, warm captions, gold seam ----------- */ .gallery__btn img{filter:var(--grade)} .gallery__cap{background:linear-gradient(transparent,rgba(var(--ovl),.82))} .site-foot{position:relative;overflow:hidden} .site-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line),transparent)} .site-foot__tag,.site-foot__mail{color:var(--gold-bright)} .site-foot__links button:hover{color:var(--gold-bright)} /* ---- 17 · MOBILE rhythm (≤520px) ------------------------------------------ */ @media (max-width:520px){:root{--sp:clamp(48px,12vw,72px)}.frow{padding-block:36px}} /* ---- 18 · core/cover BRIDGES (production) ---------------------------------- The prototype paints .hero__overlay/.ctaband__ov divs; in WP these sections are core/cover blocks. Map the warm grade + gold-black overlay onto the cover's own image + dim layers so §6/§13/§15 take effect without touching block markup. (Set each cover's dimRatio to 0 in the pattern so only these gradients show.) */ .hero .wp-block-cover__image-background, .ctaband .wp-block-cover__image-background, .phero--cover .wp-block-cover__image-background{filter:var(--grade)} .hero>.wp-block-cover__background{opacity:1;background-color:transparent!important;background-image: radial-gradient(78% 58% at 80% 10%,rgba(184,145,80,.20),transparent 56%), linear-gradient(90deg,rgba(var(--ovl),.58) 0%,rgba(var(--ovl),.22) 52%,transparent 82%), linear-gradient(180deg,rgba(var(--ovl),.26) 0%,rgba(var(--ovl),.38) 38%,rgba(var(--ovl),.90) 100%)} .ctaband>.wp-block-cover__background{opacity:1;background-color:transparent!important;background-image: radial-gradient(70% 80% at 50% 0,rgba(184,145,80,.20),transparent 55%), linear-gradient(180deg,rgba(var(--ovl),.82),rgba(var(--ovl),.90))} .phero--cover>.wp-block-cover__background{opacity:1;background-color:transparent!important;background-image: radial-gradient(55% 70% at 92% 22%,rgba(184,145,80,.14),transparent 55%), linear-gradient(90deg,rgba(var(--ovl),.82) 0%,rgba(var(--ovl),.62) 30%,rgba(var(--ovl),.32) 60%,rgba(var(--ovl),.10) 82%), linear-gradient(180deg,transparent 42%,rgba(var(--ovl),.45) 100%)} /* bottom-set hero text (cover is a centered flex column by default) */ .hero.wp-block-cover{justify-content:flex-end;align-items:flex-start} .hero .wp-block-cover__inner-container{width:100%} /* ---- AA reconciliation (integration) ------------------------------------- Deepening --gray-light (#f6f5f2→#f1efe8) dropped the small bold .eyebrow to 4.27:1 on tint sections. Nudge the eyebrow gold slightly darker → 5.3:1 on tint, 6.1:1 on white. Other gold-ink text sits on white cards (already AA). */ .eyebrow{color:#7a5d2b} /* ---- Phase-1 integration (authoring agents) ------------------------------- */ /* hero: calm audience/niche line under the sub (WP-A) */ .hero__sub--meta{margin-top:.5rem;font-size:.94rem;line-height:1.5;opacity:.82;max-width:560px} /* insights: read-time chip, dot-separated (WP-D) — scoped for specificity over .insight__meta span */ .insight__meta .insight__rt{color:var(--gray-dark);font-weight:700} .insight__rt::before{content:"\00B7";margin-right:12px;color:var(--gray-mid)} /* contact: confidentiality reassurance line (WP-E) */ .contact__assure{display:flex;align-items:flex-start;gap:10px;margin:20px 0 0;font-size:.86rem;line-height:1.55;color:var(--gray-dark)} .contact__assure-ico{flex:none;display:inline-flex;margin-top:1px;color:var(--gold-ink)} /* ===== Phase-2 integration (authoring agents) ===== */ /* --- WP-C-testimonials --- */ /* testimonials (dioikein/testimonials) — reuses .insight card shell + .insights__grid. Only the quote/cite differ from insights cards; trait sits in .insight__meta (gold-ink, AA). */ .insight--quote{gap:16px} .insight--quote .insight__meta{margin:0} .tquote{margin:0;border:0;padding:0;flex:1} .tquote p{margin:0;font-family:var(--font-head);font-weight:600;font-size:1.12rem;line-height:1.42;color:var(--ink)} .tquote p::before{content:"\201C";margin-right:.06em;color:var(--gold-ink)} .tquote p::after{content:"\201D";margin-left:.02em;color:var(--gold-ink)} .tcite{font-size:.86rem;font-weight:600;color:var(--gray-dark)} /* --- WP-F-howwework --- */ /* === How-we-work: onboarding steps + FAQ (template-how-we-work) === */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none;margin:0;padding:0} .step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;text-align:left;background:var(--base);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 28px 30px;overflow:hidden;transition:.45s var(--ease)} .step::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--gold-rest);transform:scaleX(1);transform-origin:left;transition:opacity .45s var(--ease);opacity:.55} .step:hover{border-color:var(--gold-line);box-shadow:var(--sh-md);transform:translateY(-6px)} .step:hover::before{opacity:1} .step__num{font-family:var(--font-head);font-weight:700;font-size:1.5rem;line-height:1;color:var(--gold-ink);letter-spacing:.04em} .step__title{font-family:var(--font-head);font-weight:700;font-size:1.18rem;line-height:1.25;color:var(--ink)} .step__body{color:var(--gray-dark);font-size:1.0rem;line-height:1.6;margin:0} .faq{max-width:880px;margin-inline:auto;display:flex;flex-direction:column;gap:14px} .faq__item{background:var(--base);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color .35s var(--ease),box-shadow .35s var(--ease)} .faq__item[open]{border-color:var(--gold-line);box-shadow:var(--sh-md)} .faq__q{display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;list-style:none;padding:22px 26px;font-family:var(--font-head);font-weight:700;font-size:1.08rem;line-height:1.35;color:var(--ink)} .faq__q::-webkit-details-marker{display:none} .faq__q:hover{color:var(--gold-ink)} .faq__item[open] .faq__q{color:var(--gold-ink)} .faq__qtext{flex:1;min-width:0} .faq__ico{position:relative;flex:none;width:22px;height:22px;color:var(--gold-ink)} .faq__ico::before,.faq__ico::after{content:"";position:absolute;background:currentColor;border-radius:1px;transition:transform .35s var(--ease),opacity .35s var(--ease)} .faq__ico::before{left:0;right:0;top:10px;height:2px} .faq__ico::after{top:0;bottom:0;left:10px;width:2px} .faq__item[open] .faq__ico::after{transform:scaleY(0);opacity:0} .faq__a{padding:0 26px 24px} .faq__a p{margin:0;color:var(--gray-dark);font-size:1.02rem;line-height:1.65} @media (prefers-reduced-motion:reduce){.step,.step::before,.faq__item,.faq__ico::before,.faq__ico::after{transition:none}.step:hover{transform:none}} @media (max-width:860px){.steps{grid-template-columns:1fr 1fr}} @media (max-width:520px){.steps{grid-template-columns:1fr}.faq__q{padding:18px 20px;font-size:1.02rem}.faq__a{padding:0 20px 20px}} /* --- WP-G-audience --- */ /* ===== Audience band (dioikein/audience-band) — 2 calm cards, reuse .scard ===== */ .aud-band{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%} .aud-band .scard__title{font-size:1.35rem} /* Audience cards carry a text "Δείτε περισσότερα →" CTA, not the services-grid arrow-circle — undo the §11 34px round-button override so the label isn't crammed into a 34px circle. */ .aud-band .scard__go{width:auto;height:auto;border:0;border-radius:0;justify-content:flex-start;margin-top:10px} .aud-band .scard:hover .scard__go{background:none;border:0;color:var(--gold-deep)} @media (max-width:720px){.aud-band{grid-template-columns:1fr}} /* ===== Services clusters (dioikein/services-clusters) — need-grouped hub ===== */ .svc-cluster + .svc-cluster{margin-top:clamp(40px,5vw,64px)} .svc-cluster__head{display:flex;align-items:center;gap:14px;font-family:var(--font-head);font-weight:700; font-size:1.12rem;letter-spacing:.02em;color:var(--ink);margin:0 0 22px} .svc-cluster__head::after{content:"";flex:1;height:1px; background:linear-gradient(90deg,var(--gold-line),transparent)} .scards-hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;width:100%} .scards-hub .scard{flex:1} .scards-hub .scard__title{font-size:1.18rem} @media (max-width:860px){.scards-hub{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.scards-hub{grid-template-columns:minmax(0,1fr)}} /* ===== Service finder (dioikein/calculator) — no-numbers guided finder ===== */ .finder__box{background:var(--base);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(28px,4vw,44px);box-shadow:var(--sh-md)} .finder__fs{border:0;margin:0;padding:0} .finder__q{font-family:var(--font-head);font-weight:700;font-size:1.15rem;color:var(--ink);margin-bottom:18px;padding:0} .finder__opts{display:flex;flex-wrap:wrap;gap:12px} .finder__opt{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border:1.5px solid var(--line);border-radius:999px;cursor:pointer;font-size:.95rem;transition:border-color .25s var(--ease),background .25s var(--ease)} .finder__opt:hover{border-color:var(--gold-line)} .finder__opt:has(input:checked){border-color:var(--gold);background:var(--gold-soft);color:#7a5d2b;font-weight:700} .finder__opt input{accent-color:var(--gold-deep);margin:0} .finder__panel{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)} .finder__rlbl{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold-ink);margin-bottom:14px} .finder__list{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:10px} .finder__list a{font-family:var(--font-head);font-weight:700;font-size:1.08rem;color:var(--ink);display:inline-flex;align-items:center;gap:8px;transition:color .25s var(--ease)} .finder__list a:hover{color:var(--gold-ink)} .finder__all{margin-top:20px;font-size:.95rem} .finder__all a{color:var(--gold-ink);font-weight:700} @media(max-width:520px){.finder__opts{flex-direction:column}.finder__opt{width:100%}} /* audience-band "all services" link + home about teaser link */ .aud-band__all{margin-top:24px;text-align:center;font-size:.96rem} .aud-band__all a{color:var(--gold-ink);font-weight:700} .aud-band__all a:hover{color:var(--gold-deep)} .frows__more{margin-top:6px;font-size:1.02rem} .frows__more a{color:var(--gold-ink);font-weight:700;font-family:var(--font-head)} .frows__more a:hover{color:var(--gold-deep)} /* ===== Sector landing — named partner band (template-sector) ===== */ .sector__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px} .sector__partner{display:flex;align-items:center;gap:22px;max-width:640px} .sector__avatar{flex:none;width:84px;height:84px;border-radius:50%;background:var(--gold-soft);border:1px solid var(--gold-line)} .sector__name{font-family:var(--font-head);font-weight:700;font-size:1.3rem;color:var(--ink);margin:2px 0 0} .sector__role{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#7a5d2b;font-weight:700;margin:3px 0 8px} .sector__line{color:var(--gray-dark);font-size:.98rem;margin:0 0 10px} .sector__contact{font-size:.92rem}.sector__contact a{color:#7a5d2b;font-weight:700} .sector__cta{display:flex;flex-direction:column;gap:12px;flex:none} @media(max-width:760px){.sector__partner{flex-direction:column;text-align:center;align-items:center}.sector__cta{width:100%}} /* ===== Trust strip — certifications + one metric (placeholder until real data) ===== */ .trust__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:26px 44px;margin-top:10px} .trust__metric{display:flex;flex-direction:column;align-items:center;gap:4px} .trust__v{font-family:var(--font-head);font-weight:700;font-size:clamp(2.2rem,4vw,3rem);color:var(--gold-ink);line-height:1} .trust__l{font-size:.9rem;color:var(--gray-dark)} .trust__marks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:center} .trust__mark{font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--gray-dark);padding:10px 18px;border:1px solid var(--line);border-radius:var(--r)} /* ===== "Why us" — 3 pillars (home, reference-inspired) ===== */ .whyus__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px);margin-top:clamp(36px,4vw,56px)} .whyus__item{padding-top:22px;border-top:2px solid var(--gold-line)} .whyus__num{display:block;font-family:var(--font-head);font-weight:700;font-size:1.05rem;letter-spacing:.1em;color:#7a5d2b;margin-bottom:12px} .whyus__title{font-family:var(--font-head);font-weight:700;font-size:clamp(1.18rem,2vw,1.32rem);line-height:1.22;color:var(--ink);margin:0 0 10px} .whyus__body{color:var(--gray-dark);font-size:1rem;line-height:1.65;margin:0} @media (max-width:860px){.whyus__grid{grid-template-columns:1fr;gap:28px}} /* ===== Services hub — cluster intro line ===== */ .svc-cluster__intro{margin:-4px 0 20px;max-width:760px;color:var(--gray-dark);font-size:1rem;line-height:1.6} /* ===== Service single — value-prop standfirst (post excerpt) ===== */ .svc-lead{font-family:var(--font-head);font-weight:400;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.5;color:var(--ink);margin:0 0 clamp(24px,3vw,34px);padding-bottom:clamp(18px,2.4vw,26px);border-bottom:1px solid var(--line)} /* ===== Hero cinemagraph (Kling loop over the still; still = poster/fallback) ===== */ .hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;filter:var(--grade)} /* Honour reduced-motion: hide the loop, fall back to the still background. */ @media (prefers-reduced-motion: reduce){.hero__video{display:none}} /* ===== CTA band cinemagraph (Kling loop over the still; still = poster/fallback) ===== */ .ctaband__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05)} @media (prefers-reduced-motion: reduce){.ctaband__video{display:none}}