/* ASTROLOGER MOHIT SHASTRI — ORIGINAL LANDING PAGE DESIGN
   CSS architecture: global → header → hero → services → editorial → contact → responsive
   Edit site palette in :root. No page builders required. */
:root {
   --pine: #8c3819;
   --pine-deep: #542313;
   --pine-ink: #542313;
   --pine-light: #b85b25;
   --cream: #fff7eb;
   --sand: #fbe8d1;
   --sand-light: #fff2e1;
   --white: #fffdf8;
   --ink: #4b2b21;
   --muted: #806b5e;
   --copper: #f09a45;
   --copper-dark: #ae4b20;
   --line: rgba(101, 55, 32, .15);
   --serif: 'Playfair Display', Georgia, serif;
   --body: 'Playfair Display', Georgia, serif;
   --display: 'Playfair Display', Georgia, serif;
   --shadow: 0 22px 70px rgba(91, 44, 24, .10);
   --radius: 16px;
   --container: 1190px;
   --wa-green: #25D366;
   --wa-green-hover: #1ebe5d;
   --wa-ink: #063f20
}

*,
*::before,
*::after {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 110px
}

body {
   margin: 0;
   color: var(--ink);
   background: var(--cream);
   font: 400 15px/1.75 var(--body);
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden
}

body.menu-open {
   overflow: hidden
}

button,
input,
textarea,
select {
   font: inherit
}

button {
   cursor: pointer
}

a {
   text-decoration: none;
   color: inherit
}

img {
   display: block;
   max-width: 100%;
   height: auto
}

ul {
   list-style: none;
   padding: 0
}

h1,
h2,
h3,
h4,
p {
   margin-top: 0
}

h1,
h2,
h3 {
   font-weight: 500
}

::selection {
   background: #ffcb91;
   color: #552917
}

:focus-visible {
   outline: 3px solid #ee943b !important;
   outline-offset: 4px
}

.container {
   width: min(var(--container), calc(100% - 64px));
   margin-inline: auto
}

.section {
   padding: 112px 0
}

.skip-link {
   position: absolute;
   top: -70px;
   left: 16px;
   background: #fff;
   color: var(--pine);
   padding: 9px 14px;
   z-index: 999
}

.skip-link:focus {
   top: 10px
}

.top-note {
   background: #5d2714;
   color: #fff0d9;
   font: 500 10px/1.3 var(--display);
   letter-spacing: .04em
}

.top-note-inner {
   min-height: 35px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px
}

.top-note i {
   color: #ffc279;
   margin-right: 7px
}

.top-note a {
   transition: color .2s
}

.top-note a:hover {
   color: #fff
}

.site-header {
   height: 88px;
   background: #fffaf4;
   position: sticky;
   top: 0;
   z-index: 90;
   border-bottom: 1px solid rgba(17, 52, 41, .06);
   transition: height .25s, box-shadow .25s
}

.site-header.is-scrolled {
   height: 73px;
   box-shadow: 0 4px 23px rgba(11, 44, 34, .08)
}

.nav-shell {
   height: 100%;
   display: flex;
   align-items: center;
   gap: 28px;
   justify-content: space-between
}

.brand {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   flex-shrink: 0
}

.brand-icon {
   width: 48px;
   height: 48px;
   border: 1px solid #f3b16a;
   background: var(--pine);
   border-radius: 50%;
   display: grid;
   place-items: center;
   color: #ffe0a9;
   position: relative;
   font: 26px Georgia, serif
}

.brand-icon:before {
   content: '';
   position: absolute;
   inset: 4px;
   border: 1px solid rgba(236, 207, 156, .34);
   border-radius: 50%
}

.brand-icon span {
   position: relative;
   transform: translateY(-1px)
}

.brand-copy {
   display: flex;
   flex-direction: column;
   gap: 3px;
   white-space: nowrap
}

.brand-copy strong {
   font: 600 21px/1.15 var(--serif);
   letter-spacing: -.045em;
   color: #783016
}

.brand-copy small {
   font: 700 8px/1.25 var(--display);
   letter-spacing: .19em;
   color: #bb6b30
}

.primary-nav {
   display: flex;
   align-items: center;
   gap: 31px;
   margin-left: auto
}

.primary-nav>a:not(.mobile-menu-cta) {
   font: 700 11px var(--display);
   letter-spacing: .015em;
   transition: color .2s;
   position: relative
}

.primary-nav>a:not(.mobile-menu-cta):after {
   content: '';
   position: absolute;
   bottom: -8px;
   left: 0;
   right: 0;
   background: #d76927;
   height: 2px;
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .2s
}

.primary-nav>a:hover {
   color: #c65d24
}

.primary-nav>a:hover:after {
   transform: scaleX(1)
}

.mobile-menu-cta {
   display: none
}

.nav-cta {
   display: flex;
   align-items: center;
   gap: 12px;
   background: #a8481b;
   color: white;
   border-radius: 8px;
   padding: 10px 15px;
   min-width: 171px;
   transition: transform .2s, background .2s
}

.nav-cta:hover {
   background: #c46427;
   transform: translateY(-2px)
}

.nav-cta-icon {
   font-size: 15px;
   color: #fff0d0
}

.nav-cta>span:nth-child(2) {
   font: 800 11px/1.3 var(--display)
}

.nav-cta small {
   display: block;
   color: #f3d5b8;
   font-size: 7px;
   letter-spacing: .09em;
   margin-top: 3px
}

.nav-cta>i {
   font-size: 11px;
   margin-left: auto
}

.menu-toggle {
   display: none;
   background: none;
   border: 0;
   width: 44px;
   height: 44px;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 5px
}

.menu-toggle span {
   display: block;
   width: 22px;
   height: 2px;
   border-radius: 2px;
   background: var(--pine);
   transition: transform .25s, opacity .25s
}

/* Shared type and buttons */
.section-kicker {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   color: var(--copper-dark);
   font: 800 10px/1.3 var(--display);
   letter-spacing: .18em;
   text-transform: uppercase
}

.section-kicker.light {
   color: #ffcc8c
}

.kicker-star {
   font: 20px Georgia, serif;
   line-height: 0;
   letter-spacing: 0
}

.section h2,
.contact-section h2 {
   font: 500 clamp(32px, 3.55vw, 49px)/1.34 var(--serif);
   letter-spacing: -.055em;
   color: var(--pine-ink);
   margin: 25px 0 0
}

.section h2 em,
.contact-section h2 em {
   color: #cb6327;
   font-weight: 500
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   border: 1px solid transparent;
   border-radius: 7px;
   padding: 16px 23px;
   font: 800 12px/1.2 var(--display);
   white-space: nowrap;
   transition: transform .23s, background .23s, box-shadow .23s;
   min-height: 51px
}

.btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 24px rgba(10, 26, 19, .15)
}

.btn-copper {
   background: #f5a04a;
   color: #4b2317
}

.btn-copper:hover {
   background: #ffb76b
}

.btn-outline-light {
   border-color: rgba(242, 236, 212, .40);
   color: #fffaec
}

.btn-outline-light:hover {
   background: rgba(255, 255, 255, .10)
}

.btn-forest {
   background: var(--pine);
   color: #fff
}

.btn-forest:hover {
   background: #c46629
}

.btn-tail {
   margin-left: 9px;
   font-size: 10px
}

.text-link {
   font: 800 12px/1.8 var(--display);
   color: #a3481e;
   border-bottom: 1px solid #dc873f;
   display: inline-flex;
   align-items: center;
   gap: 18px;
   padding-bottom: 7px;
   transition: gap .2s, color .2s
}

.text-link:hover {
   gap: 24px;
   color: #bd5423
}

.text-link i {
   font-size: 11px
}

.section-heading {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 60px;
   margin-bottom: 47px
}

.section-heading h2 {
   margin-top: 20px
}

.section-heading>p {
   max-width: 320px;
   color: var(--muted);
   font-size: 14px;
   line-height: 1.9;
   margin: 0 0 10px
}

.section-heading.center {
   display: flex;
   align-items: center;
   flex-direction: column;
   text-align: center;
   gap: 0
}

.section-heading.center>p {
   max-width: 440px;
   margin: 15px 0 0
}

