@import url("./financia-template.webflow.base.css");
@import url("./skyline-footer.css");
@import url("./footer-email-fix.css");
@import url("./footer-address-layout.css");

/* Contact form panel — lighter background and balanced vertical spacing. */
.contact-us-two-form-main-wrapper {
  background-color: #f6ebe6;
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

/* The form no longer has a heading above it, so remove the old top spacer. */
.contact-us-two-main-form .padding-top-sixty.w-form {
  padding-top: 0 !important;
}

/* Contact form image — always show the supplied photo reliably. */
.contact-us-two-form-image {
  background-image: url("../images/imagem_contact_us_reunior.jpeg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

/* Keep the original Webflow image only as the layout-size reference.
   The visible photo comes from the background above, avoiding src/srcset conflicts. */
.contact-us-two-form-image > img {
  display: block;
  width: 100% !important;
  height: auto !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Contact form image — the team member shown next to the form, named the same
   way the home team cards are (serif name over the photo, bottom-centre). */
.contact-us-two-form-image {
  position: relative;
}

.contact-form-person-name {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  padding: 7px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: "Marcellus", Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .05em;
  white-space: nowrap;
  color: #ffffff;
  background: rgba(44, 36, 33, 0.32);
  border-radius: 18px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.person-name-role {
  font-size: 10.5px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
}

@media (max-width: 767px) {
  .contact-form-person-name {
    bottom: 14px;
    font-size: 15px;
  }

  .person-name-role {
    font-size: 9px;
  }
}

/* Contact form fields — slightly more compact and softly rounded. */
.contact-us-two-main-form .contact-input-field {
  min-height: 46px;
  height: 46px;
  padding: 11px 14px;
  border-radius: 10px;
}

.contact-us-two-main-form textarea.contact-input-field.change-height {
  height: 118px;
  min-height: 118px;
  padding-top: 13px;
  padding-bottom: 13px;
  border-radius: 10px;
  resize: vertical;
}

.contact-us-two-main-form .contact-reference-field-label {
  margin-bottom: 8px;
}

/* Contact form placeholders — very subtle and small. */
.contact-us-two-main-form .contact-input-field::placeholder,
.contact-us-two-main-form textarea.contact-input-field::placeholder {
  color: rgba(70, 39, 32, 0.26);
  font-size: 12px;
  font-weight: 400;
  opacity: 1;
}

.contact-us-two-main-form .contact-input-field::-webkit-input-placeholder,
.contact-us-two-main-form textarea.contact-input-field::-webkit-input-placeholder {
  color: rgba(70, 39, 32, 0.26);
  font-size: 12px;
  font-weight: 400;
}

.contact-us-two-main-form .contact-input-field::-moz-placeholder,
.contact-us-two-main-form textarea.contact-input-field::-moz-placeholder {
  color: rgba(70, 39, 32, 0.26);
  font-size: 12px;
  font-weight: 400;
  opacity: 1;
}

/* Contact project section — keep the longer heading balanced. */
.contact-us-two-touch-heading h2 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
}

/* Opening hours — supplied schedule in 24-hour format. */
.contact-us-two-contact-item-wrapper .contact-us-one-box:nth-child(3) .contact-us-one-box-main > div:nth-child(1),
.contact-us-two-contact-item-wrapper .contact-us-one-box:nth-child(3) .contact-us-one-box-main > div:nth-child(2) {
  font-size: 0;
}

.contact-us-two-contact-item-wrapper .contact-us-one-box:nth-child(3) .contact-us-one-box-main > div:nth-child(1)::after {
  content: "Monday - Friday : 09:00 - 18:00";
  font-size: 16px;
}

.contact-us-two-contact-item-wrapper .contact-us-one-box:nth-child(3) .contact-us-one-box-main > div:nth-child(2)::after {
  content: "Saturday : 09:00 - 14:00";
  font-size: 16px;
}

.contact-us-two-contact-item-wrapper .contact-us-one-box:nth-child(3) .contact-us-one-box-main > div:nth-child(3) {
  display: none;
}

/* Contact banner — desktop and tablet: the supplied team photo
   (contact_us_section_init.jpeg) replaces the old template banner. */
.contact-us-two-banner {
  background-image: url("../images/contact_us_section_init.jpeg");
}

/* Contact banner — mobile: use the new portrait photo.
   Keep the existing banner height, place the text over the upper clear area,
   and keep the three people lower in the composition. */
@media (max-width: 767px) {
  .contact-us-two-banner {
    position: relative !important;
    overflow: hidden !important;
    background-image: none !important;
    background-color: #8e8480 !important;
    padding-top: 120px !important;
    padding-bottom: 220px !important;
    min-height: 0 !important;
  }

  .contact-us-two-banner::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image: url("../images/contact_us_section_init_mobile.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    pointer-events: none;
  }

  .contact-us-two-banner::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: rgba(44, 36, 33, 0.22);
    pointer-events: none;
  }

  .contact-us-two-banner > .inner-container {
    position: relative !important;
    z-index: 2 !important;
  }

  .contact-two-banner-heading {
    padding-top: 10px !important;
    transform: translateY(-10px);
  }

  .contact-two-banner-heading h1 {
    font-size: 28px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
  }
}

/* Contact banner heading — desktop only. */
@media (min-width: 992px) {
  .contact-two-banner-heading h1 {
    font-size: 3rem !important;
  }
}

/* Global button shape — keep all template buttons consistent. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.w-button,
.main-button,
.contact-one-button,
.nav-one-button-wrapper a,
.nav-two-button-wrapper a,
.nav-three-button-wrapper a,
[class*="button-wrapper"] > a,
a[class*="button"],
[class*="-button"] {
  border-radius: 10px !important;
}

/* Keep animated/overlay layers clipped to the same rounded shape. */
.main-button,
.main-button .button-overlay,
[class*="-button"] .button-overlay {
  overflow: hidden;
  border-radius: 10px !important;
}

/* The visible border on the animated template CTA lives on .button-overlay.
   Force both the CTA and that border layer to use the same 10px geometry. */
.main-button.skyline-contact-cta,
.home-one-banner-arrow-wrapper > .main-button,
.nav-one-button-wrapper > .main-button,
.nav-two-button-wrapper > .main-button,
.nav-three-button-wrapper > .main-button {
  border-radius: 10px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 10px);
}

.main-button.skyline-contact-cta > .button-overlay,
.home-one-banner-arrow-wrapper > .main-button > .button-overlay,
.nav-one-button-wrapper > .main-button > .button-overlay,
.nav-two-button-wrapper > .main-button > .button-overlay,
.nav-three-button-wrapper > .main-button > .button-overlay {
  border-radius: 10px !important;
  clip-path: inset(0 round 10px);
}

/* Homepage Financial Advisory block — desktop only.
   Keep the original image, match the visible photo to the right-column height,
   anchor the bottom and let object-fit crop the excess from the top. */
@media (min-width: 992px) {
  .home-one-analysis-wrapper {
    position: relative !important;
    align-items: flex-start !important;
  }

  .home-one-analysis-image {
    align-self: auto !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .home-one-analysis-image > img,
  .home-one-analysis-image > img.auto-fit,
  .home-one-analysis-image > img.responsive-image-full-width,
  .home-one-analysis-image > img.image-effect {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center bottom !important;
  }
}

/* Keep the complete portrait composition visible on upright phones. */
@media screen and (max-width: 767px) and (orientation: portrait) {
  .contact-us-two-banner {
    height: min(100dvh, 179.1667vw) !important;
    min-height: 568px !important;
    padding: 96px 15px 48px !important;
  }

  .contact-two-banner-heading {
    padding-top: 12px !important;
    transform: none !important;
  }

  .contact-two-banner-heading h1 {
    font-size: clamp(25px, 7vw, 32px) !important;
  }

  .contact-us-two-form {
    margin-top: 0 !important;
  }
}

/* Visually connect the contact photos on phones while keeping the meeting
   image secondary to the full-height team portrait. */
@media screen and (max-width: 767px) {
  .contact-us-two-form {
    padding: 16px 0 0 !important;
  }

  .contact-us-two-form-image {
    flex: 0 0 auto !important;
    height: clamp(260px, 72vw, 310px) !important;
    background-position: center 48% !important;
  }

  .contact-us-two-form-image > img {
    height: 100% !important;
  }

  .contact-us-two-form-main-wrapper {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
}

/* Desktop and tablet header — show the same compact wordmark used on mobile
   in the existing left-hand logo column. */
@media screen and (min-width: 992px) {
  a.home-one-logo:has(> .skyline-brand),
  .home-one-logo .skyline-brand {
    visibility: visible !important;
  }

  .home-one-logo .skyline-brand-region,
  .home-one-logo .skyline-brand-legal {
    display: none !important;
  }

  .home-one-logo .skyline-brand-wordmark {
    opacity: .92;
    font-family: "Marcellus", Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .075em;
    white-space: nowrap;
  }

  .home-one-logo .skyline-brand-accent {
    font-size: 13px;
    color: var(--medium-brown);
  }

  .home-one-logo .skyline-brand-sep {
    vertical-align: .13em;
    display: inline-block;
    width: 6px;
    height: 7px;
    margin-right: 5px;
    margin-left: 5px;
    background-color: var(--medium-brown);
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  }
}

/* "Starting from" / "Tailored Pricing" label — small italic eyebrow above
   each plan price on the service and pricing-plan cards. The heading row is
   flex, so the label claims the full first line and the price sits below it.
   Color comes from the template utility classes on the same element. */
.service-two-pricing-item-heading {
  flex-wrap: wrap;
}

.pricing-start-label {
  width: 100%;
  margin-bottom: 4px;
  font-size: 12px;
  font-style: italic;
  letter-spacing: .18em;
  line-height: 1;
  opacity: .85;
  text-transform: none;
}

/* Goal cards — give every photo the first image's frame (736×1103) so all
   four tiles in the grid have identical width and height. The existing
   object-fit: cover simply crops the taller/wider photos to fit. */
.service-two-goal-image-item-wrapper {
  aspect-ratio: 736 / 1103;
}

/* Contact form — desktop-only spacing. The template export pulls the form
   -172px up into the banner; the brand now wants it fully below the banner
   with a 24px gap. Mobile/tablet (≤767px) keeps its existing 0px reset
   untouched. */
@media screen and (min-width: 992px) {
  .contact-us-two-form {
    margin-top: 24px !important;
  }
}

/* Services page — advice chips: 20px uppercase Marcellus spills out of the
   bordered rectangle (text column is capped at 143px by the template).
   Smaller size + tighter tracking keeps every word inside the box. */
.service-three-advice-item .heading-five {
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: .03em;
}

/* Services: translated headings can wrap to extra lines. Align the photo
   to the top instead of the bottom of the growing text column. */
@media screen and (min-width: 992px) {
  .service-three-advice-wrapper {
    align-items: flex-start;
  }
  .service-three-advice-text {
    padding-top: 32px;
    min-width: 0;
  }
  .skyline-italian .service-three-advice-heading h2 {
    font-size: clamp(32px, 2.8vw, 43px);
    line-height: 1.12;
    letter-spacing: -.025em;
  }
}

/* Services — advice photo: keep the previous image's frame (625x840). The
   replacement jpeg is proportionally taller, so it is center-cropped
   instead of stretching the column. */
.service-three-advice-main-image img {
  object-fit: cover;
}

/* Services — advice chips now lead with an index number (01–04) and carry a
   small label plus the title; the template icon is gone. */
.advice-item-number {
  font-family: "Marcellus", Georgia, "Times New Roman", serif;
  font-size: 30px;
  line-height: 1;
  flex: 0 0 auto;
}

.service-three-advice-item .advice-item-label {
  font-size: 11px;
  margin-bottom: 8px;
}

/* About page — replacement photos are taller than the template frames, so
   they center-crop inside the original (550x325 / 353.5x658) aspect kept on
   the img attributes; rendered heights stay identical to the old images. */
.about-three-service-item img.image-effect,
.about-three-success-image-wrapper img.image-effect {
  object-fit: cover;
}

/* Stats under the advice photo: small title between value and description. */
.about-two-analysis-item .top-heading-text {
  display: block;
  margin-top: 10px;
  margin-bottom: 8px;
  font-size: 13px;
}

/* Services — planning section: the template keeps one photo visible and the
   others as IX2 cross-fade overlays. The swap interaction does not run here,
   so services.html marks its replacement photo (image-four) as the visible
   in-flow anchor, sized like the template slots (555px on desktop). */
.skyline-planning-active {
  width: 555px;
  max-width: 100%;
}

.skyline-planning-active img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 555 / 753;
}

/* Same section: the three template photos are cross-fade overlays whose
   native boxes (555x753) were shorter than the visible frame (555x990),
   so on hover the swap looked misaligned. They now fill the frame height,
   center-cropping. */
.skyline-planning-overlay {
  height: 100%;
}

.skyline-planning-overlay img {
  height: 100%;
  object-fit: cover;
}

/* Home — "OUR EXPERTISE" (desktop only): the text column rendered ~905px
   next to a ~523px image column. Tighten fonts/paddings so both sides
   sit at compatible heights. Mobile keeps the stacked template sizes. */
@media screen and (min-width: 992px) {
  .home-one-consultant-text .top-heading-text {
    font-size: 13px;
  }

  .home-one-consultant-heading {
    padding-top: 14px;
  }

  .home-one-consultant-heading h2 {
    font-size: 30px;
    line-height: 1.2;
  }

  .home-one-consultant-paragraph {
    padding-top: 16px;
  }

  .home-one-consultant-paragraph p {
    font-size: 14px;
    line-height: 1.5;
  }

  .home-one-consultant-number-wrapper {
    padding-top: 20px;
    grid-row-gap: 12px;
    grid-column-gap: 12px;
  }

  .home-one-consultant-item-heading .heading-two {
    font-size: 32px;
    line-height: 1.15;
  }

  .home-one-consultant-item-paragraph .skyline-stat-title {
    font-size: 14px;
    line-height: 1.3;
  }

  .home-one-consultant-item-paragraph p {
    font-size: 12.5px;
    line-height: 1.45;
  }
}

/* Services — planning cards share the advice band's #1e140e background.
   The template painted them cream (#f6edeb) with dark text; on the new dark
   surface the text palette flips to the same cream/light-brown combination
   the service-three-advice section uses. Item backgrounds were also baked
   transparent by Webflow export inline styles — stripped from the HTML. */
.home-two-planning-item {
  background-color: #1e140e;
  border-bottom-color: #936c63;
  transition: background-color .35s ease, border-color .35s ease;
}

.home-two-planning-item .top-heading-text {
  color: #c99b8f;
}

.home-two-planning-item .heading-three {
  color: #f6edeb;
  transition: color .35s ease;
}

.home-two-planning-item:hover {
  background-color: #2a1d16;
  border-bottom-color: #c99b8f;
}

.home-two-planning-item:hover .heading-three {
  color: #ffffff;
}

/* Desktop: the text column (4 cards ≈ 875–973px) overflowed the fixed
   555×753 photo. Stretch the row and let the cards share the image height
   evenly (flex:1), with tighter card padding and a smaller title in the
   992–1279 band where the column is only ~384px wide and titles wrap to
   3–4 lines. */
@media (min-width: 992px) {
  .home-two-planning-main {
    align-items: stretch;
  }

  .home-two-planning-text {
    display: flex;
    flex-direction: column;
  }

  .home-two-planning-item {
    flex: 1 1 auto;
    padding-top: 20px;
    padding-bottom: 19px;
  }
}

@media (min-width: 992px) and (max-width: 1279px) {
  .home-two-planning-item {
    padding-left: 20px;
    padding-right: 20px;
  }

  .home-two-planning-item .heading-three {
    font-size: 20px;
    line-height: 26px;
  }
}

/* Team cards — round the image surface everywhere the team grid renders
   (home + about responsive/desktop cards, member-page grids). The radius
   goes on the image wrapper with overflow hidden so the photo AND its
   gradient/blur overlays clip together; hero portraits, service photos and
   section background images are intentionally untouched. */
.home-one-team-item-image,
.home-two-team-image {
  border-radius: 10px;
  overflow: hidden;
}

/* Home offer slider (mobile): the two replacement jpegs are 16:9 while the
   template webp slides are 664:424. On desktop flex stretch hid the gap, but
   the stacked/grid layouts let each wrapper take the image's own ratio, so
   the new cards sat ~12% shorter. Pin the frame to the template ratio; the
   img (width/height 100% + object-fit cover) center-crops to match. */
@media (max-width: 991px) {
  .home-one-offer-image {
    aspect-ratio: 664 / 424;
  }
}

/* Content photos across the site get the same 10px language as the team
   cards: radius on the frame wrapper with overflow hidden so gradients,
   captions and reveal animations clip together. Excluded by design:
   full-bleed hero backgrounds (picture/hero slides, Gold_Coin floaters are
   in-scope as card photos), arrows, ticks and other icons. */
.home-one-link-section .image-animation-trigger, /* home service rows (cover-image reveal) */
.home-one-consult-link .image-animation-trigger,
.skyline-captioned-portrait,                     /* home consultant portraits + captions */
.home-one-offer-image,                           /* home offer slider cards */
.home-one-report-image,                          /* home finance stats images */
.home-one-analysis-image,                        /* home analysis photo */
.home-one-blog-image-wrapper,                    /* home blog banner photos */
.about-three-service-image-wrapper,              /* about service item photos */
.about-three-success-image-one,                  /* about success photos */
.team-details-member-image-main,                 /* member page hero portrait */
.home-two-planning-image,                        /* services planning photo stack */
.service-three-advice-main-image,                /* services advice photo */
.service-two-goal-image-item-wrapper,            /* service goal card photos */
.contact-us-one-box-image,                       /* contact info-box photos */
.contact-us-two-form-image,                      /* contact form side photo */
.blog-post-item-image,                           /* articles grid cards */
.home-three-blog-image,                          /* latest-blog cards (home/articles/details) */
.blog-details-hero-image {                       /* article hero photo */
  border-radius: 10px;
  overflow: hidden;
}

/* Contact — split frame: the side photo rounds only on the LEFT and the
   form panel rounds only on the RIGHT, so together they read as one
   rounded block (desktop/tablet; on <768 they stack and both keep the
   full 10px). Form panel repaints from template #eedcd4 to the paper
   #f7f7f2; pink inputs go white so they sit cleanly on the paper, inks
   follow the warm palette (labels #462720, input text #1e140e, muted
   placeholder), and the submit button sheds the leftover template navy
   (#052345) for the deep brown. */
.contact-us-two-form-main-wrapper {
  background-color: #f7f7f2;
  border-radius: 10px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .contact-us-two-form-image {
    border-radius: 10px 0 0 10px;
  }

  .contact-us-two-form-main-wrapper {
    border-radius: 0 10px 10px 0;
  }
}

.contact-us-two-form-main-wrapper .contact-reference-field-label {
  color: #462720;
}

.contact-us-two-form-main-wrapper .contact-input-field {
  background-color: #ffffff;
  border: 1px solid #d9ccc4;
  color: #1e140e;
}

.contact-us-two-form-main-wrapper .contact-input-field::placeholder {
  color: #9c8a80;
}

.contact-us-two-form-main-wrapper .contact-input-field:focus {
  border-color: #c99b8f;
}

.contact-us-two-form-main-wrapper .body-text {
  color: #462720;
}

.contact-us-two-form-main-wrapper .contact-one-button {
  color: #1e140e;
}