/* ==========================================================================
   ForestiaDent - self-hosted fonts
   Subset from Google Fonts to the Latin + Polish glyphs these pages actually
   use: 520 KB of woff2 down to 213 KB. Hinting is kept deliberately, since
   most of this text renders at 12-19px on Windows.
   Self-hosted rather than fetched from fonts.googleapis.com so the page opens
   no third-party connection before it can paint, and so no visitor IP is sent
   to Google just to load a typeface.
   Emoji in the review quotes are not in these files and fall back to the
   system emoji font, which is what we want.
   ========================================================================== */

@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/montserrat-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/montserrat-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/montserrat-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/montserrat-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/oswald-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/oswald-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/roboto-300-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/roboto-300-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/roboto-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/roboto-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/roboto-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/roboto-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/roboto-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/roboto-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Metric-matched fallbacks
   Until the web fonts arrive, text renders in Arial. Arial's letters are a
   different width, so when Roboto swapped in, lines re-wrapped and whole
   sections jumped (Lighthouse mobile CLS 0.14-0.38 on four landers). These
   faces are Arial scaled so a line of these pages' own text comes out the
   same width as in the web font (measured rendered, per weight), with the
   web fonts' ascent and descent, so the swap no longer moves anything. They
   only exist during that first moment.
   Where Arial is not installed (Android) the face is skipped and the stack
   falls through to the system sans, which there is Roboto anyway.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Roboto Fallback';font-weight:100 349;
  src:local('Arial'),local('ArialMT');
  size-adjust:98.08%;ascent-override:94.61%;descent-override:24.88%;line-gap-override:0%;
}
@font-face{
  font-family:'Roboto Fallback';font-weight:350 449;
  src:local('Arial'),local('ArialMT');
  size-adjust:99.73%;ascent-override:93.05%;descent-override:24.47%;line-gap-override:0%;
}
@font-face{
  font-family:'Roboto Fallback';font-weight:450 599;
  src:local('Arial'),local('ArialMT');
  size-adjust:100.50%;ascent-override:92.34%;descent-override:24.28%;line-gap-override:0%;
}
@font-face{
  font-family:'Roboto Fallback';font-weight:600 900;
  src:local('Arial Bold'),local('Arial-BoldMT');
  size-adjust:94.50%;ascent-override:98.20%;descent-override:25.82%;line-gap-override:0%;
}
@font-face{
  font-family:'Montserrat Fallback';font-weight:100 599;
  src:local('Arial'),local('ArialMT');
  size-adjust:111.49%;ascent-override:86.82%;descent-override:22.51%;line-gap-override:0%;
}
@font-face{
  font-family:'Montserrat Fallback';font-weight:600 900;
  src:local('Arial Bold'),local('Arial-BoldMT');
  size-adjust:109.84%;ascent-override:88.13%;descent-override:22.85%;line-gap-override:0%;
}
@font-face{
  font-family:'Oswald Fallback';font-weight:100 900;
  src:local('Arial Bold'),local('Arial-BoldMT');
  size-adjust:84.83%;ascent-override:140.63%;descent-override:34.07%;line-gap-override:0%;
}

/* (The font faces above used to be a separate fonts.css - one more
   render-blocking request on every page before anything could paint.) */

/* ==========================================================================
   ForestiaDent - Landing page design system
   Flow/flex layout, so copy can change per service without breaking layout.
   Single source of truth for all ForestiaDent landing pages.
   ========================================================================== */

