/* Paarl Business Consultants — new website */
:root{
  --purple-950:#160622;--purple-900:#220934;--purple-850:#2b0a42;--purple-800:#381050;
  --purple-700:#531571;--purple-650:#641b83;--purple-600:#732397;--purple-500:#8e39ad;
  --purple-300:#cf98e3;--purple-200:#e4c8ee;--purple-100:#f3eafa;--lavender:#faf7fc;
  --ink:#17131d;--muted:#655f6c;--soft:#89818f;--line:#e9e1ed;--white:#fff;
  --shadow:0 18px 50px rgba(45,12,62,.10);--shadow-sm:0 8px 25px rgba(45,12,62,.08);
  --radius:20px;--radius-sm:14px;--max:1200px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Inter,Segoe UI,Arial,sans-serif;background:#fff;line-height:1.6}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.container{width:min(var(--max),calc(100% - 40px));margin:auto}.eyebrow{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--purple-600);font-weight:800}.muted{color:var(--muted)}.section{padding:88px 0}.section-sm{padding:60px 0}.center{text-align:center}.section-head{max-width:760px;margin:0 auto 38px}.section-head h2{font-size:clamp(2rem,3.2vw,3rem);line-height:1.08;margin:.45rem 0 .8rem}.section-head p{font-size:1.06rem;color:var(--muted);margin:0}.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--purple-700);font-weight:700;font-size:.83rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:10px;padding:14px 19px;font-weight:800;cursor:pointer;transition:.2s ease}.btn-primary{background:linear-gradient(135deg,var(--purple-700),var(--purple-500));color:#fff;box-shadow:0 9px 24px rgba(103,32,134,.22)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(103,32,134,.3)}.btn-outline{border:1px solid var(--purple-300);background:#fff;color:var(--purple-700)}.btn-outline:hover{border-color:var(--purple-600);background:var(--purple-100)}.btn-white{background:#fff;color:var(--purple-800)}.link-arrow{font-weight:800;color:var(--purple-700)}.link-arrow:hover{color:var(--purple-500)}
/* Header */
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(90deg,var(--purple-950),var(--purple-850));color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}.nav-wrap{height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:13px;min-width:260px}.brand img{width:88px;height:55px;object-fit:contain}.brand-name{font-size:.95rem;line-height:1.2;letter-spacing:.12em;text-transform:uppercase}.nav{display:flex;align-items:center;gap:24px;font-size:.9rem}.nav>a,.drop-toggle{padding:32px 0 28px;position:relative}.nav>a.active:after,.drop-toggle.active:after{content:"";position:absolute;left:0;right:0;bottom:20px;height:2px;background:#fff}.drop{position:relative}.drop-toggle{appearance:none;border:0;background:transparent;color:#fff;font:inherit;cursor:pointer;display:flex;align-items:center;gap:6px}.drop-caret{font-size:.72rem;transition:transform .18s ease}.drop.open .drop-caret{transform:rotate(180deg)}.drop-menu{position:absolute;top:calc(100% - 7px);left:-18px;min-width:245px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:var(--shadow);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);transition:opacity .15s ease,transform .15s ease,visibility .15s ease;z-index:100}.drop.open .drop-menu,.drop:focus-within .drop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}@media(hover:hover) and (pointer:fine){.drop:hover .drop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}}.drop-menu a{display:block;padding:11px 12px;border-radius:9px;white-space:nowrap}.drop-menu a:hover,.drop-menu a:focus{background:var(--purple-100);color:var(--purple-700);outline:none}.nav-cta{white-space:nowrap}.mobile-toggle{display:none;background:none;border:0;color:#fff;font-size:1.7rem;cursor:pointer}
/* Hero */
.hero{overflow:hidden;background:linear-gradient(120deg,#fff 0%,#fff 45%,#f6effa 100%);position:relative}.hero:after{content:"";position:absolute;width:540px;height:540px;border-radius:50%;right:-220px;top:-200px;background:radial-gradient(circle at 35% 35%,#9e46bc,var(--purple-700) 55%,var(--purple-950));opacity:.95}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:38px;align-items:center;padding:68px 0 54px}.hero h1{font-size:clamp(2.55rem,5vw,4.75rem);line-height:.99;letter-spacing:-.035em;margin:12px 0 22px}.hero h1 span{color:var(--purple-600)}.hero-copy{font-size:1.12rem;color:var(--muted);max-width:650px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 30px}.trust-row{display:flex;flex-wrap:wrap;gap:22px;color:#3f3744;font-size:.84rem;font-weight:700}.trust-item{display:flex;align-items:center;gap:9px}.icon-ring{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--purple-300);border-radius:50%;color:var(--purple-700);background:#fff}
.device-stage{position:relative;min-height:430px;display:grid;place-items:center}.laptop{width:90%;background:#1d1b20;border:7px solid #1d1b20;border-radius:15px 15px 8px 8px;box-shadow:0 28px 55px rgba(24,8,32,.28);overflow:hidden}.browser-bar{height:30px;background:#f1eef2;display:flex;align-items:center;gap:6px;padding:0 10px}.dot{width:7px;height:7px;border-radius:50%;background:#c5bec8}.dummy-site{background:#f9f9fa}.dummy-nav{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid #ece8ef}.dummy-logo{font-weight:900;letter-spacing:.08em}.dummy-links{display:flex;gap:12px;font-size:.58rem;color:#655f6c}.dummy-hero{height:230px;padding:35px 30px;background:linear-gradient(120deg,#17151a,#46364f);color:#fff;position:relative;overflow:hidden}.dummy-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 50%,rgba(178,104,201,.45),transparent 37%)}.dummy-hero h3{font-size:2rem;line-height:1.03;max-width:300px;margin:0 0 12px}.dummy-hero p{font-size:.72rem;color:#ded6e1;max-width:270px}.dummy-hero .mini-btn{display:inline-block;margin-top:7px;background:#fff;color:#2d1536;padding:8px 12px;border-radius:5px;font-size:.65rem;font-weight:800}.dummy-features{display:grid;grid-template-columns:repeat(3,1fr);padding:15px;gap:8px}.dummy-feature{height:55px;border:1px solid #e3dee6;border-radius:7px;background:#fff}.phone{position:absolute;width:154px;right:0;bottom:35px;background:#161418;border:6px solid #161418;border-radius:26px;box-shadow:0 22px 40px rgba(22,6,34,.28);overflow:hidden}.phone-screen{background:#fff;min-height:290px}.phone-top{height:26px;background:#f0edf1}.phone-copy{padding:18px 13px;background:linear-gradient(145deg,#1b171e,#55405e);color:#fff;height:155px}.phone-copy strong{font-size:1.18rem;line-height:1.1;display:block}.phone-copy small{font-size:.55rem;color:#e0d8e3}.phone-cards{padding:10px;display:grid;gap:6px}.phone-card{height:28px;border:1px solid #e9e4ea;border-radius:5px}
/* Cards */
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.service-card{border:1px solid var(--line);border-radius:var(--radius-sm);padding:28px 24px;background:#fff;box-shadow:var(--shadow-sm);transition:.2s ease;display:flex;flex-direction:column;height:100%}.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.service-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--purple-700),var(--purple-500));font-size:1.25rem;margin-bottom:24px}.service-card h3{font-size:1.25rem;line-height:1.15;margin:0 0 12px;min-height:2.4em}.service-card p{color:var(--muted);font-size:.93rem;min-height:0;flex:1;margin:0}.service-card .link-arrow{font-size:.88rem;margin-top:18px;padding-top:14px;border-top:1px solid transparent}
.platform-section{background:linear-gradient(180deg,#faf7fc,#fff)}.platform-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.platform-card{display:grid;grid-template-columns:.9fr 1.1fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}.platform-visual{min-height:330px;position:relative;overflow:hidden;background:linear-gradient(145deg,#e9d9ef,#b988cb)}.accom-visual:before{content:"";position:absolute;left:10%;right:10%;bottom:15%;height:58%;border-radius:17px 17px 6px 6px;background:linear-gradient(145deg,#fff,#efe8f1);box-shadow:0 16px 30px rgba(52,14,72,.2)}.accom-visual:after{content:"";position:absolute;left:20%;right:20%;bottom:22%;height:20%;border-radius:8px;background:linear-gradient(90deg,#c8accf 48%,#fff 49% 52%,#c8accf 53%);box-shadow:0 -54px 0 -29px #755080}.window{position:absolute;top:15%;left:18%;width:64%;height:29%;border:9px solid #fff;background:linear-gradient(#796891,#c2aacb 55%,#d8bca5 56%);z-index:2}.window:after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:4px solid #fff}.dashboard-visual{background:linear-gradient(145deg,#dcd3e0,#fff)}.dashboard{position:absolute;left:9%;right:9%;top:15%;bottom:15%;border-radius:12px;background:#fff;box-shadow:0 16px 38px rgba(49,18,63,.2);border:7px solid #252128;overflow:hidden}.dash-top{height:28px;background:#2c1834}.dash-body{display:grid;grid-template-columns:25% 75%;height:calc(100% - 28px)}.dash-side{background:#f5f1f6;border-right:1px solid #e3dce6}.dash-main{padding:12px}.dash-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}.dash-box{height:44px;border-radius:6px;background:#f1e8f4}.dash-table{height:95px;border-radius:6px;background:repeating-linear-gradient(#fff 0 17px,#e9e1ec 18px)}.platform-copy{padding:34px}.platform-copy h3{font-size:1.65rem;line-height:1.05;margin:8px 0 12px}.checks{list-style:none;padding:0;margin:18px 0 22px}.checks li{margin:8px 0;padding-left:24px;position:relative;color:#49414f;font-size:.9rem}.checks li:before{content:"✓";position:absolute;left:0;top:0;color:#fff;background:var(--purple-600);width:16px;height:16px;line-height:16px;text-align:center;border-radius:50%;font-size:.66rem;font-weight:900}
/* Work */
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.work-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}.work-preview{height:168px;background:linear-gradient(145deg,#151018,#3d164b);position:relative;padding:20px;display:flex;align-items:center;justify-content:center}.work-preview.light{background:linear-gradient(145deg,#f2edf4,#fff)}.work-preview img{max-width:66%;max-height:75px;object-fit:contain}.work-preview .text-logo{color:#fff;font-weight:900;font-size:1.55rem;letter-spacing:.02em}.work-preview:before{content:"";position:absolute;top:9px;left:12px;width:5px;height:5px;border-radius:50%;background:#d7ccd9;box-shadow:10px 0 #d7ccd9,20px 0 #d7ccd9}.work-info{padding:15px 16px}.work-info strong{display:block}.work-info small{color:var(--purple-600)}
/* Reviews */
.reviews-band{padding:24px;border:1px solid var(--line);border-radius:var(--radius);display:flex;align-items:center;gap:28px;justify-content:space-between;background:#fff;box-shadow:var(--shadow-sm)}.google-mark{font-size:2.1rem;font-weight:900;letter-spacing:-.08em}.rating{font-size:2rem;font-weight:900}.stars{color:#f4b400;letter-spacing:2px}.reviews-copy{flex:1}.reviews-copy p{margin:2px 0;color:var(--muted)}
/* Consultation strip */
.consult-strip{background:linear-gradient(120deg,var(--purple-800),var(--purple-950));color:#fff;border-radius:var(--radius);padding:34px;display:grid;grid-template-columns:1.15fr .95fr .85fr;gap:26px;align-items:center;overflow:hidden;position:relative}.consult-strip:after{content:"";position:absolute;width:230px;height:230px;border:1px solid rgba(255,255,255,.14);border-radius:50%;right:-100px;bottom:-110px}.consult-strip h2{font-size:1.8rem;line-height:1.1;margin:5px 0 15px}.contact-lines{display:grid;gap:6px;color:#efe7f2}.contact-lines a:hover{color:var(--purple-300)}.consult-details{border-left:1px solid rgba(255,255,255,.23);padding-left:25px}.consult-details strong{display:block;margin-bottom:5px}.consult-details small{color:#d9ccdd}.mini-calendar{background:#fff;color:var(--ink);border-radius:12px;padding:16px;position:relative;z-index:2}.mini-cal-head{text-align:center;font-weight:800;margin-bottom:10px}.mini-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:.66rem;text-align:center;color:#746c78}.mini-days span{padding:5px 0}.mini-days .sel{background:var(--purple-600);color:#fff;border-radius:6px;font-weight:800}
/* Interior pages */
.page-hero{background:linear-gradient(115deg,#fff 0 58%,#f4ebf8 100%);padding:76px 0 66px;border-bottom:1px solid var(--line)}.page-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:50px}.page-hero h1{font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.02;letter-spacing:-.035em;margin:10px 0 18px}.page-hero p{font-size:1.1rem;color:var(--muted);max-width:730px}.abstract-panel{height:330px;border-radius:28px;background:linear-gradient(145deg,var(--purple-950),var(--purple-600));position:relative;overflow:hidden;box-shadow:var(--shadow)}.abstract-panel:before,.abstract-panel:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.2)}.abstract-panel:before{width:360px;height:360px;right:-120px;top:-130px}.abstract-panel:after{width:220px;height:220px;left:-60px;bottom:-80px}.abstract-copy{position:absolute;left:34px;right:34px;bottom:34px;color:#fff}.abstract-copy strong{font-size:2rem;line-height:1.05;display:block}.abstract-copy span{color:#e2cee9}.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.content-card{border:1px solid var(--line);border-radius:var(--radius);padding:30px;background:#fff}.content-card h3{margin-top:0;font-size:1.3rem}.content-card p{color:var(--muted)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature{padding:24px;border-radius:16px;background:var(--lavender);border:1px solid #eee6f1}.feature h3{margin:8px 0}.feature p{margin:0;color:var(--muted);font-size:.93rem}.process{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step}.process-step{padding:25px;border:1px solid var(--line);border-radius:16px}.process-step:before{counter-increment:step;content:"0" counter(step);display:block;color:var(--purple-600);font-weight:900;margin-bottom:16px}.process-step h3{margin:0 0 8px}.process-step p{margin:0;color:var(--muted);font-size:.9rem}.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.purple-panel{padding:38px;border-radius:24px;background:linear-gradient(145deg,var(--purple-900),var(--purple-650));color:#fff}.purple-panel p{color:#e7ddeb}.list-clean{padding:0;list-style:none}.list-clean li{padding:10px 0;border-bottom:1px solid rgba(103,88,110,.15)}.list-clean li:last-child{border-bottom:0}.price-note{font-size:.88rem;color:var(--muted)}
/* Team */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.team-card{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}.team-photo{height:330px;background:linear-gradient(145deg,#ede3f1,#c993da);display:grid;place-items:center;overflow:hidden}.team-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}.team-placeholder{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:4.2rem;font-weight:900;background:linear-gradient(135deg,var(--purple-700),var(--purple-300));box-shadow:0 20px 40px rgba(62,18,80,.25)}.team-copy{padding:28px}.team-copy h2{margin:0}.team-role{color:var(--purple-600);font-weight:800}.team-copy p{color:var(--muted)}
/* Booking */
.booking-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:26px;align-items:start}.booking-info{background:linear-gradient(145deg,var(--purple-900),var(--purple-650));color:#fff;border-radius:22px;padding:32px;position:sticky;top:112px}.booking-info p{color:#e4d8e9}.booking-box{border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow-sm)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:.85rem;font-weight:800}.field input,.field select,.field textarea{width:100%;border:1px solid #dcd3df;border-radius:10px;padding:13px 14px;background:#fff;color:var(--ink);outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--purple-500);box-shadow:0 0 0 3px rgba(142,57,173,.11)}.date-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.date-btn,.time-btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px;cursor:pointer}.date-btn:hover,.time-btn:hover,.date-btn.selected,.time-btn.selected{border-color:var(--purple-600);background:var(--purple-100);color:var(--purple-800)}.date-btn strong{display:block;font-size:.78rem}.date-btn span{font-size:.72rem;color:var(--muted)}.time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.booking-message{display:none;padding:12px;border-radius:10px;background:#eef9f0;color:#205a2c;margin-top:14px}.google-booking{display:none}.embed-placeholder{border:1px dashed var(--purple-300);border-radius:14px;padding:28px;text-align:center;background:var(--lavender)}
/* FAQ */
.faq-wrap{max-width:900px;margin:auto}.faq-item{border-bottom:1px solid var(--line)}.faq-q{width:100%;text-align:left;background:none;border:0;padding:20px 0;font-weight:850;font-size:1.05rem;display:flex;justify-content:space-between;cursor:pointer}.faq-a{display:none;padding:0 0 20px;color:var(--muted)}.faq-item.open .faq-a{display:block}.faq-item.open .faq-q span{transform:rotate(45deg)}
/* Footer */
.site-footer{background:linear-gradient(90deg,var(--purple-950),#21072e);color:#fff;margin-top:70px}.footer-main{display:grid;grid-template-columns:1.35fr .8fr 1.05fr 1fr .7fr;gap:30px;padding:50px 0 36px}.footer-brand{display:flex;gap:12px;align-items:center;margin-bottom:15px}.footer-brand img{width:85px}.footer-brand strong{font-size:.84rem;letter-spacing:.11em;text-transform:uppercase}.footer-main h4{margin:0 0 12px;font-size:.86rem}.footer-main a,.footer-main p{display:block;color:#d9cfe0;font-size:.8rem;margin:6px 0}.footer-main a:hover{color:#fff}.socials{display:flex;gap:8px}.socials a{width:34px;height:34px;border:1px solid rgba(255,255,255,.28);border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:14px 0 18px;display:flex;justify-content:space-between;color:#bfb1c6;font-size:.73rem}
/* Responsive */
@media(max-width:1020px){.nav{position:fixed;left:0;right:0;top:88px;background:var(--purple-950);padding:20px;display:none;flex-direction:column;align-items:flex-start;gap:0;border-top:1px solid rgba(255,255,255,.12)}.nav.open{display:flex}.nav>a,.drop-toggle{padding:11px 0;display:flex}.drop{width:100%}.drop-toggle{width:100%;justify-content:space-between}.drop-menu{position:static;opacity:0;visibility:hidden;pointer-events:none;max-height:0;overflow:hidden;transform:none;box-shadow:none;border:0;background:rgba(255,255,255,.06);color:#fff;margin:0;transition:max-height .2s ease,opacity .2s ease,visibility .2s ease}.drop.open .drop-menu{opacity:1;visibility:visible;pointer-events:auto;max-height:320px;margin:0 0 8px}.drop:hover .drop-menu{opacity:0;visibility:hidden;pointer-events:none;max-height:0}.drop.open:hover .drop-menu{opacity:1;visibility:visible;pointer-events:auto;max-height:320px}.nav-cta{margin-top:10px}.mobile-toggle{display:block}.hero-grid,.page-hero-grid{grid-template-columns:1fr}.device-stage{min-height:390px}.service-grid{grid-template-columns:1fr 1fr}.platform-grid{grid-template-columns:1fr}.work-grid{grid-template-columns:1fr 1fr}.consult-strip{grid-template-columns:1fr 1fr}.consult-action{grid-column:1/-1;justify-content:flex-start}.feature-grid{grid-template-columns:1fr 1fr}.process{grid-template-columns:1fr 1fr}.footer-main{grid-template-columns:1.4fr 1fr 1fr}.footer-main>div:nth-child(4),.footer-main>div:nth-child(5){margin-top:5px}.booking-grid{grid-template-columns:1fr}.booking-info{position:static}.team-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.container{width:min(var(--max),calc(100% - 28px))}.nav-wrap{height:76px}.nav{top:76px}.brand{min-width:auto}.brand img{width:72px}.brand-name{font-size:.78rem}.hero-grid{padding:48px 0 38px}.hero h1{font-size:2.75rem}.device-stage{min-height:310px}.laptop{width:95%}.dummy-hero{height:180px;padding:25px 18px}.dummy-hero h3{font-size:1.45rem}.phone{width:118px;bottom:15px}.phone-screen{min-height:220px}.phone-copy{height:120px;padding:13px 9px}.service-grid,.work-grid,.feature-grid,.content-grid,.split,.team-grid{grid-template-columns:1fr}.platform-card{grid-template-columns:1fr}.platform-visual{min-height:260px}.consult-strip{grid-template-columns:1fr;padding:25px}.consult-action{justify-content:flex-start}.consult-details{border-left:0;border-top:1px solid rgba(255,255,255,.2);padding:18px 0 0}.reviews-band{align-items:flex-start;flex-direction:column}.process{grid-template-columns:1fr}.footer-main{grid-template-columns:1fr 1fr}.footer-main>div:first-child{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:7px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.date-grid,.time-grid{grid-template-columns:repeat(2,1fr)}.page-hero{padding:55px 0}.page-hero h1{font-size:2.65rem}.abstract-panel{height:250px}.section{padding:68px 0}}
@media(max-width:440px){.brand-name{display:none}.service-grid,.work-grid,.footer-main{grid-template-columns:1fr}.hero h1{font-size:2.35rem}.hero-actions .btn{width:100%}.trust-row{display:grid;grid-template-columns:1fr}.date-grid,.time-grid{grid-template-columns:1fr 1fr}}

/* Approved realistic imagery */
.hero-preview-img{display:block;width:100%;height:auto;max-width:620px;border-radius:20px;box-shadow:0 28px 55px rgba(24,8,32,.26)}
.platform-visual.accom-visual{background:url('home-accommodation.jpg') center/cover no-repeat}
.platform-visual.dashboard-visual{background:url('home-business-platform.jpg') center/cover no-repeat}
.platform-visual.accom-visual:before,.platform-visual.accom-visual:after,.platform-visual.accom-visual .window,
.platform-visual.dashboard-visual .dashboard{display:none!important}
.work-preview.real-shot{padding:0;background:#161018}
.work-preview.real-shot:before{display:none}
.work-preview.real-shot img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;display:block}

/* Interior page hero photography */
.abstract-panel.photo-panel{background-size:cover;background-position:center;isolation:isolate}
.abstract-panel.photo-panel:before{content:"";position:absolute;inset:0;width:auto;height:auto;border:0;border-radius:0;background:linear-gradient(180deg,rgba(24,7,33,.08),rgba(24,7,33,.72));z-index:0}
.abstract-panel.photo-panel:after{content:"";position:absolute;inset:0;width:auto;height:auto;border:0;border-radius:0;background:linear-gradient(90deg,rgba(91,28,117,.18),transparent 68%);z-index:0}
.abstract-panel.photo-panel .abstract-copy{z-index:2}
.abstract-panel.photo-web{background-image:url('home-hero-nexora.jpg');background-position:center}
.abstract-panel.photo-marketing{background-image:url('real-digital-work.webp')}
.abstract-panel.photo-business{background-image:url('home-business-platform.jpg')}
.abstract-panel.photo-accommodation{background-image:url('home-accommodation.jpg')}
.abstract-panel.photo-about{background-image:url('sophia.png');background-position:center 22%}
.abstract-panel.photo-work{background-image:url('work-oak.jpg')}
.abstract-panel.photo-consult{background-image:url('real-business-meeting.webp')}

/* Consultation CTA at the bottom of the homepage */
.consult-action{display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.consult-action .btn{font-size:1rem;padding:17px 24px;min-width:220px;text-align:center}


/* ─── Touch targets (added after a CDP audit at 360/390/414/768) ───────────
   WCAG 2.5.5 exempts links inside a run of prose, which is why the body copy
   is left alone. These are standalone controls: a footer link list, the social
   circles and the card "Learn more" arrows all sat between 20px and 38px. */
@media (max-width: 1000px) {
  .footer-main a { padding: 11px 0; margin: 0; min-height: 44px; display: flex; align-items: center; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; padding-bottom: 24px; }
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
}
.socials a { width: 44px; height: 44px; }
.link-arrow { display: inline-flex; align-items: center; min-height: 44px; }
.service-card .link-arrow { margin-top: 12px; }

/* The WhatsApp number, the landline and the email address in the closing strip
   are the primary conversion taps on the home page and were 26px tall. */
.contact-lines a { min-height: 44px; display: inline-flex; align-items: center; }

/* ─── Added by the platform port ─────────────────────────────────────────
   Two things a static export had no reason to carry: a skip link, and a
   Client Login entry, because the site now sits in front of the client and
   admin portals.

   The login link is set in LIGHT ink. The header is a dark purple gradient, so
   the brand purple that reads well on a white page is nearly invisible up
   there. Measure the ink against the surface it actually lands on: the same
   mistake, and the same fix, as the client sign-in panels. */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:999;background:#fff;color:var(--purple-800);padding:12px 20px;border-radius:10px;font-weight:800}
.skip-link:focus{left:8px}
.nav-login{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.35);border-radius:10px;color:#fff;font-weight:700;font-size:.82rem;white-space:nowrap}
.nav-login:hover{background:rgba(255,255,255,.14);border-color:#fff}
/* The nav gained Shop and Client Login, so it needs to start shedding gaps
   before it reaches the mobile breakpoint or it runs off the right edge. */
@media (max-width:1000px){
  .nav-login{width:100%;justify-content:center;margin:8px 0 0;min-height:44px}
  .skip-link{display:none}
}

/* ─── Fixes found by measuring the rendered page ──────────────────────────
   1. The port added width and height attributes to every image so the browser
      could reserve space. `.footer-brand img` sets a CSS width and nothing
      else, so the HTML height attribute won and the footer logo rendered
      85x322: a tall smear. Whenever an image carries intrinsic dimensions, a
      CSS width needs `height:auto` beside it or the aspect ratio is lost. */
.footer-brand img{height:auto}

/* 2. `.nav>a{padding:32px 0 28px}` is meant for the plain text links, which
      need a tall hit area spanning the header. The CTA and the login button
      are also direct children of .nav, so they inherited it and rendered 83px
      tall. Two classes beat one class plus an element, so this wins without
      !important. */
.nav .nav-cta{padding:13px 20px;align-self:center}
.nav .nav-login{padding:0 15px;min-height:46px;align-self:center}

/* Real SVG marks instead of typographic stand-ins. The glyphs never centred in
   their circle because a character carries its own side bearings and baseline;
   an SVG centres on its own geometry. */
.socials a{width:44px;height:44px;padding:11px;transition:background .2s,border-color .2s,transform .2s}
.socials a svg{width:100%;height:100%;fill:currentColor;display:block}
.socials a:hover{background:rgba(255,255,255,.14);border-color:#fff;transform:translateY(-2px)}

/* The footer link lists are one 44px row per item on a phone, which is right
   for the thumb and made the footer over 1000px tall. Two columns halves it
   without shrinking a single target. */
@media (max-width:700px){
  .footer-main>div:nth-child(2) a,
  .footer-main>div:nth-child(3) a{width:100%}
  .footer-main>div:nth-child(2),
  .footer-main>div:nth-child(3){display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
  .footer-main>div:nth-child(2) h4,
  .footer-main>div:nth-child(3) h4{grid-column:1 / -1}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Shop, blog and article pages.

   These were still rendering the OLD marketing site: different nav, different
   palette, different footer. They are linked from the new nav and footer, so a
   visitor clicking Shop or Blog left the new site without being told.

   Everything here is built from the same tokens as the rest of the stylesheet,
   so the Theme tab re-colours it along with everything else.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Filter chips (shop categories, blog categories) ── */
.shop-filter-bar{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:76px;z-index:20}
.chip-row{display:flex;gap:8px;align-items:center;padding:12px 0;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--muted);font-weight:700;font-size:.84rem;
  cursor:pointer;white-space:nowrap;transition:.15s ease;font-family:inherit}
.chip:hover{border-color:var(--purple-300);color:var(--purple-700)}
.chip-on{background:var(--purple-700);border-color:var(--purple-700);color:#fff}

/* ── Shop grid ── */
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.shop-card{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:.2s ease}
.shop-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.shop-card-media{display:grid;place-items:center;height:170px;background:linear-gradient(145deg,var(--purple-100),#fff);overflow:hidden}
.shop-card-media img{width:100%;height:100%;object-fit:cover}
.shop-card-initial{font-size:2.4rem;font-weight:900;color:var(--purple-300)}
.shop-card-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.shop-card-body h3{margin:0;font-size:1.02rem;line-height:1.25}
.shop-card-body h3 a:hover{color:var(--purple-700)}
.shop-card-body p{margin:0;color:var(--muted);font-size:.88rem;flex:1}
.shop-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:6px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.shop-price{font-weight:900;color:var(--purple-700);font-size:1.06rem}
.shop-price-quote{font-size:.86rem;font-weight:800;color:var(--muted)}
.btn-sm{padding:9px 14px;font-size:.82rem;min-height:44px}

/* ── Product page ── */
.crumbs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--soft);font-size:.82rem;margin-bottom:18px}
.crumbs a{color:var(--purple-700);font-weight:700}
.crumbs a:hover{text-decoration:underline}
.product-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:44px;align-items:start}
.product-media{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:22px;background:var(--lavender)}
.product-media img{width:100%;height:auto;display:block}
.product-title{font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.1;margin:.3rem 0 .8rem}
.product-lead{font-size:1.06rem;color:var(--muted);margin:0 0 18px}
.product-body{color:var(--ink);line-height:1.75}
.product-body h2,.product-body h3{margin:1.6rem 0 .6rem}
.product-body ul{margin:0 0 1rem 1.1rem;padding:0;list-style:disc}
.product-body li{margin:.3rem 0}

.buy-card{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:#fff;
  box-shadow:var(--shadow);position:sticky;top:100px}
.buy-price{font-size:2rem;font-weight:900;color:var(--purple-700);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.buy-price-quote{font-size:1.25rem;color:var(--ink)}
.buy-badge{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  background:var(--purple-100);color:var(--purple-700);padding:5px 10px;border-radius:999px}
.buy-was{color:var(--soft);text-decoration:line-through;font-size:.9rem;margin-top:2px}
.buy-note{color:var(--muted);font-size:.88rem;margin:8px 0 0}
.buy-form{display:flex;flex-direction:column;gap:5px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.buy-form label{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:8px}
.buy-form input,.buy-form textarea{width:100%;padding:12px 13px;border:1px solid var(--line);
  border-radius:10px;font-size:16px;font-family:inherit;color:var(--ink);background:var(--lavender)}
.buy-form input:focus,.buy-form textarea:focus{outline:none;border-color:var(--purple-600);
  box-shadow:0 0 0 3px var(--purple-100);background:#fff}
.buy-submit{width:100%;margin-top:16px}
.buy-trust{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
  color:var(--muted);font-size:.82rem;display:flex;flex-direction:column;gap:8px}
.buy-trust li{position:relative;padding-left:20px}
.buy-trust li:before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;
  border-radius:50%;background:var(--purple-300)}

/* ── Blog grid and article ── */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:.2s ease}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post-media{display:block;height:190px;overflow:hidden;background:linear-gradient(145deg,var(--purple-900),var(--purple-600));
  display:grid;place-items:center}
.post-media img{width:100%;height:100%;object-fit:cover}
.post-media-fallback{font-size:2.6rem;font-weight:900;color:rgba(255,255,255,.75)}
.post-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-body h3{margin:0;font-size:1.08rem;line-height:1.25}
.post-body h3 a:hover{color:var(--purple-700)}
.post-body p{margin:0;color:var(--muted);font-size:.9rem;flex:1}
.post-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:6px;padding-top:14px;border-top:1px solid var(--line);color:var(--soft);font-size:.8rem}

.article-wrap{max-width:760px}
.article-title{font-size:clamp(2rem,3.6vw,3rem);line-height:1.08;margin:.3rem 0 .7rem}
.article-meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--soft);font-size:.85rem;margin:0 0 26px}
.article-cover{border-radius:var(--radius);overflow:hidden;margin-bottom:30px;background:var(--lavender)}
.article-cover img{width:100%;height:auto;display:block}
.article-body{font-size:1.05rem;line-height:1.8;color:var(--ink)}
.article-body h2{font-size:1.55rem;margin:2rem 0 .7rem}
.article-body h3{font-size:1.22rem;margin:1.6rem 0 .5rem}
.article-body p{margin:0 0 1.1rem}
.article-body ul,.article-body ol{margin:0 0 1.1rem 1.2rem;padding:0}
.article-body li{margin:.35rem 0}
.article-body img{border-radius:var(--radius-sm);margin:1.2rem 0}
.article-body a{color:var(--purple-700);font-weight:700;text-decoration:underline}
.article-foot{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}

/* ── Shared empty state ── */
.empty-state{text-align:center;padding:70px 20px;color:var(--muted)}
.empty-state h2{font-size:1.5rem;margin:0 0 10px;color:var(--ink)}
.empty-state p{margin:0}

@media (max-width:1100px){
  .shop-grid{grid-template-columns:repeat(3,1fr)}
  .post-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1000px){
  .product-grid{grid-template-columns:1fr;gap:30px}
  .buy-card{position:static}
  .shop-filter-bar{top:0}
}
@media (max-width:760px){
  .shop-grid{grid-template-columns:repeat(2,1fr)}
  .shop-card-media{height:130px}
}
@media (max-width:560px){
  .shop-grid,.post-grid{grid-template-columns:1fr}
  .article-foot .btn{width:100%}
  /* A row of chips beats three stacked rows of small ones on a phone. */
  .chip-row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    padding-left:20px;padding-right:20px;max-width:100vw}
  .chip-row::-webkit-scrollbar{display:none}
}

/* ── Shop result (order received / quote requested) ── */
.result-wrap{max-width:620px;margin:0 auto;text-align:center}
.result-mark{width:74px;height:74px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--purple-700),var(--purple-500));color:#fff}
.result-mark svg{width:34px;height:34px}
.result-wrap h1{font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.1;margin:.3rem 0 .9rem}
.result-lead{font-size:1.06rem;color:var(--muted);margin:0 0 24px}
.result-facts{display:grid;gap:0;margin:0 0 24px;border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;text-align:left;background:#fff}
.result-facts>div{display:flex;justify-content:space-between;gap:16px;padding:13px 18px;border-bottom:1px solid var(--line)}
.result-facts>div:last-child{border-bottom:0}
.result-facts dt{color:var(--muted);font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin:0}
.result-facts dd{margin:0;font-weight:700}
.result-note{color:var(--muted);font-size:.9rem;margin:0 0 26px}
.result-note a{color:var(--purple-700);font-weight:700}
.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media (max-width:560px){.result-actions .btn{width:100%}}

/* ═══════════════════════════════════════════════════════════════════════════
   Contrast and legibility, from a walk over every text element on every page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The seven-item list on the consultation page was invisible: `.checks li` is a
   fixed dark grey, which is right on the white platform cards on the home page
   and unreadable on the dark purple card it also appears in. Scoped by the dark
   parent rather than by changing the shared colour. */
.booking-info .checks li{color:#e8dcee}

/* The rating stars were 1.85:1 on white. Still gold, dark enough to read. */
.stars{color:#bd8100}

/* Blog card dates were 3.75:1. --soft is for hairlines and placeholders, not
   for information. */
.post-foot time{color:var(--muted)}

/* A caption laid over a photograph needs a scrim strong enough for the WORST
   image, and the worst image here is the device mockup: it contains its own
   headline, body copy and a button, so the caption was not merely low contrast,
   it was one layer of typography sitting on another.

   A scrim already existed but reached full strength only at the very bottom
   edge, while the caption sits ~34px above it. This is bottom-weighted so the
   band the caption occupies is genuinely suppressed and the mock content reads
   as texture. Selector matches the existing one (0,3,0) so it wins on order;
   `.photo-panel:after` alone lost to it.

   Same lesson the property hero already records: test a scrim against the
   brightest, busiest image in the set, not the darkest. */
.abstract-panel.photo-panel:after{
  background:linear-gradient(to top,
    rgba(14,4,20,.93) 0%,
    rgba(14,4,20,.86) 26%,
    rgba(14,4,20,.55) 46%,
    rgba(14,4,20,.16) 66%,
    transparent 82%)}
.abstract-copy{z-index:2;text-shadow:0 1px 10px rgba(10,3,16,.55)}
.abstract-copy span{color:#e9d8ef}

/* Inline SVG instead of a character, so the mark is the same on every platform. */
.service-icon svg{width:22px;height:22px;display:block}
.service-icon{font-size:0}
.icon-ring svg{width:15px;height:15px;display:block}
.icon-ring{font-size:0}

/* The top menu overflowed its container at 1024px and pushed the page into a
   34px horizontal scroll. The burger breakpoint was 1000px, but the bar carries
   nine controls and needs roughly 916px plus the logo, so anything under about
   1150px was already crowded. Raising the breakpoint is the honest fix:
   squeezing nine items into 700px only trades an overflow for an unreadable
   menu. A tablet in landscape gets the burger, which is normal.

   The earlier audit ran 360/390/768/1440 and stepped straight over the range
   where this happens. */
@media (max-width:1200px){
  .nav{position:fixed;left:0;right:0;top:76px;background:var(--purple-950);
    padding:20px;display:none;flex-direction:column;align-items:flex-start;gap:0;
    border-top:1px solid rgba(255,255,255,.12);max-height:calc(100vh - 76px);overflow-y:auto}
  .nav.open{display:flex}
  .mobile-toggle{display:block}
  .nav>a,.drop-toggle{padding:11px 0;display:flex;width:100%}
  .nav .nav-cta{width:100%;justify-content:center;margin-top:10px;padding:13px 20px}
  .nav .nav-login{width:100%;justify-content:center;margin:8px 0 0;min-height:44px}
}
/* Inline icons in the consultation strip sit on the text baseline. */
.contact-lines a svg,.consult-details p svg{width:16px;height:16px;display:inline-block;
  vertical-align:-3px;margin-right:9px}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile: the full screen menu, the hero blob and the team photographs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The burger was the ☰ character, which is another per-platform glyph. */
.mobile-toggle{width:44px;height:44px;display:none;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;padding:0;color:#fff}
.burger{display:block;width:22px}
.burger i{display:block;height:2px;background:currentColor;border-radius:2px;margin:5px 0;
  transition:transform .25s ease,opacity .2s ease}
.mobile-toggle[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-toggle[aria-expanded="true"] .burger i:nth-child(2){opacity:0}
.mobile-toggle[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-head{display:none}

@media (max-width:1200px){
  /* Full screen, not a panel that stops halfway down and lets the page show
     through underneath it. */
  .nav{position:fixed;inset:0;top:0;height:100dvh;max-height:none;z-index:80;
    background:linear-gradient(160deg,var(--purple-950),var(--purple-850) 62%,var(--purple-800));
    padding:0 22px calc(26px + env(safe-area-inset-bottom));
    display:none;flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;border-top:0}
  .nav.open{display:flex}
  body.nav-open{overflow:hidden}

  /* Logo centred on top, with the close control beside it. */
  .nav-head{display:flex;align-items:center;justify-content:center;position:relative;
    padding:18px 0 16px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.14)}
  .nav-head-brand{display:flex;flex-direction:column;align-items:center;gap:7px;color:#fff}
  .nav-head-brand img{width:74px;height:auto}
  .nav-head-brand span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
    color:rgba(255,255,255,.82)}
  .nav-close{position:absolute;right:-6px;top:14px;width:44px;height:44px;border:0;background:none;
    color:#fff;font-size:30px;line-height:1;cursor:pointer;opacity:.8}
  .nav-close:hover{opacity:1}

  /* Centred links. The active item is marked by colour and weight: the old
     underline was positioned 20px from the bottom of the box, which on a
     stacked 44px row lands through the middle of the word and reads as a
     strikethrough. */
  .nav>a,.drop-toggle{padding:13px 0;display:flex;width:100%;justify-content:center;
    font-size:1.08rem;text-align:center;min-height:48px;align-items:center}
  .nav>a.active:after,.drop-toggle.active:after{display:none}
  .nav>a.active{color:#fff;font-weight:800}
  .drop{width:100%}
  .drop-toggle{gap:9px}
  .drop-menu{position:static;background:none;border:0;box-shadow:none;padding:0 0 8px;text-align:center}
  .drop-menu a{justify-content:center;text-align:center;color:rgba(255,255,255,.72);font-size:.98rem;
    padding:12px 0;min-height:44px;display:flex;align-items:center}

  .nav .nav-cta{width:100%;justify-content:center;margin-top:14px;padding:15px 20px;font-size:1rem}
  .nav .nav-login{width:100%;justify-content:center;margin:10px 0 0;min-height:48px}
  .nav-foot{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;align-items:center;gap:2px}
  .nav-foot a{color:rgba(255,255,255,.72);font-size:.92rem;min-height:44px;display:flex;align-items:center}
  .mobile-toggle{display:flex}
}

/* The decorative blob is 540px across and anchored to the top right. On a phone
   that puts it straight through the hero headline, so "Marketing built for
   growth." was purple type on a purple circle and the eyebrow above it was
   almost invisible. It carries no information, so on small screens it goes and
   the hero keeps its background gradient. */
@media (max-width:900px){
  .hero:after{display:none}
  .hero{background:linear-gradient(160deg,#fff 0%,#fbf7fd 55%,#f3e9f8 100%)}
}

/* The photo box is a fixed 330px tall. On a phone the card is full width, so
   the frame is nearly square and `object-fit:cover` cropped straight through
   Sophia's chin. A portrait frame fits the whole face. */
@media (max-width:900px){
  .team-photo{height:auto;aspect-ratio:4/5}
  .team-photo img{object-position:50% 22%}
  /* A portrait frame exists to fit a face. A card with no photograph yet just
     gets a tall empty panel, so the placeholder keeps a short frame. */
  .team-photo:has(.team-placeholder){aspect-ratio:16/9}
}
@media (max-width:560px){
  .team-photo{aspect-ratio:3/4}
  .team-photo:has(.team-placeholder){aspect-ratio:16/10}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Desktop top menu.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The contact block belongs to the full screen mobile menu. It had no default
   display rule, so it was also rendering in the desktop bar: the phone number
   and email were sitting in the header on every page, eating 144px and
   squeezing "Our Work" onto two lines. */
.nav-foot{display:none}

/* A menu item that wraps mid-label is the thing that reads as cramped. */
.nav>a,.drop-toggle,.nav-cta,.nav-login{white-space:nowrap}

/* With the contact block gone the bar has room again, so the items get their
   spacing back rather than sitting shoulder to shoulder. */
@media (min-width:1380px){
  .nav{gap:30px}
  .site-header .container{width:min(1320px,calc(100% - 48px))}
}
@media (min-width:1201px) and (max-width:1379px){
  .nav{gap:22px}
}

/* ── WhatsApp floating button ─────────────────────────────────────────────
   Sits clear of the safe area on a phone, and shrinks there so it does not
   cover the content it is floating over. */
.wa-fab{position:fixed;right:20px;bottom:max(22px,env(safe-area-inset-bottom));z-index:70;
  width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;
  display:grid;place-items:center;box-shadow:0 8px 26px rgba(37,211,102,.42);
  transition:transform .2s ease,box-shadow .2s ease}
.wa-fab svg{width:30px;height:30px;fill:currentColor;display:block}
.wa-fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 32px rgba(37,211,102,.5)}
.wa-fab:before{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(37,211,102,.4);animation:wa-pulse 2.2s ease-out infinite}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.45);opacity:0}}
@media (prefers-reduced-motion:reduce){.wa-fab:before{animation:none}}
@media (max-width:560px){
  .wa-fab{width:52px;height:52px;right:16px}
  .wa-fab svg{width:27px;height:27px}
}
/* The full screen menu covers everything, so the bubble must not float over it. */
body.nav-open .wa-fab{display:none}

/* ═══════════════════════════════════════════════════════════════════════════
   Team cards on desktop.

   `.team-photo` was a fixed 330px tall in a 586px column, so the frame was
   1.78 landscape holding a 0.76 portrait photograph: `object-fit:cover` kept
   43% of its height and Sophia was cropped to her forehead. The mobile pass
   fixed the phone and left this.

   The frame is portrait everywhere now. The card is capped and the grid
   centred, because a 4:5 frame in a 586px column is a 732px tall photograph,
   which is a poster rather than a team card. 400px wide gives a 500px frame
   and keeps 95% of the source.
   ═══════════════════════════════════════════════════════════════════════════ */
.team-grid{grid-template-columns:repeat(2,minmax(0,400px));justify-content:center;gap:30px}
.team-photo{height:auto;aspect-ratio:4/5}
.team-photo img{object-position:50% 18%}
/* Side by side the frames have to match, or the two names sit at different
   heights and the cards read as a mistake. A placeholder keeps the portrait
   frame while it has a neighbour with a photograph. */
@media (max-width:900px){
  .team-grid{grid-template-columns:minmax(0,420px);justify-content:center}
  /* Stacked, nothing is beside it, so an empty portrait panel is just a tall
     blank and the short frame is the better call. */
  .team-photo:has(.team-placeholder){aspect-ratio:16/10}
}