/* Hero, photography and orbital details */
.hero {
   background: radial-gradient(ellipse at 77% 42%, #c96c2c 0%, #994118 42%, #632612 100%);
   color: #fff;
   position: relative;
   overflow: hidden;
   isolation: isolate
}

.hero:before {
   content: '';
   position: absolute;
   left: -240px;
   bottom: -360px;
   width: 650px;
   height: 650px;
   border: 1px solid rgba(230, 212, 169, .11);
   border-radius: 50%;
   box-shadow: 0 0 0 80px rgba(230, 212, 169, .022), 0 0 0 160px rgba(230, 212, 169, .015);
   pointer-events: none
}

.hero-noise {
   position: absolute;
   inset: 0;
   opacity: .24;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.13' filter='url(%23n)'/%3E%3C/svg%3E");
   pointer-events: none
}

.hero-grid {
   min-height: 670px;
   display: grid;
   grid-template-columns: 1.04fr .96fr;
   align-items: center;
   gap: 60px;
   position: relative
}

.hero-content {
   position: relative;
   z-index: 4;
   padding: 75px 0 85px
}

.eyebrow {
   display: flex;
   align-items: center;
   gap: 12px;
   color: #ffe1b5;
   letter-spacing: .18em;
   font: 800 10px/1.6 var(--display);
   text-transform: uppercase
}

.eyebrow-line {
   width: 35px;
   height: 1px;
   background: #ffc47b
}

.hero h1 {
   font: 500 clamp(45px, 5.15vw, 74px)/1.19 var(--serif);
   letter-spacing: -.065em;
   margin: 24px 0 22px;
   max-width: 620px
}

.hero h1 em {
   color: #ffc779;
   font-weight: 500;
   position: relative
}

.hero h1 em:after {
   position: absolute;
   bottom: -5px;
   left: 7%;
   right: 0;
   border-bottom: 1px solid rgba(215, 164, 107, .75);
   content: '';
   transform: rotate(-3deg)
}

.hero-intro {
   font-size: 15px;
   line-height: 1.95;
   color: #fff0dd;
   max-width: 500px;
   margin-bottom: 30px
}

.hero-intro strong {
   color: #fff;
   font-weight: 600
}

.hero-ctas {
   display: flex;
   flex-wrap: wrap;
   gap: 12px
}

.hero-footnotes {
   display: flex;
   flex-wrap: wrap;
   gap: 22px;
   color: #fff0db;
   font-size: 11px;
   margin-top: 29px
}

.hero-footnotes i {
   color: #ffcc8d;
   margin-right: 7px
}

.hero-visual {
   height: 618px;
   position: relative;
   align-self: end;
   display: flex;
   align-items: flex-end;
   justify-content: center
}

.portrait-wrap {
   width: 80%;
   height: 88%;
   margin-bottom: 34px;
   border-radius: 210px 210px 105px 105px;
   overflow: hidden;
   border: 6px solid rgba(226, 196, 141, .34);
   position: relative;
   z-index: 2;
   box-shadow: 0 24px 75px rgba(0, 13, 12, .25)
}

.portrait-wrap:after {
   content: '';
   position: absolute;
   inset: 0;
   border: 1px solid rgba(255, 237, 184, .45);
   border-radius: inherit;
   pointer-events: none
}

.portrait-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 26%;
   filter: saturate(.90) contrast(1.04)
}

.portrait-fade {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 25%;
   background: linear-gradient(transparent, rgba(12, 39, 31, .60))
}

.hero-halo {
   position: absolute;
   border: 1px solid rgba(223, 191, 136, .22);
   border-radius: 50%;
   z-index: 1;
   left: 50%;
   top: 44%;
   transform: translate(-50%, -50%)
}

.halo-one {
   width: 530px;
   height: 530px
}

.halo-two {
   width: 603px;
   height: 603px;
   border-style: dashed;
   animation: spin 85s linear infinite
}

.hero-orbit-star {
   position: absolute;
   color: #ffb75e;
   z-index: 3;
   font-size: 25px;
   animation: gentle-float 5s ease-in-out infinite
}

.star-a {
   top: 18%;
   left: 3%
}

.star-b {
   right: 2%;
   top: 36%;
   font-size: 31px;
   animation-delay: 1.4s
}

.floating-note {
   position: absolute;
   right: -20px;
   bottom: 145px;
   z-index: 5;
   display: flex;
   gap: 14px;
   align-items: center;
   padding: 17px 22px 17px 15px;
   background: #fff4e1;
   color: var(--pine);
   border-radius: 9px;
   box-shadow: 0 15px 50px rgba(0, 0, 0, .20);
   animation: gentle-float 5s ease-in-out infinite
}

.floating-symbol {
   width: 40px;
   height: 40px;
   border: 1px solid #f5bd76;
   border-radius: 50%;
   display: grid;
   place-items: center;
   color: #bd6229;
   font-size: 22px
}

.floating-note small {
   font: 800 8px var(--display);
   letter-spacing: .11em;
   color: #bd703d
}

.floating-note strong {
   display: block;
   font: 500 17px/1.35 var(--serif);
   margin-top: 5px
}

.portrait-caption {
   position: absolute;
   bottom: 54px;
   color: #ffe3b9;
   z-index: 3;
   font: 500 15px Georgia, serif;
   letter-spacing: .05em
}

.portrait-caption span {
   padding: 0 8px
}

.hero-scroll {
   position: absolute;
   bottom: 24px;
   left: max(32px, calc((100% - var(--container))/2));
   display: flex;
   align-items: center;
   gap: 11px;
   color: #ffe2c3;
   font: 800 9px var(--display);
   letter-spacing: .2em
}

.hero-scroll>span {
   height: 25px;
   width: 14px;
   border: 1px solid #e4b787;
   border-radius: 10px;
   display: block;
   position: relative
}

.hero-scroll>span:before {
   content: '';
   height: 5px;
   width: 2px;
   border-radius: 4px;
   position: absolute;
   top: 6px;
   left: 5px;
   background: #ffca87;
   animation: scroll-dot 1.4s infinite
}

@keyframes scroll-dot {
   50% {
      transform: translateY(6px);
      opacity: .2
   }
}

/* Ribbon */
.trust-ribbon {
   border-bottom: 1px solid #f2dcc2;
   background: #fff2df
}

.trust-ribbon-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 15px;
   min-height: 80px
}

.trust-ribbon-inner>span:not(.ribbon-label) {
   font: 700 11px var(--display);
   color: #824020;
   display: flex;
   align-items: center;
   gap: 10px
}

.trust-ribbon-inner>span:not(.ribbon-label) i {
   color: #db7b31;
   font-size: 17px
}

.trust-ribbon-inner .ribbon-label {
   font: 800 9px var(--display);
   color: #b85e2e;
   letter-spacing: .16em
}

/* Intro */
.welcome-section {
   background: var(--white)
}

.welcome-grid {
   display: grid;
   grid-template-columns: 1.14fr .86fr;
   gap: 120px;
   align-items: start
}

.welcome-title h2 {
   margin-top: 27px
}

.small-rule {
   background: #e28637;
   height: 2px;
   width: 56px;
   margin-top: 28px
}

.welcome-body {
   padding-top: 32px
}

.welcome-body p {
   font-size: 14px;
   color: #7f6a5d;
   line-height: 2.05;
   margin: 0 0 16px
}

.welcome-body .text-link {
   margin-top: 10px
}

/* Service cards */
.services-section {
   background: #fff0dc
}

.services-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 22px
}

.service-card {
   border: 1px solid rgba(47, 65, 50, .075);
   background: #fffaf4;
   border-radius: 12px;
   overflow: hidden;
   min-height: 390px;
   display: flex;
   flex-direction: column;
   box-shadow: 0 4px 12px rgba(22, 50, 37, .025);
   transition: box-shadow .3s, transform .3s
}

.service-card:hover {
   transform: translateY(-7px);
   box-shadow: 0 18px 40px rgba(32, 67, 48, .12)
}

.service-image {
   height: 172px;
   position: relative;
   overflow: hidden;
   background: #bc5c25
}

.service-image:after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, .20), transparent 45%, rgba(0, 0, 0, .06));
   pointer-events: none
}

.service-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .75s cubic-bezier(.2, .7, .2, 1)
}

.service-card:hover .service-image img {
   transform: scale(1.065)
}

.service-tag {
   position: absolute;
   top: 16px;
   left: 17px;
   color: #f2ead9;
   z-index: 2;
   font: 800 9px/1.2 var(--display);
   letter-spacing: .13em
}

.service-icon {
   position: absolute;
   z-index: 3;
   right: 18px;
   bottom: -3px;
   width: 50px;
   height: 50px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: #fffaf1;
   border: 5px solid #fffaf1;
   color: #b2804a;
   font-size: 21px;
   box-shadow: 0 6px 15px rgba(0, 0, 0, .07)
}

.service-body {
   padding: 27px 24px 21px;
   flex: 1;
   display: flex;
   flex-direction: column
}

.service-body h3 {
   font: 600 21px/1.35 var(--serif);
   letter-spacing: -.04em;
   color: #713018;
   margin: 0 0 10px
}

.service-body p {
   font-size: 12px;
   line-height: 1.95;
   color: #887061;
   margin-bottom: 22px;
   flex: 1
}

.service-body a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 15px;
   border-top: 1px solid #e9e7dc;
   padding-top: 14px;
   color: #9e6c45;
   font: 800 11px var(--display);
   transition: color .2s
}

.service-body a:hover {
   color: #8c3819
}

.service-body a i {
   font-size: 13px
}

.service-card-wide {
   grid-column: 2 / 3
}

.services-bottom {
   margin-top: 34px;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 15px;
   flex-wrap: wrap
}

.services-bottom p {
   font-size: 13px;
   color: #846b5b;
   margin: 0
}

.services-bottom a {
   color: #b24b1c;
   font: 800 12px var(--display);
   border-bottom: 1px solid #bb976d
}

.services-bottom a i {
   font-size: 10px;
   margin-left: 8px
}

/* Editorial full bleed */
.quote-section {
   background: var(--pine-ink);
   color: #fff;
   min-height: 388px;
   overflow: hidden
}

.quote-grid {
   display: grid;
   grid-template-columns: 38% 62%;
   align-items: center;
   min-height: 388px
}

.quote-art {
   height: 100%;
   min-height: 388px;
   position: relative;
   overflow: hidden
}

.quote-art:before {
   content: '';
   position: absolute;
   left: -120px;
   top: -190px;
   width: 610px;
   height: 610px;
   background: radial-gradient(circle, transparent 33%, rgba(219, 183, 121, .20) 33.2%, transparent 33.7%, transparent 44%, rgba(219, 183, 121, .17) 44.2%, transparent 44.7%, transparent 56%, rgba(219, 183, 121, .13) 56.2%, transparent 56.7%);
   animation: spin 100s linear infinite
}