/* ---------- Design tokens (extracted from the original) ---------- */
:root{
  --gold:#f1c060;
  --gold-hover:#e3ac42;
  --blue:#6087f1;
  --blue-hover:#4a72e3;

  --ink:#000000;
  --navy:#04253a;
  --about-ink:#050b26;
  --body-ink:#3d4051;
  /* darkened with --section-bg: #6c757b was 4.5:1 on the old near-white
     background but only 4.0:1 on #eaeef2 */
  --muted:#5f686e;
  --line:#e3e3e3;

  --header-bg:#f9f5f3;
  /* #f9f9f9 was only 2% off white, so the hero and everything under it read
     as one flat wash. This is ~8% down, with a slight cool cast so the grey
     bands sit with the navy CTA rather than fighting the gold. */
  --section-bg:#eaeef2;
  --trust-bg-mobile:#f4f4f4;
  --white:#ffffff;

  --font-body:"Roboto","Roboto Fallback",Arial,Helvetica,sans-serif;
  --font-alt:"Montserrat","Montserrat Fallback",Arial,sans-serif;
  --font-display:"Oswald","Oswald Fallback","Roboto",Arial,sans-serif;

  --container:1200px;
  --gutter:24px;
  /* One size for every section headline and the H1, so the page reads as
     one voice instead of a dozen. Overridden once at the 763px
     breakpoint - see the bottom of this file. */
  --headline:33px;
  --radius:4px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p{margin:0;}
button{font:inherit;}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  min-height:58px;
  padding:12px 28px;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-size:23px;
  font-weight:700;
  line-height:1.3;
  text-align:center;
  color:var(--white);
  transition:background-color .18s ease,transform .18s ease;
  cursor:pointer;
  border:0;
}
.btn:hover{transform:translateY(-1px);}
.btn:focus-visible{outline:3px solid var(--navy);outline-offset:3px;}
/* Navy label, not white. White on #f1c060 measures 1.7:1 - under the 3:1
   minimum for large bold text, and the reason the call button read as washed
   out next to the blue one. Navy on the same gold is 9.4:1. The blue button
   keeps its white label: 3.4:1, which passes for text this size. */
.btn--gold{background:var(--gold);color:var(--navy);}
.btn--gold:hover{background:var(--gold-hover);}
.btn--blue{background:var(--blue);}
.btn--blue:hover{background:var(--blue-hover);}

/* ==========================================================================
   1. Header
   ========================================================================== */
.site-header{background:var(--header-bg);}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:94px;
}
.site-header__logo{width:198px;height:48px;object-fit:contain;flex:none;}
.site-header__right{display:flex;align-items:center;gap:28px;}
.reviews-badge{display:flex;align-items:center;gap:10px;}
.reviews-badge__icon{width:33px;height:33px;flex:none;}
.reviews-badge__text{
  font-family:var(--font-alt);font-size:12px;font-weight:400;
  line-height:1.3;color:var(--ink);
}
.reviews-badge__text b{font-weight:700;}
.header-phone{
  font-family:var(--font-body);font-size:33px;font-weight:700;
  line-height:1.3;color:var(--ink);white-space:nowrap;
}
.header-phone:hover{color:var(--gold-hover);}

/* ==========================================================================
   2. Trust bar
   ========================================================================== */
.trustbar{background:var(--gold);}
.trustbar__list{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin:0;padding:6px 0;list-style:none;
}
.trustbar__item{display:flex;align-items:center;gap:12px;}
/* The source SVGs are filled white, which was 1.69:1 against the gold bar -
   the same failure the buttons had. Darkened here rather than only on mobile,
   where the bar turns light grey. */
.trustbar__icon{width:32px;height:32px;flex:none;filter:brightness(0);opacity:.75;}
.trustbar__label{
  font-family:var(--font-alt);font-size:16px;font-weight:400;
  line-height:1.3;color:var(--navy);
}

/* ==========================================================================
   3. Hero
   ========================================================================== */
.hero{background:var(--white);padding:40px 0 56px;}
/* Four independent grid items so the mobile order can differ from desktop
   (image between the pitch and the call button, exactly like the original). */
