/* Ported from the prototype. Edit here; the prototype is frozen. */
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--u-action);color:var(--u-on-action);font-weight:600;font-size:.9375rem;padding:.9rem 1.6rem;border-radius:8px;text-decoration:none;border:1px solid transparent;cursor:pointer;line-height:1.2;white-space:nowrap}
.btn:hover{filter:brightness(.94);color:var(--u-on-action)}
.btn.quiet{background:transparent;color:var(--u-text);border-color:var(--u-line)}
.btn.quiet:hover{border-color:var(--u-text-2);filter:none;color:var(--u-text)}
.btn.sm{font-size:.8125rem;padding:.6rem 1.1rem}
.btns{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

/* wordmark: one colour, its own row */
.wm{display:inline-block;color:var(--u-logo);line-height:0}
.wm svg{display:block;height:auto}

/* nav */
.top{border-bottom:1px solid var(--u-line);background:var(--u-bg)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:76px}
.top nav{display:flex;align-items:center;gap:1.75rem}
.top nav a{text-decoration:none;color:var(--u-text-2);font-weight:500;font-size:.9375rem}
.top nav a:hover{color:var(--u-text)}
.top nav a.btn{margin-left:.5rem;color:var(--u-on-action)}
@media (max-width:820px){.top nav a:not(.btn){display:none}}

/* hero */
.hero{padding:clamp(4.5rem,9vw,8rem) 0 clamp(3.5rem,7vw,6rem)}
.hero .d{max-width:14ch}
.hero .lead{margin-top:1.75rem;color:var(--u-text-2)}
.hero .btns{margin-top:2.25rem}
.hero .foot{padding-top:1.5rem;border-top:1px solid var(--u-line);display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;color:var(--u-text-2);font-size:.9375rem;font-weight:500}
.hero .foot b{color:var(--u-text);font-weight:600}

/* the three doors: one per kind of visitor */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(3rem,6vw,4.5rem)}
.doors a{display:grid;gap:.6rem;align-content:start;background:var(--u-surface);border-radius:16px;padding:1.5rem;text-decoration:none;color:var(--u-text);border:1px solid transparent}
.doors a span:last-child{font-size:.9375rem;color:var(--u-text-2);line-height:1.5}
.doors a:hover{border-color:var(--u-line);color:var(--u-text)}
.doors .t{font-size:1.25rem;font-weight:600;line-height:1.3}
@media (max-width:820px){.doors{grid-template-columns:1fr}}
.hero .foot{margin-top:2.5rem}

/* section headers */
.sh{display:grid;gap:1rem;margin-bottom:clamp(2.25rem,4vw,3.5rem)}
.sh .lead{color:var(--u-text-2)}

/* problems: three columns on hairlines, not cards */
.probs{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.prob{border-top:1px solid var(--u-text);padding-top:1.25rem;display:grid;gap:1rem;align-content:start}
.prob q{quotes:"\201C" "\201D";font-size:1.25rem;font-weight:600;line-height:1.35;text-wrap:balance}
.prob dl{margin:0;display:grid;gap:.75rem}
.prob dt{font-size:.8125rem;font-weight:600;color:var(--u-text-2)}
.prob dd{margin:.15rem 0 0}
@media (max-width:820px){.probs{grid-template-columns:1fr}}

/* site care panel */
.care{border-radius:16px;padding:clamp(2rem,5vw,4rem)}
.care .grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:1.5rem;align-items:start}
.care .intro{display:grid;gap:1.25rem;padding-right:1rem}
.plan{background:var(--u-surface);border-radius:16px;padding:1.75rem;display:grid;gap:1.25rem;border:1px solid transparent}
.plan .name{font-weight:600;font-size:1rem}
.plan .name span{font-weight:400;color:var(--u-text-2)}
.plan .price{display:flex;align-items:baseline;gap:.5rem;font-weight:600;font-size:2.25rem;line-height:1;letter-spacing:-.01em}
.plan .price small{font-size:.875rem;font-weight:500;color:var(--u-text-2);letter-spacing:0}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem;font-size:.9375rem}
.plan li{padding-left:1.15rem;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.7em;width:.45rem;height:.45rem;border-radius:50%;background:var(--u-text-2)}
.plan .btn{justify-self:start}
@media (max-width:980px){.care .grid{grid-template-columns:1fr 1fr}.care .intro{grid-column:1/-1;padding-right:0}}
@media (max-width:620px){.care .grid{grid-template-columns:1fr}}

