/* ============================================================================
   ProperSites rebrand — Lane 4 enhancement layer
   Loaded on every page (footer overflow fix + nav audit CTA bar) and provides
   the self-contained, token-driven design system for the new pages
   (/our-work, /website-review, /contact). Uses the site's own brand tokens:
     --color-primary  #f97316 (coral)   --color-ignore-dark #24303c (navy)
     --color-dark     #212121           --color-secondary   #c35fff (purple)
   Fonts: Helvetica Now Display / Text (headings/body) + Ivy Presto Headline
   (the italic serif accent).
   ========================================================================== */

:root{
  --ps-navy:#24303c;
  --ps-navy-deep:#1b2531;
  --ps-navy-hover:#2c3a48;
  --ps-coral:#f97316;
  --ps-coral-dark:#c2410c;
  --ps-accent:#f97316;
  --ps-ink:#212121;
  --ps-audit-grad:linear-gradient(95deg,#f97316 0%,#ea580c 100%);
  --ps-display:"Helvetica Now Display",Arial,sans-serif;
  --ps-text:"Helvetica Now Text",Arial,sans-serif;
  --ps-serif:"Ivy Presto Headline","Times New Roman",serif;
}

/* ---------------------------------------------------------------------------
   1. FOOTER contact block: wrapping + layout (site-wide)
   Root cause of the mid-word email break ("propersite s.com") was
   overflow-wrap:anywhere on the links while they were squeezed into a
   50%-width column. Fix: only break as a genuine last resort, give the
   block room on phones, and keep the phone number intact.
   ------------------------------------------------------------------------- */
.footer-info__col-contact,
.footer-info__single-contact,
.footer-info__single-contact-text,
.footer-info__p{ min-width:0; }
.footer-info__single-contact-text{ display:flex; flex-direction:column; align-items:stretch; gap:.15em; }
.footer-info__single-contact-text > .underline-link,
.footer-info__col-contact .underline-link{
  display:block; width:100%; flex:0 0 auto;
  font-size:.9em;
  letter-spacing:-.005em;
  overflow-wrap:break-word;   /* wrap only as a last resort, never mid-word when there is room */
  white-space:normal;
  line-height:1.5;
}
/* keep the phone number on a single line */
.footer-info__single-contact-text > a[href^="tel:"]{ white-space:nowrap; }
/* reassurance line now sits under the "Talk to us" heading, above the email */
.footer-info__contact-blurb{ opacity:.7; margin:0 0 .55em; line-height:1.5; }
.footer-info__p{ overflow-wrap:break-word; }
/* group the review CTA under the contact info rather than pinning it to the divider */
.footer-info__col-contact{ justify-content:flex-start; }
/* on phones give the contact block full width so a 21-char email never has to wrap */
@media screen and (max-width:767px){
  .footer-info__col-contact .footer-info__single-contact{ width:100%; }
  .ps-footer-review-cta{ width:100%; }   /* full-width tap target on phones */
}

/* ---------------------------------------------------------------------------
   1b. FOOTER "Free Website Review" CTA  (-> /website-review)
   Lower-commitment companion to the top "Talk to an expert" CTA. Reuses the
   site audit gradient so it reads as one design language.
   ------------------------------------------------------------------------- */
.ps-footer-review-cta{
  display:inline-flex; align-items:center; justify-content:space-between; gap:1.75em;
  width:auto; max-width:100%; margin:1.5em 0 2.25em; padding:1.05em 1.4em;
  border-radius:.7em;
  background:var(--ps-audit-grad,linear-gradient(95deg,#f97316 0%,#ea580c 100%));
  color:#fff !important; text-decoration:none;
  font-family:var(--ps-display,inherit);
  box-shadow:0 16px 34px -16px rgba(249,115,22,.55);
  transition:transform .25s ease,filter .25s ease,box-shadow .25s ease;
}
.ps-footer-review-cta:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 22px 42px -18px rgba(249,115,22,.5); }
.ps-footer-review-cta__text{ display:flex; flex-direction:column; gap:.15em; min-width:0; }
.ps-footer-review-cta__title{ font-weight:700; font-size:1.02em; line-height:1.2; }
.ps-footer-review-cta__sub{ opacity:.9; font-weight:500; font-size:.82em; line-height:1.3; }
.ps-footer-review-cta__arrow{ flex:0 0 auto; font-size:1.15em; line-height:1; transition:transform .25s ease; }
.ps-footer-review-cta:hover .ps-footer-review-cta__arrow{ transform:translateX(4px); }

/* ---------------------------------------------------------------------------
   2. NAV audit CTA bar (injected by ps-enhance.js into Services + Expertise)
   ------------------------------------------------------------------------- */
.ps-audit-cta{
  display:flex; align-items:center; justify-content:center;
  gap:.55em; flex-wrap:wrap;
  margin:1.1em .35em .35em;
  padding:1.05em 1.6em;
  border-radius:.7em;
  background:var(--ps-audit-grad);
  color:#fff !important;
  font-family:var(--ps-display);
  font-size:1.02em; line-height:1.25; text-align:center;
  text-decoration:none;
  box-shadow:0 14px 34px -16px rgba(123,63,242,.75);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.ps-audit-cta:hover{ transform:translateY(-2px); filter:brightness(1.06);
  box-shadow:0 20px 44px -18px rgba(249,115,22,.6); }
.ps-audit-cta__label{ opacity:.9; font-weight:500; }
.ps-audit-cta__strong{ font-weight:700; }
.ps-audit-cta__arrow{ display:inline-flex; transition:transform .25s ease; }
.ps-audit-cta:hover .ps-audit-cta__arrow{ transform:translateX(4px); }
/* seat the CTA inside the dropdown panel; token (not #fff) so it follows the
   standardised dark panel colour in every theme */
.nav-dropdown__overflow-inner:has(.ps-audit-cta){
  background:var(--color-light-tint);
  border-radius:.55em;
  /* the open animation measures content height and ignores the last child's
     bottom margin, so the bottom gap must be PADDING on the inner, not margin */
  padding-bottom:1.15em;
}
.nav-dropdown__overflow-inner:has(.ps-audit-cta) > .nav-dropdown__grid{ background:transparent; }
.nav-dropdown__overflow-inner > .ps-audit-cta{ margin:.85em 1.15em 0; }

/* ---------------------------------------------------------------------------
   3. Shared building blocks for the new pages
   ------------------------------------------------------------------------- */
.ps-page{ font-family:var(--ps-text); color:var(--ps-ink); }
.ps-container{ width:100%; max-width:1200px; margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }
.ps-section{ padding:clamp(3.5rem,7vw,6.5rem) 0; }
.ps-section--tight{ padding:clamp(2.5rem,5vw,4rem) 0; }

.ps-eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--ps-display); font-weight:600;
  font-size:.82rem; letter-spacing:.02em;
  text-transform:none; color:var(--ps-coral);
  margin:0 0 1.1rem;
}
.ps-eyebrow__dot{ width:.7em; height:.7em; border-radius:50%; background:var(--ps-coral); display:inline-block; }
.ps-eyebrow.is--light{ color:#f9b98a; }

.ps-h1{
  font-family:var(--ps-display); font-weight:700;
  font-size:clamp(2.4rem,5.6vw,4.4rem); line-height:1.02;
  letter-spacing:-.02em; margin:0 0 1.2rem;
}
.ps-h2{
  font-family:var(--ps-display); font-weight:700;
  font-size:clamp(1.9rem,3.8vw,3rem); line-height:1.05;
  letter-spacing:-.02em; margin:0 0 1rem;
}
.ps-h3{ font-family:var(--ps-display); font-weight:600; font-size:1.35rem; line-height:1.15; margin:0 0 .5rem; letter-spacing:-.01em; }
.ps-serif{ font-family:var(--ps-serif); font-style:italic; font-weight:300; }
.ps-lead{ font-size:clamp(1.05rem,1.6vw,1.22rem); line-height:1.55; color:#4a4a4a; margin:0 0 1.6rem; max-width:56ch; }
.ps-muted{ color:#6a6a6a; }

/* buttons */
.ps-btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--ps-display); font-weight:600; font-size:1rem;
  padding:.95em 1.5em; border-radius:.6em; border:0; cursor:pointer;
  text-decoration:none; transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.ps-btn__arrow{ display:inline-flex; width:1.5em; height:1.5em; align-items:center; justify-content:center;
  border-radius:.32em; background:rgba(255,255,255,.16); transition:transform .22s ease; }
.ps-btn:hover .ps-btn__arrow{ transform:translate(2px,-2px); }
.ps-btn--coral{ background:var(--ps-coral); color:#fff; box-shadow:0 12px 28px -14px rgba(249,115,22,.75); }
.ps-btn--coral:hover{ transform:translateY(-2px); background:#fb8a2e; }
.ps-btn--audit{ background:var(--ps-audit-grad); color:#fff; box-shadow:0 14px 32px -14px rgba(123,63,242,.7); }
.ps-btn--audit:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.ps-btn--ghost{ background:transparent; color:var(--ps-ink); border:1.5px solid rgba(0,0,0,.16); }
.ps-btn--ghost:hover{ border-color:var(--ps-coral); color:var(--ps-coral-dark); }
.ps-btn--on-navy.ps-btn--ghost{ color:#fff; border-color:rgba(255,255,255,.3); }
.ps-btn--on-navy.ps-btn--ghost:hover{ border-color:#fff; color:#fff; }

/* pill chips */
.ps-chip{
  display:inline-flex; align-items:center; gap:.4em; padding:.5em 1em;
  border-radius:999px; font-family:var(--ps-display); font-weight:500; font-size:.9rem;
  border:1.5px solid rgba(0,0,0,.12); background:#fff; color:#3a3a3a; cursor:pointer;
  transition:all .2s ease; white-space:nowrap;
}
.ps-chip:hover{ border-color:var(--ps-coral); color:var(--ps-coral-dark); }
.ps-chip.is--active{ background:var(--ps-accent); border-color:var(--ps-accent); color:#fff; }

/* ---------------------------------------------------------------------------
   4. NAVY hero band (Our Work + Contact)
   ------------------------------------------------------------------------- */
.ps-navy{ background:var(--ps-navy); color:#fff; }
.ps-navy .ps-lead{ color:rgba(255,255,255,.72); }
.ps-navy .ps-muted{ color:rgba(255,255,255,.6); }
.ps-hero-navy{ background:radial-gradient(120% 130% at 50% -10%,#2c3a48 0%,#24303c 45%,#1b2531 100%); color:#fff; }
.ps-hero-navy .ps-h1{ text-align:center; }
.ps-hero-navy .ps-eyebrow{ justify-content:center; width:100%; }

/* ---------------------------------------------------------------------------
   5. "Talk to an expert" band
   ------------------------------------------------------------------------- */
.ps-expert{ background:var(--ps-navy); color:#fff; }
.ps-expert__row{ display:flex; align-items:center; justify-content:center; gap:clamp(1rem,3vw,2.4rem); flex-wrap:wrap; }
.ps-expert__word{ font-family:var(--ps-display); font-weight:700; font-size:clamp(2.2rem,5vw,3.6rem); letter-spacing:-.02em; }
.ps-expert__word.is--serif{ font-family:var(--ps-serif); font-style:italic; font-weight:300; }
.ps-expert__avatar{
  position:relative; width:clamp(84px,10vw,116px); height:clamp(84px,10vw,116px);
  border-radius:1.1rem; overflow:hidden; background:var(--ps-audit-grad);
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6);
}
.ps-expert__avatar img{ width:100%; height:100%; object-fit:cover; }
.ps-expert__monogram{ font-family:var(--ps-display); font-weight:700; font-size:1.9rem; color:#fff; letter-spacing:.02em; }
.ps-expert__badge{
  position:absolute; right:-10px; bottom:-10px; width:38px; height:38px; border-radius:.55rem;
  background:var(--ps-coral); display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 8px 20px -8px rgba(249,115,22,.9);
}
.ps-expert__avatar:hover .ps-expert__badge{ transform:translate(2px,-2px); }

/* ---------------------------------------------------------------------------
   6. Generic cards + "what to expect" steps (shared)
   ------------------------------------------------------------------------- */
.ps-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); }
.ps-feature{ background:#fff; border:1px solid #ececec; border-radius:1rem; padding:1.6rem; }
.ps-feature__icon{ width:44px; height:44px; border-radius:.6rem; background:#fff3ea; color:var(--ps-coral-dark);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.ps-feature__p{ color:#5a5a5a; line-height:1.5; margin:.4rem 0 0; font-size:.98rem; }

.ps-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); }
.ps-step{ background:#fff; border:1px solid #e6e6e6; border-radius:1rem; padding:1.6rem; min-height:210px;
  display:flex; flex-direction:column; }
.ps-step__top{ display:flex; align-items:baseline; justify-content:space-between; }
.ps-step__num{ font-family:var(--ps-display); font-weight:700; font-size:1.5rem; color:#c9c9c9; }
.ps-step__p{ margin-top:auto; color:#5a5a5a; line-height:1.5; font-size:.98rem; }

@media (max-width:900px){
  .ps-grid-3, .ps-steps{ grid-template-columns:1fr; }
}

/* section footer spacing so the shared <section class="footer"> sits clean */
.ps-page + .footer, .ps-page ~ .footer{ margin-top:0; }

/* ---------------------------------------------------------------------------
   7. Book-a-consultation slide-in (homepage) — injected by ps-enhance.js
   A non-intrusive peek card (bottom-right) revealed once the visitor scrolls
   past #results (peak intent, right after the proof carousel). Dismiss collapses
   it to a small "Book a call" pill; its CTA opens a right-side drawer that
   lazy-mounts the live Cal.diy calendar (propersites/free-website-consultation).
   Brand: navy surface, coral CTA, Ivy Presto serif accent, and the site's own
   modal slide-in motion (translateX(105%)->0, cubic-bezier(.35,1.25,.6,1)).
   ------------------------------------------------------------------------- */
:root{ --ps-consult-ease:cubic-bezier(.35,1.25,.6,1); }

/* peek card + pill share one fixed anchor bottom-right */
.ps-consult{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:210;
  width:min(360px, calc(100vw - 3rem));
  font-family:var(--ps-text);
  transform:translateY(140%); opacity:0; pointer-events:none;
  transition:transform .55s var(--ps-consult-ease), opacity .4s ease;
  will-change:transform,opacity;
}
.ps-consult.is--in{ transform:translateY(0); opacity:1; pointer-events:auto; }

.ps-consult__card{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%,#2c3a48 0%,#24303c 48%,#1b2531 100%);
  color:#fff; border:1px solid rgba(255,255,255,.09);
  border-radius:18px; padding:1.4rem 1.4rem 1.15rem;
  box-shadow:0 24px 60px -18px rgba(9,13,20,.7), 0 8px 20px -12px rgba(0,0,0,.5);
}
.ps-consult__card::before{ /* soft coral glow, top-right */
  content:""; position:absolute; top:-40%; right:-30%; width:70%; height:80%;
  background:radial-gradient(circle, rgba(249,115,22,.24) 0%, rgba(249,115,22,0) 70%);
  pointer-events:none;
}
.ps-consult__x{
  position:absolute; top:.7rem; right:.7rem; width:2rem; height:2rem; z-index:2;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:rgba(255,255,255,.08); color:rgba(255,255,255,.72);
  cursor:pointer; transition:background .2s ease,color .2s ease;
}
.ps-consult__x:hover{ background:rgba(255,255,255,.16); color:#fff; }
.ps-consult__eyebrow{
  position:relative; display:inline-flex; align-items:center; gap:.5em; margin:0 0 .55rem;
  font-family:var(--ps-display); font-weight:600; font-size:.78rem; letter-spacing:.02em; color:#f9b98a;
}
.ps-consult__dot{ width:.55em; height:.55em; border-radius:50%; background:var(--ps-coral); box-shadow:0 0 0 4px rgba(249,115,22,.18); }
.ps-consult__h{
  position:relative; font-family:var(--ps-display); font-weight:700;
  font-size:1.32rem; line-height:1.12; letter-spacing:-.015em; margin:0 0 .5rem; max-width:15ch;
}
.ps-consult__h .ps-serif{ color:#fff; }
.ps-consult__p{ position:relative; font-size:.9rem; line-height:1.5; color:rgba(255,255,255,.74); margin:0 0 1rem; }
.ps-consult__cta{ position:relative; width:100%; justify-content:center; font-size:1rem; }
.ps-consult__later{
  display:block; width:100%; margin:.55rem 0 0; padding:.2rem;
  background:none; border:0; cursor:pointer; text-align:center;
  font-family:var(--ps-text); font-size:.82rem; color:rgba(255,255,255,.55); transition:color .2s ease;
}
.ps-consult__later:hover{ color:rgba(255,255,255,.85); }
.ps-consult__trust{
  position:relative; display:flex; align-items:center; justify-content:center; gap:.4em;
  margin:.85rem 0 0; padding-top:.85rem; border-top:1px solid rgba(255,255,255,.08);
  font-size:.72rem; color:rgba(255,255,255,.5);
}
.ps-consult__trust svg{ color:var(--ps-coral); flex:0 0 auto; }

/* collapsed pill state */
.ps-consult__pill{
  display:none; align-items:center; gap:.5em;
  padding:.7rem .8rem .7rem 1rem; border-radius:999px;
  background:var(--ps-coral); color:#fff; cursor:pointer;
  font-family:var(--ps-display); font-weight:600; font-size:.95rem;
  border:0; box-shadow:0 16px 34px -14px rgba(249,115,22,.75);
  transition:transform .2s ease, box-shadow .2s ease;
}
.ps-consult__pill:hover{ transform:translateY(-2px); box-shadow:0 22px 44px -16px rgba(249,115,22,.65); }
.ps-consult__pill svg{ flex:0 0 auto; }
.ps-consult__pill-x{
  display:flex; align-items:center; justify-content:center;
  width:1.35rem; height:1.35rem; border-radius:50%;
  background:rgba(255,255,255,.22); color:#fff; border:0; cursor:pointer; transition:background .2s ease;
}
.ps-consult__pill-x:hover{ background:rgba(255,255,255,.42); }
.ps-consult.is--pill{ width:auto; }
.ps-consult.is--pill .ps-consult__card{ display:none; }
.ps-consult.is--pill .ps-consult__pill{ display:inline-flex; }

/* ---- booking drawer (mounts the Cal.diy calendar) ---- */
.ps-consult-drawer{ position:fixed; inset:0; z-index:400; display:flex; justify-content:flex-end; pointer-events:none; }
.ps-consult-drawer__backdrop{
  position:absolute; inset:0; background:#0d1219; opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease; cursor:pointer;
}
.ps-consult-drawer__panel{
  position:relative; height:100%; width:min(460px, 100vw);
  background:var(--ps-navy-deep); color:#fff; display:flex; flex-direction:column;
  transform:translateX(105%); transition:transform .6s var(--ps-consult-ease);
  box-shadow:-24px 0 60px -24px rgba(0,0,0,.7);
}
.ps-consult-drawer.is--open{ pointer-events:auto; }
.ps-consult-drawer.is--open .ps-consult-drawer__backdrop{ opacity:.72; visibility:visible; }
.ps-consult-drawer.is--open .ps-consult-drawer__panel{ transform:translateX(0); }
.ps-consult-drawer__x{
  position:absolute; top:1.05rem; right:1.05rem; width:2.4rem; height:2.4rem; z-index:2;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; cursor:pointer; transition:background .2s ease;
}
.ps-consult-drawer__x:hover{ background:rgba(255,255,255,.2); }
.ps-consult-drawer__head{ padding:1.5rem 1.5rem 1rem; }
.ps-consult-drawer__eyebrow{ color:#f9b98a; }
.ps-consult-drawer__h{ font-family:var(--ps-display); font-weight:700; font-size:1.5rem; line-height:1.1; letter-spacing:-.015em; margin:.4rem 0 .3rem; }
.ps-consult-drawer__sub{ font-size:.9rem; color:rgba(255,255,255,.7); margin:0; }
.ps-consult-drawer__body{ flex:1; overflow-y:auto; overscroll-behavior:contain; background:#fff; }
[data-theme=dark] .ps-consult-drawer__body{ background:var(--ps-navy-deep); }
.ps-consult-drawer__cal{ min-height:100%; }
.ps-consult-drawer__loading{ display:flex; align-items:center; justify-content:center; height:140px; color:#8a94a0; font-size:.85rem; }
.ps-consult-drawer__fallback{ padding:2rem 1.5rem; color:#e7e7e7; font-size:.95rem; line-height:1.55; }

/* scroll-lock fallback used only when the site's Lenis instance isn't reachable */
html.ps-consult-locked, html.ps-consult-locked body{ overflow:hidden !important; }

/* ---- mobile: bottom sheet ---- */
@media (max-width:600px){
  .ps-consult{ right:.75rem; left:.75rem; bottom:.75rem; width:auto; }
  .ps-consult.is--pill{ left:auto; }
  .ps-consult__h{ max-width:none; }
  .ps-consult-drawer__panel{ width:100vw; }
}

/* ---- reduced motion: fade, no large travel ---- */
@media (prefers-reduced-motion:reduce){
  .ps-consult{ transform:none; transition:opacity .3s ease; }
  .ps-consult.is--in{ transform:none; }
  .ps-consult-drawer__panel{ transform:none; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; }
  .ps-consult-drawer.is--open .ps-consult-drawer__panel{ opacity:1; visibility:visible; }
}


/* Dark-theme transitions: the splash/transition screen had no dark styling, so
   with theme=dark every transition swept a light panel across a navy page (the
   /our-work "flashing"). Match the screen to the theme. */
[data-theme="dark"] .transition-screen{ background:#1b2531; }
[data-theme="dark"] .transition-screen .propersites-flower{ color:#f3f3f3; }