.quote-art:after {
   content: '✦       ✧     ✦';
   position: absolute;
   top: 65px;
   left: 0;
   color: #c49a67;
   font-size: 19px;
   letter-spacing: 55px;
   opacity: .6
}

.quote-mandala {
   height: 285px;
   width: 285px;
   border-radius: 50%;
   border: 1px solid rgba(217, 183, 130, .31);
   position: absolute;
   top: 60px;
   left: 55px;
   display: grid;
   place-items: center;
   box-shadow: 0 0 0 17px rgba(193, 152, 98, .05), 0 0 0 35px rgba(193, 152, 98, .035)
}

.quote-mandala:before {
   content: '';
   position: absolute;
   inset: 20px;
   border: 1px dashed rgba(224, 191, 136, .34);
   border-radius: 50%
}

.quote-mandala span {
   font: 100px Georgia, serif;
   color: #ddb880;
   text-shadow: 0 0 34px rgba(226, 177, 99, .2)
}

.quote-copy {
   padding: 60px 0 60px 50px
}

.quote-copy blockquote {
   margin: 25px 0 18px;
   max-width: 720px;
   font: 500 clamp(25px, 3vw, 39px)/1.55 var(--serif);
   letter-spacing: -.04em;
   color: #faf7ea
}

.quote-copy blockquote em {
   color: #e7b57c
}

.quote-underline {
   height: 1px;
   width: 72px;
   background: #ce9b64
}

.quote-sub {
   display: block;
   font: 800 9px var(--display);
   letter-spacing: .17em;
   color: #e9b98f;
   margin-top: 20px
}

/* Process */
.approach-section {
   background: #fcfbf6
}

.steps-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 45px;
   margin-top: 64px;
   position: relative
}

.steps-grid:before {
   content: '';
   position: absolute;
   left: 15%;
   right: 15%;
   top: 42px;
   border-top: 1px dashed #d6ceb9
}

.step {
   text-align: center;
   position: relative
}

.step-number {
   font: 600 11px var(--display);
   color: #b17c4c;
   letter-spacing: .07em
}

.step-symbol {
   width: 74px;
   height: 74px;
   border: 1px solid #d8b98d;
   color: #b2844e;
   background: #fffaf4;
   display: grid;
   place-items: center;
   border-radius: 50%;
   font-size: 26px;
   margin: 15px auto 25px;
   position: relative;
   z-index: 1;
   transition: transform .3s
}

.step:hover .step-symbol {
   transform: translateY(-5px);
   background: #ffeed7
}

.step h3 {
   font: 600 21px var(--serif);
   letter-spacing: -.04em;
   color: var(--pine);
   margin-bottom: 12px
}

.step p {
   font-size: 13px;
   color: #887061;
   line-height: 1.9;
   max-width: 290px;
   margin-inline: auto
}

.step-cta {
   text-align: center;
   margin-top: 31px
}

/* Difference editorial */
.difference-section {
   background: #ffe9d0;
   padding: 105px 0
}

.difference-grid {
   display: grid;
   grid-template-columns: .8fr 1.2fr;
   gap: 105px;
   align-items: start
}

.difference-intro {
   position: relative;
   min-height: 390px
}

.difference-intro p {
   max-width: 360px;
   color: #856d5e;
   font-size: 14px;
   line-height: 2;
   margin: 21px 0
}

.difference-ornament {
   color: #f1d6b5;
   position: absolute;
   left: -55px;
   bottom: -60px;
   font: 205px/1 Georgia, serif;
   z-index: 0
}

.difference-intro>*:not(.difference-ornament) {
   position: relative;
   z-index: 2
}

.difference-points {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 35px 28px;
   padding-top: 20px
}

.difference-point {
   display: flex;
   gap: 16px;
   align-items: flex-start
}

.difference-point>span {
   width: 44px;
   height: 44px;
   flex: 0 0 44px;
   border-radius: 13px;
   background: #fff9ed;
   display: grid;
   place-items: center;
   border: 1px solid #eee0c6;
   color: #b4824f;
   font-size: 17px
}

.difference-point h3 {
   font: 600 18px/1.4 var(--serif);
   letter-spacing: -.04em;
   margin: 0 0 9px;
   color: #753219
}

.difference-point p {
   font-size: 12px;
   color: #8a7262;
   line-height: 1.95;
   margin: 0
}

/* Mini consult banner */
.consult-banner {
   background: linear-gradient(110deg, #cc5a1b, #ed9035);
   color: #fff;
   padding: 37px 0
}

.consult-banner-inner {
   display: flex;
   align-items: center;
   gap: 26px
}

.consult-banner-icon {
   font: 55px Georgia, serif;
   color: #f09a45;
   line-height: 1
}

.consult-banner-inner>div {
   margin-right: auto
}

.consult-banner-inner>div>span {
   font: 800 9px var(--display);
   letter-spacing: .16em;
   color: #ead2ab
}

.consult-banner h2 {
   font: 500 30px var(--serif);
   letter-spacing: -.03em;
   margin: 4px 0 0
}

/* FAQs */
.faq-section {
   background: #fff7eb
}

.faq-grid {
   display: grid;
   grid-template-columns: .75fr 1.25fr;
   gap: 88px
}

.faq-left p {
   font-size: 13px;
   color: #816d5c;
   margin: 21px 0
}

.faq-item {
   border-bottom: 1px solid #eed8bf
}

.faq-item:first-child {
   border-top: 1px solid #eed8bf
}

.faq-item summary {
   padding: 21px 2px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 24px;
   font: 700 13px/1.65 var(--display);
   list-style: none;
   cursor: pointer;
   color: #593123;
   transition: color .2s
}

.faq-item summary::-webkit-details-marker {
   display: none
}

.faq-item summary:hover {
   color: #b37d4e
}

.faq-item .faq-toggle {
   flex: 0 0 25px;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   border: 1px solid #ded2c3;
   position: relative;
   color: #a87950
}

.faq-toggle:before,
.faq-toggle:after {
   content: '';
   position: absolute;
   background: currentColor;
   width: 9px;
   height: 1.5px
}

.faq-toggle:after {
   transform: rotate(90deg);
   transition: transform .2s
}

.faq-item[open] .faq-toggle:after {
   transform: rotate(0)
}

.faq-item[open] summary {
   color: #ae7847
}

.faq-item p {
   color: #738075;
   font-size: 13px;
   line-height: 1.9;
   padding: 0 38px 23px 2px;
   margin: 0
}

.faq-item p a {
   text-decoration: underline;
   color: var(--pine)
}

/* Lead form and direct contact */
.contact-section {
   background: #612b19;
   color: #f2f2e7;
   padding: 104px 0;
   position: relative;
   overflow: hidden
}

.contact-section:before {
   content: '';
   position: absolute;
   left: -240px;
   bottom: -350px;
   width: 790px;
   height: 790px;
   border: 1px solid rgba(220, 186, 128, .10);
   border-radius: 50%;
   box-shadow: 0 0 0 90px rgba(210, 180, 120, .025), 0 0 0 180px rgba(210, 180, 120, .015);
   pointer-events: none
}

.contact-grid {
   position: relative;
   display: grid;
   grid-template-columns: .90fr 1.1fr;
   gap: 95px;
   align-items: center
}

.contact-section h2 {
   color: white;
   font-size: clamp(39px, 4vw, 55px);
   margin: 25px 0 21px
}

.contact-section h2 em {
   color: #dfae73
}

.contact-copy>p:not(.contact-disclaimer) {
   color: #f6d8bb;
   font-size: 14px;
   line-height: 2;
   max-width: 430px
}

.contact-methods {
   display: grid;
   gap: 12px;
   margin-top: 28px;
   max-width: 440px
}

.contact-method {
   display: flex;
   gap: 15px;
   align-items: center;
   padding: 16px 19px;
   background: #7d371b;
   border: 1px solid rgba(235, 225, 190, .15);
   border-radius: 9px;
   transition: background .25s, transform .25s
}

.contact-method:hover {
   transform: translateX(4px);
   background: #a14c23
}

.contact-method>span:first-child {
   height: 41px;
   width: 41px;
   flex: 0 0 41px;
   border-radius: 50%;
   background: #a34e26;
   display: grid;
   place-items: center;
   color: #e1be8a;
   font-size: 17px
}

.contact-method>span:nth-child(2) {
   flex: 1
}

.contact-method small {
   display: block;
   font: 800 9px var(--display);
   letter-spacing: .1em;
   color: #f5c69d;
   margin-bottom: 5px
}

.contact-method strong {
   display: block;
   font: 700 17px var(--display);
   color: #f3efdf
}

.contact-method>i {
   font-size: 12px;
   color: #c3ad85
}

.contact-disclaimer {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   color: #e7bb9c;
   font-size: 11px;
   line-height: 1.8;
   margin: 22px 0 0
}

.contact-disclaimer i {
   padding-top: 3px;
   color: #c89f70
}

.form-shell {
   background: #fffdf8;
   color: #61321f;
   border-radius: 14px;
   padding: 38px 38px 32px;
   box-shadow: 0 25px 90px rgba(0, 15, 12, .2)
}

.form-head {
   text-align: center
}

.form-ornament {
   font: 28px Georgia, serif;
   color: #c19a67
}

.form-kicker {
   display: block;
   font: 800 9px var(--display);
   letter-spacing: .18em;
   color: #b48754;
   margin: 4px 0 12px
}

.form-head h3 {
   font: 600 27px var(--serif);
   letter-spacing: -.05em;
   margin: 0 0 8px;
   color: #642f1b
}

.form-head p {
   font-size: 12px;
   color: #806e62;
   line-height: 1.7;
   margin: 0 0 26px
}

.form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 15px
}