/* two-price table */
.two{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.two .sh{margin-bottom:0}
table{width:100%;border-collapse:collapse;font-size:.9375rem}
th,td{text-align:left;padding:.9rem 0;border-bottom:1px solid var(--u-line);vertical-align:top}
thead th{font-size:.8125rem;font-weight:600;color:var(--u-text-2);padding-top:0}
th{font-weight:500}
td.p{font-weight:600;white-space:nowrap}
td.p small,th small{display:block;font-weight:400;color:var(--u-text-2);font-size:.8125rem;white-space:normal}
th:nth-child(2),td:nth-child(2),th:nth-child(3),td:nth-child(3){padding-left:1.25rem}
.tblwrap{overflow-x:auto}
@media (max-width:820px){.two{grid-template-columns:1fr}}

/* builds list */
.builds{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.build{border-top:1px solid var(--u-line);padding-top:1.25rem;display:grid;gap:.5rem;align-content:start}
.build .h2{font-size:1.75rem}
.build .when{color:var(--u-text-2);font-size:.9375rem;font-weight:500}
.build .from{font-weight:600;font-size:1.25rem;margin-top:.5rem}
.build .from small{font-weight:500;color:var(--u-text-2);font-size:.8125rem}
@media (max-width:980px){.builds{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.builds{grid-template-columns:1fr}}

/* the way of working: a real sequence */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.step{display:grid;gap:.75rem;align-content:start}
.step .n{font-size:.8125rem;font-weight:600;color:var(--u-text-2);font-variant-numeric:tabular-nums}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.about .photo{aspect-ratio:4/5;border-radius:16px;background:var(--u-panel);display:grid;place-items:end start;padding:1.25rem;color:var(--u-text-2);font-size:.8125rem;font-weight:500;position:relative;overflow:hidden}
.about .photo::before{content:"";position:absolute;inset:0;background:
  linear-gradient(160deg,transparent 55%,rgba(35,31,32,.06) 56%,transparent 60%),
  linear-gradient(20deg,transparent 40%,rgba(35,31,32,.05) 41%,transparent 47%)}
.about .text{display:grid;gap:1.25rem}
.about .sig{margin-top:.5rem;display:grid;gap:.25rem}
.about .sig img{width:200px;height:auto;display:block}
.about .sig .small{font-weight:500}
:root[data-theme="dark"] .about .sig img{filter:invert(1) brightness(1.1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .about .sig img{filter:invert(1) brightness(1.1)}}
/* the name section takes the foundation scene rather than a photograph:
   it is the one place on the site that says what the word means, and the
   scene says it in the same breath */
.about .fig-slot .fig{margin:0}
.about .fig-slot .scene{height:420px}
@media (max-width:820px){.about{grid-template-columns:1fr}.about .photo{aspect-ratio:16/10}
  .about .fig-slot .scene{height:330px}}

/* closing ask */
.ask{padding:clamp(4rem,8vw,7rem) 0}
.ask .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:end}
.ask .h1{font-size:clamp(2.25rem,4.5vw,3.5rem)}
.ask .lead{color:var(--u-text-2);margin-top:1.25rem}
.ask .side{display:grid;gap:.75rem;justify-items:start}
.ask .side a.mail{font-size:1.25rem;font-weight:600}
@media (max-width:820px){.ask .wrap{grid-template-columns:1fr}}

/* footer */
footer{border-top:1px solid var(--u-line);padding:3.5rem 0 2.5rem}
footer .wrap{display:grid;gap:2.5rem}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
footer .tag{color:var(--u-text-2);font-size:.9375rem;max-width:36ch;margin-top:1rem}
footer h4{margin:0 0 .75rem;font-size:.8125rem;font-weight:600;color:var(--u-text-2)}
footer ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem;font-size:.9375rem}
footer ul a{text-decoration:none;color:var(--u-text)}
footer ul a:hover{text-decoration:underline}
footer .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.5rem;border-top:1px solid var(--u-line);font-size:.8125rem;color:var(--u-text-2)}
footer .base .mark{width:22px;height:22px;color:var(--u-logo);display:inline-block;vertical-align:-5px;margin-right:.5rem}
footer .base a{color:var(--u-text-2);text-decoration:none;margin-left:1.25rem}
footer .base a:hover{color:var(--u-text)}
@media (max-width:820px){footer .cols{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:no-preference){
  .btn{transition:filter .15s ease,border-color .15s ease}
}


/* ===== site-wide additions ===== */
[data-page][hidden]{display:none}
.top nav{position:static}
.top .wrap{position:relative}
/* the trigger fills the header height, so there is no dead gap between the
   link text and the panel for the pointer to fall through */
.top nav .has-menu{position:static;align-self:stretch;display:flex;align-items:center}
.top nav .has-menu>a::after{content:"";display:inline-block;width:.4em;height:.4em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:.45em;vertical-align:.2em}
.top nav .menu{position:absolute;top:100%;left:0;right:0;padding-top:.6rem;z-index:20;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-10px) scale(.98);transform-origin:top center;
  transition:opacity .16s ease, transform .2s ease, visibility 0s linear .2s}
.top nav .has-menu:hover .menu,.top nav .has-menu:focus-within .menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .2s ease, transform .42s cubic-bezier(.16,1,.3,1), visibility 0s}
@media (max-width:820px){
  .top nav a:not(.btn){display:none}
  .top nav .has-menu{display:none}
  .top .wrap{position:relative}
}

/* inner page header on paper */
.ph{padding:clamp(3.5rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem)}
.ph .crumb{display:inline-block;margin-bottom:1.25rem}
.ph .crumb a{font-size:.875rem;font-weight:500;text-decoration:none;color:var(--u-text-2)}
.ph .crumb a:hover{text-decoration:underline}
.ph .d2{font-family:var(--u-font-display);font-size:clamp(2.5rem,5vw,4rem);line-height:1.05;max-width:19ch}
.ph .lead{margin-top:1.25rem;color:var(--u-text-2)}
.ph .btns{margin-top:2rem}
.ph .facts{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;font-size:.9375rem;font-weight:500;color:var(--u-text-2)}
.ph .facts b{color:var(--u-text);font-weight:600}

/* generic two-column prose */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.prose{display:grid;gap:1.1rem;max-width:62ch}
.prose ul{margin:0;padding-left:1.15rem;display:grid;gap:.5rem}
@media (max-width:820px){.cols2{grid-template-columns:1fr}}

/* included list: hairline rows */
.inc{margin:0;padding:0;list-style:none;display:grid}
.inc li{display:grid;grid-template-columns:1fr 2fr;gap:1.5rem;padding:1rem 0;border-top:1px solid var(--u-line)}
.inc li:last-child{border-bottom:1px solid var(--u-line)}
.inc b{font-weight:600}
.inc span{color:var(--u-text-2)}
@media (max-width:620px){.inc li{grid-template-columns:1fr;gap:.25rem}}