.hero .container{
  display:grid;
  grid-template-columns:1fr 518px;
  grid-template-areas:
    "intro    media"
    "features media"
    "actions  media";
  grid-template-rows:auto auto 1fr;
  column-gap:56px;
  align-items:start;
}
.hero__intro{grid-area:intro;}
.hero__features{grid-area:features;}
.hero__actions{grid-area:actions;}
.hero__media{grid-area:media;align-self:center;}
.hero__eyebrow{
  font-family:var(--font-body);font-size:18px;font-weight:400;
  line-height:1.3;color:var(--ink);margin-bottom:14px;
}
.rating{display:flex;align-items:center;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
.rating__logo{width:19px;height:19px;flex:none;}
.rating__stars{display:flex;align-items:center;gap:2px;}
.rating__stars img{width:16px;height:16px;}
.rating__text{
  font-family:var(--font-alt);font-size:22px;font-weight:400;
  line-height:1.3;color:var(--ink);
}
.hero__title{
  font-family:var(--font-body);font-size:var(--headline);font-weight:700;
  line-height:1.3;color:var(--ink);margin-bottom:16px;
}
.hero__subtitle{
  font-family:var(--font-body);font-size:23px;font-weight:300;
  line-height:1.3;color:var(--ink);max-width:527px;margin-bottom:26px;
}
.hero__features{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:18px;}
.hero__features li{display:flex;align-items:center;gap:12px;}
.hero__features img{width:26px;height:26px;flex:none;}
.hero__features span{
  font-family:var(--font-body);font-size:18px;font-weight:300;
  line-height:1.3;color:var(--ink);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;}
.hero__actions .btn{min-width:341px;}
.hero__media img{
  width:100%;max-width:518px;border-radius:var(--radius);
  object-fit:cover;aspect-ratio:518/345;
}

/* Video in the hero (implantologia): the click-to-play facade from
   long-form.css, held to the photo's width. Its poster fills a 16/9 box, so
   it has to escape the rules above - and the mobile max-height cap further
   down, which would leave a black strip under the poster. */
.hero__media .hero__video{width:100%;max-width:518px;margin-inline:auto;}
/* Wide desktop: the video gets the room the photo did not need. 600px is the
   most the column can take before the subtitle drops to a third line and the
   hero grows taller (620px was already too much). :has() keeps the wider
   column to the hero that holds a video - the photo heroes stay at 518px. */
@media (min-width:1101px){
  .hero .container:has(.hero__video){grid-template-columns:1fr 600px;column-gap:48px;}
  .hero__media .hero__video{max-width:600px;}
}
.hero__media .hero__video .videos__poster{
  height:100%;max-height:none;max-width:none;
  aspect-ratio:auto;border-radius:0;
}

/* ==========================================================================
   4. Services
   ========================================================================== */
.services{background:var(--section-bg);padding:64px 0 72px;}
.section-head{text-align:center;margin-bottom:56px;}
.section-head__title{
  font-family:var(--font-body);font-size:var(--headline);font-weight:700;
  line-height:1.3;color:var(--navy);margin-bottom:22px;
}
.section-head__rule{
  position:relative;height:1px;background:var(--line);
  width:250px;margin:0 auto;
}
.section-head__rule::after{
  content:"";position:absolute;left:50%;top:-1px;transform:translateX(-50%);
  width:60px;height:3px;background:var(--gold);
}
.services__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:56px 40px;
}
.service{text-align:center;}
.service__icon{width:50px;height:50px;margin:0 auto 22px;}
.service__name{
  font-family:var(--font-body);font-size:24px;font-weight:400;
  line-height:1.3;color:var(--ink);margin-bottom:12px;
}
.service__desc{
  font-family:var(--font-body);font-size:16px;font-weight:300;
  line-height:1.5;color:var(--muted);max-width:316px;margin-inline:auto;
}

/* ==========================================================================
   5. Call-to-action band
   ========================================================================== */
/* Navy, not white: this band sits between two light-grey sections (reviews
   above, gallery below) and a white strip between them read as a gap rather
   than a call to action. Navy also keeps the gold=call / blue=book button
   colours used in the hero and the sticky bar, instead of flattening them
   into a single-colour band. */
.cta-band{background:var(--navy);padding:56px 0;}
.cta-band .container{
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
}
.cta-band__title{
  font-family:var(--font-body);font-size:25px;font-weight:700;
  line-height:1.3;color:var(--white);flex:1 1 380px;
}
.cta-band__actions{display:flex;gap:16px;flex-wrap:wrap;}

/* ==========================================================================
   6. About / gallery
   ========================================================================== */
.about{background:var(--section-bg);padding:56px 0 64px;}
/* Tiles are capped at 316px: that is the native size of the source photos,
   so they stay sharp instead of being upscaled. Matches the original. */
.about__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,316px));
  justify-content:center;
  gap:26px 60px;
}
.about__tile{overflow:hidden;aspect-ratio:316/197;}
.about__tile img{width:100%;height:100%;object-fit:cover;}
.about__card{
  background:var(--gold);
  display:flex;align-items:center;justify-content:center;
  padding:20px;aspect-ratio:316/197;
}
.about__card p{
  font-family:var(--font-body);font-size:22px;font-weight:700;
  /* navy, not white: white on this gold is 1.7:1 */
  line-height:1.3;color:var(--navy);text-align:center;
}
.about__text{grid-column:3;grid-row:1 / span 2;}
.about__eyebrow{
  font-family:var(--font-display);font-size:var(--headline);font-weight:700;
  line-height:1;color:var(--about-ink);margin-bottom:22px;
}
.about__lead{
  font-family:var(--font-body);font-size:18px;font-weight:700;
  line-height:1.7;color:var(--about-ink);margin-bottom:20px;
}
.about__body{
  font-family:var(--font-body);font-size:18px;font-weight:300;
  line-height:1.9;color:var(--body-ink);
}
.about__card--last{grid-column:3;grid-row:3;}