.field {
   margin-bottom: 16px
}

.field label {
   display: block;
   font: 800 11px var(--display);
   margin-bottom: 7px;
   color: #634334
}

.field label>span {
   color: #a9784f
}

.field .optional {
   color: #ad9684;
   font-weight: 500
}

.field input,
.field select,
.field textarea {
   width: 100%;
   border: 1px solid #eed8c4;
   border-radius: 5px;
   background: #fff;
   padding: 13px 13px;
   font-size: 12px;
   color: #623922;
   outline: 0;
   transition: border-color .2s, box-shadow .2s
}

.field input,
.field select {
   min-height: 45px
}

.field input:focus,
.field select:focus,
.field textarea:focus {
   border-color: #c39b6b;
   box-shadow: 0 0 0 3px rgba(195, 155, 107, .12)
}

.field input::placeholder,
.field textarea::placeholder {
   color: #a99687
}

.field textarea {
   resize: vertical;
   min-height: 96px
}

.field select {
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23677b6b' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 11px center;
   padding-right: 35px
}

.field [aria-invalid='true'] {
   border-color: #b04f44;
   box-shadow: 0 0 0 2px rgba(176, 79, 68, .1)
}

.consent {
   display: flex;
   gap: 10px;
   font-size: 11px;
   color: #806d5d;
   line-height: 1.7;
   margin-bottom: 18px;
   cursor: pointer
}

.consent input {
   margin: 2px 0 0;
   accent-color: #d66c29;
   width: 16px;
   height: 16px;
   flex: 0 0 16px
}

.consent b {
   color: #ab7048
}

.form-error {
   color: #923b2e;
   border: 1px solid #f1c6ba;
   background: #fff2ee;
   font-size: 12px;
   border-radius: 5px;
   padding: 11px;
   margin-bottom: 12px
}

.form-error[hidden] {
   display: none
}

.form-submit {
   width: 100%;
   border: 0;
   background: #d16a23;
   color: #fff;
   min-height: 52px
}

.form-submit:hover {
   background: #e57a2d
}

.form-submit .btn-tail {
   margin-left: auto
}

.form-note {
   font-size: 10px;
   color: #948071;
   text-align: center;
   margin: 14px 0 0;
   line-height: 1.6
}

.form-note i {
   color: #b28c61;
   margin-right: 3px
}

/* Footer, floating CTAs, animation */
.footer {
   background: #ffedd7;
   color: #734b31;
   padding: 65px 0 0
}

.footer-main {
   display: grid;
   grid-template-columns: 1.7fr .65fr 1fr .94fr;
   gap: 54px;
   padding-bottom: 46px
}

.footer-about p {
   font-size: 12px;
   line-height: 2;
   max-width: 290px;
   color: #806d5b;
   margin-top: 19px
}

.footer-column {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 11px
}

.footer-column h3 {
   font: 800 10px var(--display);
   letter-spacing: .15em;
   color: #9b774b;
   margin: 9px 0 9px
}

.footer-column a,
.footer-prompt {
   font-size: 12px;
   color: #866d59;
   transition: color .2s
}

.footer-column a:hover {
   color: var(--pine);
   text-decoration: underline
}

.footer-column a i {
   color: #a88658;
   margin-right: 7px
}

.footer-bottom {
   border-top: 1px solid #deded3;
   display: grid;
   grid-template-columns: 1fr 1.7fr auto;
   gap: 30px;
   padding: 22px 0;
   font-size: 10px;
   color: #978276;
   line-height: 1.7
}

.footer-bottom>a {
   color: var(--pine);
   white-space: nowrap;
   font-weight: 700
}

.footer-bottom>a i {
   margin-left: 8px
}

.floating-actions {
   position: fixed;
   right: 24px;
   bottom: 23px;
   z-index: 80;
   display: grid;
   gap: 11px
}

.floating-actions a {
   display: grid;
   place-items: center;
   width: 52px;
   height: 52px;
   border-radius: 50%;
   color: white;
   font-size: 22px;
   border: 3px solid white;
   box-shadow: 0 4px 19px rgba(0, 0, 0, .21);
   transition: transform .25s
}

.floating-actions a:hover {
   transform: translateY(-4px) scale(1.04)
}

.floating-call {
   background: #bf8450
}

.floating-whatsapp {
   background: #25D366
}

.mobile-sticky-cta {
   display: none
}

.js-enabled [data-reveal] {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity .78s ease, transform .78s cubic-bezier(.2, .7, .2, 1)
}

.js-enabled [data-reveal].is-visible {
   opacity: 1;
   transform: translateY(0)
}

.js-enabled .services-grid>.service-card:nth-child(2),
.js-enabled .steps-grid>.step:nth-child(2) {
   transition-delay: .08s
}

.js-enabled .services-grid>.service-card:nth-child(3),
.js-enabled .steps-grid>.step:nth-child(3) {
   transition-delay: .16s
}

@keyframes gentle-float {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-12px)
   }
}

@keyframes spin {
   to {
      transform: translate(-50%, -50%) rotate(360deg)
   }
}

/* Tablet */
@media(max-width:1120px) {
   .nav-shell {
      gap: 15px
   }

   .primary-nav {
      gap: 17px
   }

   .nav-cta {
      min-width: 143px;
      padding: 9px 12px
   }

   .hero-grid {
      gap: 24px
   }

   .hero h1 {
      font-size: clamp(45px, 5.2vw, 64px)
   }

   .hero-visual {
      height: 565px
   }

   .portrait-wrap {
      width: 87%;
      height: 86%
   }

   .floating-note {
      right: -5px;
      bottom: 100px
   }

   .halo-two {
      width: 530px;
      height: 530px
   }

   .halo-one {
      width: 450px;
      height: 450px
   }

   .welcome-grid {
      gap: 70px
   }

   .difference-grid {
      gap: 60px
   }

   .contact-grid {
      gap: 55px
   }

   .footer-main {
      gap: 25px
   }
}

@media(max-width:930px) {
   .site-header {
      height: 75px
   }

   .site-header.is-scrolled {
      height: 70px
   }

   .nav-cta {
      margin-left: auto
   }

   .menu-toggle {
      display: flex;
      order: 4
   }

   .primary-nav {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      display: none;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 12px max(26px, calc((100% - 740px)/2)) 25px;
      background: #fff7eb;
      border-top: 1px solid #f0dbc6;
      box-shadow: 0 20px 30px rgba(0, 0, 0, .09)
   }

   .primary-nav.is-open {
      display: flex
   }

   .primary-nav>a:not(.mobile-menu-cta) {
      padding: 13px 4px;
      font-size: 14px;
      border-bottom: 1px solid #ecd5be
   }

   .primary-nav>a:after {
      display: none
   }

   .mobile-menu-cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--pine);
      color: #fff;
      padding: 14px;
      margin-top: 13px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700
   }

   .menu-toggle[aria-expanded='true'] span:first-child {
      transform: translateY(7px) rotate(45deg)
   }

   .menu-toggle[aria-expanded='true'] span:nth-child(2) {
      opacity: 0
   }

   .menu-toggle[aria-expanded='true'] span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg)
   }

   .hero-grid {
      min-height: 620px
   }

   .hero-content {
      padding: 66px 0
   }

   .hero-visual {
      height: 510px
   }

   .floating-note {
      padding: 11px 15px;
      bottom: 105px
   }

   .floating-note strong {
      font-size: 14px
   }

   .floating-symbol {
      width: 30px;
      height: 30px
   }

   .halo-two {
      width: 460px;
      height: 460px
   }

   .halo-one {
      width: 400px;
      height: 400px
   }

   .trust-ribbon-inner {
      justify-content: center;
      gap: 16px 27px;
      padding: 14px 0
   }

   .trust-ribbon-inner .ribbon-label {
      width: 100%;
      text-align: center
   }

   .welcome-grid {
      gap: 40px
   }

   .services-grid {
      gap: 15px
   }

   .service-body {
      padding: 24px 18px 19px
   }

   .service-body h3 {
      font-size: 18px
   }

   .service-image {
      height: 150px
   }

   .difference-points {
      gap: 22px
   }

   .footer-main {
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: 25px
   }

   .footer-column:last-child {
      grid-column: 2/4
   }

   .footer-bottom {
      grid-template-columns: 1fr auto
   }

   .footer-bottom span:nth-child(2) {
      grid-column: 1/3;
      grid-row: 2
   }

   .quote-mandala {
      left: 0
   }
}