/* services grid, home and overview */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.svc{display:grid;gap:.6rem;align-content:start;padding:1.5rem;border-radius:16px;border:1px solid var(--u-line);text-decoration:none;color:var(--u-text);background:transparent}
.svc:hover{border-color:var(--u-text-2);color:var(--u-text)}
.svc .t{font-size:1.25rem;font-weight:600;line-height:1.3}
.svc p{font-size:.9375rem;color:var(--u-text-2)}
.svc .from{font-weight:600;font-size:.9375rem;margin-top:.25rem}
@media (max-width:980px){.svcs{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.svcs{grid-template-columns:1fr}}

/* faq */
.faq{display:grid;max-width:70ch}
.faq details{border-top:1px solid var(--u-line)}
.faq details:last-child{border-bottom:1px solid var(--u-line)}
.faq summary{cursor:pointer;padding:1.1rem 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:var(--u-text-2);font-size:1.25rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 1.25rem;color:var(--u-text-2);max-width:62ch}

/* honest terms, tucked away */
.terms{border:1px solid var(--u-line);border-radius:16px;padding:1.25rem 1.5rem;max-width:70ch}
.terms summary{cursor:pointer;font-weight:600;list-style:none}
.terms summary::-webkit-details-marker{display:none}
.terms ul{margin:1rem 0 0;padding-left:1.15rem;display:grid;gap:.5rem;color:var(--u-text-2);font-size:.9375rem}

/* forms */
.form{display:grid;gap:1.25rem}
.field{display:grid;gap:.4rem}
.field label,.field .lbl{font-size:.875rem;font-weight:600}
.field .hint{font-size:.8125rem;color:var(--u-text-2);font-weight:400}
.in{font:inherit;font-size:1rem;padding:.75rem .9rem;border:1px solid var(--u-line);border-radius:8px;background:var(--u-surface);color:var(--u-text);width:100%}
.in:focus{outline:2px solid var(--u-focus);outline-offset:1px;border-color:var(--u-text-2)}
textarea.in{min-height:8rem;resize:vertical;line-height:1.5}
select.in{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--u-text-2) 50%),linear-gradient(135deg,var(--u-text-2) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.5rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.check{display:flex;gap:.75rem;align-items:flex-start;font-size:.9375rem}
.check input{margin-top:.3rem;accent-color:var(--u-olive)}

/* choice tiles */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.choices.one{grid-template-columns:1fr}
.choice{position:relative;display:grid;gap:.25rem;padding:1.1rem 1.25rem;border:1px solid var(--u-line);border-radius:16px;background:var(--u-surface);cursor:pointer}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice b{font-weight:600}
.choice span{font-size:.875rem;color:var(--u-text-2)}
.choice .pr{font-weight:600;font-size:1.5rem;color:var(--u-text);letter-spacing:-.01em}
.choice .pr small{font-size:.8125rem;font-weight:500;color:var(--u-text-2)}
.choice:has(input:checked){border-color:var(--u-text);box-shadow:inset 0 0 0 1px var(--u-text)}
.choice:has(input:focus-visible){outline:2px solid var(--u-focus);outline-offset:3px}
@media (max-width:560px){.choices{grid-template-columns:1fr}}

/* funnel */
.funnel{max-width:640px;margin:0 auto;padding:clamp(2.5rem,6vw,5rem) 0 clamp(4rem,8vw,7rem)}
.funnel .prog{margin:0 0 2.5rem;padding:0;list-style:none;display:flex;gap:.5rem}
.funnel .prog li{flex:1;height:3px;background:var(--u-line);border-radius:2px}
.funnel .prog li.on{background:var(--u-text)}
.funnel .stepn{font-size:.8125rem;font-weight:600;color:var(--u-text-2);font-variant-numeric:tabular-nums;margin-bottom:.5rem}
.funnel .h1{margin-bottom:.75rem}
.funnel .lead{color:var(--u-text-2);margin-bottom:2rem;font-size:1.125rem}
.funnel .form{margin-top:.5rem}
.funnel .nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--u-line)}
.funnel .nav .back{background:transparent;border:0;color:var(--u-text-2);font:inherit;font-weight:500;font-size:.9375rem;cursor:pointer;padding:.5rem 0;text-decoration:underline;text-underline-offset:.2em}
.funnel .nav .back:hover{color:var(--u-text)}
.funnel .done{display:grid;gap:1.25rem}
.funnel .done .h1{margin:0}
.funnel .done ol{margin:0;padding-left:1.25rem;display:grid;gap:.6rem}
.review{border:1px solid var(--u-line);border-radius:16px;overflow:hidden}
.review .r{display:grid;grid-template-columns:1fr 2fr;gap:1rem;padding:.9rem 1.25rem;border-top:1px solid var(--u-line);font-size:.9375rem}
.review .r:first-child{border-top:0;background:var(--u-panel)}
.review .r b{font-weight:600}
.review .r span{color:var(--u-text-2)}
@media (max-width:560px){.review .r{grid-template-columns:1fr;gap:.2rem}}
.sig-in{font-family:'Jaella',Georgia,serif;font-size:1.75rem;padding:.6rem .9rem;line-height:1.2}
.aside-note{background:var(--u-panel);border-radius:16px;padding:1.25rem 1.5rem;font-size:.9375rem;color:var(--u-text-2)}
.aside-note b{color:var(--u-text)}

/* contact page */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.contact .ways{display:grid;gap:1.5rem}
.contact .way b{display:block;font-weight:600}
.contact .way span{color:var(--u-text-2);font-size:.9375rem}
.contact .way a.big{font-size:1.5rem;font-weight:600;text-decoration:none}
@media (max-width:820px){.contact{grid-template-columns:1fr}}

/* care page: plans reuse .care; compare list */
.care .plan .btn{justify-self:start}
.pricing-note{color:var(--u-text-2);font-size:.9375rem;max-width:62ch}

/* about page */
.about-story{display:grid;grid-template-columns:2fr 3fr;gap:clamp(2rem,5vw,5rem);align-items:start}
@media (max-width:820px){.about-story{grid-template-columns:1fr}}
.about-story .photo{aspect-ratio:4/5;border-radius:16px;background:var(--u-panel);display:grid;place-items:end start;padding:1.25rem;color:var(--u-text-2);font-size:.8125rem;font-weight:500;position:sticky;top:1.5rem}
.beliefs{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.belief{border-top:1px solid var(--u-text);padding-top:1.25rem;display:grid;gap:.75rem;align-content:start}
@media (max-width:820px){.beliefs{grid-template-columns:1fr}}


/* footer trademark attribution: required by the WooCommerce guidelines */
footer .base.tm{border-top:0;padding-top:0;margin-top:-.25rem;opacity:.75}
footer .base.tm span{max-width:100ch;line-height:1.5}

.ph .crumb.eyebrow{font-size:.875rem;font-weight:600;color:var(--u-text-2);letter-spacing:.02em}

/* plan cards with no price: the slot carries who it's for */
.plan .price.plain{display:block;font-size:1.125rem;font-weight:600;line-height:1.3;letter-spacing:0}
.plan .price.plain small{display:block;margin-top:.35rem;font-size:.8125rem;font-weight:500;color:var(--u-text-2)}
.choice .pr{font-size:1.125rem}
.choice .pr small{display:block;margin-top:.15rem}

/* mega menu */
.top nav .has-menu.closed .menu{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px) scale(.98);transition:opacity .12s ease,transform .12s ease,visibility 0s linear .12s}
.mega{background:var(--u-surface);border:1px solid var(--u-line);border-radius:16px;box-shadow:var(--u-shadow);
  padding:1.5rem;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:1.5rem 2rem;cursor:default}
