/* ════════════════════════════════════════════════════════════
   OUTLINK — New style
   Loaded after home.css and themes.css. Colours stay in themes.css;
   this layer owns typography, spacing and layout proportions.

   φ = 1.618
   Type:    16px × φ^(n/4)  →  13 · 14 · 16 · 18 · 20 · 23 · 26 · 33 · 42 · 53 · 68
   Space:   Fibonacci       →  5 · 8 · 13 · 21 · 34 · 55 · 89 · 144
            each level of grouping is φ larger than the one inside it
            (content gap 55 → column gap 89 → section padding 144)
   Grid:    primary : secondary = 1.618fr : 1fr  (61.8% / 38.2%)
   ════════════════════════════════════════════════════════════ */
:root{
 --phi:1.618;
 --display:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
 --body:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;

 --fs-label:13px;   /* eyebrows, numbers, captions   16 ÷ φ^½  */
 --fs-sm:14px;      /* meta, notes, footer           16 ÷ φ^¼  */
 --fs-ui:15px;      /* buttons, nav, links                     */
 --fs-base:16px;    /* body                                    */
 --fs-md:18px;      /* comfortable reading, h3 small 16 × φ^¼  */
 --fs-lg:20px;      /* lead, card titles             16 × φ^½  */
 --fs-xl:23px;      /*                               16 × φ^¾  */
 --fs-h3:26px;      /*                               16 × φ    */
 --fs-h2s:33px;     /*                               16 × φ^1½ */
 --fs-h2:42px;      /*                               16 × φ²   */
 --fs-h1s:53px;     /*                               16 × φ^2½ */
 --fs-h1:68px;      /*                               16 × φ³   */

 --lh-body:1.618;
 --lh-snug:1.272;   /* √φ */
 --lh-tight:1.12;

 --s-1:5px;--s-2:8px;--s-3:13px;--s-4:21px;--s-5:34px;--s-6:55px;--s-7:89px;--s-8:144px;

 --section-y:clamp(var(--s-6),11vw,var(--s-8));
 --block-gap:clamp(var(--s-5),5vw,var(--s-6));
 --column-gap:clamp(var(--s-6),7vw,var(--s-7));
 --measure:38rem;   /* ≈ 65–70 characters */
 --gutter:var(--s-5);
}

/* ── Base type ─────────────────────────────────────────────── */
html{scroll-padding-top:var(--s-7)}
body{font-family:var(--body);font-size:var(--fs-base);line-height:var(--lh-body);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--display);font-weight:700;text-wrap:balance}
h1{line-height:var(--lh-tight);letter-spacing:-.035em}
h2{font-size:clamp(30px,2.2vw + 14px,var(--fs-h2));line-height:1.18;letter-spacing:-.03em}
h3{line-height:var(--lh-snug);letter-spacing:-.018em;font-weight:600}
p{text-wrap:pretty}
.wrap{width:min(1180px,100% - var(--gutter) * 2)}

.eyebrow{font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;line-height:1.5;margin-bottom:var(--s-4)}
.orange-dot{width:8px;height:8px;margin-right:var(--s-3);vertical-align:1px}
.lead{font-size:var(--fs-lg);line-height:var(--lh-body);margin-top:var(--s-4);max-width:var(--measure)}
.text-link{font-size:var(--fs-ui);font-weight:600}

/* ── Actions: 55px tall, one clear primary per view ────────── */
.button{min-height:55px;padding:var(--s-3) var(--s-5);gap:var(--s-3);font-size:var(--fs-ui);font-weight:600;border-radius:8px;line-height:1.3}
.button .icon{width:18px;height:18px}
.small{min-height:44px;padding:var(--s-2) var(--s-4);font-size:var(--fs-sm)}
.hero-actions{gap:var(--s-5);margin-top:var(--s-5)}

/* ── Header ────────────────────────────────────────────────── */
.header-row{min-height:var(--s-7);gap:var(--s-5)}
.desktop-nav{gap:var(--s-5);font-size:var(--fs-ui);font-weight:500}
.desktop-nav [aria-current=page]::after{bottom:-8px}
.language-control select{font-size:var(--fs-label)}
.mobile-nav{padding:var(--s-3) var(--s-4) var(--s-4)}
.mobile-nav a{font-size:var(--fs-base);padding:var(--s-3) var(--s-3);min-height:48px}
.mobile-nav .nav-cta{font-size:var(--fs-ui);padding:var(--s-3);margin-top:var(--s-2)}

/* ── Home hero ─────────────────────────────────────────────── */
.hero.hero-branded{padding:var(--s-7) 0}
.hero-branded .hero-grid{width:min(1180px,100% - var(--gutter) * 2)}
.hero-branded .hero-copy{width:50%;max-width:34rem}
.hero-branded .eyebrow{font-size:var(--fs-label)}
.hero-branded h1{font-size:clamp(40px,3vw + 14px,var(--fs-h1s));font-weight:700;line-height:var(--lh-tight)}
.hero-branded .lead{font-size:var(--fs-md);line-height:var(--lh-body);margin-top:var(--s-4);max-width:30rem}
.hero-branded .hero-actions{gap:var(--s-5);margin-top:var(--s-5)}
.hero-branded .hero-note{font-size:var(--fs-sm);margin-top:var(--s-5);padding-top:var(--s-4);max-width:30rem}

/* Capability strip */
.strip .wrap{min-height:var(--s-7);gap:var(--s-5);font-size:var(--fs-label);letter-spacing:.14em}
.strip b{font-size:var(--fs-lg)}
.strip p{font-size:var(--fs-ui)}

/* ── Sections ──────────────────────────────────────────────── */
.section,.contact,.founders-section{padding:var(--section-y) 0}
html[data-theme] .section+.section,
html[data-theme] .section+.founders-section,
html[data-theme] .service-list+.section{border-top:1px solid var(--line)}
.section-heading{display:grid;grid-template-columns:1.618fr 1fr;align-items:end;gap:var(--column-gap);margin-bottom:var(--block-gap)}
.section-heading .eyebrow{margin-bottom:var(--s-4)}
.section-heading>p{max-width:none;font-size:var(--fs-md);line-height:var(--lh-body);color:var(--muted)}