/* Mobile / small tablets */
@media(max-width:700px) {
   :root {
      --container: 100%
   }

   .container {
      width: calc(100% - 36px)
   }

   .section {
      padding: 72px 0
   }

   .top-note-inner {
      min-height: 31px;
      justify-content: center
   }

   .top-note-inner>span {
      font-size: 9px;
      text-align: center
   }

   .top-note-inner>a {
      display: none
   }

   .site-header {
      height: 69px
   }

   .site-header.is-scrolled {
      height: 65px
   }

   .brand-icon {
      width: 42px;
      height: 42px;
      font-size: 24px
   }

   .brand-copy strong {
      font-size: 18px
   }

   .brand-copy small {
      font-size: 7px
   }

   .nav-cta {
      display: none
   }

   .menu-toggle {
      margin-left: auto
   }

   .hero-grid {
      grid-template-columns: 1fr;
      gap: 0
   }

   .hero-content {
      padding: 68px 0 18px
   }

   .hero h1 {
      font-size: clamp(42px, 10vw, 58px);
      line-height: 1.22;
      margin: 19px 0
   }

   .hero-intro {
      font-size: 13px;
      max-width: 530px;
      line-height: 1.9
   }

   .hero-footnotes {
      margin-top: 25px;
      gap: 11px 18px;
      font-size: 10px
   }

   .hero-visual {
      height: 485px;
      max-width: 480px;
      width: 100%;
      margin: 0 auto;
      align-self: center
   }

   .portrait-wrap {
      width: 77%;
      height: 92%;
      margin-bottom: 0
   }

   .hero-halo {
      top: 50%
   }

   .halo-one {
      width: 380px;
      height: 380px
   }

   .halo-two {
      width: 450px;
      height: 450px
   }

   .floating-note {
      right: -1px;
      bottom: 75px
   }

   .portrait-caption {
      bottom: 19px
   }

   .hero-scroll {
      display: none
   }

   .trust-ribbon-inner {
      min-height: 100px;
      gap: 13px 20px;
      padding: 19px 0
   }

   .trust-ribbon-inner>span:not(.ribbon-label) {
      font-size: 10px;
      flex: 0 0 calc(50% - 20px);
      justify-content: center
   }

   .welcome-grid,
   .faq-grid,
   .difference-grid,
   .contact-grid {
      grid-template-columns: 1fr;
      gap: 27px
   }

   .welcome-body {
      padding-top: 0
   }

   .section h2,
   .contact-section h2 {
      font-size: clamp(34px, 8.6vw, 44px);
      margin-top: 18px
   }

   .welcome-body p {
      font-size: 13px
   }

   .section-heading {
      align-items: start;
      flex-direction: column;
      gap: 13px;
      margin-bottom: 28px
   }

   .section-heading>p {
      max-width: 550px
   }

   .services-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .service-card-wide {
      grid-column: auto
   }

   .service-image {
      height: 145px
   }

   .service-card {
      min-height: 365px
   }

   .service-body {
      padding: 20px 15px 16px
   }

   .service-body h3 {
      font-size: 18px
   }

   .service-body p {
      font-size: 11px
   }

   .service-body a {
      font-size: 10px
   }

   .service-tag {
      font-size: 8px
   }

   .quote-grid {
      grid-template-columns: 1fr
   }

   .quote-art {
      min-height: 210px
   }

   .quote-mandala {
      width: 180px;
      height: 180px;
      top: 15px;
      left: 50%;
      transform: translateX(-50%)
   }

   .quote-mandala span {
      font-size: 74px
   }

   .quote-art:before {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 375px;
      height: 375px
   }

   .quote-copy {
      text-align: center;
      padding: 0 0 63px
   }

   .quote-copy blockquote {
      font-size: clamp(25px, 6.8vw, 32px);
      margin-top: 22px
   }

   .quote-underline {
      margin: auto
   }

   .steps-grid {
      gap: 20px
   }

   .step p {
      font-size: 11px
   }

   .step h3 {
      font-size: 17px
   }

   .step-symbol {
      width: 58px;
      height: 58px;
      margin: 13px auto 17px;
      font-size: 20px
   }

   .steps-grid:before {
      top: 38px
   }

   .difference-section {
      padding: 70px 0
   }

   .difference-intro {
      min-height: 0
   }

   .difference-points {
      padding-top: 12px
   }

   .difference-ornament {
      display: none
   }

   .consult-banner-inner {
      flex-wrap: wrap;
      gap: 16px
   }

   .consult-banner-icon {
      font-size: 40px
   }

   .consult-banner h2 {
      font-size: 25px
   }

   .consult-banner-inner>.btn {
      margin-left: 55px
   }

   .contact-section {
      padding: 74px 0 83px
   }

   .contact-grid {
      gap: 40px
   }

   .contact-section h2 {
      font-size: 44px
   }

   .contact-copy>p:not(.contact-disclaimer) {
      font-size: 13px
   }

   .form-shell {
      max-width: 570px;
      width: 100%;
      margin: auto
   }

   .footer-main {
      grid-template-columns: 1fr 1fr;
      gap: 28px
   }

   .footer-about {
      grid-column: 1/-1
   }

   .footer-column:last-child {
      grid-column: auto
   }

   .footer-bottom {
      grid-template-columns: 1fr;
      gap: 9px
   }

   .footer-bottom span:nth-child(2) {
      grid-column: auto;
      grid-row: auto
   }

   .footer-bottom>a {
      justify-self: start
   }

   .footer {
      padding-top: 55px;
      padding-bottom: 68px
   }

   .floating-actions {
      display: none
   }

   .mobile-sticky-cta {
      display: flex;
      position: fixed;
      z-index: 89;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff7eb;
      border-top: 1px solid #eed4ba;
      padding: 9px 11px calc(9px + env(safe-area-inset-bottom));
      gap: 9px;
      box-shadow: 0 -8px 25px rgba(9, 38, 30, .10)
   }

   .mobile-sticky-cta a {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      min-height: 47px;
      border-radius: 6px;
      font: 800 12px var(--display)
   }

   .mobile-sticky-cta .mobile-call {
      flex: .84;
      background: #fff1df;
      color: #683821;
      border: 1px solid #e6c4a3
   }

   .mobile-sticky-cta .mobile-wa {
      flex: 1.16;
      background: #25D366;
      color: #fff
   }
}

@media(max-width:470px) {
   .container {
      width: calc(100% - 32px)
   }

   .eyebrow {
      font-size: 8px;
      letter-spacing: .14em
   }

   .hero-content {
      padding: 54px 0 7px
   }

   .hero h1 {
      font-size: clamp(38px, 11vw, 48px)
   }

   .hero-intro {
      font-size: 12px
   }

   .hero-ctas {
      gap: 9px
   }

   .hero-ctas .btn {
      padding: 14px 13px;
      font-size: 10px;
      min-height: 47px
   }

   .hero-ctas .btn-tail {
      margin-left: 2px
   }

   .hero-footnotes {
      font-size: 9px
   }

   .hero-visual {
      height: 385px
   }

   .portrait-wrap {
      height: 90%;
      width: 75%
   }

   .halo-one {
      width: 310px;
      height: 310px
   }

   .halo-two {
      width: 360px;
      height: 360px
   }

   .floating-note {
      right: 0;
      bottom: 53px;
      padding: 9px 10px
   }

   .floating-symbol {
      height: 28px;
      width: 28px
   }

   .floating-note small {
      font-size: 6px
   }

   .floating-note strong {
      font-size: 12px
   }

   .portrait-caption {
      font-size: 11px;
      bottom: 14px
   }

   .trust-ribbon-inner>span:not(.ribbon-label) {
      font-size: 9px
   }

   .trust-ribbon-inner>span:not(.ribbon-label) i {
      font-size: 13px
   }

   .services-grid {
      grid-template-columns: 1fr;
      gap: 16px
   }

   .service-card {
      min-height: unset
   }

   .service-image {
      height: 176px
   }

   .service-body {
      padding: 22px
   }

   .service-body h3 {
      font-size: 21px
   }

   .service-body p {
      font-size: 12px
   }

   .service-body a {
      font-size: 11px
   }

   .steps-grid {
      grid-template-columns: 1fr;
      gap: 35px;
      margin-top: 42px
   }

   .steps-grid:before {
      display: none
   }

   .step p {
      max-width: 280px;
      font-size: 12px
   }

   .step-symbol {
      margin-top: 9px
   }

   .difference-points {
      grid-template-columns: 1fr;
      gap: 25px
   }

   .difference-point h3 {
      font-size: 18px
   }

   .consult-banner-inner>.btn {
      margin-left: 0;
      width: 100%
   }

   .consult-banner h2 {
      font-size: 23px
   }

   .faq-item summary {
      font-size: 12px;
      padding: 19px 0
   }

   .form-shell {
      padding: 28px 20px 23px
   }

   .form-row {
      grid-template-columns: 1fr;
      gap: 0
   }

   .form-head h3 {
      font-size: 23px
   }

   .contact-section h2 {
      font-size: 40px
   }

   .footer-main {
      gap: 32px 16px
   }

   .footer-column h3 {
      font-size: 9px
   }

   .footer-column a {
      font-size: 11px
   }
}

@media(prefers-reduced-motion:reduce) {

   *,
   *::before,
   *::after {
      scroll-behavior: auto !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important
   }

   .js-enabled [data-reveal] {
      opacity: 1;
      transform: none
   }
}

/* Orange + cream edition | Playfair Display across the entire single landing page */
body {
   font-family: var(--body);
   font-size: 16px;
   background: var(--cream);
   color: var(--ink)
}

.top-note {
   background: #66301b;
   color: #fff2df
}

.site-header {
   background: #fffaf3;
   border-bottom-color: #f0ddc5
}