.mega .col{display:grid;gap:.15rem;align-content:start}
.mega h4{margin:0 0 .6rem;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--u-text-2)}
.mega .col.wide .items{display:grid;grid-template-columns:1fr 1fr;gap:.15rem}
.mega a.item{display:grid;gap:.2rem;padding:.65rem .8rem;border-radius:8px;text-decoration:none;color:var(--u-text);align-content:start}
.mega a.item:hover{background:var(--u-panel);color:var(--u-text)}
.mega a.item b{font-weight:600;font-size:.9375rem;line-height:1.3}
.mega a.item span{font-size:.8125rem;font-weight:400;color:var(--u-text-2);line-height:1.45}
.mega a.feature{border:1px solid var(--u-line);gap:.35rem}
.mega a.feature .price{font-weight:600;color:var(--u-text);font-size:.875rem}
.mega a.quiet-link{padding-top:.4rem}
.mega a.quiet-link b{font-size:.875rem;color:var(--u-text-2)}
.mega a.quiet-link:hover b{color:var(--u-text)}
.mega a.urgent{margin-top:.35rem;border-top:1px solid var(--u-line);border-radius:0 0 8px 8px;padding-top:.85rem}
.mega a.urgent span{color:var(--u-text);font-weight:600}
.mega .foot{grid-column:1/-1;border-top:1px solid var(--u-line);padding-top:1.1rem;margin-top:.25rem;
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.mega .foot span{font-size:.875rem;color:var(--u-text-2);max-width:70ch}
@media (max-width:1000px){.mega{grid-template-columns:1fr 1fr}.mega .col.wide{grid-column:1/-1}}

.svcs.one{grid-template-columns:1fr}
.svcs.one .svc{max-width:none}

/* mega menu: the what-we-build strip */
.mega .types{grid-column:1/-1;border-top:1px solid var(--u-line);padding-top:1.1rem;margin-top:.25rem}
.mega .types h4{margin-bottom:.5rem}
.mega .chips{display:flex;flex-wrap:wrap;gap:.4rem}
.mega .chips a{font-size:.8125rem;font-weight:500;text-decoration:none;color:var(--u-text);
  border:1px solid var(--u-line);border-radius:999px;padding:.35rem .8rem}
.mega .chips a:hover{border-color:var(--u-text-2);background:var(--u-panel);color:var(--u-text)}
footer .cols{grid-template-columns:1.2fr 1fr 1fr 1fr 1fr}
@media (max-width:980px){footer .cols{grid-template-columns:1fr 1fr}}

/* case studies */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.case{display:grid;gap:.75rem;align-content:start;padding:1.75rem;border-radius:16px;border:1px solid var(--u-line);
  text-decoration:none;color:var(--u-text);background:transparent}
.case:hover{border-color:var(--u-text-2);color:var(--u-text)}
.case .who{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--u-text-2)}
.case .t{font-family:var(--u-font-display);font-size:1.75rem;line-height:1.15;font-weight:900}
.case p{font-size:.9375rem;color:var(--u-text-2)}
.case .tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.25rem}
.case .tags span{font-size:.75rem;font-weight:500;color:var(--u-text-2);border:1px solid var(--u-line);border-radius:999px;padding:.2rem .6rem}
.case.soon{border-style:dashed;cursor:default}
.case.soon:hover{border-color:var(--u-line)}
@media (max-width:820px){.cases{grid-template-columns:1fr}}

/* the numbers strip on a case study */
/* the case-study numbers strip was retired with the numbers; its .stat rules
   went with it, because .stat is also a figure component */
@media (max-width:820px){.stats{grid-template-columns:1fr 1fr}}

/* a quote pulled out of a case study */
.pull{border-left:3px solid var(--u-text);padding:.25rem 0 .25rem 1.5rem;display:grid;gap:.75rem;max-width:60ch}
.pull q{quotes:"\201C" "\201D";font-size:1.25rem;font-weight:500;line-height:1.45}
.pull cite{font-style:normal;font-size:.875rem;font-weight:500;color:var(--u-text-2)}

/* with more than two case studies, the invitation spans the row */
.cases .case.soon{grid-column:1/-1}

/* photography: real work, on the pages that are about real work */
.shot{border-radius:16px;overflow:hidden;background:var(--u-panel);line-height:0}
.shot img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.ph-grid .shot img{aspect-ratio:5/4}
.case .shot{margin:-1.75rem -1.75rem .5rem;border-radius:16px 16px 0 0}
.case .shot img{aspect-ratio:16/9}
.case{overflow:hidden}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.strip .shot img{aspect-ratio:1/1}
.strip figcaption{padding-top:.6rem;font-size:.8125rem;color:var(--u-text-2);line-height:1.45}
.strip figure{margin:0}
@media (max-width:620px){.strip{grid-template-columns:1fr 1fr}.strip figure:last-child{display:none}}
/* home hero: the photograph is the ground. Two scrims keep every line of
   type above 7:1 against it, one across the text side and one up from the foot. */
.hero.has-photo{
  --hero-img:url(../assets/img/urlar-hero.jpg);
  background-image:
    linear-gradient(100deg, rgba(35,31,32,.96) 0%, rgba(35,31,32,.92) 46%, rgba(35,31,32,.82) 74%, rgba(35,31,32,.72) 100%),
    linear-gradient(to top, rgba(35,31,32,.92) 0%, rgba(35,31,32,.30) 34%, rgba(35,31,32,0) 60%),
    var(--hero-img);
  background-size:cover,cover,cover;background-position:center;background-repeat:no-repeat;
}
.hero.has-photo .d{max-width:13ch}
.hero.has-photo .lead{max-width:44ch}
.hero.has-photo .trust{max-width:46ch}

/* the words on the left, the scene on the right, over the lightest part of the
   photograph. The scrim is pushed further across on this layout so the glass
   panels have something dark enough to sit on. */