/* Service cards */
.service-grid{gap:var(--s-4)}
.card{padding:var(--s-5);border-radius:10px}
.card-top{margin-bottom:var(--s-5)}
.card-top>.icon{width:34px;height:34px}
.card-top>span{font-size:var(--fs-label);font-weight:500;letter-spacing:.06em}
.card h3{font-size:var(--fs-lg);max-width:none}
.card>p{font-size:var(--fs-base);line-height:var(--lh-body);margin-top:var(--s-3)}
.card ul{margin:var(--s-4) 0 var(--s-5);font-size:var(--fs-sm)}
.card li{padding:var(--s-1) 0;gap:var(--s-3)}
.card li:before{width:5px;height:5px;border-radius:50%}
.card-link{padding-top:var(--s-4);font-size:var(--fs-ui)}
.brief .eyebrow{margin:0 0 var(--s-4)}
.brief h3{font-size:var(--fs-h3);line-height:1.2;max-width:none}
.brief>p{margin-top:var(--s-4)}
.brief .button{margin-top:var(--s-5);font-size:var(--fs-ui)}
.signature{font-size:var(--fs-label);padding-top:var(--s-5)}
.all-services{margin-top:var(--block-gap);padding-top:var(--s-5);gap:var(--s-5)}
.all-services p{font-size:var(--fs-md)}

/* Process */
.process-grid{margin:0;gap:var(--s-5)}
.process-grid li{padding-top:var(--s-5)}
.process-grid li>span{font-size:var(--fs-label);letter-spacing:.06em}
.process-grid h3{font-size:var(--fs-lg);margin:var(--s-4) 0 var(--s-3)}
.process-grid p{font-size:var(--fs-base);line-height:var(--lh-body)}

/* Company (home) */
.company-grid{grid-template-columns:1.618fr 1fr;gap:var(--column-gap);align-items:start}
.company-grid h2{font-size:clamp(30px,2.2vw + 14px,var(--fs-h2))}
.company-copy{font-size:var(--fs-md);line-height:var(--lh-body);margin-top:var(--s-4);max-width:var(--measure)}
.company-more{margin-top:var(--s-5);gap:var(--s-3)}
.principles{gap:var(--s-5)}
.principles>div{gap:var(--s-4);padding-bottom:var(--s-5)}
.principles>div:last-child{border-bottom:0;padding-bottom:0}
.principles .icon{width:34px;height:34px;padding:var(--s-2)}
.principles h3{font-size:var(--fs-md);margin-bottom:var(--s-2)}
.principles p{font-size:var(--fs-base);line-height:var(--lh-body)}

/* Contact band */
.contact-grid{grid-template-columns:1.618fr 1fr;gap:var(--column-gap)}
.contact h2{font-size:clamp(30px,2.2vw + 14px,var(--fs-h2))}
.contact p:not(.eyebrow){font-size:var(--fs-md);line-height:var(--lh-body);margin-top:var(--s-4);max-width:var(--measure)}
.contact-detail>a{font-size:clamp(20px,1.2vw + 12px,var(--fs-h3));padding:var(--s-4) 0;gap:var(--s-4)}
.contact-detail>p{font-size:var(--fs-sm)!important;margin-top:var(--s-3)!important}

/* Footer */
footer{padding:var(--s-7) 0 var(--s-5)}
.footer-top{grid-template-columns:minmax(0,1.618fr) minmax(0,1fr) auto;gap:var(--s-6)}
.footer-top nav{flex-wrap:nowrap}
.footer-top p{font-size:var(--fs-ui);line-height:var(--lh-body)}
.footer-top nav{gap:var(--s-3) var(--s-4);font-size:var(--fs-ui)}
.footer-bottom{margin-top:var(--s-6);padding-top:var(--s-4);font-size:var(--fs-label)}

/* ── Inner page heroes ─────────────────────────────────────── */
.services-hero,.about-hero{padding:var(--s-5) 0 var(--s-7)}
.breadcrumb{font-size:var(--fs-sm);gap:var(--s-3);margin-bottom:var(--s-6);min-height:44px;align-items:center}
.services-heading{grid-template-columns:1.618fr 1fr;gap:var(--column-gap)}
.services-heading h1,.about-hero h1{font-size:clamp(40px,4vw + 12px,var(--fs-h1));font-weight:700;line-height:var(--lh-tight)}
.services-heading>p{font-size:var(--fs-lg);line-height:var(--lh-body);max-width:24rem}

/* Service detail pages */
.service-detail{grid-template-columns:1fr 1.618fr;gap:var(--column-gap);padding:var(--section-y) 0}
.service-intro{align-self:start;position:sticky;top:calc(var(--s-7) + var(--s-5))}
.service-number{font-size:var(--fs-label);gap:var(--s-3);margin-bottom:var(--s-4)}
.service-number .icon{width:34px;height:34px}
.service-intro>p:not(.service-promise){font-size:var(--fs-lg);line-height:var(--lh-body);color:var(--ink);margin-top:0}
.service-cta{flex-direction:column;align-items:flex-start;gap:var(--s-4);margin-top:var(--s-5)}
.service-scope{border-radius:12px}
.scope-block{padding:var(--s-5)}
.scope-block h3{font-size:var(--fs-md);margin-bottom:var(--s-4)}
.scope-block ul{gap:var(--s-3)}
.scope-block li{font-size:var(--fs-base);gap:var(--s-3);line-height:1.5}
.scope-note{font-size:var(--fs-sm);margin-top:var(--s-4)}
.service-brief summary{padding:var(--s-4) var(--s-5);font-size:var(--fs-ui);min-height:55px}
.service-brief>div{padding:0 var(--s-5) var(--s-5);font-size:var(--fs-base)}

/* "Before we begin" checklist */
.project-start{grid-template-columns:1fr 1.618fr;gap:var(--column-gap);align-items:start}
.project-start>div>p:not(.eyebrow){font-size:var(--fs-md);line-height:var(--lh-body);margin:var(--s-4) 0 var(--s-5)}
.project-checklist li{gap:var(--s-5);padding:var(--s-5) 0}
.project-checklist li:last-child{border-bottom:0}
.project-checklist span{font-size:var(--fs-label);padding-top:5px}
.project-checklist h3{font-size:var(--fs-md);margin-bottom:var(--s-2)}
.project-checklist p{font-size:var(--fs-base);line-height:var(--lh-body)}