.brand-icon {
   background: linear-gradient(145deg, #f18e38, #c75b1d);
   color: #fff8e7;
   border-color: #f9bb77;
   box-shadow: 0 5px 16px rgba(189, 83, 29, .14)
}

.brand-copy strong {
   color: #682e17;
   letter-spacing: -.025em
}

.brand-copy small {
   color: #a95425;
   letter-spacing: .14em
}

.primary-nav>a:not(.mobile-menu-cta) {
   font-weight: 700;
   letter-spacing: 0
}

.nav-cta {
   background: #b44c1c
}

.nav-cta:hover {
   background: #da6825
}

.nav-cta small {
   color: #ffe3bf
}

.btn-copper {
   background: #f59b43;
   color: #49200f;
   box-shadow: 0 6px 18px rgba(92, 34, 13, .13)
}

.btn-copper:hover {
   background: #ffc073
}

.btn-forest {
   background: #c65f23;
   color: #fff
}

.btn-forest:hover {
   background: #e67e32
}

.text-link {
   color: #ae4d1e;
   border-bottom-color: #e4a269
}

.text-link:hover {
   color: #d06b25
}

.section h2,
.contact-section h2 {
   letter-spacing: -.035em
}

.hero h1 {
   letter-spacing: -.038em
}

.hero-intro,
.contact-copy>p:not(.contact-disclaimer) {
   color: #fff0dd
}

.hero-footnotes {
   color: #ffdfbd
}

.portrait-fade {
   background: linear-gradient(transparent, rgba(73, 25, 9, .58))
}

.service-card {
   border-color: #f1ddc6;
   box-shadow: 0 5px 20px rgba(109, 51, 19, .045)
}

.service-body h3,
.difference-point h3 {
   letter-spacing: -.02em
}

.service-body p,
.step p,
.difference-point p,
.faq-item p {
   color: #806b5d
}

.quote-section {
   background: #572816
}

.quote-copy blockquote {
   color: #fff7ea
}

.quote-copy blockquote em {
   color: #ffbd75
}

.contact-section {
   background: linear-gradient(133deg, #6e2d15, #4e2214)
}

.contact-method {
   background: rgba(255, 226, 186, .075);
   border-color: rgba(255, 230, 190, .22)
}

.contact-method:hover {
   background: rgba(255, 226, 186, .15)
}

.contact-method>span:first-child {
   background: #9d4a24;
   color: #ffdcac
}

.contact-method strong {
   color: #fff5e4
}

.contact-method small,
.contact-disclaimer {
   color: #f0cfad
}

.form-shell {
   background: #fffaf2;
   color: #502819;
   border: 1px solid #f6dcc2
}

.form-head h3 {
   color: #602a14;
   letter-spacing: -.025em
}

.field input,
.field textarea,
.field select {
   color: #59331e;
   border-color: #e9d2b9;
   background: #fffdfa
}

.field select {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%238c5430' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
}

.consent input {
   accent-color: #e1762a
}

.footer {
   background: #ffedd7
}

/* Real WhatsApp green, separate from the orange brand palette. */
.btn[href*="wa.me"],
.mobile-menu-cta[href*="wa.me"],
.mobile-sticky-cta .mobile-wa,
.form-submit {
   background: var(--wa-green);
   color: var(--wa-ink);
   border-color: var(--wa-green);
   font-weight: 800
}

.btn[href*="wa.me"]:hover,
.mobile-menu-cta[href*="wa.me"]:hover,
.mobile-sticky-cta .mobile-wa:hover,
.form-submit:hover {
   background: var(--wa-green-hover);
   border-color: var(--wa-green-hover);
   color: #053d1d
}

.contact-method[href*="wa.me"] {
   background: #25D366;
   border-color: #25D366;
   color: #073c1e
}

.contact-method[href*="wa.me"]:hover {
   background: #1ebe5d
}

.contact-method[href*="wa.me"]>span:first-child {
   background: rgba(255, 255, 255, .3);
   color: #064020
}

.contact-method[href*="wa.me"] strong,
.contact-method[href*="wa.me"] small,
.contact-method[href*="wa.me"]>i {
   color: #073c1e
}

.floating-whatsapp {
   background: var(--wa-green);
   color: #063f20 !important
}

.service-body a[href*="wa.me"],
.services-bottom a[href*="wa.me"],
.footer-column a[href*="wa.me"] {
   color: #08753b
}

.service-body a[href*="wa.me"]:hover,
.services-bottom a[href*="wa.me"]:hover,
.footer-column a[href*="wa.me"]:hover {
   color: #0a964c
}

.text-link[href*="wa.me"] {
   color: #0a8848;
   border-bottom-color: #25D366
}

/* Serif UI tuned for legibility and comfortable line lengths. */
.btn,
.primary-nav>a,
.nav-cta,
.service-tag,
.section-kicker,
.eyebrow {
   letter-spacing: .025em
}

.section-kicker,
.eyebrow {
   letter-spacing: .10em
}

.hero-intro,
.welcome-body p,
.service-body p,
.difference-point p,
.faq-item p {
   letter-spacing: .005em
}

@media(max-width:930px) {
   .primary-nav {
      background: #fff8ef;
      border-top-color: #f0dcc4
   }

   .mobile-menu-cta {
      background: #25D366;
      color: #073c1e
   }
}

@media(max-width:700px) {
   .mobile-sticky-cta {
      background: #fff8ef;
      border-top-color: #edcfac;
      box-shadow: 0 -7px 24px rgba(105, 45, 15, .11)
   }

   .mobile-sticky-cta .mobile-call {
      background: #ffedda;
      color: #713416;
      border-color: #ecc6a0
   }

   .mobile-sticky-cta .mobile-wa {
      background: #25D366;
      color: #073c1e
   }
}


/* ===== Contact form refinement / clean orange & cream edition ===== */
.form-shell {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   width: 100%;
   padding: 34px 36px 32px;
   background: #fffaf3;
   border: 1px solid #f3d9bd;
   border-radius: 18px;
   box-shadow: 0 24px 68px rgba(43, 13, 5, .19)
}

.form-shell::before {
   content: "";
   position: absolute;
   inset: 0 0 auto;
   height: 5px;
   background: linear-gradient(90deg, #ce6726, #f8ad61 55%, #d67735)
}

.form-head {
   text-align: left;
   margin-bottom: 25px
}

.form-head-top {
   display: flex;
   align-items: center;
   gap: 11px;
   margin-bottom: 18px
}

.form-head-icon {
   width: 38px;
   height: 38px;
   display: grid;
   place-items: center;
   flex: 0 0 38px;
   background: #fff0dc;
   border: 1px solid #f5d6ac;
   border-radius: 12px;
   color: #c56826;
   font-size: 17px
}

.form-kicker {
   display: block;
   margin: 0;
   color: #a05c2d;
   font: 700 10px/1.3 var(--display);
   letter-spacing: .12em
}

.form-head-decoration {
   margin-left: auto;
   color: #d3914c;
   font-size: 19px
}

.form-head h3 {
   max-width: 520px;
   margin: 0 0 10px;
   color: #5b2b1b;
   font: 600 clamp(27px, 2.45vw, 35px)/1.22 var(--serif);
   letter-spacing: -.025em
}

.form-head h3 em {
   font-weight: 500;
   color: #cd752e
}

.form-head p {
   max-width: 510px;
   margin: 0;
   color: #866e5d;
   font-size: 12px;
   line-height: 1.75
}

.form-section-label {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 0 0 11px;
   margin-bottom: 18px;
   border-bottom: 1px solid #ebd7c4;
   color: #aa693b;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .045em
}

.form-section-label span:last-child {
   font-size: 10px;
   font-weight: 500;
   letter-spacing: 0;
   color: #9b8170
}

.form-section-label b,
.field label>span:not(.optional) {
   color: #db7533
}

.form-row {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px
}

.form-shell .field {
   position: relative;
   min-width: 0;
   margin-bottom: 16px
}

.form-shell .field label {
   display: block;
   margin: 0 0 8px;
   color: #593a2b;
   font: 700 12px/1.45 var(--display)
}

.form-shell .field .optional {
   color: #a28b7a;
   font-weight: 400
}

.form-shell .input-wrap {
   position: relative
}

.form-shell .input-wrap>i {
   position: absolute;
   left: 15px;
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
   color: #bf8c6b;
   font-size: 13px;
   z-index: 1
}

.form-shell .field input:not([type="checkbox"]),
.form-shell .field select,
.form-shell .field textarea {
   display: block;
   min-width: 0;
   width: 100%;
   height: 52px;
   min-height: 52px;
   margin: 0;
   padding: 13px 15px;
   border: 1px solid #e7d2bd;
   border-radius: 9px;
   background: #fffefd;
   color: #5c3525;
   font: 500 12px/1.5 var(--body);
   box-shadow: 0 1px 2px rgba(70, 30, 8, .015);
   outline: 0;
   transition: background .18s, border-color .18s, box-shadow .18s
}

.form-shell .field .input-wrap input,
.form-shell .field .input-wrap select {
   padding-left: 41px
}

.form-shell .field input::placeholder,
.form-shell .field textarea::placeholder {
   color: #a68e7b;
   opacity: 1
}

.form-shell .field input:focus,
.form-shell .field select:focus,
.form-shell .field textarea:focus {
   border-color: #d88a4b;
   background: #fff;
   box-shadow: 0 0 0 3px rgba(228, 139, 71, .12)
}

.form-shell .field input:hover:not(:focus),
.form-shell .field select:hover:not(:focus),
.form-shell .field textarea:hover:not(:focus) {
   border-color: #d9b48f
}

/* Remove the former repeated SVG background bug. One chevron only, positioned via the wrapper. */
.form-shell .field select {
   -webkit-appearance: none;
   appearance: none;
   background-image: none !important;
   background: #fffefd !important;
   cursor: pointer;
   padding-right: 43px !important
}

.form-shell .select-wrap::after {
   content: "";
   position: absolute;
   right: 19px;
   top: 49%;
   height: 8px;
   width: 8px;
   border-right: 2px solid #9a5f3c;
   border-bottom: 2px solid #9a5f3c;
   transform: translateY(-65%) rotate(45deg);
   pointer-events: none
}

.form-shell .field select:invalid {
   color: #a68e7b
}

.form-shell .field textarea {
   height: 104px;
   min-height: 104px;
   padding: 13px 16px;
   resize: vertical
}

.form-char-hint {
   display: block;
   color: #a18b7b;
   font-size: 10px;
   margin-top: 6px
}

.form-shell .field .field-error,
.consent-error {
   display: none;
   margin-top: 6px;
   color: #a13928;
   font-size: 11px;
   line-height: 1.45
}

.form-shell .field .field-error:not(:empty),
.consent-error:not(:empty) {
   display: block
}

.form-shell .field [aria-invalid="true"] {
   border-color: #c75946 !important;
   box-shadow: 0 0 0 3px rgba(199, 89, 70, .10) !important
}

.form-shell .consent {
   display: flex;
   align-items: flex-start;
   gap: 11px;
   margin: 5px 0 3px;
   padding: 12px 14px;
   background: #fff2e3;
   border: 1px solid #f2dec8;
   border-radius: 9px;
   color: #80634e;
   font-size: 11px;
   line-height: 1.65;
   cursor: pointer
}

.form-shell .consent input {
   accent-color: #d9762b;
   width: 17px;
   height: 17px;
   flex: 0 0 17px;
   margin: 2px 0 0;
   cursor: pointer
}

.form-shell .consent:focus-within {
   outline: 2px solid #e4a369;
   outline-offset: 3px
}

.form-shell .consent:has(input[aria-invalid="true"]) {
   background: #fff3f0;
   border-color: #d38c7e
}

.form-shell .consent-error {
   margin: 4px 0 8px
}

.form-shell .form-error {
   position: absolute !important;
   width: 1px;
   height: 1px;
   padding: 0 !important;
   margin: -1px !important;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0 !important
}

.form-shell .form-error[hidden] {
   display: none !important
}

.form-shell .form-submit {
   display: flex;
   align-items: center;
   gap: 13px;
   min-height: 55px;
   margin-top: 18px;
   padding: 14px 20px;
   border-radius: 9px;
   background: #25D366;
   color: #073b21;
   border: 1px solid #25D366;
   font: 800 13px/1.3 var(--display);
   letter-spacing: 0;
   box-shadow: 0 8px 18px rgba(37, 211, 102, .15);
   transition: transform .2s, box-shadow .2s, background .2s
}

.form-shell .form-submit>i:first-child {
   font-size: 19px
}

.form-shell .form-submit .btn-tail {
   margin-left: auto;
   font-size: 13px
}

.form-shell .form-submit:hover {
   background: #1ebe5d;
   color: #063d20;
   transform: translateY(-2px);
   box-shadow: 0 12px 25px rgba(37, 211, 102, .22)
}

.form-shell .form-submit:active {
   transform: translateY(0)
}

.form-bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: 17px;
   font-size: 10px;
   color: #967e6a;
   line-height: 1.55
}

.form-bottom>span {
   display: flex;
   align-items: center;
   gap: 7px
}

.form-bottom>span i {
   color: #b9895c
}

.form-bottom a {
   color: #81624d
}

.form-bottom a strong {
   color: #ac5423;
   white-space: nowrap
}

.form-bottom a strong i {
   font-size: 9px;
   vertical-align: baseline
}

.form-bottom a:hover strong {
   text-decoration: underline
}

@media(max-width:1100px) {
   .contact-grid {
      gap: 38px
   }

   .form-shell {
      padding: 29px 27px 28px
   }
}

@media(max-width:700px) {
   .form-shell {
      max-width: 610px;
      padding: 30px 25px 26px
   }

   .form-head h3 {
      font-size: 29px
   }

   .form-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px
   }
}

@media(max-width:480px) {
   .form-shell {
      padding: 27px 18px 24px;
      border-radius: 14px
   }

   .form-head-top {
      gap: 8px;
      margin-bottom: 15px
   }

   .form-head-icon {
      width: 34px;
      height: 34px;
      flex-basis: 34px;
      font-size: 15px
   }

   .form-kicker {
      font-size: 9px;
      letter-spacing: .06em
   }

   .form-head h3 {
      font-size: 27px
   }

   .form-head p {
      font-size: 11px
   }

   .form-row {
      grid-template-columns: 1fr;
      gap: 0
   }

   .form-section-label {
      font-size: 9px
   }

   .form-shell .field input:not([type="checkbox"]),
   .form-shell .field select {
      height: 50px;
      min-height: 50px
   }

   .form-shell .consent {
      padding: 11px
   }

   .form-bottom {
      gap: 9px
   }

   .form-bottom a {
      width: 100%
   }

   .form-shell .form-submit {
      font-size: 12px
   }
}

/* Accessible, legible form sizing (avoids input auto-zoom on iOS). */
.form-shell .field label {
   font-size: 13px
}

.form-shell .field input:not([type="checkbox"]),
.form-shell .field select,
.form-shell .field textarea {
   font-size: 14px
}

.form-head p {
   font-size: 13px
}

.form-shell .form-submit {
   font-size: 14px
}

.form-shell .consent {
   font-size: 12px
}

.form-head-icon {
   font-size: 21px
}

@media(max-width:480px) {

   .form-shell .field input:not([type="checkbox"]),
   .form-shell .field select,
   .form-shell .field textarea {
      font-size: 16px
   }

   .form-head p {
      font-size: 12px
   }
}


/* ===== 2026 hero conversion upgrade: two-column form, Orange + Cream ===== */
.hero-conversion {
   background: radial-gradient(ellipse at 7% 13%, rgba(224, 130, 66, .38), transparent 38%), linear-gradient(125deg, #713017 0%, #4e2014 61%, #642b19 100%);
   overflow: visible
}

.hero-conversion .hero-noise {
   pointer-events: none;
   z-index: 0
}

.hero-grid-lead {
   display: grid;
   grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr);
   gap: clamp(25px, 4vw, 68px);
   min-height: auto;
   padding: 65px 0 74px;
   align-items: center;
   position: relative;
   z-index: 2
}

.hero-grid-lead .hero-content {
   padding: 12px 0 18px;
   min-width: 0
}

.hero-overline {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   color: #f8c888;
   font-size: 11px;
   letter-spacing: .045em;
   font-weight: 700;
   margin-top: 29px
}

.hero-conversion h1 {
   font-size: clamp(43px, 4.05vw, 61px);
   line-height: 1.17;
   letter-spacing: -.043em;
   margin: 18px 0 20px;
   max-width: 690px
}

.hero-conversion h1 em {
   color: #ffbd76;
   font-style: italic;
   font-weight: 600
}

.hero-conversion .hero-intro {
   font-size: clamp(15px, 1.16vw, 17px);
   line-height: 1.8;
   max-width: 630px;
   margin: 0 0 27px;
   color: #fff0e0
}

.hero-conversion .hero-intro strong {
   font-weight: 700;
   color: #fff8ed
}

.hero-proof {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
   margin: 0 0 26px
}

.proof-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 15px;
   border: 1px solid rgba(255, 216, 164, .25);
   border-radius: 12px;
   background: rgba(255, 244, 222, .065)
}