.hero-top{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
/* the display face is sized for a full-width column; in half of one it needs
   to come down or the headline sets five lines deep */
.hero-top .d{max-width:none;font-size:clamp(2.5rem,4.6vw,4.25rem)}
/* glass over a photograph needs more body than glass over flat ink, or the
   small type inside the panels sits on whatever the landscape is doing */
.hero-top .fig{--g-scale:.78;
  --g-glass:rgba(48,44,45,.88);--g-glass2:rgba(48,44,45,.72);
  --g-edge:rgba(245,245,239,.20)}
.hero-top .fig .scene{height:430px}
.hero-top .fig .stage{left:2%;right:0}
@media (max-width:980px){
  /* stacked, and the scene comes down with it: it is the point of the page,
     so a phone should not be the one screen that never sees it */
  .hero-top{grid-template-columns:1fr}
  .hero-top .d{font-size:clamp(3.25rem,6.2vw,6rem)}
  .hero-top .fig{--g-scale:.62;margin-top:1rem}
  .hero-top .fig .scene{height:300px}
}
@media (max-width:900px){
  .hero.has-photo{background-image:
    linear-gradient(to bottom, rgba(35,31,32,.94) 0%, rgba(35,31,32,.88) 55%, rgba(35,31,32,.94) 100%),
    var(--hero-img)}
}
/* about: a stacked pair, the second offset so it reads as a spread */
.photo-stack{display:grid;gap:1rem}
.photo-stack .shot:last-child{width:72%;margin-left:auto}
.about .shot img,.about-story .shot img{aspect-ratio:4/5}
.about-story .photo-stack{position:sticky;top:1.5rem}

/* feature cards: what the hairline lists became, with a slot for a photograph */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.feat{display:grid;gap:.55rem;align-content:start;padding:1.5rem;border-radius:16px;
  border:1px solid var(--u-line);background:transparent;overflow:hidden}
.feat .t{font-weight:600;font-size:1.0625rem;line-height:1.35;color:var(--u-text)}
.feat .t a{color:inherit}
.feat p{font-size:.9375rem;color:var(--u-text-2);line-height:1.55}
.feat .shot{margin:-1.5rem -1.5rem .35rem;border-radius:16px 16px 0 0}
.feat .shot img{aspect-ratio:16/9}
.feat.wide{grid-column:span 2}
@media (max-width:980px){.feats{grid-template-columns:1fr 1fr}.feat.wide{grid-column:span 2}}
/* One column of cards is a very long page on a phone. Below this every row of
   cards turns on its side: the same cards, swiped instead of scrolled past.
   Card width is per-grid, since a step is a line and a case study is a page. */
@media (max-width:620px){
  .feats,.svcs,.doors,.cases,.beliefs,.steps{
    grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:var(--gal-w,min(78vw,340px));gap:1rem;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-left:clamp(1.25rem,4vw,3rem);
    margin:0 calc(clamp(1.25rem,4vw,3rem) * -1);
    padding:0 clamp(1.25rem,4vw,3rem) .5rem;
    scrollbar-width:none}
  .feats::-webkit-scrollbar,.svcs::-webkit-scrollbar,.doors::-webkit-scrollbar,
  .cases::-webkit-scrollbar,.beliefs::-webkit-scrollbar,
  .steps::-webkit-scrollbar{display:none}
  .feat,.svc,.doors a,.case,.belief,.step{scroll-snap-align:start}
  .feat.wide{grid-column:auto}
  /* it spans both columns in the grid; in a column track that pins it first */
  .cases .case.soon{grid-column:auto}
  .steps{--gal-w:min(66vw,260px)}
  .cases{--gal-w:min(86vw,400px)}
  .doors{margin-top:clamp(2.5rem,6vw,4.5rem)}
}
/* on the stone Care panel the cards need their own edge */
[data-ground="stone"] .feat{border-color:var(--u-line);background:var(--u-surface)}
/* a figure sitting under a section heading is an aside, not a hero */
.sh .fig{max-width:460px;margin-top:.75rem}
/* the pronunciation line, a quiet aside under the name */
.pron{font-size:.9375rem;color:var(--u-text-2);letter-spacing:.01em;margin-top:-.35rem}
.pron b{font-weight:600;color:var(--u-text)}
/* on a page header the pronunciation sits under the display line, not tucked into it */
.ph .pron{margin-top:1rem;font-size:1rem}

/* the panel's contents rise in behind it, one column after the next */
.mega > *{opacity:0;transform:translateY(10px);
  transition:opacity .01s linear .01s, transform .01s linear .01s}
.top nav .has-menu:hover .mega > *,
.top nav .has-menu:focus-within .mega > *{opacity:1;transform:none;
  transition:opacity .34s ease, transform .5s cubic-bezier(.16,1,.3,1)}
.top nav .has-menu:hover .mega > :nth-child(1),.top nav .has-menu:focus-within .mega > :nth-child(1){transition-delay:.05s}
.top nav .has-menu:hover .mega > :nth-child(2),.top nav .has-menu:focus-within .mega > :nth-child(2){transition-delay:.11s}
.top nav .has-menu:hover .mega > :nth-child(3),.top nav .has-menu:focus-within .mega > :nth-child(3){transition-delay:.17s}
.top nav .has-menu:hover .mega > :nth-child(4),.top nav .has-menu:focus-within .mega > :nth-child(4){transition-delay:.23s}
.top nav .has-menu:hover .mega > :nth-child(5),.top nav .has-menu:focus-within .mega > :nth-child(5){transition-delay:.29s}
/* the chips land last, and each one of their own accord */
.mega .chips a{opacity:0;transform:translateY(6px) scale(.96);transition:opacity .01s linear .01s,transform .01s linear .01s}
.top nav .has-menu:hover .mega .chips a,
.top nav .has-menu:focus-within .mega .chips a{opacity:1;transform:none;
  transition:opacity .3s ease, transform .44s cubic-bezier(.16,1,.3,1), border-color .15s ease, background .15s ease}
.mega .chips a:nth-child(1){transition-delay:.30s}.mega .chips a:nth-child(2){transition-delay:.35s}
.mega .chips a:nth-child(3){transition-delay:.40s}.mega .chips a:nth-child(4){transition-delay:.45s}
.mega .chips a:nth-child(5){transition-delay:.50s}
@media (prefers-reduced-motion:reduce){
  .top nav .menu,.mega > *,.mega .chips a{transition:opacity .12s ease, visibility 0s !important;transform:none !important}
}

/* close the gap completely: the nav fills the header, and the Services trigger
   fills the nav, so the pointer never crosses unhoverable ground on its way down */
@media (min-width:821px){
  .top .wrap{align-items:stretch}
  .top .wm{align-self:center}
  .top nav{align-items:center}
  .top nav .has-menu{align-self:stretch}
}

/* Feature cards take the same material as the figure panels: translucent surface,
   one hairline edge, a light catching the top corner, and a soft two-layer lift.
   Flat and still, because these are read rather than looked at. */
.feat{
  background:var(--g-glass);
  border:1px solid var(--g-edge);
  box-shadow:var(--g-lift);
  position:relative;
}
.feat::after{
  content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:linear-gradient(160deg,var(--g-hi),transparent 42%);opacity:.5;mix-blend-mode:overlay;
}
.feat > *{position:relative;z-index:1}
.feat .shot{z-index:1}
[data-ground="stone"] .feat{background:var(--u-surface)}

/* ---------- mobile navigation ---------- */
.mtrig{display:none;align-items:center;gap:.5rem;background:none;border:0;padding:.5rem 0;
  font:inherit;font-weight:500;font-size:.9375rem;color:var(--u-text);cursor:pointer}
.mtrig .bars{display:grid;gap:4px}
.mtrig .bars i{display:block;width:18px;height:2px;border-radius:2px;background:currentColor}

/* grid and flex children default to min-content, which lets a long word or a
   wide child push the whole panel past the viewport. min-width:0 everywhere. */
.mob{position:fixed;inset:0;z-index:200;background:var(--u-bg);width:100%;max-width:100%;
  display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);
  overscroll-behavior:contain}
.mob *{min-width:0}
.mob[hidden]{display:none}
.mob-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  padding:1rem clamp(1.25rem,5vw,2rem);border-bottom:1px solid var(--u-line)}
.mclose{background:none;border:0;font-size:2rem;line-height:1;color:var(--u-text);
  cursor:pointer;padding:0 .25rem;min-width:44px;min-height:44px}
.mob-pages{position:relative;overflow:hidden}
/* Three states, and a page is never display:none while it is moving. Toggling
   display cancels the transition, which is what made the page you were leaving
   sit there through the whole animation and then vanish in one frame.
   Off-stage right is the default; .on is the one you are looking at; .behind is
   the one you came from, stepping back and fading out under it. */