/* ── About ─────────────────────────────────────────────────── */
.about-hero-grid{grid-template-columns:1.618fr 1fr;gap:var(--column-gap)}
.about-hero .lead{font-size:var(--fs-lg)}
.about-brand{padding:var(--s-5);border-radius:14px}
.brand-caption{font-size:var(--fs-label)}
.about-brand>img{width:89px;height:89px;margin:var(--s-5) 0 var(--s-4)}
.about-brand>p{font-size:var(--fs-h3);line-height:1.3}
.capability-tags{gap:var(--s-2);margin-top:var(--s-5)}
.capability-tags span{font-size:var(--fs-label);padding:var(--s-1) var(--s-3)}
.brand-baseline{font-size:var(--fs-label);margin-top:var(--s-5);padding-top:var(--s-4)}
.about-story{grid-template-columns:1fr 1.618fr;gap:var(--column-gap)}
.about-story h2{font-size:clamp(30px,2.2vw + 14px,var(--fs-h2))}
.about-story p:not(.eyebrow){font-size:var(--fs-md);line-height:var(--lh-body);margin-top:var(--s-4);max-width:var(--measure)}
.about-story .story-lead{font-size:var(--fs-xl)!important;line-height:1.5!important;font-weight:500;letter-spacing:-.015em}
.audience-grid{gap:var(--s-5)}
.audience-grid article{padding-top:var(--s-5)}
.audience-grid article>span{font-size:var(--fs-label)}
.audience-grid h3{font-size:var(--fs-lg);margin:var(--s-4) 0 var(--s-3)}
.audience-grid p{font-size:var(--fs-base);line-height:var(--lh-body)}
.audience-grid .text-link{font-size:var(--fs-ui);margin-top:var(--s-4);gap:var(--s-3)}
.working-principles{gap:0 var(--column-gap)}
.working-principles article{gap:var(--s-4);padding:var(--s-5) 0}
.working-principles article>.icon{width:34px;height:34px;padding:var(--s-2)}
.working-principles h3{font-size:var(--fs-md);margin-bottom:var(--s-2)}
.working-principles p{font-size:var(--fs-base);line-height:var(--lh-body);max-width:none}
.about-process-link{margin-top:var(--s-5);gap:var(--s-3)}

/* Founders */
.founders-grid{grid-template-columns:1fr 1.618fr;gap:var(--column-gap)}
.founders-grid p:not(.eyebrow){font-size:var(--fs-md);line-height:var(--lh-body);margin-bottom:var(--s-4);max-width:var(--measure)}
.leadership-grid{gap:var(--s-5);margin-top:var(--block-gap)}
.leader{border-radius:10px}
.leadership-grid{align-items:stretch}
.leadership-grid .leader-details{align-self:stretch}
.leader-details summary{padding:var(--s-5)}
.leader-overview{gap:var(--s-5)}
.leader-role{font-size:var(--fs-label);letter-spacing:.14em}
.leader-name{font-size:var(--fs-xl);margin:var(--s-3) 0 var(--s-2)}
.leader-company{font-size:var(--fs-sm)}
.leader-expertise{font-size:var(--fs-base);margin-top:var(--s-3)}
.profile-trigger{font-size:var(--fs-ui);margin-top:var(--s-4);gap:var(--s-3);min-height:44px}
.leader-profile{padding:var(--s-5)}
.leader-profile h3{font-size:var(--fs-lg);margin-bottom:var(--s-3)}
.leader-profile p{font-size:var(--fs-base);line-height:var(--lh-body)}
.leader-profile a{font-size:var(--fs-ui);margin-top:var(--s-4)}
.direct-email{font-size:var(--fs-sm)}
.leadership-contact{margin-top:var(--block-gap)}

/* ── Contact page ──────────────────────────────────────────── */
.enquiry-grid{grid-template-columns:1.618fr 1fr;gap:var(--column-gap);align-items:start}
.enquiry-email h2{font-size:clamp(30px,2.2vw + 14px,var(--fs-h2))}
.email-address{font-size:clamp(22px,1.4vw + 12px,var(--fs-h2s));gap:var(--s-4);margin:var(--s-5) 0 var(--s-4)}
.enquiry-email>p:not(.eyebrow){font-size:var(--fs-md);line-height:var(--lh-body);margin-bottom:var(--s-5)}
.contact-actions{gap:var(--s-3);margin-top:var(--s-5)}
.copy-status{font-size:var(--fs-sm);margin-top:var(--s-3)}
.enquiry-guide{padding:var(--s-5);border-radius:12px}
.enquiry-guide h2{font-size:var(--fs-xl);line-height:1.3}
.enquiry-guide>p,.enquiry-guide p{font-size:var(--fs-base);line-height:var(--lh-body);margin-top:var(--s-3)}
.contact-fallback{margin-top:var(--s-5);padding-top:var(--s-5)}
.contact-fallback h3{font-size:var(--fs-md);margin-bottom:var(--s-2)}
.contact-fallback .text-link{display:inline-flex;align-items:center;gap:var(--s-3);margin-top:var(--s-3);min-height:44px;color:var(--blue)}
.contact-fallback .text-link .icon{width:17px;height:17px}

/* Website information */
.website-information{max-width:42rem}
.website-information article+article{margin-top:var(--s-6);padding-top:var(--s-6)}
.website-information h2{font-size:var(--fs-h3);margin-bottom:var(--s-4)}
.website-information p{font-size:var(--fs-base);line-height:1.75;margin-top:var(--s-3)}

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:1050px){
 .hero.hero-branded{padding:var(--s-6) 0 0}
 .hero-branded .hero-grid{width:min(1180px,100% - var(--gutter) * 2)}
 .hero-branded .hero-copy{width:100%;max-width:36rem}
 .hero-branded .hero-media{margin-top:var(--s-6)}
 .process-grid{grid-template-columns:repeat(2,1fr);gap:var(--s-5) var(--s-6)}
}
@media(max-width:860px){
 :root{--gutter:var(--s-4)}
 .section-heading,.company-grid,.contact-grid,.services-heading,.service-detail,.project-start,
 .about-hero-grid,.about-story,.founders-grid,.enquiry-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
 .section-heading{display:grid;gap:var(--s-4)}
 .section-heading>p,.services-heading>p{max-width:var(--measure)}
 .service-intro{position:static}
 .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .working-principles{grid-template-columns:minmax(0,1fr)}
 .audience-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
 .footer-top{grid-template-columns:1fr 1fr;gap:var(--s-5)}
 .footer-top nav{grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap}
 .about-brand{max-width:34rem}
}
@media(max-width:640px){
 .service-grid,.process-grid{grid-template-columns:minmax(0,1fr)}
 .header-row{min-height:72px;gap:var(--s-2)}
 .breadcrumb{margin-bottom:var(--s-5)}
 .services-hero,.about-hero{padding:var(--s-4) 0 var(--s-6)}
 .card,.scope-block,.enquiry-guide,.about-brand,.leader-details summary,.leader-profile{padding:var(--s-4) var(--s-4) var(--s-5)}
 .service-brief summary{padding:var(--s-4)}
 .service-brief>div{padding:0 var(--s-4) var(--s-4)}
 .button{padding:var(--s-3) var(--s-4)}
 .hero-branded .hero-actions,.hero-actions{flex-direction:column;align-items:stretch;gap:var(--s-4)}
 .hero-actions .button{justify-content:center}
 .hero-actions .text-link{align-self:flex-start;min-height:44px;display:inline-flex;align-items:center}
 .strip .wrap{flex-wrap:wrap;justify-content:center;gap:var(--s-2) var(--s-3);padding:var(--s-4) 0;min-height:var(--s-6);font-size:var(--fs-label);letter-spacing:.08em}
 .strip b{display:none}
 .all-services{flex-direction:column;align-items:stretch}
 .contact-detail>a{font-size:20px;gap:var(--s-3)}
 .footer-top{grid-template-columns:1fr}
 .footer-bottom{flex-direction:column;gap:var(--s-2)}
}

