/* Sites for Care. Structural copy of webflow.com's layout with our words, on a white page, using Ahmed's colours as accents:
   gold #d6aa58, light blue #a9cdd4, pale #e1ebf0, steel blue #477a91. Spacing follows his rules: multiples of 4, 16px gutters, 12-column grid.
   Headline sizes are taken from Webflow because he asked to copy it. */
@font-face{font-family:"Bricolage";src:url(/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Albert";src:url(/fonts/albert-sans.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --steel:#477a91;--steel-deep:#3a6578;--sky:#a9cdd4;--pale:#e1ebf0;--gold:#d6aa58;
  --head-ink:#1a1a1a;--text-ink:#4a4a4a;--line:#dfe5e8;
  --head:"Bricolage","Albert",Arial,sans-serif;--font:"Albert",Arial,sans-serif;
  --text:1.25rem;--ui:1.1875rem;
  --section:60px;--group:48px;--col-gap:8px;--card-gap:16px;
  --h1:2.75rem;--h2:2.125rem;--h3:1.25rem;--big:3.75rem;
  --r-btn:4px;--r-card:8px;
  --shadow:0 1px 2px rgba(26,26,26,.04),0 4px 8px rgba(26,26,26,.04),0 16px 32px rgba(26,26,26,.06);
}
@media (min-width:768px){:root{--col-gap:16px;--h1:3.5rem;--h2:2.75rem}}
@media (min-width:1024px){:root{--section:80px;--group:64px;--col-gap:20px;--card-gap:20px;--h1:4.25rem;--h2:3rem;--h3:1.5625rem;--big:4.75rem}}
@media (min-width:1300px){:root{--section:100px;--h1:5rem;--h2:3.5rem;--big:5.5rem}}

*{box-sizing:border-box}
html{font-size:100%;scroll-padding-top:96px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;overflow-wrap:anywhere;background:#fff;color:var(--text-ink);font:400 var(--text)/1.5 var(--font)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-underline-offset:.18em}
p,li{text-wrap:pretty}
h1,h2,h3{font-family:var(--head);color:var(--head-ink);font-weight:600;line-height:1.2;text-wrap:balance}
h1{font-size:var(--h1);line-height:1.04;letter-spacing:-.01em}
h2{font-size:var(--h2);letter-spacing:-.01em}
h3{font-size:var(--h3);font-weight:700;letter-spacing:-.005em}
:focus-visible{outline:3px solid var(--steel-deep);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--steel-deep);color:#fff;padding:12px 16px;z-index:30}
.skip:focus{left:8px}
.wrap,.nav-in{width:min(100%,1280px);margin-inline:auto;padding-inline:16px}

.announce{background:var(--steel-deep);color:#fff;text-align:center;padding:8px 16px;font-size:var(--ui)}
.announce a{font-weight:600;display:inline-block;padding-block:4px;min-height:44px;line-height:36px;margin-block:-4px}
.announce :focus-visible{outline-color:#fff}
.nav{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.nav-in{min-height:64px;display:flex;align-items:center;gap:8px 32px}
.logo{display:block;padding:12px 0;flex:none}
.menu{margin-left:auto;background:none;border:0;color:var(--head-ink);font:600 var(--ui)/1 var(--font);padding:12px 0 12px 16px;min-height:44px;cursor:pointer;touch-action:manipulation}
.nav nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;padding:0 16px 12px;border-bottom:1px solid var(--line);font-weight:500}
.nav.open nav{display:flex}
.nav nav a{display:block;padding:12px 0;text-decoration:none;color:var(--head-ink)}
.nav nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:6px}
.nav .nav-cta{display:none;white-space:nowrap}
@media (min-width:68.75em){
  .nav-in{min-height:68px;flex-wrap:wrap}
  .menu{display:none}
  .nav nav{display:flex;flex:1;position:static;flex-direction:row;flex-wrap:wrap;gap:0 24px;padding:0;border:0;background:none;font-size:var(--ui)}
  .nav nav a:last-child{margin-left:auto}
  .nav .nav-cta{display:inline-flex}
}
@media (hover:hover){.nav nav a:hover{text-decoration:underline;text-underline-offset:6px}}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;background:var(--steel);color:#fff;border:1px solid var(--steel);border-radius:var(--r-btn);font:500 var(--ui)/1.2 var(--font);text-decoration:none;cursor:pointer;touch-action:manipulation;transition:background-color .15s ease,border-color .15s ease,transform .1s ease-out}
.btn:active{transform:scale(.98)}
.btn.alt{background:var(--pale);border-color:var(--pale);color:var(--head-ink)}
@media (hover:hover){.btn:hover{background:var(--steel-deep);border-color:var(--steel-deep)}.btn.alt:hover{background:var(--sky);border-color:var(--sky)}}
.acts{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.link{display:inline-flex;align-items:center;min-height:44px;margin-top:32px;font-weight:500;color:var(--head-ink)}

/* Home: hero */
.hero{padding-top:var(--section)}
.hero h1{max-width:1040px}
.lead{margin-top:16px;max-width:630px}

/* Home: row of tiles, lined up on the 12-column grid: 2, 2, 4, 2, 2 */
.tiles{margin-top:var(--group);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--card-gap);align-items:end}
.tile figcaption{margin-top:8px;font-size:var(--ui);line-height:1.5;color:var(--head-ink)}
.tv{border-radius:var(--r-card);aspect-ratio:1;display:grid;place-items:center;padding:12px;overflow:hidden}
.pale .tv{background:var(--pale)}.sky .tv{background:var(--sky)}.gold .tv{background:var(--gold)}
.chip{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow);padding:12px 16px;display:grid;gap:4px;font-size:1rem;line-height:1.2;width:100%}
.chip span,.chip small{font-size:1rem;color:var(--text-ink)}
.chip b{font:700 1.25rem/1.15 var(--head);color:var(--head-ink);display:flex;align-items:center;gap:8px}
.chip i{width:12px;height:12px;border-radius:50%;background:#2f8f5b;flex:none}
.chip.call{background:var(--steel);text-align:center;justify-items:center}
.chip.call b{color:#fff}
.mid{grid-column:1/-1;order:-1}
.price-t{background:var(--steel);color:#fff;aspect-ratio:auto;padding:24px;place-items:start;align-content:end;gap:8px;min-height:240px}
.price-t .big{font:600 var(--big)/1 var(--head);letter-spacing:-.02em;color:#fff}
.pic img{border-radius:var(--r-card);aspect-ratio:1;object-fit:cover;object-position:78% 50%;width:100%}
@media (min-width:768px){
  .tiles{grid-template-columns:repeat(12,minmax(0,1fr))}
  .tile{grid-column:span 2}
  .mid{grid-column:span 4;order:0}
  .price-t{aspect-ratio:1;min-height:0}
}

/* Bands */
.split,.band{margin-top:var(--section);padding-top:var(--section);border-top:1px solid var(--line)}
.band>h2{margin-bottom:var(--group);max-width:900px}
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--group)}
.ticks{display:grid;gap:16px}
.ticks li{position:relative;padding-left:32px}
.ticks li::before{content:"";position:absolute;left:4px;top:.4em;width:14px;height:7px;border-left:2px solid var(--steel);border-bottom:2px solid var(--steel);transform:rotate(-45deg)}
.ticks.rows{gap:0;border-top:1px solid var(--line)}
.ticks.rows li{padding-block:16px;padding-left:40px;border-bottom:1px solid var(--line);color:var(--head-ink)}
.ticks.rows li::before{left:8px;top:calc(16px + .4em)}
.stats{display:grid;gap:var(--card-gap)}
.stats li{background:var(--steel);color:#fff;border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:16px;min-height:240px;justify-content:flex-end}
.stats b{font:600 var(--h2)/1.1 var(--head);letter-spacing:-.01em}
.plans{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--card-gap)}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:24px;display:flex;flex-direction:column}
.plan h3,.plan .plan-name{font-size:var(--h3);font-weight:700;letter-spacing:-.005em;margin-bottom:8px}
.plan .big{font:600 var(--big)/1.1 var(--head);color:var(--head-ink);letter-spacing:-.02em}
.plan .then{font-weight:600;color:var(--head-ink)}
.plan .ticks{margin-block:32px}
.plan .btn{margin-top:auto}
.small{margin-top:32px;max-width:630px}
.four{display:grid;gap:32px var(--card-gap)}
.four h3{margin-bottom:8px}
.statement{margin-top:var(--section);padding-block:var(--section);text-align:center}
.statement blockquote{font:600 var(--h1)/1.08 var(--head);letter-spacing:-.01em;color:var(--head-ink);max-width:1040px;margin-inline:auto;text-wrap:balance}
.statement p{margin-top:16px}
@media (min-width:768px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats,.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .split{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
  .split>div{grid-column:1/6}
  .split>ul{grid-column:7/13}
  .stats,.four{grid-template-columns:repeat(4,minmax(0,1fr))}
  .plan,.stats li{padding:32px}
}

/* Closing form beside a picture */
.close{margin-top:var(--section);padding-top:var(--section);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--group)}
.statement+.close{margin-top:0}
.close .sub{max-width:630px;margin-top:16px}
.box{margin-top:32px;border:1px solid var(--line);border-radius:var(--r-card);padding:24px}
.close-r{display:none}
.close-r img{border-radius:var(--r-card);width:100%;aspect-ratio:1;object-fit:cover;object-position:78% 50%}
.close-r figcaption{margin-top:8px;font-size:var(--ui)}
@media (min-width:1024px){
  .close{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
  .close-l{grid-column:1/7}
  .close-r{display:block;grid-column:7/13}
  .box{padding:32px}
}
.form{display:flex;flex-direction:column;gap:16px}
.form label{display:flex;flex-direction:column;gap:8px;font-size:var(--ui);font-weight:500;color:var(--head-ink)}
.form small{font-size:var(--ui);font-weight:400;color:var(--text-ink)}
.form input{font:400 var(--text)/1.3 var(--font);height:52px;padding:0 16px;border:1px solid #7a8a90;border-radius:var(--r-btn);background:#fff;color:var(--head-ink);width:100%}
.form input[aria-invalid=true]{border:2px solid #a4161a}
.form .btn{width:100%;margin-top:16px}
.form .btn[disabled]{opacity:.7;cursor:wait}
.hp{position:absolute!important;left:-9999px}
.status:empty{display:none}
.status.err{color:#a4161a;font-weight:500}
.fine{margin-top:16px}

/* Inner pages: big title, then heading on the left and content on the right */
main>.wrap{padding-bottom:var(--section)}
.title{padding-top:var(--section)}
.title h1{max-width:1040px;margin-bottom:16px}
.title p{max-width:630px}
.example{margin-top:var(--group)}
.example figcaption{margin-top:8px;font-size:var(--ui)}
.frame{container-type:inline-size;background:#fff;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-card)}
.stay{display:flex;flex-direction:column}
.stay .block{margin-top:var(--section);padding-top:var(--section);border-top:1px solid var(--line)}
.block>h2{margin-bottom:32px}
.block>*{max-width:100%}
.body{max-width:630px}
.body+*{margin-top:32px}
.why-grid{display:grid;border-top:1px solid var(--line)}
.why-grid>div{padding-block:24px;border-bottom:1px solid var(--line)}
.why-grid h3{margin-bottom:8px}
.why-grid p{max-width:630px}
.steps{display:grid;gap:32px}
.steps li{display:grid;grid-template-columns:48px minmax(0,1fr)}
.steps .n{width:32px;height:32px;border-radius:50%;background:var(--gold);color:var(--head-ink);display:grid;place-items:center;font-weight:600;font-size:var(--ui)}
.host blockquote{font:700 var(--h3)/1.2 var(--head);color:var(--head-ink)}
.host p{margin-top:16px}
.wide{margin-top:var(--group)}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{font-weight:600;color:var(--head-ink);padding:16px 40px 16px 0;cursor:pointer;position:relative;list-style:none;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:12px;font-size:1.625rem;line-height:1.2;color:var(--steel)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:16px;max-width:630px}
.prose{max-width:630px;margin-top:var(--group)}
.prose h2{font-size:var(--h3);font-weight:700;margin:32px 0 8px}
.stay:not(.after) .close{order:-1;margin-top:var(--group);border-top:0;padding-top:0}
@media (min-width:1024px){
  .stay .block{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
  .stay .block>h2{grid-column:1/6;margin-bottom:0}
  .stay .block>*:not(h2){grid-column:7/13}
}

/* Footer: white with columns and a large name, as on webflow.com */
footer{border-top:1px solid var(--line);padding-block:var(--section) 24px;font-size:var(--ui)}
.foot-cols{display:grid;gap:32px var(--card-gap)}
.foot-h{font:700 var(--h3)/1.2 var(--head);color:var(--head-ink);margin-bottom:8px}
.foot-cols a{display:block;padding-block:8px;min-height:44px;line-height:28px;text-decoration:none;color:var(--text-ink)}
@media (hover:hover){.foot-cols a:hover{text-decoration:underline;color:var(--head-ink)}}
.foot-mark{font:600 clamp(3rem,13.5vw,12rem)/1.1 var(--head);letter-spacing:-.03em;color:var(--steel);margin-top:var(--group);white-space:nowrap;overflow:hidden}
.rights{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
@media (min-width:768px){.foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Phone call bar */
.bar{display:none}
@media (max-width:767px){
  .bar{display:flex;flex-wrap:wrap;position:fixed;left:0;right:0;bottom:0;z-index:15;background:#fff;border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:12px;font-size:var(--ui);line-height:1.2}
  .bar b{display:block;font:700 var(--ui)/1.2 var(--head);color:var(--head-ink)}
  .bar .btn{flex:0 1 auto;min-height:48px;padding:8px 16px}
  body{padding-bottom:76px}
  html{scroll-padding-bottom:88px}
  .acts .btn{flex:1 1 100%}
}

/* Example website on Portfolio, drawn live. It has its own look because it stands for a client's site. */
.mk{font-size:calc(100cqw / 62);line-height:1.4;color:#23332d;background:#faf8f3;font-family:var(--font)}
.mk-bar{display:flex;align-items:center;justify-content:center;background:#efece5;padding:.55em}
.mk-url{background:#fff;color:#5a615d;border-radius:99em;padding:.15em 1.6em;font-size:.8em}
.mk-head{display:flex;align-items:center;gap:2em;padding:1em 2.4em}
.mk-name{font:700 1.2em/1 Georgia,serif;color:#1f4034}
.mk-links{display:flex;gap:1.6em;font-size:.86em;margin-left:auto}
.mk-b{display:inline-block;background:#1f4034;color:#fff;border-radius:.5em;padding:.5em 1.1em;font-size:.86em;font-weight:600;white-space:nowrap}
.mk-b.o{background:none;color:#1f4034;box-shadow:inset 0 0 0 1px #1f4034}
.mk-main{display:grid;grid-template-columns:1fr 1fr;gap:2.4em;padding:1em 2.4em 2.2em;align-items:center}
.mk-kick{font-size:.82em;color:#5a615d}
.mk-h{font:700 2.75em/1.08 Georgia,serif;color:#1f4034;margin:.25em 0 .35em;text-wrap:balance}
.mk-p{margin-bottom:1.1em}
.mk-btns{display:flex;gap:.6em}
.mk-pic{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:60% 40%;border-radius:.8em}
.mk-strip{display:flex;align-items:center;gap:2.4em;padding:1em 2.4em;background:#fff;border-top:1px solid #e7e3da;font-size:.92em}
.mk-rate{display:flex;align-items:center;gap:.5em;font-weight:600}
.mk-rate i{width:.8em;height:.8em;border-radius:50%;background:#2f8f5b;display:block}
.mk-strip span:last-child{margin-left:auto;color:#5a615d}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.btn:active{transform:none}}
@media (prefers-contrast:more){:root{--text-ink:#1a1a1a;--line:#1a1a1a}}