.mpage{position:absolute;inset:0;width:100%;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:1.25rem clamp(1.25rem,5vw,2rem) 1.5rem;display:grid;gap:.5rem;align-content:start;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateX(100%);
  transition:transform .34s cubic-bezier(.16,1,.3,1),opacity .26s ease,visibility 0s linear .34s;
  will-change:transform,opacity}
.mpage.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:transform .34s cubic-bezier(.16,1,.3,1),opacity .22s ease,visibility 0s}
.mpage.behind{transform:translateX(-22%)}

.mlabel{margin:.75rem 0 .1rem;font-size:.6875rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--u-text-2)}
.mlabel:first-child{margin-top:0}

/* the three doors: the conversion move, first thing on the panel */
.mdoor{display:grid;gap:.2rem;padding:1rem 1.1rem;border-radius:16px;text-decoration:none;
  background:var(--g-glass);border:1px solid var(--g-edge);box-shadow:var(--g-lift);color:var(--u-text)}
.mdoor b{font-size:1.0625rem;font-weight:600;line-height:1.3}
.mdoor span{font-size:.875rem;color:var(--u-text-2);line-height:1.45}
.mdoor:active{transform:scale(.985)}

.mrow{display:grid;grid-template-columns:minmax(0,1fr);gap:.15rem;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--u-line);padding:.95rem .25rem;font:inherit;color:var(--u-text);
  text-decoration:none;cursor:pointer;font-weight:500;min-height:52px;align-content:center;
  position:relative}
.mrow span{font-size:.8125rem;color:var(--u-text-2);font-weight:400;line-height:1.4;
  padding-right:1.5rem}
button.mrow::after{content:"";position:absolute;right:.4rem;top:50%;width:.5rem;height:.5rem;
  border-right:2px solid var(--u-text-2);border-bottom:2px solid var(--u-text-2);
  transform:translateY(-50%) rotate(-45deg)}
.mcount{position:absolute;right:1.6rem;top:50%;transform:translateY(-50%);font-size:.75rem;
  color:var(--u-text-2);padding:0}

.mfeature{display:grid;gap:.25rem;padding:1rem 1.1rem;border-radius:16px;text-decoration:none;
  background:var(--g-glass);border:1px solid var(--g-edge);box-shadow:var(--g-lift);color:var(--u-text)}
.mfeature b{font-size:1rem;font-weight:600}
.mfeature .mprice{font-size:.9375rem;font-weight:600;color:var(--u-text)}
.mfeature span{font-size:.8125rem;color:var(--u-text-2);line-height:1.45}

.mback{justify-self:start;background:none;border:0;font:inherit;font-size:.875rem;font-weight:500;
  color:var(--u-text-2);cursor:pointer;padding:.5rem .25rem .5rem 1.1rem;position:relative;
  min-height:44px;margin-bottom:.25rem}
.mback::before{content:"";position:absolute;left:.1rem;top:50%;width:.5rem;height:.5rem;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-50%) rotate(45deg)}

.mob-foot{padding:1rem clamp(1.25rem,5vw,2rem) calc(1rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--u-line);display:grid;gap:.75rem;background:var(--u-bg)}
.mob-foot .btn{width:100%;padding:1rem;font-size:1rem}
.murgent{font-size:.8125rem;color:var(--u-text-2);text-decoration:none;text-align:center}
.murgent b{color:var(--u-text);font-weight:600}
body.mob-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.mpage{transition:none;will-change:auto}}

/* Nothing may push the page sideways. The scenes deliberately bleed past their
   column, which is fine on a desktop grid and is horizontal overflow on a phone. */
html{overflow-x:clip}
body{overflow-x:clip}
@media (max-width:820px){.fig .scene{overflow:hidden}}

/* The base rule above sets display:none and is declared after the breakpoint
   block, so it was winning. Show the trigger from the end of the sheet. */
@media (max-width:820px){.mtrig{display:inline-flex}}

/* ---------- the swap: hover a problem, the scene and its detail follow ----------
   All three are in the DOM and readable without JS. The interaction only
   promotes one at a time; it never hides content that isn't otherwise reachable. */
.swap{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.swap-list{display:grid;gap:0}
.swap-item{display:grid;gap:0;width:100%;text-align:left;background:none;border:0;
  border-top:1px solid var(--u-line);padding:1.35rem 0 0;font:inherit;color:var(--u-text);
  cursor:pointer;position:relative}
.swap-item:last-child{border-bottom:1px solid var(--u-line)}
.swap-item::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;
  background:var(--u-text);transition:width .5s cubic-bezier(.16,1,.3,1)}
.swap-item.on::before{width:100%}
.swap-item q{quotes:"\201C" "\201D";font-size:1.25rem;font-weight:600;line-height:1.35;
  display:block;padding-bottom:1.35rem;color:var(--u-text-2);
  transition:color .3s ease;text-wrap:balance}
.swap-item.on q{color:var(--u-text)}
.swap-item:hover q{color:var(--u-text)}
.swap-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1)}
.swap-item.on .swap-detail{grid-template-rows:1fr}
.swap-detail .inner{overflow:hidden;display:grid;gap:.35rem;opacity:0;
  transition:opacity .3s ease .05s}
.swap-item.on .swap-detail .inner{opacity:1}
.swap-detail .dd{font-size:.9375rem;line-height:1.55;color:var(--u-text-2);padding-bottom:1.35rem}
/* the outcome line: an arrow instead of a "The result" label, so three of these
   side by side read as three answers rather than six repeated headings */
.swap-detail .out{display:grid;grid-template-columns:auto 1fr;gap:.55rem;
  color:var(--u-text);font-weight:500}
.swap-detail .out::before{content:"\2192";color:var(--u-text-2);font-weight:600}
.swap-item:focus-visible{outline:2px solid var(--u-focus);outline-offset:4px}

.swap-stage{position:relative;min-height:470px}
.swap-panel{position:absolute;inset:0;opacity:0;visibility:hidden;
  transform:translateY(10px) scale(.985);transform-origin:center;
  transition:opacity .38s ease, transform .5s cubic-bezier(.16,1,.3,1), visibility 0s linear .5s}
.swap-panel.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,
  transform .6s cubic-bezier(.16,1,.3,1), visibility 0s}
.swap-panel:not(.on) .card{animation-play-state:paused}
.swap-panel .fig .scene{height:470px}

/* Below the hover breakpoint the whole thing becomes a scroll-snap gallery.
   display:contents lifts the buttons and panels into one grid so each column
   is a card: scene on top, words underneath. Nothing is hidden, so there is
   no hover state to miss and no tap needed to read any of it. */