/* ── Image service cards and closing CTA band ──────────────── */
:root{--tint:#f3f6fb;--radius-lg:24px;--radius-md:16px}
html[data-theme=dark]{--tint:#071a38}
.tile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.svc-tile{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-4);border-radius:var(--radius-lg);background:var(--tint);border:1px solid var(--line);color:var(--ink);transition:transform .25s,box-shadow .25s}
.svc-tile:hover{transform:translateY(-4px);box-shadow:0 18px 40px -28px rgba(17,28,50,.45)}
.tile-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3)}
.svc-tile .eyebrow,.cta-band .eyebrow{display:inline-flex;align-items:center;margin:0;padding:var(--s-1) var(--s-3);border:1px solid var(--line);border-radius:999px;background:var(--surface,#fff);letter-spacing:.1em;text-transform:uppercase}
.round-arrow{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:50%;background:var(--surface,#fff);color:var(--ink);border:1px solid var(--line);transition:background .2s,color .2s}
.round-arrow .icon{width:18px;height:18px}
.svc-tile:hover .round-arrow{background:var(--action);color:#fff;border-color:var(--action)}
.svc-tile h3{font-size:var(--fs-lg);line-height:1.35;letter-spacing:-.015em;font-weight:600}
.svc-tile img{margin-top:auto;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md)}
.svc-tile-feature{background:var(--action);border-color:var(--action);color:#fff}
.svc-tile-feature img{margin-top:0}
.svc-tile-feature h3{margin-top:auto}
html[data-theme] .svc-tile-feature .eyebrow{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.svc-tile-feature .round-arrow,.svc-tile-feature:hover .round-arrow{background:#fff;color:var(--action);border-color:#fff}

.cta-section{padding:0 0 var(--s-7)}
.cta-band{display:grid;grid-template-columns:1.618fr 1fr;align-items:center;gap:var(--s-6);padding:var(--s-7);border-radius:var(--radius-lg);background:var(--action);color:#fff}
.cta-band .eyebrow{margin-bottom:var(--s-4)}
.cta-band h2{color:#fff;font-size:clamp(30px,2.2vw + 14px,var(--fs-h2))}
.cta-band p:not(.eyebrow){margin-top:var(--s-4);color:rgba(255,255,255,.88);font-size:var(--fs-md);line-height:var(--lh-body);max-width:32rem}
html[data-theme] .cta-band .eyebrow{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
html[data-theme] .cta-band .button{justify-self:end;background:#fff;color:#0b2a6b;border-color:#fff}
html[data-theme] .cta-band .button:hover{background:#e8efff;color:#0b2a6b}

@media(max-width:860px){
 .tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cta-band{grid-template-columns:minmax(0,1fr);padding:var(--s-6) var(--s-5);gap:var(--s-5)}
 html[data-theme] .cta-band .button{justify-self:start}
}
@media(max-width:640px){
 .tile-grid{grid-template-columns:minmax(0,1fr)}
 .svc-tile img{aspect-ratio:16/10}
 .cta-band{padding:var(--s-6) var(--s-4)}
 html[data-theme] .cta-band .button{justify-self:stretch;justify-content:center}
}

/* ════════════════════════════════════════════════════════════
   New style: centred two-tone titles, photo cards,
   soft feature band, full-width closing band and navy footer.
   ════════════════════════════════════════════════════════════ */
:root{
 --section-y:clamp(56px,7vw,100px);
 --block-gap:clamp(32px,4vw,56px);
 --soft:#f2f5f9;
 --footer-bg:#062a6e;
 --card-shadow:0 4px 14px rgba(0,0,0,.13);
}
html[data-theme=dark]{--soft:#081d3d;--footer-bg:#021230;--card-shadow:0 4px 18px rgba(0,0,0,.45)}

/* Headlines: heavy italic, accent phrase first */
.hero-branded h1,.services-heading h1,.about-hero h1{font-weight:800;font-style:italic;letter-spacing:-.025em}
:is(.section-heading,.company-grid,.contact,.about-story,.founders-grid,.project-start,.enquiry-email,.cta-band) h2{font-size:clamp(26px,2.4vw + 10px,44px);font-weight:800;font-style:italic;line-height:1.2;letter-spacing:-.02em}
h2 em{font-style:inherit;color:var(--blue)}
.cta-band h2 em{color:#cfe0ff}

/* Centred section intro: title, one subtitle line, then content */
.section-heading{display:block;text-align:center;max-width:46rem;margin:0 auto var(--block-gap)}
.section-heading>p{max-width:40rem;margin:var(--s-3) auto 0;font-size:var(--fs-md);line-height:1.5}

/* Pill actions */
.button{border-radius:999px;min-height:56px;padding:var(--s-3) 30px}
.small{min-height:44px;padding:var(--s-2) var(--s-4)}

/* Photo cards: image on top, title and description below */
.tile-grid{gap:20px}
.svc-tile{padding:0;gap:0;border:0;border-radius:18px;background:var(--panel,#fff);box-shadow:var(--card-shadow);overflow:hidden}
.svc-tile img{order:-1;margin:0;border-radius:0;aspect-ratio:7/5}
.svc-tile h3{padding:var(--s-4) 28px 0;font-size:22px;font-weight:700;line-height:1.3;color:var(--ink)}
.svc-tile p{padding:var(--s-2) 28px 28px;font-size:var(--fs-base);line-height:1.5;color:var(--muted)}
.svc-tile:hover{transform:translateY(-4px);box-shadow:0 14px 30px -12px rgba(0,0,0,.28)}
.svc-tile-feature{background:var(--action)}
.svc-tile-feature h3,.svc-tile-feature p{color:#fff}
.svc-tile-feature p{opacity:.9}
.all-services{flex-direction:column;justify-content:center;text-align:center;border-top:0;gap:var(--s-3)}

/* Soft full-width band with centred steps */
html[data-theme] .section.approach{background:var(--soft);border:0}
.process-grid{gap:var(--s-5)}
.process-grid li{border-top:0;padding-top:0;text-align:center}
.process-grid li>span{display:grid;place-items:center;width:84px;height:84px;margin:0 auto;border-radius:50% 50% 50% 50%/36% 36% 64% 64%;background:var(--action);color:#fff;font-size:22px;font-weight:800;font-style:italic;letter-spacing:0}
.process-grid h3{font-size:22px;font-weight:800;font-style:italic;margin:var(--s-4) 0 var(--s-2)}
.process-grid p{max-width:17rem;margin-inline:auto}

/* Full-width closing band */
.cta-section{padding:0}
.cta-section>.wrap{width:100%}
.cta-band{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:var(--s-5);border-radius:0;padding:clamp(48px,6vw,72px) var(--s-4)}
.cta-band p:not(.eyebrow){margin-inline:auto}
html[data-theme] .cta-band .button{justify-self:center}

/* Navy footer in both themes */
html[data-theme] footer{background:var(--footer-bg);color:#fff;border-top:0}
html[data-theme] .footer-top p,html[data-theme] .footer-bottom,html[data-theme] .footer-bottom a{color:rgba(255,255,255,.78)}
html[data-theme] .footer-top nav a{color:#fff}
html[data-theme] .footer-top nav a:hover,html[data-theme] .footer-bottom a:hover{color:#ffd28a}
html[data-theme] .footer-bottom{border-color:rgba(255,255,255,.16)}
html[data-theme] footer a:focus-visible{outline-color:#ff8c20}

@media(max-width:860px){
 .section-heading{display:block}
 .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
 .svc-tile img{aspect-ratio:16/10}
 .svc-tile h3{font-size:20px;padding:var(--s-4) var(--s-4) 0}
 .svc-tile p{padding:var(--s-2) var(--s-4) var(--s-4)}
 .process-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
 html[data-theme] .cta-band .button{justify-self:stretch}
}


/* Corporate footer: brand, services, company and contact columns */
.footer-top{grid-template-columns:minmax(0,1.618fr) repeat(3,minmax(0,1fr));gap:var(--s-6);align-items:start}
.footer-top nav.footer-col,.footer-col{grid-column:auto;display:flex;flex-direction:column;justify-content:flex-start;flex-wrap:nowrap;gap:var(--s-3);font-size:var(--fs-ui)}
.footer-col h2{font-size:var(--fs-label);font-weight:700;font-style:normal;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;color:#fff;margin-bottom:var(--s-1)}
html[data-theme] .footer-col a{color:rgba(255,255,255,.85)}
html[data-theme] .footer-col a:hover{color:#ffd28a}
.footer-brand p{margin-top:var(--s-4)}
.footer-col a{overflow-wrap:anywhere}
@media(max-width:1000px){.footer-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:560px){.footer-top{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}}

/* Titles may run a little wider than their subtitle so short headlines stay on one line */
.section-heading{max-width:60rem}

/* Both headline lines share the same slant, including the highlighted line */
.hero-branded h1 em,.services-heading h1 em,.about-hero h1 em,.consultation-heading h1 em{font-style:inherit}

/* Stacked contact actions size to their content; the shared 180px flex basis is meant for side-by-side buttons */
@media(max-width:480px){.consultation-card .contact-actions>*{flex:0 0 auto}}

/* ── Phone layout: compact patterns of its own, not a stacked desktop ── */
.consultation-card .contact-actions .button{border-radius:999px;min-height:56px}
.logo{display:inline-flex;align-items:center;min-height:44px}
.service-jump a{min-height:44px}
@media(max-width:640px){
 /* Service cards as rows: square photo beside title and text */
 .tile-grid{gap:var(--s-3)}
 .svc-tile{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:var(--s-4);padding:var(--s-3);align-items:start;border-radius:16px}
 .svc-tile img{grid-row:1/3;width:104px;height:104px;aspect-ratio:1/1;object-fit:cover;border-radius:12px}
 .svc-tile h3{padding:var(--s-1) 0 0;font-size:var(--fs-md);line-height:1.3}
 .svc-tile p{padding:var(--s-1) 0 0;font-size:var(--fs-sm);line-height:1.5}
 .svc-tile:hover{transform:none}
 /* Process as a vertical timeline */
 .process-grid{grid-template-columns:minmax(0,1fr);gap:0;counter-reset:none}
 .process-grid li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:var(--s-4);text-align:left;padding-bottom:var(--s-5)}
 .process-grid li:not(:last-child)::after{content:"";position:absolute;left:27px;top:60px;bottom:4px;width:2px;background:var(--line)}
 .process-grid li>span{grid-row:1/3;width:56px;height:56px;margin:0;font-size:var(--fs-md)}
 .process-grid h3{margin:var(--s-2) 0 var(--s-1);font-size:var(--fs-lg)}
 .process-grid p{max-width:none;margin:0}
 /* Footer: services and company side by side, comfortable tap height */
 .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-4)}
 .footer-brand,.footer-top>.footer-col:last-child{grid-column:1/-1}
 .footer-top nav.footer-col,.footer-col{gap:0}
 .footer-col a{display:flex;align-items:center;min-height:44px}
 .footer-col h2{margin-bottom:var(--s-1)}
}
@media(max-width:640px){.language-control,.language-control span,.service-jump a{font-size:var(--fs-label)}}
@media(max-width:640px){.footer-top>nav.footer-col:first-of-type{grid-column:1/-1}.footer-top>.footer-col:last-child{grid-column:auto}}
.footer-brand>a{display:inline-flex;align-items:center;min-height:44px}

/* ── Portfolio ─────────────────────────────────────────────── */
.service-jump{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.portfolio-list{display:grid;gap:var(--s-7)}
.portfolio-group{scroll-margin-top:110px}
.portfolio-group-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-5);padding-bottom:var(--s-4);border-bottom:1px solid var(--line)}
.portfolio-group-head h2{font-size:clamp(24px,1.6vw + 12px,34px);font-weight:800;font-style:italic;letter-spacing:-.02em}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-5)}
.work-card{display:flex;flex-direction:column;min-width:0}
.work-media{position:relative;display:grid;place-items:center;aspect-ratio:3/2;padding:var(--s-5);border-radius:18px;background:#eef3fb;overflow:hidden;box-shadow:var(--card-shadow)}
.work-media img{width:100%;height:100%;object-fit:contain;transition:transform .5s ease}
.work-card:hover .work-media img{transform:translateY(-6px) scale(1.03)}
.work-badge{position:absolute;top:var(--s-3);left:var(--s-3);padding:var(--s-1) var(--s-3);border-radius:999px;background:#fff;color:#111c32;font-size:12px;font-weight:600;box-shadow:0 2px 8px rgba(17,28,50,.12)}
.work-tag{margin-top:var(--s-4);font-size:var(--fs-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.work-card h3{margin-top:var(--s-2);font-size:22px;font-weight:700;line-height:1.3}
.work-card>p:not(.work-tag){margin-top:var(--s-2);font-size:var(--fs-base);line-height:1.6;color:var(--muted);max-width:34rem}
@media(max-width:760px){.work-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}.portfolio-list{gap:var(--s-6)}.work-media{padding:var(--s-4)}}

/* ── Gentle icon motion (disabled for reduced-motion users by home.css) ── */
@keyframes outlink-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes outlink-pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.process-grid li>span{animation:outlink-float 4.2s ease-in-out infinite}
.process-grid li:nth-child(2)>span{animation-delay:.5s}
.process-grid li:nth-child(3)>span{animation-delay:1s}
.process-grid li:nth-child(4)>span{animation-delay:1.5s}
.service-number .icon{animation:outlink-float 3.6s ease-in-out infinite}
.principles .icon,.working-principles article>.icon{animation:outlink-pop .5s ease-out both}
.service-jump a .icon,.svc-tile img,.button .icon{transition:transform .25s ease}
.service-jump a:hover .icon{transform:rotate(-8deg) scale(1.15)}
.svc-tile:hover img{transform:scale(1.04)}

/* ── Homepage hero on brand blue (tablet photo) ────────────── */
html[data-theme] .hero.hero-branded{background:#0050ff;color:#fff}
html[data-theme] .hero-branded::before{background:linear-gradient(90deg,#0050ff 0%,#0050ff 30%,rgba(0,80,255,.85) 40%,rgba(0,80,255,0) 56%)}
.hero-branded .hero-media img{object-position:68% 50%}
html[data-theme] .hero-branded h1{color:#fff}
html[data-theme] .hero-branded h1 em{color:#cfe0ff}
html[data-theme] .hero-branded .eyebrow{color:#fff}
html[data-theme] .hero-branded .lead{color:rgba(255,255,255,.92)}
html[data-theme] .hero-branded .hero-note{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.28)}
html[data-theme] .hero-branded .hero-actions .primary{background:#fff;color:#0040cc;border-color:#fff}
html[data-theme] .hero-branded .hero-actions .primary:hover{background:#e8efff;color:#0040cc}
html[data-theme] .hero-branded .hero-actions .secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
html[data-theme] .hero-branded .hero-actions .secondary:hover{background:rgba(255,255,255,.12);color:#fff}
html[data-theme] .hero-branded a:focus-visible{outline-color:#ffb36b}
@media(max-width:1050px){.hero-branded .hero-media img{object-position:50% 50%}}

/* ── Consultation band over the meeting-room photo ─────────── */
.cta-band{background:linear-gradient(135deg,rgba(0,80,255,.92),rgba(0,45,150,.88)),url("../images/cta-meeting-room.webp") center/cover no-repeat}
/* The photo's own blue continues the hero colour, so no overlay is needed; on wide screens the whole tablet sits to the right of the copy */
html[data-theme] .hero-branded::before{background:none}
@media(min-width:1051px){.hero-branded .hero-media{left:40%}.hero-branded .hero-media img{object-fit:contain;object-position:right center}}
@media(min-width:1051px){.hero-branded .hero-media img{object-position:right bottom}}

/* About hero: company photo at the top of the brand card */
.about-brand.about-brand-photo{padding:0;overflow:hidden;border-radius:18px;box-shadow:var(--card-shadow)}
.about-brand-photo .about-brand-image{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;margin:0;padding:0;background:none;border-radius:0}
.about-brand-photo>p{padding:var(--s-5) var(--s-5) 0;font-size:clamp(22px,1.4vw + 12px,28px)}
.about-brand-photo .capability-tags{padding:0 var(--s-5) var(--s-5);margin-top:var(--s-4)}
@media(max-width:640px){.about-brand-photo>p{padding:var(--s-4) var(--s-4) 0}.about-brand-photo .capability-tags{padding:0 var(--s-4) var(--s-4)}}


/* ── Service page heroes with a photo background ───────────── */
.hero-photo-web{--hero-photo:url("../images/web-dev-hero.webp");--hero-photo-pos:62% 50%}
.hero-photo-it{--hero-photo:url("../images/it-support-hero.webp");--hero-photo-pos:58% 50%}
html[data-theme] .services-hero.hero-photo{
 display:flex;align-items:center;min-height:clamp(440px,38vw,580px);border:0;color:#fff;
 background:linear-gradient(90deg,rgba(4,20,46,.95) 0%,rgba(4,20,46,.86) 36%,rgba(4,20,46,.35) 64%,rgba(4,20,46,.08) 100%),var(--hero-photo) var(--hero-photo-pos)/cover no-repeat;
}
.hero-photo>.wrap{width:min(1180px,100% - var(--gutter) * 2)}
.hero-photo .services-heading{grid-template-columns:minmax(0,1fr);gap:var(--s-4);max-width:36rem}
html[data-theme] .hero-photo .breadcrumb{color:rgba(255,255,255,.78)}
html[data-theme] .hero-photo .eyebrow{color:#fff}
html[data-theme] .hero-photo h1{color:#fff}
html[data-theme] .hero-photo h1 em{color:#cfe0ff}
html[data-theme] .hero-photo .services-heading>p{color:rgba(255,255,255,.88);max-width:30rem}
@media(max-width:760px){
 html[data-theme] .services-hero.hero-photo{min-height:0;padding:var(--s-6) 0;background:linear-gradient(rgba(4,20,46,.84),rgba(4,20,46,.84)),var(--hero-photo) var(--hero-photo-pos)/cover no-repeat}
}
/* Busy photos sit to the right of the title on solid navy; on phones the photo sits under the text */
.hero-photo-web{--hero-photo-size:auto 100%;--hero-photo-pos:right center}
html[data-theme] .services-hero.hero-photo-web{background:linear-gradient(90deg,#04142e 0%,#04142e 46%,rgba(4,20,46,.55) 56%,rgba(4,20,46,0) 72%),var(--hero-photo) var(--hero-photo-pos)/var(--hero-photo-size) no-repeat,#04142e}
@media(max-width:760px){
 html[data-theme] .services-hero.hero-photo,html[data-theme] .services-hero.hero-photo-web{
  padding:var(--s-6) 0 calc(75vw - var(--s-4));
  background:linear-gradient(to top,rgba(4,20,46,0) 0,rgba(4,20,46,.15) 40vw,#04142e 75vw),var(--hero-photo) center bottom/100% auto no-repeat,#04142e;
 }
}
@media(min-width:761px){html[data-theme] .services-hero.hero-photo-web{background:linear-gradient(90deg,#04142e 0%,#04142e 53%,rgba(4,20,46,.6) 60%,rgba(4,20,46,0) 74%),var(--hero-photo) var(--hero-photo-pos)/var(--hero-photo-size) no-repeat,#04142e}}
/* Web development hero: show the whole photo in a framed card instead of fading it, so no label is cut */
@media(min-width:961px){
 html[data-theme] .services-hero.hero-photo-web{position:relative;background:#04142e}
 .hero-photo-web::after{content:"";position:absolute;top:50%;right:max(var(--gutter),calc((100% - 1180px) / 2));transform:translateY(-50%);width:min(42%,600px);aspect-ratio:4/3;background:var(--hero-photo) center/cover no-repeat;border-radius:18px;box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}
}
@media(min-width:761px) and (max-width:960px){
 html[data-theme] .services-hero.hero-photo-web{min-height:0;padding:var(--s-6) 0 calc(75vw - var(--s-4));background:linear-gradient(to top,rgba(4,20,46,0) 0,rgba(4,20,46,.15) 40vw,#04142e 75vw),var(--hero-photo) center bottom/100% auto no-repeat,#04142e}
}
/* IT support hero uses the same framed photo card, so the sign never runs behind the title */
@media(min-width:961px){
 html[data-theme] .services-hero.hero-photo-it{position:relative;background:#04142e}
 .hero-photo-it::after{content:"";position:absolute;top:50%;right:max(var(--gutter),calc((100% - 1180px) / 2));transform:translateY(-50%);width:min(42%,600px);aspect-ratio:4/3;background:var(--hero-photo) center/cover no-repeat;border-radius:18px;box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}
}
@media(min-width:761px) and (max-width:960px){
 html[data-theme] .services-hero.hero-photo-it{min-height:0;padding:var(--s-6) 0 calc(75vw - var(--s-4));background:linear-gradient(to top,rgba(4,20,46,0) 0,rgba(4,20,46,.15) 40vw,#04142e 75vw),var(--hero-photo) center bottom/100% auto no-repeat,#04142e}
}

/* Photo heroes for the remaining service pages, in the same framed card */
.hero-photo-software{--hero-photo:url("../images/software-hero.webp")}
.hero-photo-graphic{--hero-photo:url("../images/graphic-design-hero.webp")}
.hero-photo-branding{--hero-photo:url("../images/branding-hero.webp")}
@media(min-width:961px){
 html[data-theme] .services-hero:is(.hero-photo-software,.hero-photo-graphic,.hero-photo-branding){position:relative;background:#04142e}
 :is(.hero-photo-software,.hero-photo-graphic,.hero-photo-branding)::after{content:"";position:absolute;top:50%;right:max(var(--gutter),calc((100% - 1180px) / 2));transform:translateY(-50%);width:min(42%,600px);aspect-ratio:4/3;background:var(--hero-photo) center/cover no-repeat;border-radius:18px;box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}
}
@media(max-width:960px){
 html[data-theme] .services-hero:is(.hero-photo-software,.hero-photo-graphic,.hero-photo-branding){min-height:0;padding:var(--s-6) 0 calc(75vw - var(--s-4));background:linear-gradient(to top,rgba(4,20,46,0) 0,rgba(4,20,46,.15) 40vw,#04142e 75vw),var(--hero-photo) center bottom/100% auto no-repeat,#04142e}
}

/* Portfolio hero: concepts photo in the same framed card; category chips stay in the text column */
.hero-photo-portfolio{--hero-photo:url("../images/portfolio-hero.webp")}
@media(min-width:961px){
 html[data-theme] .services-hero.hero-photo-portfolio{position:relative;background:#04142e}
 .hero-photo-portfolio::after{content:"";position:absolute;top:50%;right:max(var(--gutter),calc((100% - 1180px) / 2));transform:translateY(-50%);width:min(42%,600px);aspect-ratio:4/3;background:var(--hero-photo) center/cover no-repeat;border-radius:18px;box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}
 .hero-photo-portfolio .service-jump{max-width:min(36rem,52%)}
}
@media(max-width:960px){
 html[data-theme] .services-hero.hero-photo-portfolio{min-height:0;padding:var(--s-6) 0 calc(75vw - var(--s-4));background:linear-gradient(to top,rgba(4,20,46,0) 0,rgba(4,20,46,.15) 40vw,#04142e 75vw),var(--hero-photo) center bottom/100% auto no-repeat,#04142e}
}
html[data-theme] .hero-photo .service-jump a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}
html[data-theme] .hero-photo .service-jump a:hover{background:rgba(255,255,255,.16);color:#fff}
html[data-theme] .hero-photo .service-jump .icon{color:#cfe0ff}

/* ════════════════════════════════════════════════════════════
   WiPal — homepage feature, case study and portfolio entry
   ════════════════════════════════════════════════════════════ */
:is(.product-copy,.status-card) h2{font-size:clamp(26px,2.4vw + 10px,44px);font-weight:800;font-style:italic;line-height:1.2;letter-spacing:-.02em}
.product-label{display:inline-flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4);font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.product-badge{width:44px;height:44px;border-radius:11px;flex-shrink:0}
.soon-pill{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:var(--s-2) var(--s-4);border:1px solid var(--line);border-radius:999px;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.soon-pill .icon{width:18px;height:18px;color:var(--blue)}

/* Homepage feature */
html[data-theme] .section.product-section{background:var(--soft);border:0}
.product-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--column-gap);align-items:center}
.product-copy>p:not(.product-label){margin-top:var(--s-4);font-size:var(--fs-md);line-height:var(--lh-body);color:var(--muted);max-width:34rem}
.product-copy .hero-actions{margin-top:var(--s-5)}
.product-media{margin:0}
.product-media img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:var(--card-shadow)}

/* Case study hero with an illustrative phone */
html[data-theme] .services-hero.wipal-hero{background:#04142e;color:#fff;border:0}
html[data-theme] .wipal-hero .breadcrumb{color:rgba(255,255,255,.78)}
html[data-theme] .wipal-hero h1{color:#fff}
html[data-theme] .wipal-hero h1 em{color:#cfe0ff}
html[data-theme] .wipal-hero .lead{color:rgba(255,255,255,.88)}
html[data-theme] .wipal-hero .product-label{color:#cfe0ff}
html[data-theme] .wipal-hero .soon-pill{color:#fff;border-color:rgba(255,255,255,.35)}
html[data-theme] .wipal-hero .soon-pill .icon{color:#cfe0ff}
html[data-theme] .wipal-hero .button.primary{background:#fff;color:#0040cc;border-color:#fff}
.wipal-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:var(--column-gap);align-items:center}
.wipal-hero h1{font-size:clamp(40px,4vw + 12px,var(--fs-h1));font-weight:800;font-style:italic;line-height:var(--lh-tight)}
.wipal-promo{margin-top:var(--block-gap)}
.wipal-promo img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:var(--card-shadow)}

/* Cards, steps, build details and status */
.wipal-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:var(--s-4)}
.wipal-cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.wipal-card{padding:var(--s-5) 28px;border:1px solid var(--line);border-radius:18px;background:var(--panel,#fff)}
.wipal-card h3{margin-top:var(--s-4);font-size:var(--fs-lg);font-weight:700;line-height:1.3}
.wipal-card p{margin-top:var(--s-2);font-size:var(--fs-base);line-height:1.6;color:var(--muted)}
.wipal-num{font-size:var(--fs-label);font-weight:700;letter-spacing:.1em;color:var(--blue)}
.wipal-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--soft);color:var(--blue)}
.wipal-icon .icon{width:22px;height:22px}
@media(min-width:1051px){.process-grid.six{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--s-6)}}
.status-card{display:flex;gap:var(--s-5);align-items:center;padding:var(--s-6);border-radius:18px;border:1px solid var(--line);background:var(--panel,#fff);box-shadow:var(--card-shadow)}
.status-badge{width:96px;height:96px;border-radius:22px;flex-shrink:0}
.status-card p{margin-top:var(--s-3);font-size:var(--fs-md);line-height:var(--lh-body);color:var(--muted);max-width:44rem}

/* Portfolio entry */
.product-card{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;border-radius:18px;overflow:hidden;background:var(--panel,#fff);box-shadow:var(--card-shadow);color:var(--ink);transition:transform .25s}
.product-card:hover{transform:translateY(-4px)}
.product-card>img{display:block;width:100%;height:100%;object-fit:cover}
.product-card-body{padding:var(--s-5)}
.product-card-body .product-label{margin-bottom:var(--s-3)}
.product-card-body h3{font-size:22px;font-weight:700;line-height:1.3}
.product-card-body p:not(.product-label){margin-top:var(--s-2);color:var(--muted)}

@media(max-width:960px){
 .product-feature,.wipal-hero-grid{grid-template-columns:minmax(0,1fr)}
 .wipal-cards.three{grid-template-columns:minmax(0,1fr)}
 .product-card{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
 .status-card{flex-direction:column;align-items:flex-start;padding:var(--s-5) var(--s-4)}
 .status-badge{width:72px;height:72px;border-radius:18px}
 .product-copy .hero-actions,.wipal-hero .hero-actions{align-items:stretch}
 .soon-pill{justify-content:center}
}

/* WiPal app screenshots */
.wipal-hero-photo{margin:0}
.wipal-hero-photo img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}
.wipal-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.wipal-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.wipal-gallery figure{margin:0;border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--card-shadow)}
.wipal-gallery img{display:block;width:100%;height:auto}
@media(max-width:960px){.wipal-hero-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.wipal-gallery{grid-template-columns:minmax(0,1fr)}}

/* Terms page */
.legal-terms article{scroll-margin-top:110px}
.legal-terms h3{margin-top:var(--s-5);font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.legal-terms h3+p{margin-top:var(--s-2)}
.legal-updated{font-size:var(--fs-sm)!important}
.status-link{display:inline-flex;align-items:center;gap:var(--s-3);margin-top:var(--s-4);color:var(--blue);min-height:44px}
.status-link .icon{width:18px;height:18px}

/* WiPal promo banner: 61.8% of the content width, centred (full width on phones) */
.wipal-promo img{width:min(100%,calc(1180px / 1.618));margin-inline:auto}
/* Portfolio product card title uses the same heavy italic as section headings */
.product-card-body h3{font-size:clamp(22px,1.2vw + 14px,28px);font-weight:800;font-style:italic;letter-spacing:-.02em;line-height:1.2}
/* Status card: one action plus the terms link */
.status-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);margin-top:var(--s-5)}
.status-actions .status-link{margin-top:0}
@media(max-width:640px){.status-actions{flex-direction:column;align-items:stretch}.status-actions .button{justify-content:center}}

/* WiPal waitlist form */
.waitlist-form{margin-top:var(--s-5)}
.waitlist-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-3)}
.waitlist-fields label{display:grid;gap:var(--s-2);font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.waitlist-fields input{min-height:52px;padding:var(--s-3) var(--s-4);border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff);color:var(--ink);font:500 16px/1.4 var(--body)}
.waitlist-fields input:focus{outline:3px solid var(--orange);outline-offset:2px;border-color:var(--blue)}
.waitlist-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.waitlist-consent{display:flex;gap:var(--s-3);align-items:flex-start;margin-top:var(--s-4);font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
.waitlist-consent input{width:20px;height:20px;margin-top:1px;flex-shrink:0;accent-color:var(--blue)}
.waitlist-consent a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.waitlist-form .status-actions{margin-top:var(--s-4)}
.waitlist-form button[disabled]{opacity:.6;cursor:progress}
.waitlist-status{min-height:1.5em;margin-top:var(--s-3);font-size:var(--fs-sm);font-weight:600}
.waitlist-status[data-state=success]{color:#11865b}
.waitlist-status[data-state=error]{color:#c2341b}
html[data-theme=dark] .waitlist-status[data-state=success]{color:#55d6a0}
html[data-theme=dark] .waitlist-status[data-state=error]{color:#ff8a73}
.status-card>div{flex:1;min-width:0}
@media(max-width:640px){.waitlist-fields{grid-template-columns:minmax(0,1fr)}}

/* Founder cards: role, name, company and one contact button */
.leader-card .leader-body{padding:var(--s-5);height:100%;display:flex;flex-direction:column}
.leader-card .leader-contact{margin-top:auto;align-self:flex-start}
.leader-card .leader-overview{margin-bottom:var(--s-4)}
.leader-card .leader-company{margin-bottom:var(--s-4)}
@media(max-width:640px){.leader-card .leader-body{padding:var(--s-4) var(--s-4) var(--s-5)}}

/* Founder portraits: gradient-ringed frame, offset shadow plate and a gentle hover */
.leader-card .leader-body{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:var(--s-5);align-items:center}
.leader-card .leader-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.leader-card .leader-company{margin-bottom:var(--s-4)}
.leader-card .leader-contact{margin-top:0}
.leader-photo{position:relative;margin:0 10px 10px 0;isolation:isolate}
.leader-photo::before{content:"";position:absolute;inset:10px -10px -10px 10px;z-index:-1;border-radius:22px;background:var(--soft);border:1px solid var(--line)}
.leader-photo::after{content:"";position:absolute;top:-6px;left:-6px;width:22px;height:22px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px var(--panel,#fff)}
.leader-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;border-radius:20px;padding:4px;background:linear-gradient(145deg,var(--action),#00b4ff 55%,var(--orange));box-shadow:0 18px 40px -20px rgba(4,20,46,.55);transition:transform .35s ease}
.leader-card:hover .leader-photo img{transform:translateY(-4px) scale(1.015)}
html[data-theme=dark] .leader-photo::before{background:rgba(255,255,255,.04)}
@media(max-width:1000px) and (min-width:761px){.leader-card .leader-body{grid-template-columns:minmax(0,1fr)}.leader-photo{max-width:240px}}
@media(max-width:640px){.leader-card .leader-body{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}.leader-photo{max-width:260px}}