.proof-icon {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   flex: 0 0 42px;
   background: #ffcb89;
   color: #7a351a;
   display: grid;
   place-items: center;
   font-size: 18px
}

.proof-item strong {
   display: block;
   font: 700 clamp(19px, 1.6vw, 24px)/1.2 var(--serif);
   color: #fff8eb;
   white-space: nowrap
}

.proof-item small {
   display: block;
   margin-top: 5px;
   color: #ffe0bf;
   font: 500 11px/1.35 var(--body)
}

.hero-conversion .hero-ctas {
   gap: 10px
}

.hero-conversion .hero-ctas .btn {
   min-height: 52px;
   font-size: 13px;
   padding: 13px 18px
}

.hero-profile {
   display: flex;
   align-items: center;
   gap: 14px;
   max-width: 415px;
   margin-top: 28px;
   padding-top: 21px;
   border-top: 1px solid rgba(255, 225, 177, .25)
}

.hero-profile img {
   width: 67px;
   height: 67px;
   border: 2px solid #f7c07e;
   border-radius: 50%;
   object-fit: cover;
   object-position: center 20%;
   background: #c2682f
}

.hero-profile>div {
   display: flex;
   flex-direction: column;
   gap: 3px
}

.hero-profile span {
   font: 700 10px/1.3 var(--body);
   letter-spacing: .10em;
   color: #ffc57e
}

.hero-profile strong {
   font: 700 20px/1.35 var(--serif);
   color: #fff6e9
}

.hero-profile small {
   font: 500 11px/1.5 var(--body);
   color: #f8d8b9
}

.hero-profile small i {
   color: #6be6a2;
   margin-right: 4px
}

.hero-lead {
   position: relative;
   min-width: 0;
   scroll-margin-top: 95px
}

.hero-lead:before {
   content: '';
   position: absolute;
   inset: -13px -13px -13px -13px;
   border: 1px solid rgba(255, 225, 177, .17);
   border-radius: 26px;
   pointer-events: none
}

.hero-lead .form-shell {
   max-width: none;
   padding: clamp(24px, 2.6vw, 37px);
   margin: 0;
   background: #fff9f1;
   box-shadow: 0 20px 60px rgba(28, 8, 3, .30)
}

.hero-lead .form-head {
   margin-bottom: 18px
}

.hero-lead .form-head-top {
   margin-bottom: 11px
}

.hero-lead .form-head h3 {
   font-size: clamp(25px, 2.25vw, 32px);
   margin-bottom: 8px;
   line-height: 1.17
}

.hero-lead .form-head p {
   font-size: 13px;
   line-height: 1.6
}

.hero-lead .form-section-label {
   margin-bottom: 12px;
   padding-bottom: 8px
}

.hero-lead .form-shell .field {
   margin-bottom: 12px
}