@media (max-width:900px){
  .swap{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-template-rows:auto auto;
    grid-auto-columns:min(84vw,420px);gap:.75rem 1rem;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-left:clamp(1.25rem,4vw,3rem);
    margin:0 calc(clamp(1.25rem,4vw,3rem) * -1);
    padding:0 clamp(1.25rem,4vw,3rem) .5rem;
    scrollbar-width:none}
  .swap::-webkit-scrollbar{display:none}
  .swap-list,.swap-stage{display:contents}

  .swap-panel{position:relative;inset:auto;grid-row:1;opacity:1;visibility:visible;
    transform:none;transition:none;scroll-snap-align:start}
  .swap-panel:not(.on) .card{animation-play-state:running}
  .swap-panel .fig .scene{height:300px}
  .swap-item{grid-row:2;border:0;padding:0;cursor:default}
  .swap-item:last-child{border-bottom:0}
  .swap-item::before{display:none}
  .swap-item q{color:var(--u-text);font-size:1.0625rem;padding-bottom:.75rem}
  /* every card is open: a gallery you scroll, not a thing you have to poke */
  .swap-detail{grid-template-rows:1fr}
  .swap-detail .inner{opacity:1}
  .swap-detail .dd{padding-bottom:.6rem}
  .swap-detail .dd:last-child{padding-bottom:.25rem}

  .swap-item:nth-of-type(1){grid-column:1}
  .swap-item:nth-of-type(2){grid-column:2}
  .swap-item:nth-of-type(3){grid-column:3}
  .swap-panel:nth-of-type(1){grid-column:1}
  .swap-panel:nth-of-type(2){grid-column:2}
  .swap-panel:nth-of-type(3){grid-column:3}
}
@media (prefers-reduced-motion:reduce){
  .swap-item::before,.swap-detail,.swap-detail .inner,.swap-panel{transition:none}
}

/* Utilities the patterns use, so a block never needs an inline style.
   Every section after the first on a page sits flush against the one above. */
.sec.pt0{padding-top:0}
.sh.m0{margin:0}

/* The three pillars: a titled group of service tiles. These never had rules of
   their own, so a group's heading sat on top of the cards above it. */
.grp-sec{display:grid;gap:1.5rem}
.grp-sec + .grp-sec{margin-top:clamp(3rem,6vw,4.5rem)}
.grp-h{display:grid;gap:.3rem}
.grp-h h3{font-family:var(--u-font-display);font-size:1.75rem;line-height:1.15;font-weight:900}
.grp-h p{color:var(--u-text-2);font-size:.9375rem;max-width:60ch}

/* GeneratePress paints every bare <button> dark on hover, which lands on the
   swap, the menu trigger and every drill-in row. Ours carry their own colour;
   .btn is the only button here that wants a filled background. */
button:not(.btn):hover,button:not(.btn):focus{background:transparent;color:inherit}
.swap-item:hover,.swap-item:focus{background:transparent}

/* The compact dropdown. Two branches don't need a mega menu, so this is the
   same panel material at a size that fits the list. */
.mini-menu{background:var(--u-surface);border:1px solid var(--u-line);border-radius:16px;
  box-shadow:var(--u-shadow);padding:.5rem;display:grid;gap:.15rem;width:320px}
.mini-menu a.item{display:grid;gap:.1rem;padding:.7rem .85rem;border-radius:10px;text-decoration:none;
  color:var(--u-text)}
.mini-menu a.item b{font-size:.9375rem;font-weight:600}
.mini-menu a.item span{font-size:.8125rem;color:var(--u-text-2);line-height:1.4}
.mini-menu a.item:hover{background:var(--u-panel);color:var(--u-text)}
/* the mega spans the header; a two-item list hangs off its own trigger */
.top nav .has-menu.compact{position:relative}
.top nav .has-menu.compact .menu{left:50%;right:auto;
  transform:translate(-50%,-10px) scale(.98);transform-origin:top center}
.top nav .has-menu.compact:hover .menu,
.top nav .has-menu.compact:focus-within .menu{transform:translate(-50%,0)}
.top nav .has-menu.compact.closed .menu{opacity:0;visibility:hidden;pointer-events:none}

/* ---- the service-page components: a converting page has more shapes than
   a heading and a grid of cards ---------------------------------------- */

/* the row of reasons to believe, directly under the buttons where it is read */
.trust{list-style:none;margin:1.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.trust li{position:relative;padding-left:1.4rem;font-size:.9375rem;color:var(--u-text-2)}
.trust li::before{content:"";position:absolute;left:0;top:.45em;width:.55rem;height:.3rem;
  border-left:2px solid var(--u-text);border-bottom:2px solid var(--u-text);
  transform:rotate(-45deg)}

/* what doing nothing costs, in our own published prices */
.ledger{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.led{display:grid;gap:.35rem;align-content:start;padding:1.75rem 1.5rem;border-radius:16px;
  background:var(--g-glass);border:1px solid var(--g-edge);box-shadow:var(--g-lift);position:relative}
.led .lk{font-size:.9375rem;color:var(--u-text-2)}
.led .lv{font-family:var(--u-font-display);font-size:2rem;line-height:1.1;font-weight:900}
.led .ln{font-size:.9375rem;color:var(--u-text-2);line-height:1.55;margin-top:.35rem}
.under{margin-top:1.75rem;font-size:1.0625rem;color:var(--u-text-2);max-width:70ch}
.under b{color:var(--u-text);font-weight:600}

/* a quote pulled out and given its own air */
.proof-quote{margin-top:2.5rem}

/* the plan panel's promises, under both cards rather than inside one */
.reassure{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem 2rem;margin-top:2rem;
  padding-top:1.5rem;border-top:1px solid var(--u-line)}
.reassure span{font-size:.9375rem;color:var(--u-text-2)}
.reassure b{color:var(--u-text);font-weight:600;display:block}

/* the comparison: the right-hand column is the one they are living in */
.compare td.p:last-child{color:var(--u-text-2)}
.compare thead th:nth-child(2){color:var(--u-text)}

.cols2.mid{align-items:center}
.app-feats{margin-top:2rem}

/* The comparison. A plain table gave both columns the same weight, which is the
   one thing this section must not do: the left column is the offer and should
   look like a panel you could click, the right is just what the year looks like
   otherwise. So the winning column is a raised column of the same material the
   feature cards use, running the full height of the table and closing with the
   button. No crosses on the other side; it is a description, not an attack. */
.vs{--vs-pad:1.25rem}
.vs table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9375rem}
.vs th,.vs td{border:0;padding:1rem var(--vs-pad);vertical-align:top;text-align:left}
.vs small{display:block;font-weight:400;color:var(--u-text-2);font-size:.8125rem;
  line-height:1.45;margin-top:.2rem}
.vs .vs-eyebrow{display:block;font-size:.75rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--u-text-2);margin-bottom:.45rem}
.vs thead b{font-family:var(--u-font-display);font-size:1.5rem;line-height:1.15;
  font-weight:900;display:block}