/* ==========================================================================
   7. Footer
   ========================================================================== */
.site-footer{
  background:var(--white);border-top:2px solid var(--line);padding:44px 0 28px;
}
.site-footer__top{
  display:grid;grid-template-columns:minmax(0,340px) 1fr;
  gap:56px;align-items:start;
}
.site-footer__logo{width:198px;height:48px;object-fit:contain;margin-bottom:20px;}
.site-footer__about{
  font-family:var(--font-body);font-size:14px;font-weight:300;
  line-height:1.4;color:var(--ink);
}
.contact__label{
  font-family:var(--font-body);font-size:12px;font-weight:300;
  line-height:1.4;color:var(--ink);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:14px;
}
.contact__list{
  display:flex;flex-wrap:wrap;gap:28px 48px;margin:0 0 18px;padding:0;list-style:none;
}
.contact__item{display:flex;align-items:center;gap:10px;}
.contact__item img{width:22px;height:22px;flex:none;}
.contact__item a,.contact__item span{
  font-family:var(--font-body);font-size:14px;font-weight:400;
  line-height:1.4;color:var(--ink);
}
.contact__item a:hover{color:var(--gold-hover);}
/* Footer links render at 17-22px tall, under the 24px minimum touch target.
   Pad the hit area at every width - tablets are touch devices too. The text
   size is unchanged. */
.contact__item a{display:inline-block;padding-block:11px;}
.site-footer__legal a{display:inline-block;padding:12px 6px;}   /* 44px tall: a comfortable tap target */

.site-footer__rule{height:1px;background:var(--line);margin:26px 0 18px;}
.site-footer__legal{
  font-family:var(--font-body);font-size:14px;font-weight:300;
  line-height:1.4;color:var(--ink);
}
.site-footer__legal a:hover{text-decoration:underline;}

/* ==========================================================================
   Sticky mobile call bar (phone-first conversion aid)
   ========================================================================== */
/* Always visible on mobile: the phone number is removed from the header, so
   this bar is the persistent call CTA. */
.callbar{
  display:none;position:fixed;z-index:60;
  right:16px;bottom:calc(16px + env(safe-area-inset-bottom));
}
.callbar__link{display:flex;align-items:center;gap:12px;}
/* Gold with navy text, same as every other call CTA on the page, so the pill
   and the circle read as one control rather than two colours stuck together. */
.callbar__label{
  font-family:var(--font-body);font-size:16px;font-weight:700;line-height:1;
  color:var(--navy);background:var(--gold);
  padding:14px 18px;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(4,37,58,.22);
}
.callbar__link:hover .callbar__label{background:var(--gold-hover);}
.callbar__icon{
  position:relative;flex:none;
  width:62px;height:62px;border-radius:50%;
  background:var(--gold);
  display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(4,37,58,.3);
}
/* The glyph is stroked white, which is 1.7:1 on gold. Darkened, the same
   treatment the trust bar icons get. Kept above the pulse rings. */
.callbar__icon img{
  width:30px;height:30px;position:relative;z-index:1;filter:brightness(0);
}
/* Two rings on the same loop, half a cycle apart, so the pulse is continuous
   rather than a single expanding blip. Disabled by the reduced-motion block. */
.callbar__icon::before,
.callbar__icon::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--gold);
  animation:callPulse 2.4s cubic-bezier(.22,.61,.36,1) infinite;
}
.callbar__icon::after{animation-delay:1.2s;}
@keyframes callPulse{
  0%{transform:scale(1);opacity:.5;}
  100%{transform:scale(2.1);opacity:0;}
}
.callbar__link:hover .callbar__icon{background:var(--gold-hover);}
.callbar__link:focus-visible{outline:3px solid var(--navy);outline-offset:4px;border-radius:999px;}
/* Icon-only variant - the seven landers without a call-back form. No number
   on screen, just a small "Zadzwoń" caption over the circle.
   The number is still inside the link, as .sr-only text. Call tracking swaps
   numbers once on page load, and a number present in the markup is caught
   whether the vendor matches on text or on the tel: href. It also makes the
   link's accessible name the tracked number rather than a hard-coded one. */