.hero-lead .form-shell .field label {
   margin-bottom: 6px
}

.hero-lead .form-shell .field input:not([type="checkbox"]),
.hero-lead .form-shell .field select {
   height: 48px;
   min-height: 48px
}

.hero-lead .form-shell .field textarea {
   height: 79px;
   min-height: 79px
}

.hero-lead .form-shell .consent {
   padding: 10px 12px;
   margin-top: 0
}

.hero-lead .form-shell .form-submit {
   min-height: 51px;
   margin-top: 13px
}

.hero-lead .form-bottom {
   margin-top: 12px
}

.hero-edge {
   text-align: center;
   color: #e8b88b;
   font-size: 10px;
   letter-spacing: .16em;
   padding: 13px 18px;
   background: rgba(49, 17, 9, .55);
   position: relative;
   z-index: 2
}

.hero-edge span {
   margin: 0 12px;
   color: #f8c480
}

.contact-grid-solo {
   grid-template-columns: minmax(0, 870px);
   justify-content: center;
   text-align: center
}

.contact-grid-solo .contact-copy>p:not(.contact-disclaimer) {
   max-width: 650px;
   margin: 0 auto 25px
}

.contact-grid-solo .contact-methods {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 15px;
   max-width: 750px;
   margin: 25px auto
}

.contact-grid-solo .contact-disclaimer {
   margin: 24px auto 0
}

/* Photo cards are genuine stock photography with bundled illustration fallbacks. */
.service-image {
   height: 205px
}

.service-image img {
   object-position: center 45%
}

.service-body h3 {
   font-size: 22px
}

.service-body p {
   font-size: 15px;
   line-height: 1.8
}

.welcome-body p,
.section-heading p,
.step p,
.difference-point p,
.faq-item p,
.contact-copy>p:not(.contact-disclaimer) {
   font-size: 16px;
   line-height: 1.85
}

.services-bottom p,
.faq-left>p {
   font-size: 16px;
   line-height: 1.75
}

.contact-disclaimer,
.service-body a {
   font-size: 13px
}

/* ==============================================
   CLIENT TESTIMONIALS — 9:16 REEL-STYLE PLAYERS
   Both players use native HTML5 controls. No
   posters, overlaid play buttons or placeholders.
   ============================================== */
.video-testimonials {
   position: relative;
   overflow: hidden;
   background: linear-gradient(145deg, #fff6e9 0%, #ffefdc 100%);
}

.video-testimonials::before {
   content: '✳';
   position: absolute;
   left: 4%;
   top: 5%;
   font: 100px var(--serif);
   color: rgba(197, 97, 36, .07);
   pointer-events: none;
}

.video-heading {
   max-width: 790px;
   margin: 0 auto 38px;
}

.video-heading p {
   max-width: 650px;
   margin: 16px auto 0;
   font-size: 16px;
   line-height: 1.75;
}

.testimonial-video-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 320px));
   justify-content: center;
   gap: 28px;
   max-width: 740px;
   margin: 0 auto;
}

.testimonial-video-card {
   min-width: 0;
   overflow: hidden;
   background: #fffcf7;
   border: 1px solid #ebd5b9;
   border-radius: 18px;
   box-shadow: 0 18px 45px rgba(106, 56, 26, .09);
   transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.testimonial-video-card:hover {
   transform: translateY(-5px);
   border-color: #dba16b;
   box-shadow: 0 22px 54px rgba(106, 56, 26, .15);
}

.video-stage {
   position: relative;
   width: 100%;
   aspect-ratio: 9 / 16;
   overflow: hidden;
   background: #261711;
}

.video-stage video {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
   background: #261711;
}

.video-stage video:focus-visible {
   outline: 3px solid #e89046;
   outline-offset: -3px;
}

.testimonial-video-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 19px 20px 21px;
}

.testimonial-video-meta span {
   font: 700 10px var(--body);
   letter-spacing: .10em;
   color: #b1693e;
}

.testimonial-video-meta h3 {
   font: 700 21px var(--serif);
   color: #572a1b;
   margin: 5px 0 0;
}

.testimonial-video-meta>i {
   color: #cf8c55;
   font-size: 25px;
}

.video-bottom-cta {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 18px;
   margin-top: 30px;
   font-size: 15px;
   color: #836353;
}

.video-bottom-cta a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: #9d4a25;
   font-weight: 700;
   text-decoration: underline;
   text-underline-offset: 4px;
}

@media(max-width:1120px) {
   .hero-grid-lead {
      gap: 25px
   }

   .hero-conversion h1 {
      font-size: clamp(38px, 4.45vw, 54px)
   }

   .proof-item {
      padding: 12px 10px;
      gap: 9px
   }

   .proof-icon {
      height: 34px;
      width: 34px;
      flex-basis: 34px;
      font-size: 15px
   }

   .hero-lead .form-shell {
      padding: 24px
   }
}

@media(max-width:930px) {
   .hero-grid-lead {
      grid-template-columns: 1fr;
      gap: 37px;
      max-width: 720px;
      padding: 45px 0 65px
   }

   .hero-grid-lead .hero-content {
      padding: 0
   }

   .hero-conversion h1 {
      font-size: clamp(39px, 6.9vw, 57px)
   }

   .hero-conversion .hero-intro {
      font-size: 16px
   }

   .hero-proof {
      max-width: 550px
   }

   .hero-lead .form-shell {
      padding: 34px
   }

   .contact-grid-solo {
      max-width: 700px
   }
}

@media(max-width:700px) {
   .hero-grid-lead {
      padding: 39px 0 47px;
      gap: 32px
   }

   .hero-conversion h1 {
      font-size: clamp(37px, 8.8vw, 52px)
   }

   .hero-overline {
      font-size: 10px;
      margin-top: 20px
   }

   .hero-conversion .hero-intro {
      font-size: 15px
   }

   .hero-lead .form-shell {
      padding: 28px 24px
   }

   .hero-lead:before {
      inset: -7px
   }

   .video-heading p {
      font-size: 15px
   }

   .service-body p,
   .welcome-body p,
   .section-heading p,
   .step p,
   .difference-point p,
   .faq-item p,
   .contact-copy>p:not(.contact-disclaimer) {
      font-size: 15px
   }

   .service-image {
      height: 205px
   }

   .contact-grid-solo .contact-methods {
      grid-template-columns: 1fr;
      max-width: 470px
   }

   .video-bottom-cta {
      flex-direction: column;
      gap: 7px
   }
}

@media(max-width:480px) {
   .hero-grid-lead {
      padding: 33px 0 38px
   }

   .hero-conversion h1 {
      font-size: clamp(35px, 10vw, 43px);
      line-height: 1.15
   }

   .hero-overline {
      font-size: 9px
   }

   .hero-conversion .hero-intro {
      font-size: 15px;
      line-height: 1.75
   }

   .hero-proof {
      gap: 8px
   }

   .proof-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      padding: 12px
   }

   .proof-item strong {
      font-size: 18px
   }

   .proof-item small {
      font-size: 10px
   }

   .hero-conversion .hero-ctas {
      display: grid;
      grid-template-columns: 1fr
   }

   .hero-conversion .hero-ctas .btn {
      width: 100%;
      justify-content: center;
      font-size: 13px
   }

   .hero-profile {
      margin-top: 20px
   }

   .hero-profile strong {
      font-size: 18px
   }

   .hero-lead .form-shell {
      padding: 26px 18px
   }

   .hero-lead .form-head h3 {
      font-size: 26px
   }

   .hero-edge {
      font-size: 9px;
      letter-spacing: .06em
   }

   .hero-edge span {
      margin: 0 5px
   }

   .service-body p,
   .welcome-body p,
   .section-heading p,
   .step p,
   .difference-point p,
   .faq-item p,
   .contact-copy>p:not(.contact-disclaimer) {
      font-size: 15px
   }

   .testimonial-video-meta {
      padding: 17px
   }

   .video-heading p {
      font-size: 15px
   }
}

/* Navigation balance with additional Testimonials anchor */
@media (min-width:931px) and (max-width:1170px) {
   .primary-nav {
      gap: 12px
   }

   .primary-nav>a {
      font-size: 11px
   }

   .nav-shell {
      gap: 12px
   }

   .brand-copy strong {
      font-size: 17px
   }

   .nav-cta {
      padding: 9px 10px;
      min-width: 138px
   }
}

@media (max-width:700px) {
   .hero-grid-lead .hero-overline {
      margin-top: 16px
   }

   .hero-grid-lead .hero-ctas {
      margin-top: 2px
   }

   .hero-grid-lead .hero-proof {
      margin-bottom: 18px
   }
}

/* End of site stylesheet — testimonial reel styles above */

/* On phones, the two reels swipe horizontally. */
@media (max-width: 700px) {
   .testimonial-video-grid {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: minmax(235px, 78vw);
      justify-content: start;
      gap: 16px;
      max-width: 100%;
      padding: 0 0 14px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      overscroll-behavior-inline: contain;
      -webkit-overflow-scrolling: touch;
   }

   .testimonial-video-card {
      scroll-snap-align: start;
   }

   .testimonial-video-meta {
      padding: 16px;
   }

   .testimonial-video-meta h3 {
      font-size: 19px;
   }

   .video-bottom-cta {
      flex-direction: column;
      gap: 7px;
      text-align: center;
   }

   .video-heading p {
      font-size: 15px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .testimonial-video-card {
      transition: none;
   }

   .testimonial-video-card:hover {
      transform: none;
   }

   .testimonial-video-grid {
      scroll-behavior: auto;
   }
}