.vs .vs-sub{display:block;font-size:.8125rem;color:var(--u-text-2);margin-top:.25rem}
.vs thead th,.vs thead td{padding-top:0;padding-bottom:1.1rem}

/* the row labels, quiet, on the ground */
.vs tbody th{font-weight:500;width:32%;color:var(--u-text)}
.vs tbody tr + tr th,.vs tbody tr + tr td:last-child{border-top:1px solid var(--u-line)}

/* the raised column: one continuous panel made of cells */
.vs .mine{background:var(--g-glass);border-left:1px solid var(--g-edge);
  border-right:1px solid var(--g-edge);width:28%}
.vs thead .mine{border-top:1px solid var(--g-edge);border-radius:16px 16px 0 0}
.vs tfoot .mine{border-bottom:1px solid var(--g-edge);border-radius:0 0 16px 16px;
  padding-top:.25rem;padding-bottom:1.25rem}
.vs tbody tr + tr .mine{border-top:1px solid var(--g-edge)}
.vs tbody .mine{font-weight:600;padding-left:calc(var(--vs-pad) + 1.5rem);position:relative}
.vs .tick{position:absolute;left:var(--vs-pad);top:1.25rem;width:.6rem;height:.35rem;
  border-left:2px solid var(--g-sage);border-bottom:2px solid var(--g-sage);
  transform:rotate(-45deg)}
.vs tbody .mine small{font-weight:400}

/* the other column is a description, so it reads like one */
.vs tbody td:last-child{color:var(--u-text-2);width:40%}

@media (max-width:820px){
  /* a three-column table is unreadable on a phone, so each row becomes a card
     with the two answers stacked and labelled */
  .vs table,.vs thead,.vs tbody,.vs tfoot,.vs tr,.vs th,.vs td{display:block;width:auto!important}
  .vs thead,.vs .rowhead{display:none}
  .vs tbody tr{border:1px solid var(--u-line);border-radius:16px;margin-bottom:.75rem;
    padding:1.1rem 1.25rem}
  .vs tbody th{padding:0 0 .75rem;font-weight:600}
  .vs tbody tr + tr th,.vs tbody tr + tr td:last-child{border-top:0}
  .vs tbody .mine,.vs tbody td:last-child{border:0;border-radius:12px;padding:.7rem .9rem .7rem 2.1rem;
    position:relative}
  .vs tbody td:last-child{background:transparent;padding-left:2.1rem;margin-top:.35rem}
  .vs tbody td:last-child::before{content:"Otherwise";position:absolute;left:.9rem;top:.85rem;
    width:.55rem;height:1px;background:var(--u-text-2);text-indent:-999em;overflow:hidden}
  .vs .tick{top:1rem;left:.9rem}
  .vs tfoot{display:block;margin-top:1rem}
  .vs tfoot .mine{background:transparent;border:0;padding:0}
  .vs tfoot .mine .btn{display:block;width:100%;text-align:center}
}

/* A centred block, for the one section that reads better as a column than as a
   left-aligned page: the questions are a list, not an argument, and left-aligning
   them left a dead half-page beside them. */
.mid-block{max-width:74ch;margin-inline:auto}
.sh.centred{text-align:center}
.sh.centred .lead{margin-inline:auto}
.mid-block .faq{max-width:none}
/* a signup page reads as one column: the form sits under its agreement */
.page-care-signup .frm-fluent-form,.page-care-signup .ff-el-progress-status,
.page-care-signup .ff-el-progress{max-width:44rem;margin-inline:auto}
/* the signup form belongs under its centred agreement, not beside it */
.page-care-signup .fluentform{margin-inline:auto}

/* Bands. Eleven sections on one ground blur into a single long page; a change of
   ground every three or four is what tells the eye a new argument has started.
   A band carries its own padding top and bottom, so it and whatever follows it
   drop the flush-top the paper sections share. Ink is kept to the two moments
   that earn it, the move and the close, which keeps it under a third of the page. */
.band{padding:clamp(4rem,8vw,7rem) 0}
[data-ground="stone"] .led{background:var(--u-surface);border-color:var(--u-line);box-shadow:none}
[data-ground="stone"] .under b,[data-ground="ink"] .under b{color:var(--u-text)}
[data-ground="ink"] .steps .n{color:var(--u-text-2)}

/* the quiet ask that follows you down the page */
.cta-bar{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:1.25rem;max-width:min(92vw,760px);
  padding:.7rem .7rem .7rem 1.25rem;border-radius:999px;
  background:var(--u-surface);border:1px solid var(--u-line);box-shadow:var(--u-shadow)}
.cta-bar span{font-size:.875rem;color:var(--u-text-2)}
.cta-bar b{color:var(--u-text);font-weight:600}
.cta-bar .btn{white-space:nowrap}

@media (max-width:900px){
  .ledger{grid-template-columns:1fr}
  .reassure{grid-template-columns:1fr}
  .trust{gap:.35rem 1rem}
}
@media (max-width:620px){
  .cta-bar{left:1rem;right:1rem;bottom:.75rem;transform:none;max-width:none;border-radius:16px}
  .cta-bar span{font-size:.8125rem}
}

/* the bare shell: /start/ and anything else that is one job with one exit */
.top.bare{background:transparent;border-bottom:0}
/* one column the whole way down, and the footer at the bottom of the window
   even when the first question is short */
body.bare{display:flex;flex-direction:column;min-height:100dvh}
body.bare .wrap{max-width:calc(760px + 2 * clamp(1.25rem,4vw,3rem))}
footer.bare{margin-top:auto}
.top.bare .wrap{min-height:104px;align-items:flex-start;padding-top:1.5rem}
.bare-back{text-decoration:none;color:var(--u-text-2);font-size:.875rem}
.bare-back:hover{color:var(--u-text)}
.bare-back::before{content:"\2190";margin-right:.45em}
footer.bare{border-top:0;padding:1.5rem 0 3rem}
footer.bare .base{border-top:0;padding-top:0}
footer.bare .base a{color:var(--u-text-2);margin-left:1.25rem}

/* the homepage introduction. A portrait crop, because it is a person, and the
   promises read as a list rather than as another paragraph of reassurance. */
.about.me .shot img{aspect-ratio:4/5}
.about.me .trust{margin:0}
.about.me .trust li{color:var(--u-text)}
.steps.three{grid-template-columns:repeat(3,1fr)}
.steps+.svcs{margin-top:3rem}
/* two plan names, one of which wraps: keep the prices on the same line */
@media (min-width:821px){.care .name{min-height:2.4em}}