.callbar--icon .callbar__link{flex-direction:column;gap:6px;}
.callbar__caption{
  position:relative;z-index:2;          /* above the pulse rings */
  font-family:var(--font-body);font-size:13px;font-weight:700;line-height:1;
  /* Navy, white text: 15.8:1 against whatever section is behind it, and it
     separates from the gold circle below instead of merging into it. */
  color:var(--white);background:var(--navy);
  padding:6px 11px;border-radius:999px;white-space:nowrap;
  box-shadow:0 4px 12px rgba(4,37,58,.25);
}
.callbar--icon .callbar__link:focus-visible{border-radius:18px;}
/* 19px, not 18px: bold text counts as large from 18.66px, and below that
   the white-on-blue label is judged against 4.5:1 instead of 3:1. It also
   reads better on a phone. */

/* ==========================================================================
   Responsive
   ========================================================================== */
/* ---------- Google review cards ---------- */
.testimonials{background:var(--white);padding:64px 0;}
/* auto-fit so the same grid reads well whether it holds two cards or nine */
.reviews{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;
}
.review{
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(4,37,58,.06);
  border-radius:var(--radius);
  padding:20px 22px 22px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.review__head{
  display:flex;
  align-items:center;
  gap:12px;
}
.review__source{width:38px;height:38px;flex:none;}
.review__stars{display:flex;align-items:center;gap:2px;}
.review__stars img{width:22px;height:22px;}

.review__text{
  font-family:var(--font-alt);
  font-size:16px;
  line-height:1.4;
  color:var(--ink);
  /* Push the author row to the bottom so cards in a row line up even though
     the quotes are very different lengths. */
  flex:1 1 auto;
}
.review__author{
  display:flex;
  align-items:center;
  gap:12px;
}
/* The original shipped each initial as a coloured circle SVG plus a separate
   text widget on top. One element with a background colour does the same job. */
.review__avatar{
  width:35px;height:35px;flex:none;
  border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-alt);
  font-size:22px;
  font-weight:400;
  line-height:1;
  color:var(--white);
}
/* Google's own initial-avatar palette, so a new reviewer just picks a colour. */
.review__avatar--purple{background:#7b1fa2;}
.review__avatar--blue{background:#0277bd;}
.review__avatar--teal{background:#00796b;}
.review__avatar--orange{background:#bf360c;}
.review__avatar--green{background:#2e7d32;}
.review__avatar--red{background:#c62828;}
.review__avatar--indigo{background:#3949ab;}
.review__avatar--brown{background:#6d4c41;}
.review__avatar--pink{background:#ad1457;}

.review__name{
  font-family:var(--font-alt);
  font-size:15px;
  font-weight:700;
  line-height:1.3;
  color:var(--ink);
}


@media (max-width:1100px){
  .hero .container{grid-template-columns:1fr 420px;gap:36px;}
  .hero__actions .btn{min-width:0;flex:1 1 260px;}
  .about__grid{gap:22px;}
}

@media (max-width:900px){
  /* single column: pitch -> image -> call button -> supporting points.
     align-items must be stretch here: the desktop grid uses `start`, which in
     a column flex container would shrink every child to its content width and
     pin it left (this is what made the hero buttons narrower than the page). */
  .hero .container{
    display:flex;flex-direction:column;gap:24px;align-items:stretch;
  }
  .hero__intro{order:1;}
  .hero__media{order:2;}
  .hero__actions{order:3;}
  .hero__features{order:4;margin-bottom:0;}
  .hero__media img{max-width:100%;margin-inline:auto;}
  .services__grid{grid-template-columns:repeat(2,1fr);gap:44px 32px;}
  .about__grid{grid-template-columns:repeat(2,1fr);}
  .about__text{grid-column:1 / -1;grid-row:auto;}
  .about__card--last{grid-column:1 / -1;grid-row:auto;aspect-ratio:auto;padding:28px;}
  .site-footer__top{grid-template-columns:1fr;gap:32px;}
}

/* Headlines break into lines of similar length instead of leaving one word
   alone on the last line ("...Już / Dziś"). Progressive: a browser without
   text-wrap support simply wraps as before. */
h1,h2,h3,
.split__head,.doctor__eyebrow,.about__eyebrow,.greenhero__title,.goals__lead,
.cta-band__title,.cta-wide__title,.thanks__title{text-wrap:balance;}

/* Tablet (764-900px): every hero stacks into one column here. Centre it, the
   same way the phone layout does - eyebrow, rating, headline, subtitle, photo,
   call button and ticks - instead of left-aligned text above a photo and
   button that span the whole column.
   The tick list centres as a block with its rows still left-aligned, so the
   check marks stay in one column.
   The call button is 352px and centred - the size the implant landers' pair
   uses - rather than stretched across a ~700px column. (On the implant
   landers the pair is a column; lead-form.css centres that and keeps
   flex:none, which wins because it loads after this file.) */
@media (min-width:764px) and (max-width:900px){
  .hero{text-align:center;}
  .hero .rating{justify-content:center;}
  .hero__subtitle{margin-inline:auto;}
  .hero__features{width:fit-content;max-width:100%;margin-inline:auto;}
  .hero__features li{justify-content:flex-start;}
  .hero__features span{text-align:left;}
  .hero__actions{justify-content:center;}
  .hero__actions .btn{flex:0 1 352px;}
  /* Same collapse on a tablet, where the photo keeps its own width (480-705px).
     A 480px floor - the narrowest hero photo - reserves most of the space
     before it loads without changing any final size. */
  .hero__media{min-width:min(100%, 480px);}
}

/* Tablet up to ~1010px: the auto-fit grid only has room for two 300px cards,
   so three reviews became two plus one stranded at the left. Wrap them as
   centred flex items instead - two per row, any odd one centred below. At
   1011px and up the grid fits three across and this no longer applies. */
/* Tablet (764-1023px): the four trust-bar labels wrapped onto 2-3 lines.
   At 16px Montserrat they need 704px of text plus 176px of icons and gaps,
   which only fits from ~1000px. Here they stay in one row and never wrap:
   22px icons, tighter gaps (156px in all), and a font that scales with the
   screen - (100vw - 220px) / 44, i.e. what is left after the gutters,
   scrollbar and icons, over the 44px of text per px of font size. That is
   ~12.5px at 768, ~13.6px at 820, ~15.5px at 900 and the full 16px from
   ~925px. From 1024px the desktop sizes apply unchanged. */
@media (min-width:764px) and (max-width:1023px){
  .trustbar__list{gap:12px;}
  .trustbar__item{gap:8px;}
  .trustbar__icon{width:22px;height:22px;}
  .trustbar__label{white-space:nowrap;font-size:clamp(12px, calc((100vw - 220px) / 44), 16px);}
}

@media (min-width:764px) and (max-width:1010px){
  .testimonials .reviews{display:flex;flex-wrap:wrap;justify-content:center;}
  .testimonials .review{flex:0 0 calc(50% - 12px);}
}
/* Desktop hero rating line on one row. Logo 19px + stars 88px + two 8px gaps
   = 123px, and the text is 18px wide per px of font ("Ocena 4,8/5 przez
   klientów (Google)" is 396px at 22px). At 1024px the column is 505px, so
   the text dropped under the stars; the same between 1101 and ~1160px,
   where the photo grows to 518px. The text now scales with its own column
   (cqi = the hero__intro's width): the full 22px wherever it fits - from
   ~1160px - and a little smaller below, down to 14px at the 901px edge. */
@media (min-width:901px){
  .hero__intro{container-type:inline-size;}
  .hero .rating{flex-wrap:nowrap;}
  .hero .rating__text{white-space:nowrap;font-size:clamp(14px, calc((100cqi - 127px) / 18), 22px);}
}
/* Desktop: the same centring with three per row. The implant landers have
   five reviews, and the grid left the last two stranded at the left.
   Nine-review pages fill every row and look exactly as before. */
@media (min-width:1011px){
  .testimonials .reviews{display:flex;flex-wrap:wrap;justify-content:center;}
  .testimonials .review{flex:0 0 calc((100% - 48px) / 3);}
}

@media (max-width:763px){
  /* 24px, not 33: the desktop size costs four lines on a 375px column for
     a headline like "Ceny Implantow - Poznaj Koszty i Wygodne Raty". */
  :root{--headline:24px;}

  .testimonials{padding:36px 0;}
  .reviews{grid-template-columns:1fr;gap:16px;}
  .review{padding:18px;gap:12px;}
  .review__text{text-align:center;}
  .review__head,
  .review__author{justify-content:center;}

  /* Compact single-row header: the goal is to get the headline and the call
     button above the fold, so the header must stay near 64px, not 179px. */
  .site-header .container{
    flex-direction:row;justify-content:center;align-items:center;
    gap:12px;padding:10px 16px;min-height:0;
  }
  .site-header__logo{width:148px;height:36px;}
  /* Phone number and Google badge both come out of the header on mobile:
     the sticky call bar carries the phone CTA, and the hero rating line
     carries the Google proof. Leaves just a clean centred logo. */
  .site-header__right{display:none;}

  /* trust bar becomes a light 2x2 grid, as in the original mobile view */
  .trustbar{background:var(--trust-bg-mobile);}
  /* Every label stays on one line. Measured in Montserrat 12px the longest
     pair ("4,8/5 w opiniach Google" + "Doswiadczeni Lekarze") needs 277px of
     text plus 56px of icons and gaps, so it only fitted from ~390px up and
     wrapped on most phones. The columns now size to their content, the bar
     uses a 12px side margin instead of 24px, and the text scales with the
     screen: 12px from ~370px wide, down to 10px on a 320px phone.
     (100vw - 80px) / 24 = viewport minus both margins and the icon/gap
     budget, over the text width per px of font size (277/12, rounded up). */
  .trustbar .container{padding-left:12px;padding-right:12px;}
  .trustbar__list{
    display:grid;grid-template-columns:auto auto;
    justify-content:space-evenly;justify-items:start;
    gap:9px 8px;padding:11px 0;
  }
  .trustbar__item{justify-content:flex-start;gap:6px;}
  .trustbar__label{text-align:left;white-space:nowrap;}
  .trustbar__icon{width:18px;height:18px;}
  .trustbar__label{font-size:clamp(10px, calc((100vw - 80px) / 24), 12px);color:var(--ink);line-height:1.25;}

  .hero{padding:18px 0 32px;text-align:center;}
  .hero .container{gap:14px;}
  /* the city is already in the H1 directly below, so this line is redundant
     on a small screen - kept in the DOM for desktop */
  .hero__eyebrow{display:none;}
  .rating{justify-content:center;margin-bottom:10px;}
  .rating__text{font-size:12px;}
  .hero__title{margin-bottom:10px;}
  .hero__subtitle{font-size:17px;margin-inline:auto;margin-bottom:0;}
  /* Cap the image so it cannot push the call button off screen. 180px made
     it 270px wide against a 327px column - visibly narrower than the text
     above it. 30vh instead of a flat px so a short viewport (a landscape
     phone still gets these styles, below 763px) shrinks it proportionally,
     with a 240px ceiling on a tall one. On a normal portrait phone the
     column width binds first and the photo fills it edge to edge. */
  .hero__media img{max-height:min(240px,30vh);object-fit:cover;}
  /* Stretch, not the base align-self:center. Centred, the box shrink-wraps
     its photo - and a photo still downloading has no size yet, so on a phone
     the first paint drew the hero with no photo at all and everything below
     jumped down when it arrived (Lighthouse mobile CLS 0.14-0.28 on five
     landers). Every hero photo is wider than a phone column, so the final
     layout is unchanged; the space is simply there from the start. */
  .hero__media{align-self:stretch;}

  /* ---------- Bigger hero photo (opt-in: .hero--big-media) ----------
     Used on stomatologia-estetyczna. Same width as the call button below it -
     inside the gutter, 4px corners - and 4:3 where there is room. (Full bleed
     was tried; it looked better matched to the button.)

     align-self:stretch is what makes it button-wide: .hero__media is
     align-self:center, which would shrink-wrap it to the image's own width.

     Height = clamp(floor, space left, 4:3):
       100svh - 550px     the photo may only use what is left after the header,
                          headline (image starts 329-359px down), the 24px
                          gap, the 57px call button and the ~109px sticky call
                          icon - so the hero Zadzwon button is never pushed
                          below the fold or under the sticky control. svh = the
                          visible viewport with toolbars; vh is the fallback.
       190px              never shorter than the old 30vh cap gave a 640px phone
       75vw - 36px        4:3 of the column width (100vw - 2 x 24px gutter) */
  .hero--big-media .hero__media{align-self:stretch;}
  .hero--big-media .hero__media img{
    width:100%;max-width:none;border-radius:var(--radius);
    aspect-ratio:auto;max-height:none;object-fit:cover;
    height:clamp(190px, calc(100vh - 550px), calc(75vw - 36px));
    height:clamp(190px, calc(100svh - 550px), calc(75vw - 36px));
  }
  /* The call button stays inside the gutter with its normal rounded corners
     (a full-bleed version was tried and looked worse), but sits 24px clear
     of the photo instead of the container's 14px - at 14px it looked jammed
     against the image. */
  .hero--big-media .hero__actions{margin-top:10px;}
  /* Centre the list as a block, but keep the rows left-aligned inside it so
     the check icons line up in a column instead of staggering. */
  .hero__features{
    justify-items:stretch;
    width:fit-content;
    max-width:100%;
    margin:0 auto;
  }
  .hero__features li{justify-content:flex-start;}
  .hero__features span{font-size:15px;text-align:left;}
  .hero__actions{flex-direction:column;gap:12px;}
  /* reset the row-direction flex basis: in a column it would set the height */
  .hero__actions .btn{flex:none;width:100%;font-size:22px;min-height:57px;}

  .services{padding:44px 0 48px;}
  .section-head{margin-bottom:36px;}
  .section-head__rule{width:320px;max-width:100%;}
  .services__grid{grid-template-columns:1fr;gap:38px;}
  .service__name{font-size:18px;}
  .service__desc{font-size:16px;max-width:290px;}

  .cta-band{padding:36px 0;}
  .cta-band .container{flex-direction:column;text-align:center;}
  .cta-band__title{font-size:20px;flex:none;}
  .cta-band__actions{width:100%;flex-direction:column;gap:12px;}
  .cta-band__actions .btn{width:100%;font-size:22px;}

  .about{padding:40px 0 48px;}
  .about__grid{grid-template-columns:1fr;gap:18px;}
  /* Move the "Profesjonalna Opieka" card up so it sits above the last two
     photos. Everything else keeps order 0 and so renders in DOM order first
     (card 1, team, text, care, room, THIS card), then these two tiles. */
  .about__grid > :nth-child(6),
  .about__grid > :nth-child(7){order:1;}
  .about__eyebrow{font-family:var(--font-body);text-align:center;line-height:1.1;}
  .about__lead{font-size:16px;text-align:center;}
  .about__body{font-size:16px;line-height:1.7;text-align:center;}
  .about__card p{font-size:20px;}

  .site-footer{padding:36px 0 24px;text-align:center;}
  .site-footer__logo{margin-inline:auto;}
  .site-footer__about{font-size:16px;}
  .contact__list{flex-direction:column;align-items:center;gap:18px;}
  .contact__item a,.contact__item span{font-size:16px;}
  .contact__label{text-align:center;}
  /* the footer line breaks after "Kontakt" on a phone; without this the
     first line ended in a stray "|" */
  .site-footer__sep{display:none;}
  .site-footer__legal a:last-child{display:block;}

  /* keep a phone CTA permanently within thumb reach */
  .callbar{display:flex;}
  /* clears the circle plus its caption: 16 + 62 + 6 + 25 = ~109px */
  body{padding-bottom:112px;}

}

/* Small phones. On a 320px screen the column is 272px, and 28px of padding
   each side left 216px for a 226px "Zadzwoń: 690 175 275" - so the button
   broke onto two lines with the last digits alone on the second. 16px padding
   gives 240px; below 360px the label also drops to 19px so "Umów Bezpłatną
   Rozmowę" (270px at 22px, 233px at 19px) fits on one line too. "body"
   lifts these above the per-section button sizes in long-form.css and
   lead-form.css, which load after this file. */
@media (max-width:400px){
  body .btn{padding-left:16px;padding-right:16px;}
  /* the coordinator button had no phone size of its own and stayed at 23px */
  body .coordinator__actions .btn{font-size:22px;}
  /* The finance card's own 22px padding narrowed its buttons to 226px on a
     320px screen. 14px keeps the card readable and gives them 244px. */
  body .finance{padding-left:14px;padding-right:14px;}
}
@media (max-width:359px){
  body .hero__actions .btn,
  body .cta-band__actions .btn,
  body .cta-wide .btn,
  body .doctor__actions .btn,
  body .coordinator__actions .btn,
  body .greenhero__actions .btn{font-size:19px;}
  /* inside the finance card there are 212px for the label: 17px fits it */
  body .finance__actions .btn{font-size:17px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
  .btn:hover{transform:none;}
}

@media print{
  .callbar{display:none;}
}