/* SMC wrapper: solid background that fully covers the host site's theme colour (no green bleed-through) */ #smc-page{position:relative;width:100%;max-width:100%;overflow-x:hidden; font-size:17px;line-height:1.7;color:#54618a;background:#fdfbfd;text-align:left; border-radius:0} /* paint the SMC background edge-to-edge behind everything so the host column margins never show through */ #smc-page *{box-sizing:border-box;max-width:100%} #smc-page img{max-width:100%;height:auto} /* neutralise Squarespace theme overrides (it was forcing Title Case + letter-spacing on headings) */ #smc-page h1,#smc-page h2,#smc-page h3,#smc-page h4{text-transform:none!important;letter-spacing:-.02em} #smc-page p,#smc-page a,#smc-page li{text-transform:none!important;letter-spacing:normal} #smc-page .eyebrow{text-transform:uppercase!important;letter-spacing:.12em!important} #smc-page .strip-track{text-transform:none!important} /* hard containment for the hero collage inside Squarespace's column (prevents chip clipping / overflow on mobile) */ #smc-page .wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,40px)} #smc-page .hero-art,#smc-page .hero-grid{max-width:100%;overflow:visible} #smc-page .hero-grid>*,#smc-page .about-grid>*,#smc-page .tele-grid>*,#smc-page .enq-grid>*,#smc-page .intro-grid>*,#smc-page .info-grid>*,#smc-page .foot-grid>*{min-width:0} @media(max-width:560px){ #smc-page .hero-art{overflow:hidden;border-radius:0} #smc-page .hero-art .chip{position:absolute;max-width:none;white-space:nowrap} #smc-page .hero-art .c1{top:12px;right:12px;left:auto} #smc-page .hero-art .c2{bottom:12px;right:12px;left:auto} } /* coloured bands stay inside the column (boxed, not edge-to-edge) but keep their look with rounded corners */ #smc-page .strip, #smc-page .funding{width:100%;position:relative;left:auto;right:auto;margin-left:0;margin-right:0;border-radius:0} #smc-page{ /* very light pastel palette from SMC logo (magenta #F0189C, blue #2478B4) */ --rose:#e87bbe; /* softened accent (readable on white) */ --rose-mid:#f5a2d5; --rose-dusty:#fbc3e5; --rose-soft:#fddff1; --rose-mist:#fef3fa; --blue-deep:#7ea7cf; /* light, for accents */ --navy:#6b7aa6; /* soft muted slate-blue for buttons (white text ok) */ --blue:#abcadf; /* pale blue */ --blue-soft:#cfe1ee; --powder:#e0ecf4; --blue-mist:#f2f7fa; --panel:#d8e6f1; /* light blue panel for funding (dark text on top) */ --ink:#54618a; /* soft slate text, still legible */ --muted:#828daa; --cream:#fdfbfd; /* near-white pastel bg */ --paper:#ffffff; --sand:#f7f2f7; --line:rgba(84,97,138,.12); --shadow-sm:0 4px 16px -8px rgba(84,97,138,.2); --shadow:0 24px 60px -32px rgba(84,97,138,.3); --shadow-lg:0 40px 90px -40px rgba(84,97,138,.34); --r:18px; --r-lg:30px; --ease:cubic-bezier(.22,.61,.36,1); }*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth} #smc-page{-webkit-text-size-adjust:100%}#smc-page, #smc-page{max-width:100%;overflow-x:hidden}#smc-page{font-family:"Nunito Sans",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;font-size:clamp(16px,1.05vw,17px);-webkit-font-smoothing:antialiased}/* subtle paper grain for premium tactility */ body:before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}#smc-page h1, #smc-page h2, #smc-page h3, #smc-page h4{font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:1.08;letter-spacing:-.015em}#smc-page a{color:inherit;text-decoration:none}#smc-page img{display:block;max-width:100%}#smc-page .eyebrow{font-family:"Nunito Sans";font-weight:700;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rose)}/* buttons */ .btn{position:relative;display:inline-flex;align-items:center;gap:.6em;font-family:"Nunito Sans";font-weight:700;font-size:1rem;padding:1em 1.9em;border-radius:100px;border:none;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s;will-change:transform}#smc-page .btn svg{width:17px;height:17px;transition:transform .35s var(--ease)}#smc-page .btn-primary{background:var(--navy);color:#fff;box-shadow:var(--shadow-sm)}#smc-page .btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 40px -18px rgba(63,79,112,.5);background:#37497a}#smc-page .btn-primary:hover svg{transform:translateX(4px)}#smc-page .btn-ghost{background:transparent;color:var(--blue-deep);border:1.5px solid var(--blue)}#smc-page .btn-ghost:hover{background:#fff;transform:translateY(-3px);box-shadow:var(--shadow-sm)}#smc-page .btn-white{background:#fff;color:var(--blue-deep)}#smc-page .btn-white:hover{transform:translateY(-3px);box-shadow:0 20px 40px -18px rgba(0,0,0,.25)}/* ===== scroll reveal ===== */ html.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}#smc-page [data-reveal].in{opacity:1;transform:none}#smc-page [data-reveal][data-d="1"]{transition-delay:.08s}#smc-page [data-reveal][data-d="2"]{transition-delay:.16s}#smc-page [data-reveal][data-d="3"]{transition-delay:.24s}#smc-page [data-reveal][data-d="4"]{transition-delay:.32s}#smc-page [data-reveal][data-d="5"]{transition-delay:.4s}/* ===== nav ===== */ header.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s,box-shadow .4s,padding .4s}#smc-page header.nav.scrolled{background:rgba(250,246,240,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}header.nav::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:150px;background:transparent;transition:background .4s;pointer-events:none}#smc-page header.nav.scrolled::before,body.menu-open header.nav::before{background:rgba(250,246,240,.97)}#smc-page .nav-inner{display:flex;align-items:center;justify-content:space-between;height:84px;transition:height .4s}#smc-page header.nav.scrolled .nav-inner{height:70px}#smc-page .logo{display:flex;align-items:center;gap:13px}#smc-page .logo img{height:48px;width:auto;display:block;transition:height .4s}#smc-page header.nav.scrolled .logo img{height:42px}#smc-page .nav-links{display:flex;align-items:center;gap:34px;font-weight:600;font-size:.96rem}#smc-page .nav-links a{color:var(--ink);position:relative;padding:4px 0;opacity:.78;transition:opacity .2s}#smc-page .nav-links a:after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--rose);transition:width .3s var(--ease)}#smc-page .nav-links a:hover{opacity:1}#smc-page .nav-links a:hover:after{width:100%}#smc-page .nav-cta{padding:.65em 1.4em;font-size:.92rem}#smc-page .burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}#smc-page .burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}/* mobile menu */ .mobile-menu{position:fixed;inset:0;z-index:99;background:var(--cream);transform:translateX(100%);visibility:hidden;transition:transform .5s var(--ease),visibility .5s;display:flex;flex-direction:column;justify-content:flex-start;padding:110px 40px 40px;gap:8px;overflow-y:auto}#smc-page .mobile-menu>*{flex:none}#smc-page .mobile-menu.open{transform:none;visibility:visible}body.menu-open header.nav{background:rgba(250,246,240,.97)}body.menu-open::after{content:"";position:fixed;left:0;right:0;top:-160px;bottom:-160px;background:#fdfbfd;z-index:98;pointer-events:none}#smc-page .mobile-menu a{font-family:"Fraunces";font-size:2rem;color:var(--blue-deep);padding:10px 0;opacity:0;transform:translateX(20px);transition:opacity .4s,transform .4s}#smc-page .mobile-menu.open a{opacity:1;transform:none}#smc-page .mobile-menu.open a:nth-child(1){transition-delay:.1s}#smc-page .mobile-menu.open a:nth-child(2){transition-delay:.16s}#smc-page .mobile-menu.open a:nth-child(3){transition-delay:.22s}#smc-page .mobile-menu.open a:nth-child(4){transition-delay:.28s}#smc-page .mobile-menu.open a:nth-child(5){transition-delay:.34s}#smc-page .mobile-menu.open a:nth-child(6){transition-delay:.4s}#smc-page .mobile-menu.open a:nth-child(7){transition-delay:.46s}#smc-page .mobile-menu .btn{margin-top:24px;align-self:stretch;justify-content:center;font-family:"Nunito Sans";font-size:1.1rem;font-weight:800;padding:16px 22px;opacity:0;transition:opacity .4s .4s}#smc-page .mobile-menu.open .btn{opacity:1}/* ===== hero (asymmetric) ===== */ .hero{position:relative;padding:150px 0 90px;overflow:hidden}#smc-page .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}#smc-page .orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}#smc-page .orb.o1{width:420px;height:420px;background:var(--rose-mist);top:-100px;right:-60px;animation:drift 22s ease-in-out infinite}#smc-page .orb.o2{width:340px;height:340px;background:var(--powder);bottom:-120px;left:-80px;animation:drift 26s ease-in-out infinite reverse}#smc-page .orb.o3{width:240px;height:240px;background:var(--rose-soft);top:40%;left:38%;opacity:.3;animation:drift 30s ease-in-out infinite} @keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,20px) scale(.96)}} .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);gap:60px;align-items:center}#smc-page .hero-copy .eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:24px}#smc-page .hero-copy .eyebrow .pin{width:8px;height:8px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 4px rgba(240,24,156,.2)}#smc-page .hero h1{font-size:clamp(2.7rem,5.8vw,4.6rem);margin-bottom:26px}#smc-page .hero h1 .em{font-style:italic;color:var(--blue-deep);position:relative}#smc-page .hero h1 .em svg{position:absolute;left:-2%;bottom:-.18em;width:104%;height:.42em;color:var(--rose);overflow:visible}#smc-page .hero h1 .em svg path{stroke-dasharray:340;stroke-dashoffset:340}#smc-page .hero h1 .em.draw-in svg path{animation:draw 1.1s var(--ease) forwards} @keyframes draw{to{stroke-dashoffset:0}} @keyframes underline{to{transform:scaleX(1)}} .hero p.lead{font-size:1.22rem;color:var(--muted);max-width:46ch;margin-bottom:34px}#smc-page .hero-actions{display:flex;gap:15px;flex-wrap:wrap;margin-bottom:38px}#smc-page .hero-trust{display:flex;gap:26px;flex-wrap:wrap;align-items:center}#smc-page .hero-trust .t{display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:700;color:var(--blue-deep)}#smc-page .hero-trust .t svg{width:20px;height:20px;flex:none}/* hero collage */ .hero-art{position:relative;height:560px}#smc-page .hero-art .photo{position:absolute;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}#smc-page .hero-art .photo img{width:100%;height:100%;object-fit:cover}#smc-page .hero-art .p-main{inset:0 0 60px 40px;animation:floatA 8s ease-in-out infinite}#smc-page .hero-art .p-sub{width:46%;height:210px;left:-12px;bottom:0;border:6px solid var(--cream);animation:floatB 7s ease-in-out infinite} @keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}} .hero-art .chip{position:absolute;background:rgba(255,253,250,.95);backdrop-filter:blur(8px);border-radius:16px;padding:13px 17px;box-shadow:var(--shadow);display:flex;align-items:center;gap:11px;font-weight:700;font-size:.92rem;z-index:3}#smc-page .hero-art .chip .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}#smc-page .hero-art .chip .ic svg{width:20px;height:20px}#smc-page .hero-art .c1 .ic svg{color:var(--rose)}#smc-page .hero-art .c2 .ic svg{color:var(--blue-deep)}#smc-page .hero-art .c1{top:34px;right:-10px;animation:floatB 6s ease-in-out infinite}#smc-page .hero-art .c2{bottom:90px;right:24px;animation:floatA 7.5s ease-in-out infinite}#smc-page .hero-art .c1 .ic{background:var(--rose-mist)}#smc-page .hero-art .c2 .ic{background:var(--blue-mist)}/* marquee trust strip */ .strip{background:var(--navy);color:rgba(255,255,255,.92);padding:20px 0;overflow:hidden;white-space:nowrap}#smc-page .strip-track{display:inline-flex;gap:56px;align-items:center;animation:scroll 28s linear infinite;font-family:"Fraunces";font-style:italic;font-size:1.25rem}#smc-page .strip-track span{display:inline-flex;align-items:center;gap:56px}#smc-page .strip-track .dot{width:6px;height:6px;border-radius:50%;background:var(--rose-soft)} @keyframes scroll{to{transform:translateX(-50%)}} .strip:hover .strip-track{animation-play-state:paused}/* ===== sections ===== */ section{position:relative}#smc-page .pad{padding:clamp(72px,9vw,118px) 0}#smc-page .sec-head{max-width:62ch;margin-bottom:54px}#smc-page .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}#smc-page .sec-head.split{max-width:none;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end}#smc-page .sec-head.split .split-l h2{margin-bottom:0}#smc-page .sec-head.split .split-r{color:var(--muted);font-size:1.08rem;padding-bottom:6px} @media(max-width:820px){#smc-page .sec-head.split{grid-template-columns:1fr;gap:20px;align-items:start}} .sec-head .eyebrow{display:block;margin-bottom:16px}#smc-page .sec-head h2{font-size:clamp(2.1rem,4.2vw,3.2rem);margin-bottom:16px}#smc-page .sec-head p{color:var(--muted);font-size:1.12rem}/* about */ .about{background:var(--paper)}#smc-page .about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(44px,6vw,72px);align-items:center}#smc-page .about-visual{position:relative}#smc-page .about-visual .frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5}#smc-page .about-visual .frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}#smc-page .about-visual:hover .frame img{transform:scale(1.05)}#smc-page .about-visual .badge{position:absolute;bottom:-26px;right:-20px;background:var(--rose);color:#fff;border-radius:22px;padding:24px 28px;box-shadow:var(--shadow);max-width:230px}#smc-page .about-visual .badge .big{font-family:"Fraunces";font-size:1.7rem;line-height:1.1;margin-bottom:4px}#smc-page .about-visual .badge .small{font-size:.86rem;opacity:.95;font-weight:600}#smc-page .about-copy h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:20px}#smc-page .about-copy p{color:var(--muted);margin-bottom:18px}#smc-page .about-copy .sign{margin-top:26px;display:flex;align-items:center;gap:16px}#smc-page .about-copy .sign .av{width:54px;height:54px;border-radius:50%;overflow:hidden;flex:none;box-shadow:var(--shadow-sm)}#smc-page .about-copy .sign .av img{width:100%;height:100%;object-fit:cover}#smc-page .about-copy .sign .nm{font-family:"Fraunces";font-size:1.2rem;color:var(--ink)}#smc-page .about-copy .sign .rl{font-size:.86rem;color:var(--muted);font-weight:600}/* services */ .services{background:var(--cream)}#smc-page .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}#smc-page .svc{background:var(--paper);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}#smc-page .svc:hover{transform:translateY(-8px);box-shadow:var(--shadow)}#smc-page .svc .thumb{position:relative;aspect-ratio:3/2;overflow:hidden}#smc-page .svc .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}#smc-page .svc:hover .thumb img{transform:scale(1.08)}#smc-page .svc .thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(23,52,113,.32))}#smc-page .svc .body{padding:26px 28px 30px}#smc-page .svc h3{font-size:1.3rem;margin-bottom:9px}#smc-page .svc p{font-size:.97rem;color:var(--muted);margin-bottom:14px}#smc-page .svc .more{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.9rem;color:var(--blue-deep);transition:gap .3s var(--ease)}#smc-page .svc .more svg{width:15px;height:15px;transition:transform .3s var(--ease)}#smc-page .svc:hover .more{gap:11px}#smc-page .svc:hover .more svg{transform:translateX(3px)}/* approach / why */ .approach{background:var(--sand)}#smc-page .appr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:10px}#smc-page .appr{text-align:left}#smc-page .appr .n{font-family:"Fraunces";font-style:italic;font-size:1.1rem;color:var(--rose);margin-bottom:14px}#smc-page .appr .ic{width:58px;height:58px;border-radius:17px;background:var(--paper);display:grid;place-items:center;margin-bottom:18px;box-shadow:var(--shadow-sm)}#smc-page .appr .ic svg{width:26px;height:26px;color:var(--blue-deep)}#smc-page .appr h3{font-size:1.32rem;margin-bottom:10px}#smc-page .appr p{color:var(--muted);font-size:.98rem}/* funding band, #smc-page light panel, #smc-page dark text */ .funding{background:linear-gradient(135deg,var(--panel),var(--blue-soft));overflow:hidden;position:relative}#smc-page .funding:before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(232,123,190,.22);top:-180px;right:-120px;filter:blur(50px)}#smc-page .fund-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:1}#smc-page .fund{background:var(--paper);border:1px solid rgba(84,97,138,.08);border-radius:var(--r);padding:28px 24px;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .3s}#smc-page .fund:hover{transform:translateY(-6px);box-shadow:var(--shadow)}#smc-page .fund .ic{width:46px;height:46px;border-radius:13px;background:var(--rose-mist);display:grid;place-items:center;margin-bottom:16px}#smc-page .fund .ic svg{width:22px;height:22px;color:var(--rose)}#smc-page .fund h3{font-size:1.15rem;color:var(--ink);margin-bottom:8px}#smc-page .fund p{font-size:.88rem;color:var(--muted)}/* telehealth split */ .tele{background:var(--paper)}#smc-page .tele-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(44px,6vw,72px);align-items:center}#smc-page .tele-visual{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:5/4}#smc-page .tele-visual img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}#smc-page .tele-visual:hover img{transform:scale(1.04)}#smc-page .tele-copy h2{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:18px}#smc-page .tele-copy>p{color:var(--muted);margin-bottom:26px;font-size:1.08rem}#smc-page .tlist{display:grid;gap:16px}#smc-page .tlist .row{display:flex;gap:15px;align-items:flex-start}#smc-page .tlist .chk{flex:none;width:30px;height:30px;border-radius:10px;background:var(--rose-mist);color:var(--rose);display:grid;place-items:center;font-weight:800}#smc-page .tlist .row b{font-weight:700;display:block;margin-bottom:1px}#smc-page .tlist .row span{color:var(--muted);font-size:.95rem}/* testimonial */ .quote{background:var(--cream);text-align:center}#smc-page .quote .mark{font-family:"Fraunces";font-size:5rem;line-height:.5;color:var(--rose-soft);height:42px}#smc-page .quote blockquote{font-family:"Fraunces";font-style:italic;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.35;color:var(--ink);max-width:20ch;margin:24px auto 28px}#smc-page .quote .who{font-weight:700;color:var(--blue-deep)}#smc-page .quote .who span{display:block;font-weight:600;color:var(--muted);font-size:.9rem;font-family:"Nunito Sans"}/* enquiry / contact */ .enquiry{background:linear-gradient(160deg,var(--rose-mist),var(--sand))}#smc-page .enq-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,6vw,72px);align-items:center}#smc-page .enq-copy .eyebrow{display:block;margin-bottom:16px}#smc-page .enq-copy h2{font-size:clamp(2.2rem,4.4vw,3.3rem);margin-bottom:18px}#smc-page .enq-copy>p{color:var(--muted);font-size:1.1rem;margin-bottom:30px}#smc-page .enq-contact{display:grid;gap:18px}#smc-page .enq-contact .item{display:flex;gap:15px;align-items:center}#smc-page .enq-contact .item .ic{width:48px;height:48px;border-radius:14px;background:var(--paper);display:grid;place-items:center;flex:none;box-shadow:var(--shadow-sm)}#smc-page .enq-contact .item .ic svg{width:21px;height:21px;color:var(--blue-deep)}#smc-page .enq-contact .item .lbl{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}#smc-page .enq-contact .item .val{font-weight:700;color:var(--ink);font-size:1.05rem}#smc-page .form-card{background:var(--paper);border-radius:var(--r-lg);padding:40px;box-shadow:var(--shadow)}#smc-page .form-card h3,#smc-page .form-card h2.fc-title{font-size:1.5rem;margin-bottom:6px;font-family:"Fraunces"}#smc-page .form-card .sub{color:var(--muted);font-size:.95rem;margin-bottom:26px}#smc-page .field{margin-bottom:18px}#smc-page .field label{display:block;font-size:.82rem;font-weight:700;color:var(--ink);margin-bottom:7px}#smc-page .field input, #smc-page .field textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;font-family:inherit;font-size:1rem;color:var(--ink);background:var(--cream);transition:border-color .25s,box-shadow .25s}#smc-page .field input:focus, #smc-page .field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(36,120,180,.15);background:#fff}#smc-page .field textarea{resize:vertical;min-height:96px}#smc-page .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}#smc-page .form-card .btn{width:100%;justify-content:center;margin-top:6px}#smc-page .form-note{font-size:.8rem;color:var(--muted);text-align:center;margin-top:14px}/* footer */ footer{background:var(--navy);color:rgba(255,255,255,.74);padding:72px 0 34px;font-size:.96rem}#smc-page .foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px;margin-bottom:48px}#smc-page footer .logo{margin-bottom:16px}#smc-page footer .logo img{height:46px}#smc-page footer p.desc{max-width:30ch;color:rgba(255,255,255,.7)}#smc-page footer h4{font-family:"Nunito Sans";font-weight:800;color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}#smc-page footer ul{list-style:none}#smc-page footer li{margin-bottom:10px}#smc-page footer a{opacity:.8;transition:opacity .2s,color .2s}#smc-page footer a:hover{opacity:1;color:var(--rose-soft)}#smc-page .foot-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.84rem;color:rgba(255,255,255,.5)}/* sticky mobile CTA */ .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(255,253,250,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 -6px 24px -12px rgba(23,52,113,.4);padding:12px 18px calc(12px + env(safe-area-inset-bottom));display:none;gap:12px;transform:translateY(120%);transition:transform .5s var(--ease)}#smc-page .sticky-cta::after{content:"";position:absolute;left:0;right:0;top:100%;height:140px;background:rgba(255,253,250,.97);pointer-events:none}#smc-page .sticky-cta.show{transform:none}#smc-page .sticky-cta .btn{flex:1;justify-content:center;padding:.85em 1em;font-size:.95rem}#smc-page .sticky-cta .btn-ghost{background:#fff}/* ===== responsive ===== */ /* large laptop down: tighten hero gap */ @media(max-width:1180px){#smc-page .hero-grid{gap:44px}#smc-page .hero-art{height:520px} }/* tablet landscape / small laptop */ @media(max-width:980px){#smc-page .nav-links, #smc-page .nav .nav-cta{display:none}#smc-page .burger{display:flex}#smc-page .hero-grid, #smc-page .about-grid, #smc-page .tele-grid, #smc-page .enq-grid{grid-template-columns:1fr;gap:clamp(36px,6vw,52px)}#smc-page .hero-art{order:-1;height:min(72vw,460px);max-width:560px;margin:0 auto;width:100%}#smc-page .hero-art .p-main{inset:0 0 14% 12%}#smc-page .hero-art .p-sub{width:44%;height:46%;left:0;bottom:0}#smc-page .hero-art .c1{right:0}#smc-page .hero-art .c2{right:6%}#smc-page .about-visual{max-width:440px;margin:0 auto}#smc-page .about-visual .badge{right:0}#smc-page .svc-grid{grid-template-columns:repeat(2,1fr)}#smc-page .fund-grid{grid-template-columns:repeat(2,1fr)}#smc-page .appr-grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}#smc-page .foot-grid{grid-template-columns:1fr 1fr;gap:32px} }/* tablet portrait */ @media(max-width:760px){#smc-page .hero{padding:clamp(108px,16vw,132px) 0 clamp(56px,8vw,88px)}#smc-page .hero-art{height:min(82vw,420px);max-width:480px}#smc-page .form-card{padding:clamp(24px,5vw,40px)} }/* phones */ @media(max-width:560px){#smc-page .svc-grid, #smc-page .fund-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}#smc-page .form-row{grid-template-columns:1fr}#smc-page .foot-grid{grid-template-columns:1fr;gap:28px}#smc-page .sticky-cta{display:flex}/* hero collage becomes a single clean image on phones */ .hero-art{height:auto;aspect-ratio:4/3;max-width:100%}#smc-page .hero-art .p-main{position:relative;inset:auto;width:100%;height:100%;animation:none}#smc-page .hero-art .p-sub{display:none}#smc-page .hero-art .chip{font-size:.82rem;padding:10px 13px}#smc-page .hero-art .chip .ic{width:32px;height:32px}#smc-page .hero-art .c1{top:14px;right:10px}#smc-page .hero-art .c2{bottom:14px;right:10px}#smc-page .hero-actions{gap:12px;flex-direction:column}#smc-page .hero-actions .btn{width:100%;justify-content:center;min-width:0}#smc-page .hero-trust{gap:14px 20px}#smc-page .about-visual .badge{position:relative;right:auto;bottom:auto;margin-top:18px;max-width:none}#smc-page .quote blockquote{max-width:none}/* leave room so sticky CTA never hides the footer */ footer{padding-bottom:96px} } @media(max-width:380px){#smc-page .hero-trust .t{font-size:.86rem} }/* ===== speech-pathology graphic motifs ===== */ /* floating speech bubbles in hero bg */ .spbubble{position:absolute;opacity:.5;pointer-events:none}#smc-page .spbubble.sb1{top:14%;left:6%;width:60px;color:var(--rose-dusty);animation:bob 7s ease-in-out infinite}#smc-page .spbubble.sb2{top:62%;left:2%;width:44px;color:var(--blue-soft);animation:bob 9s ease-in-out infinite reverse}#smc-page .spbubble.sb3{top:8%;right:42%;width:38px;color:var(--rose-soft);animation:bob 8s ease-in-out infinite} @keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(4deg)}} /* soundwave divider between sections */ .wave-divide{display:block;width:100%;height:54px;color:var(--blue-soft)}#smc-page .wave-divide .bar{transform-origin:center;animation:eq 1.6s ease-in-out infinite}/* stagger bars via nth-child delays */ .wave-divide .bar:nth-child(2n){animation-delay:.2s}#smc-page .wave-divide .bar:nth-child(3n){animation-delay:.4s}#smc-page .wave-divide .bar:nth-child(4n){animation-delay:.15s}#smc-page .wave-divide .bar:nth-child(5n){animation-delay:.35s} @keyframes eq{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}} /* dotted "path" accent on section eyebrows (play on Speech PATH-ology) */ .sec-head .eyebrow{position:relative;display:inline-flex;align-items:center;gap:10px}#smc-page .sec-head .eyebrow:before{content:"";width:26px;height:8px;background-image:radial-gradient(circle,currentColor 1.4px,transparent 1.6px);background-size:7px 7px;background-position:0 center;background-repeat:repeat-x;opacity:.7}/* hero eyebrow gets a tiny speech-bubble dot instead of plain pin (already has .pin) */ .eyebrow .pin{position:relative}/* about badge: add a small soundwave motif */ .about-visual .badge{overflow:hidden}#smc-page .badge-wave{position:absolute;bottom:8px;right:12px;width:54px;height:18px;opacity:.5;color:#fff} @media(max-width:680px){#smc-page .spbubble{display:none} } @media(prefers-reduced-motion:reduce){*, #smc-page *:before, #smc-page *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}#smc-page [data-reveal]{opacity:1!important;transform:none!important}#smc-page .wave-divide .bar{transform:scaleY(.8)!important} }/* ===== communication journey path ===== */ .journey{background:var(--paper)}#smc-page .jpath{position:relative;margin-top:20px}#smc-page .jpath-line{position:absolute;top:18px;left:0;width:100%;height:120px;color:var(--rose-dusty);z-index:0;opacity:.8}#smc-page .jpath-line path{animation:flow 30s linear infinite} @keyframes flow{to{stroke-dashoffset:-320}} .jsteps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:1}#smc-page .jstep{text-align:center;padding:0 8px}#smc-page .jdot{width:70px;height:70px;border-radius:50%;background:var(--paper);border:2px solid var(--rose-soft);box-shadow:var(--shadow-sm);display:grid;place-items:center;margin:0 auto 18px;position:relative;transition:transform .4s var(--ease),border-color .3s,background .3s}#smc-page .jdot svg{width:30px;height:30px;color:var(--rose);transition:color .3s}#smc-page .jstep:hover .jdot{transform:translateY(-6px) scale(1.06);border-color:var(--rose);background:var(--rose-mist)}#smc-page .jnum{font-family:"Fraunces",serif;font-style:italic;font-size:.95rem;color:var(--blue-deep);display:block;margin-bottom:6px}#smc-page .jstep h3{font-size:1.3rem;margin-bottom:8px;font-weight:500}#smc-page .jstep p{color:var(--muted);font-size:.95rem;max-width:24ch;margin:0 auto}#smc-page .jfoot{text-align:center;max-width:52ch;margin:54px auto 0;font-family:"Fraunces",serif;font-style:italic;font-size:1.3rem;color:var(--ink);line-height:1.4} @media(max-width:820px){#smc-page .jpath-line{display:none}#smc-page .jsteps{grid-template-columns:1fr 1fr;gap:36px 16px} } @media(max-width:480px){#smc-page .jsteps{grid-template-columns:1fr;gap:28px}} /* contact-only: hours + map cards using existing tokens */ #smc-page .info{background:var(--paper)} #smc-page .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch} #smc-page .info-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);padding:36px;box-shadow:var(--shadow-sm)} #smc-page .info-card h3{font-size:1.4rem;margin-bottom:18px} #smc-page .info-card .hours{display:grid;gap:12px} #smc-page .info-card .hr{display:flex;justify-content:space-between;padding-bottom:12px;border-bottom:1px dashed var(--line);font-size:1rem} #smc-page .info-card .hr:last-child{border-bottom:none;padding-bottom:0} #smc-page .info-card .hr span:first-child{color:var(--ink);font-weight:700} #smc-page .info-card .hr span:last-child{color:var(--muted)} #smc-page .map-frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line);height:100%;min-height:320px} #smc-page .map-frame iframe{width:100%;height:100%;min-height:320px;border:0;display:block} @media(max-width:820px){#smc-page .info-grid{grid-template-columns:1fr;gap:24px}} /* ===== standalone site additions ===== */ html,body{margin:0;padding:0;background:#fdfbfd} .skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:#54618a;padding:10px 16px;z-index:200;border-radius:0 0 12px 0;font-weight:700;text-decoration:none} .skip-link:focus{left:0} .hidden-field{display:none} .simple-page{min-height:55vh;display:grid;place-items:center;text-align:center;padding:170px 20px 90px} .simple-page h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:14px} .simple-page p{color:var(--muted);max-width:52ch;margin:0 auto 30px} /* ===== condition page components (same tokens as homepage) ===== */ #smc-page .intro{background:var(--paper)} #smc-page .intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(44px,6vw,72px);align-items:center} #smc-page .intro-copy h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:20px} #smc-page .intro-copy p{color:var(--muted);margin-bottom:18px} #smc-page .intro-visual{position:relative} #smc-page .intro-visual .frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5} #smc-page .intro-visual .frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)} #smc-page .intro-visual:hover .frame img{transform:scale(1.05)} #smc-page .intro-visual .badge{position:absolute;bottom:-26px;right:-20px;background:var(--rose);color:#fff;border-radius:22px;padding:24px 28px;box-shadow:var(--shadow);max-width:240px;overflow:hidden} #smc-page .intro-visual .badge .big{font-family:"Fraunces";font-size:1.5rem;line-height:1.12;margin-bottom:4px} #smc-page .intro-visual .badge .small{font-size:.86rem;opacity:.95;font-weight:600} /* signs grid */ #smc-page .signs{background:var(--sand)} #smc-page .signs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:10px} #smc-page .sign-card{background:var(--paper);border-radius:var(--r);padding:28px 26px;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .3s} #smc-page .sign-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)} #smc-page .sign-card .ic{width:48px;height:48px;border-radius:13px;background:var(--rose-mist);display:grid;place-items:center;margin-bottom:16px} #smc-page .sign-card .ic svg{width:23px;height:23px;color:var(--rose)} #smc-page .sign-card h3{font-size:1.16rem;margin-bottom:8px;font-weight:500} #smc-page .sign-card p{font-size:.95rem;color:var(--muted)} #smc-page .signs-note{text-align:center;max-width:60ch;margin:40px auto 0;color:var(--muted);font-size:1rem} /* how we help: numbered steps */ #smc-page .help{background:var(--cream)} #smc-page .help-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:10px} #smc-page .help-card{display:flex;gap:20px;align-items:flex-start;background:var(--paper);border-radius:var(--r);padding:28px 28px;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .3s} #smc-page .help-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)} #smc-page .help-card .num{flex:none;font-family:"Fraunces";font-style:italic;font-size:1.5rem;color:var(--rose);line-height:1;width:46px;height:46px;border-radius:50%;border:2px solid var(--rose-soft);display:grid;place-items:center} #smc-page .help-card h3{font-size:1.22rem;margin-bottom:8px;font-weight:500} #smc-page .help-card p{color:var(--muted);font-size:.97rem} /* faq */ #smc-page .faq{background:var(--paper)} #smc-page .faq-wrap{max-width:820px;margin:0 auto} #smc-page .faq-item{border:1px solid var(--line);border-radius:var(--r);background:var(--cream);margin-bottom:14px;overflow:hidden;transition:box-shadow .3s,border-color .3s} #smc-page .faq-item[open]{box-shadow:var(--shadow-sm);border-color:rgba(232,123,190,.4)} #smc-page .faq-item summary{cursor:pointer;list-style:none;padding:22px 26px;font-family:"Fraunces",serif;font-size:1.18rem;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:18px;font-weight:500} #smc-page .faq-item summary::-webkit-details-marker{display:none} #smc-page .faq-item summary .plus{flex:none;width:26px;height:26px;position:relative;transition:transform .35s var(--ease)} #smc-page .faq-item summary .plus:before,#smc-page .faq-item summary .plus:after{content:"";position:absolute;background:var(--rose);border-radius:2px} #smc-page .faq-item summary .plus:before{top:12px;left:3px;right:3px;height:2px} #smc-page .faq-item summary .plus:after{left:12px;top:3px;bottom:3px;width:2px;transition:opacity .35s var(--ease)} #smc-page .faq-item[open] summary .plus{transform:rotate(90deg)} #smc-page .faq-item[open] summary .plus:after{opacity:0} #smc-page .faq-item .ans{padding:0 26px 24px;color:var(--muted);font-size:1rem;line-height:1.7} /* related services row */ #smc-page .related{background:var(--sand)} #smc-page .rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:10px} #smc-page .rel-card{background:var(--paper);border-radius:var(--r);padding:24px 24px;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .3s;display:flex;flex-direction:column;gap:8px} #smc-page .rel-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)} #smc-page .rel-card h3{font-size:1.12rem;font-weight:500} #smc-page .rel-card p{font-size:.92rem;color:var(--muted);flex:1} #smc-page .rel-card .more{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.88rem;color:var(--blue-deep);transition:gap .3s var(--ease)} #smc-page .rel-card .more svg{width:14px;height:14px} #smc-page .rel-card:hover .more{gap:11px} @media(max-width:980px){ #smc-page .intro-grid{grid-template-columns:1fr;gap:clamp(36px,6vw,52px)} #smc-page .intro-visual{max-width:440px;margin:0 auto} #smc-page .intro-visual .badge{right:0} #smc-page .signs-grid,#smc-page .rel-grid{grid-template-columns:repeat(2,1fr)} #smc-page .help-grid{grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto} } @media(max-width:620px){ #smc-page .signs-grid,#smc-page .rel-grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto} #smc-page .intro-visual .badge{position:relative;right:auto;bottom:auto;margin-top:18px;max-width:none} #smc-page .faq-item summary{font-size:1.06rem;padding:18px 20px} } /* ===== services dropdown ===== */ #smc-page .nav-item.has-sub{position:relative} #smc-page .has-sub>a{display:inline-flex;align-items:center;gap:6px} #smc-page .has-sub .caret{width:13px;height:13px;flex:none;transition:transform .25s var(--ease)} #smc-page .has-sub:hover>a .caret,#smc-page .has-sub:focus-within>a .caret{transform:rotate(180deg)} #smc-page .sub-menu{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);min-width:280px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-lg);padding:10px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;z-index:130} #smc-page .sub-menu:before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px} #smc-page .has-sub:hover .sub-menu,#smc-page .has-sub:focus-within .sub-menu{opacity:1;visibility:visible;transform:translate(-50%,0)} #smc-page .sub-menu a{display:block;padding:10px 14px;border-radius:12px;font-weight:700;font-size:.93rem;opacity:.85} #smc-page .sub-menu a:after{display:none} #smc-page .sub-menu a:hover{background:var(--rose-mist);opacity:1} #smc-page .sub-menu a[aria-current="page"]{background:var(--rose-mist);color:var(--blue-deep);opacity:1} #smc-page .mobile-menu .mm-sub{display:flex;flex-direction:column;margin:-4px 0 8px;padding-left:16px;border-left:3px solid var(--rose-mist)} #smc-page .mobile-menu .mm-sub a{font-family:"Nunito Sans";font-size:1.05rem;font-weight:700;padding:7px 0} /* ===== motion layer v2 ===== */ /* hero headline word cascade */ html.js #smc-page .hero h1 .w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(1.5deg);transition:opacity .65s var(--ease),transform .65s var(--ease);transition-delay:calc(var(--wi,0)*85ms)} html.js #smc-page .hero h1.words-in .w{opacity:1;transform:none} /* scroll progress bar */ .scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--rose),var(--blue-soft));z-index:210;pointer-events:none} /* pulsing eyebrow pin */ @keyframes pinPulse{0%{box-shadow:0 0 0 0 rgba(240,24,156,.30)}70%{box-shadow:0 0 0 10px rgba(240,24,156,0)}100%{box-shadow:0 0 0 0 rgba(240,24,156,0)}} #smc-page .hero-copy .eyebrow .pin{animation:pinPulse 2.8s ease-out infinite} /* dropdown items stagger in */ #smc-page .sub-menu a{opacity:0;transform:translateY(7px)} #smc-page .has-sub:hover .sub-menu a,#smc-page .has-sub:focus-within .sub-menu a{opacity:.85;transform:none;transition:opacity .32s var(--ease),transform .32s var(--ease),background .2s} #smc-page .has-sub:hover .sub-menu a:hover,#smc-page .has-sub:focus-within .sub-menu a:hover,#smc-page .has-sub:hover .sub-menu a[aria-current="page"]{opacity:1} #smc-page .has-sub:hover .sub-menu a:nth-child(2),#smc-page .has-sub:focus-within .sub-menu a:nth-child(2){transition-delay:.03s} #smc-page .has-sub:hover .sub-menu a:nth-child(3),#smc-page .has-sub:focus-within .sub-menu a:nth-child(3){transition-delay:.06s} #smc-page .has-sub:hover .sub-menu a:nth-child(4),#smc-page .has-sub:focus-within .sub-menu a:nth-child(4){transition-delay:.09s} #smc-page .has-sub:hover .sub-menu a:nth-child(5),#smc-page .has-sub:focus-within .sub-menu a:nth-child(5){transition-delay:.12s} #smc-page .has-sub:hover .sub-menu a:nth-child(6),#smc-page .has-sub:focus-within .sub-menu a:nth-child(6){transition-delay:.15s} #smc-page .has-sub:hover .sub-menu a:nth-child(7),#smc-page .has-sub:focus-within .sub-menu a:nth-child(7){transition-delay:.18s} #smc-page .has-sub:hover .sub-menu a:nth-child(8),#smc-page .has-sub:focus-within .sub-menu a:nth-child(8){transition-delay:.21s} /* journey dots pop in */ @keyframes popIn{0%{transform:scale(.35);opacity:0}62%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}} html.js #smc-page .jstep.in .jdot{animation:popIn .55s var(--ease) backwards;animation-delay:.2s} /* FAQ answer slide in */ @keyframes ansIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}} #smc-page .faq-item[open] .ans{animation:ansIn .45s var(--ease) both} /* primary button shine sweep */ #smc-page .btn-primary{position:relative;overflow:hidden} #smc-page .btn-primary:before{content:"";position:absolute;top:0;bottom:0;left:-85%;width:55%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-20deg);transition:left .65s var(--ease);pointer-events:none} #smc-page .btn-primary:hover:before{left:135%} /* marquee pauses on hover */ #smc-page .strip:hover .strip-track{animation-play-state:paused} /* quote mark gently bobs */ #smc-page .quote .mark{animation:bob 6s ease-in-out infinite;display:inline-block} /* ken-burns settle on revealed image frames */ html.js #smc-page [data-reveal] .frame img{transform:scale(1.07);transition:transform 1.4s var(--ease)} html.js #smc-page [data-reveal].in .frame img{transform:scale(1)} /* hero photos: parallax var layered under float */ #smc-page .hero-art .photo img{transform:translate3d(var(--px,0),var(--py,0),0) scale(1.05);transition:transform .4s ease-out;will-change:transform} /* ===== stretched card link: whole card is clickable ===== */ #smc-page .svc{position:relative} #smc-page .svc .more:after{content:"";position:absolute;inset:0;z-index:2} /* anchor targets clear the fixed header */ #smc-page section[id],#smc-page [id="enquiry"]{scroll-margin-top:96px} /* burger -> X when menu open */ #smc-page .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} #smc-page .burger[aria-expanded="true"] span:nth-child(2){opacity:0} #smc-page .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ===== mobile chip + header overrides ===== */ #smc-page .strip-track,#smc-page .strip-track span{max-width:none;flex:none} @media(max-width:980px){ #smc-page header.nav{background:#faf6f0} header.nav::before{background:#faf6f0} #smc-page .hero-art .chip{max-width:75%} #smc-page .hero-art .c1{top:auto;bottom:12px;left:10px;right:auto} #smc-page .hero-art .c2{top:auto;bottom:66px;left:auto;right:10px} } /* ===== hero chips sit off the photo, never over faces ===== */ /* desktop: wrapper is transparent; chips hang off the main photo's right edge */ #smc-page .hero-chips{display:contents} #smc-page .hero-art{overflow:visible} #smc-page .hero-art .c1{top:-24px;right:-26px;left:auto;bottom:auto} #smc-page .hero-art .c2{top:auto;bottom:30px;right:-26px;left:auto} /* tablet + mobile: chips become a centred row just below the photo */ @media(max-width:980px){ #smc-page .hero-art{overflow:visible;margin-bottom:68px} #smc-page .hero-chips{display:flex;position:absolute;top:calc(100% + 14px);left:0;right:0;justify-content:center;flex-wrap:wrap;gap:10px;z-index:3} #smc-page .hero-art .hero-chips .chip{position:static;inset:auto;max-width:none;animation:none;padding:8px 14px 8px 8px;font-size:.84rem;gap:9px} #smc-page .hero-art .hero-chips .chip .ic{width:30px;height:30px} } @media(max-width:400px){ #smc-page .hero-art .hero-chips{gap:6px} #smc-page .hero-art .hero-chips .chip{padding:6px 10px 6px 6px;font-size:.76rem;gap:6px} #smc-page .hero-art .hero-chips .chip .ic{width:24px;height:24px} #smc-page .hero-art .hero-chips .chip .ic svg{width:14px;height:14px} } @media(max-width:340px){ #smc-page .hero-art .hero-chips .chip{padding:7px 11px} #smc-page .hero-art .hero-chips .chip .ic{display:none} } /* optional per-image focal point for tablet/mobile crops: style="--op-m:50% 20%" */ @media(max-width:980px){#smc-page .hero-art .photo img[style*="--op-m"]{object-position:var(--op-m)!important}} /* single-column layouts: hero copy + buttons first, photo underneath */ @media(max-width:980px){#smc-page .hero-art{order:0}} /* progress bar sits inside the fixed header (see main.js) instead of being its own top-edge fixed element */ /* keep the header's TOP edge one solid colour: iOS Safari samples that edge to tint its status/address bar, so the progress line sits on the header's bottom edge instead */ #smc-page header.nav .scroll-progress{position:absolute;top:auto;bottom:0;left:0;right:0;width:100%} /* scrolled header is fully opaque (no alpha, no backdrop blur) so browsers that tint their top bar match it */ #smc-page header.nav.scrolled{background:#faf6f0;-webkit-backdrop-filter:none;backdrop-filter:none} header.nav::before{background:#faf6f0} /* iOS Safari tints its status bar from fixed elements at the top edge, even hidden/off-screen ones, so the closed mobile menu is removed from rendering entirely (main.js adds .closing during slide-out) */ #smc-page .mobile-menu:not(.open):not(.closing){display:none} @starting-style{ #smc-page .mobile-menu.open{transform:translateX(100%);visibility:hidden} #smc-page .mobile-menu.open a{opacity:0;transform:translateX(20px)} #smc-page .mobile-menu.open .btn{opacity:0} } /* bottom call/enquiry bar is opaque (no alpha, no blur) so Safari's bottom toolbar tints solid too */ #smc-page .sticky-cta{background:#fffdfa;-webkit-backdrop-filter:none;backdrop-filter:none} /* root colour = header cream: Safari 26 falls back to the html/body colour for its bars */ html{background-color:#faf6f0} #smc-page .mobile-menu{background:#faf6f0} /* ===== iOS 26 Safari: solid colour behind the status bar + URL pill ===== Read from WebKit source (LocalFrameView::fixedContainerEdges, Page::updateFixedContainerEdges, WKWebView _updateFixedColorExtensionViews). Nothing the page paints can reach that strip: fixed AND sticky layers are clipped to the layout viewport below Safari's bars. Safari paints the strip itself with a colour WebKit samples at ONE point: horizontal centre, 4px below the top of the layout viewport. The first position:fixed/sticky element found walking UP from whatever is hit there must be >= 90% of the viewport width, visible, and carry a plain opaque background-color; no backdrop-filter anywhere on that path. The colour is then kept while that element exists. So the header is a plain fixed element with a solid background and NOTHING fixed may sit above it at that point. */ #smc-page{overflow:visible} /* no scroll container around the page (verified: nothing needs the old clip) */ body{overflow-x:clip} /* horizontal containment on the viewport instead */ body:before{display:none} /* the full-screen fixed "paper grain" overlay (z-index 9999, opacity .025) was the top-most fixed layer at the sample point, so WebKit walked ITS lineage (body) and found no fixed container. It must go. */ #smc-page header.nav::before{display:none} /* nothing above the header is ever painted; keep the lineage clean */ #smc-page .enq-contact .item>div{min-width:0} #smc-page .enq-contact .item .val{overflow-wrap:anywhere} /* ===== Website Revisions V1 (Oct 2026) ===== */ /* Developmental delays: milestones grouped by age */ #smc-page .age-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:10px} #smc-page .age-card{background:var(--paper);border-radius:var(--r);padding:30px 30px 28px;box-shadow:var(--shadow-sm)} #smc-page .age-card .age-num{width:48px;height:48px;border-radius:13px;background:var(--rose-mist);display:grid;place-items:center;margin-bottom:16px;font-family:"Fraunces",serif;font-size:1.45rem;line-height:1;color:var(--rose)} #smc-page .age-card h3{font-size:1.16rem;margin-bottom:14px;font-weight:500} #smc-page .age-card ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} #smc-page .age-card li{position:relative;padding-left:22px;color:var(--muted);font-size:.97rem;line-height:1.55} #smc-page .age-card li:before{content:"";position:absolute;left:3px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--rose)} @media(max-width:760px){#smc-page .age-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}#smc-page .age-card{padding:26px 24px 24px}} /* FAQ answers that contain paragraphs and a list */ #smc-page .faq-item .ans p{margin:0 0 12px} #smc-page .faq-item .ans p:last-child{margin-bottom:0} #smc-page .faq-item .ans ul{list-style:none;margin:2px 0 14px;padding:0;display:grid;gap:7px} #smc-page .faq-item .ans li{position:relative;padding-left:20px} #smc-page .faq-item .ans li:before{content:"";position:absolute;left:3px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--rose)} #smc-page .faq-item .ans strong{color:var(--ink);font-weight:700} /* sign cards whose example sits on its own line */ #smc-page .sign-card h3:last-child{margin-bottom:0} /* services grid (tablet): a single card left on the last row sits in the middle instead of hanging left */ @media(max-width:980px) and (min-width:561px){#smc-page .svc-grid>.svc:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - 12px)}} /* ===== Website Changes V2 (Oct 2026): Language and Social communication pages ===== */ #smc-page .intro-copy .intro-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px} #smc-page .intro-copy .intro-list li{position:relative;padding-left:22px;color:var(--muted)} #smc-page .intro-copy .intro-list li:before{content:"";position:absolute;left:3px;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--rose)} #smc-page .intro-copy .intro-note{color:var(--ink);border-left:3px solid var(--rose-dusty);padding-left:16px} /* service cards on desktop: 4 across (homepage 4 then 3, Services 4 then 4), a short last row sits centred, and "Learn more" lines up along the bottom of each row */ @media(min-width:981px){ #smc-page .svc-grid{grid-template-columns:repeat(8,1fr);gap:20px} #smc-page .svc-grid>.svc{grid-column:span 2;display:flex;flex-direction:column} #smc-page .svc-grid>.svc:nth-child(4n+1):nth-last-child(3){grid-column:2 / span 2} #smc-page .svc-grid>.svc:nth-child(4n+1):nth-last-child(2){grid-column:3 / span 2} #smc-page .svc-grid>.svc:nth-child(4n+1):last-child{grid-column:4 / span 2} #smc-page .svc .body{flex:1;display:flex;flex-direction:column;padding:22px 22px 24px} #smc-page .svc h3{font-size:1.14rem} #smc-page .svc p{font-size:.92rem} #smc-page .svc .more{margin-top:auto;align-self:flex-start} } /* below 1180px the longer titles wrap, so every title keeps two lines and each row's text starts level */ @media(min-width:981px) and (max-width:1179px){#smc-page .svc h3{min-height:2.16em}}