@charset "UTF-8";
/*======================================================================================
  Mikara Construction Inc. - site stylesheet
  Sections: 01 Variables  02 Base  03 Components  04 Layouts  05 Sections
======================================================================================*/


:root {
  --body: #F6F0E5;
  --black: #211f1c;
  --white: #fff;
  --theme: #4a463f;
  --header: #3a3630;
  --text: #2b2926;
  --border: #e4ddcf;
  --accent: #b06a2c;
  /* Text-weight accent. --accent is 3.75:1 on the cream background, which is
     under the 4.5:1 WCAG AA threshold for normal-size text, and it was being
     used for eyebrow labels and link hovers. This darker shade measures
     5.5:1 on cream and 6.2:1 on white. Use --accent for decoration and for
     anything on a dark ground; use this whenever it is TEXT on a light one. */
  --accent-ink: #8f5220;
  --gold: #c2a25c;
}
/*---------------------------------------
02. Base
---------------------------------------*/
/* --------------------------------------------
    Base fonts & type styles
 ---------------------------------------------- */
body {
  font-family: var(--mikara-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: var(--text);
  background-color: var(--body);
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}
@media (max-width: 575px) {
  body {
    font-size: 14px;
  }
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
button {
  border: none;
  background-color: transparent;
  padding: 0;
}
input:focus {
  color: var(--white);
  outline: none;
}
input {
  color: var(--white);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--mikara-sans);
  margin: 0px;
  padding: 0;
  color: var(--header);
  transition: all 0.4s ease-in-out;
}
h1 {
  font-size: 158px;
  font-weight: 700;
  line-height: 100%;
}
h2 {
  font-size: 56px;
  font-weight: 500;
  line-height: 111%;
  letter-spacing: -0.02em;
}
@media (max-width: 1399px) {
  h2 {
    font-size: 44px;
  }
}
@media (max-width: 1199px) {
  h2 {
    font-size: 40px;
  }
}
@media (max-width: 991px) {
  h2 {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  h2 {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  h2 {
    font-size: 36px;
  }
}
@media (max-width: 470px) {
  h2 {
    font-size: 32px;
  }
}
h3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 112%;
  text-transform: capitalize;
}
@media (max-width: 575px) {
  h3 {
    font-size: 22px;
  }
}
h4 {
  font-size: 18px;
  font-weight: 400;
  text-transform: capitalize;
}
h5 {
  font-size: 18px;
  font-weight: 700;
  text-transform: capitalize;
}
h6 {
  font-size: 16px;
  font-weight: 700;
}
a {
  text-decoration: none;
  outline: none !important;
  cursor: pointer;
  color: var(--header);
  transition: all 0.4s ease-in-out;
}
p {
  margin: 0px;
}
span {
  margin: 0px;
}
.mikara-cta {
  display: inline-flex;
  align-items: center;
  gap: 0;
  position: relative;
  transition: all 0.4s ease;
  text-transform: capitalize;
}
.mikara-cta:hover .mikara-cta__arrow-left {
  scale: 1;
}
.mikara-cta:hover .mikara-cta__arrow-right {
  scale: 0;
}
.mikara-cta:hover .mikara-cta__label {
  transform: translateX(56px);
}
.mikara-cta .mikara-cta__arrow-left,
.mikara-cta .mikara-cta__arrow-right {
  width: 53px;
  height: 53px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--theme);
  color: var(--white);
  border-radius: 50%;
  transition: 0.4s;
  text-align: center;
}
@media (max-width: 575px) {
  .mikara-cta .mikara-cta__arrow-left,
.mikara-cta .mikara-cta__arrow-right {
    width: 48px;
    height: 48px;
  }
}
.mikara-cta .mikara-cta__arrow-left {
  scale: 0;
  position: absolute;
  left: 3px;
}
.mikara-cta .mikara-cta__label {
  background: var(--theme);
  color: var(--white);
  font-weight: 500;
  font-size: 18px;
  padding: 14px 28px;
  display: inline-flex;
  font-family: var(--mikara-sans);
  align-items: center;
  gap: 30px;
  border-radius: 40px;
  transition: 0.4s;
}
@media (max-width: 575px) {
  .mikara-cta .mikara-cta__label {
    font-size: 14px;
    padding: 10px 25px;
  }
}
.mikara-cta:hover .mikara-cta__label {
  background-color: var(--header);
}
.mikara-cta:hover .mikara-cta__arrow-left,
.mikara-cta:hover .mikara-cta__arrow-right {
  background-color: var(--header);
}.mikara-back-to-top {
  background-color: var(--white);
  width: 50px;
  height: 50px;
  line-height: 50px;
  color: var(--header);
  font-size: 18px;
  position: fixed;
  display: inline-block;
  z-index: 999;
  right: 30px;
  bottom: 30px;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}
.mikara-back-to-top:hover {
  background-color: var(--white);
  color: var(--header);
}
.mikara-back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translate(0);
}
.mikara-header__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.mikara-header__main .mikara-nav ul {
  margin-bottom: 0;
}
.mikara-header__main .mikara-nav ul li {
  position: relative;
  list-style: none;
  display: inline-block;
  margin-inline-end: 45px;
}
@media (max-width: 1199px) {
  .mikara-header__main .mikara-nav ul li {
    margin-inline-end: 30px;
  }
}
.mikara-header__main .mikara-nav ul li:last-child {
  margin-inline-end: 0;
}
.mikara-header__main .mikara-nav ul li a {
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  color: var(--header);
  padding: 20px 0;
  text-align: left;
  position: relative;
  text-transform: capitalize;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 1399px) {
  .mikara-header__main .mikara-nav ul li a {
    font-size: 16px;
  }
}
.mikara-header__main .mikara-nav ul li a i {
  margin-left: 4px;
  font-size: 14px;
}
.mikara-header__main .mikara-nav ul li a:hover {
  color: var(--theme);
}
.mikara-header__main .mikara-nav ul li:hover > a {
  color: var(--theme);
}
.mikara-header__main .mikara-nav ul li:hover > a::after {
  color: var(--theme);
}
.mikara-header__main .mikara-header__right {
  position: relative;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 100px;
}
@media (max-width: 1399px) {
  .mikara-header__main .mikara-header__right {
    gap: 20px;
  }
}
.mikara-header__main .mikara-header__right .mikara-header__actions .mikara-nav-toggle {
  cursor: pointer;
  font-size: 20px;
  color: var(--white);
}
.mikara-header {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  top: 0;
}
@media (max-width: 1399px) {
  .mikara-header {
    top: 0;
    margin-top: 0;
  }
}
.mikara-header .container-fluid {
  padding: 0 60px;
}
@media (max-width: 1600px) {
  .mikara-header .container-fluid {
    padding: 0 50px;
  }
}
@media (max-width: 1399px) {
  .mikara-header .container-fluid {
    padding: 0 30px;
  }
}
@media (max-width: 575px) {
  .mikara-header .container-fluid {
    padding: 0 15px;
  }
}
@media (max-width: 1399px) {
  .mikara-header .mikara-header__main .mikara-header__left .mikara-logo img {
    filter: brightness(0);
    width: 100px;
  }
}
.mikara-header .mikara-header__main .mikara-header__left .mikara-logo--dark {
  display: none;
}
@media (max-width: 1399px) {
  .mikara-header .mikara-header__main .mikara-header__left .mikara-logo--dark img {
    width: 100px;
  }
}
@media (max-width: 1399px) {
  .mikara-header .mikara-header__main .mikara-header__right .mikara-header__actions .mikara-header__hamburger .mikara-nav-toggle {
    color: var(--header);
  }
}
.sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  width: 100%;
  z-index: 99999;
  transition: all 0.9s;
  background-color: var(--white);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.sticky.mikara-header {
  margin-top: 0;
}
.sticky.mikara-header .mikara-header__main .mikara-header__left .mikara-logo {
  display: none;
}
.sticky.mikara-header .mikara-header__main .mikara-header__left .mikara-logo--dark {
  display: block;
}
.sticky.mikara-header .mikara-header__main .mikara-nav ul li a {
  color: var(--header);
}
.sticky.mikara-header .mikara-header__main .mikara-header__right .mikara-header__actions h6 {
  color: var(--header);
}
.sticky.mikara-header .mikara-header__main .mikara-header__right .mikara-header__actions h6 a {
  color: var(--header);
}
.sticky.mikara-header .mikara-header__main .mikara-header__right .mikara-header__actions .mikara-nav-toggle {
  color: var(--header);
}
.mikara-offcanvas__panel {
  background: var(--white) none repeat scroll 0 0;
  border-left: 2px solid var(--theme);
  position: fixed;
  right: 0;
  top: 0;
  width: 450px;
  height: 100%;
  -webkit-transform: translateX(calc(100% + 80px));
  -moz-transform: translateX(calc(100% + 80px));
  -ms-transform: translateX(calc(100% + 80px));
  -o-transform: translateX(calc(100% + 80px));
  transform: translateX(calc(100% + 80px));
  -webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  -moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  z-index: 9999999;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.mikara-offcanvas__panel::-webkit-scrollbar {
  display: none;
}
.mikara-offcanvas__panel.info-open {
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.mikara-offcanvas__wrapper {
  position: relative;
  height: 100%;
  padding: 30px 30px;
}
.mikara-offcanvas__wrapper .mikara-offcanvas__content .mikara-offcanvas__close {
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--theme);
  position: relative;
  z-index: 9;
  cursor: pointer;
}
.mikara-offcanvas__wrapper .mikara-offcanvas__content .mikara-offcanvas__close i {
  color: var(--white);
}
.mikara-offcanvas__wrapper .mikara-offcanvas__content .mikara-offcanvas__contact {
  margin-top: 20px;
}
@media (max-width: 575px) {
  .mikara-offcanvas__wrapper .mikara-offcanvas__content .mikara-offcanvas__contact {
    display: none !important;
  }
}
.mikara-offcanvas__wrapper .mikara-offcanvas__content .mikara-offcanvas__contact h4 {
  margin-bottom: 20px;
}
.mikara-offcanvas__wrapper .mikara-offcanvas__content .mikara-offcanvas__contact ul {
  margin-top: 0;
}
.mikara-offcanvas__wrapper .mikara-offcanvas__content .mikara-offcanvas__contact ul li {
  font-size: 20px;
  font-weight: 600;
  text-transform: capitalize;
}
@media (max-width: 575px) {
  .mikara-offcanvas__wrapper .mikara-offcanvas__content .mikara-offcanvas__contact ul li {
    font-size: 14px;
  }
}
.mikara-offcanvas__wrapper .mikara-offcanvas__content .mikara-offcanvas__contact ul li:not(:last-child) {
  margin-bottom: 30px;
}
@media (max-width: 575px) {
  .mikara-offcanvas__wrapper .mikara-offcanvas__content .mikara-offcanvas__contact ul li:not(:last-child) {
    margin-bottom: 20px;
  }
}
.mikara-offcanvas__wrapper .mikara-offcanvas__content .mikara-offcanvas__contact ul li a {
  color: var(--black);
}
.mikara-offcanvas__wrapper .mikara-offcanvas__content .mikara-offcanvas__contact ul li .mikara-offcanvas__contact-icon {
  margin-right: 20px;
}
.mikara-offcanvas__wrapper .mikara-offcanvas__content .mikara-offcanvas__contact ul li .mikara-offcanvas__contact-icon i {
  color: var(--theme);
}
.mikara-offcanvas__wrapper .mikara-offcanvas__content .mikara-offcanvas__contact span {
  text-transform: initial;
}
.mikara-offcanvas__overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #151515;
  z-index: 900;
  top: 0;
  opacity: 0;
  visibility: hidden;
  right: 0;
}
.mikara-offcanvas__overlay.overlay-open {
  opacity: 0.8;
  visibility: visible;
}
@media (max-width: 450px) {
  .mikara-offcanvas__panel {
    width: 300px;
  }
}
@media (max-width: 575px) {
  .mikara-offcanvas__wrapper {
    padding: 20px;
  }
}
.mikara-offcanvas .mikara-offcanvas__panel {
  width: 500px;
  background-color: #fff;
}
@media (max-width: 1399px) {
  .mikara-offcanvas .mikara-offcanvas__panel {
    width: 350px;
  }
}.mikara-footer .mikara-footer__logo img {
  width: 100%;
  height: 100%;
}
.mikara-footer__band {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  margin-top: 60px;
  padding-top: 25px;
  padding-bottom: 48px;
  position: relative;
}
.mikara-footer__band::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 35%;
  transform: translateX(-50%);
  content: "";
  width: 1px;
  background-color: rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 785px) {
  .mikara-footer__band::before {
    display: none;
  }
}
.mikara-footer__band::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 65%;
  transform: translateX(-50%);
  content: "";
  width: 1px;
  background-color: rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 785px) {
  .mikara-footer__band::after {
    display: none;
  }
}
.mikara-footer__band.mikara-footer__band--light {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.mikara-footer__band.mikara-footer__band--light::before {
  background-color: rgba(255, 255, 255, 0.2);
}
.mikara-footer__band.mikara-footer__band--light::after {
  background-color: rgba(255, 255, 255, 0.2);
}
.mikara-footer__bottom {
  background-color: var(--header);
  padding: 28px 0;
}
.mikara-footer__bottom p {
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  font-family: var(--mikara-sans);
  text-transform: capitalize;
}
.mikara-section-head {
  position: relative;
  z-index: 99;
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .mikara-section-head {
    margin-bottom: 0;
  }
  .mikara-section-head br {
    display: none;
  }
}
.mikara-section-head .mikara-eyebrow {
  position: relative;
  font-size: 20px;
  font-weight: 300;
  color: var(--header);
  line-height: 1;
  margin-bottom: 30px;
  font-family: var(--mikara-sans);
  letter-spacing: 0.1em;
  display: inline-block;
  letter-spacing: -1px;
  font-style: italic;
  padding-left: 0;
}
.mikara-section-head .mikara-eyebrow i {
  margin-left: 10px;
}
.mikara-section-head h2 {
  color: var(--header);
  font-family: var(--mikara-sans);
}
.mikara-section-head h2 span {
  font-family: var(--mikara-sans);
}
.center {
  text-align: center;
  margin: 0 auto;
}
.mikara-section-pad {
  padding: 120px 0;
}
@media (max-width: 1199px) {
  .mikara-section-pad {
    padding: 100px 0;
  }
}
@media (max-width: 991px) {
  .mikara-section-pad {
    padding: 80px 0;
  }
}
.mikara-footer--dark {
  background-color: #000000;
}
.mikara-about-section h2 {
  font-size: 32px;
  letter-spacing: -1px;
  line-height: 144%;
}
@media (max-width: 1199px) {
  .mikara-about-section h2 {
    font-size: 28px;
  }
  .mikara-about-section h2 br {
    display: none;
  }
}
@media (max-width: 470px) {
  .mikara-about-section h2 {
    font-size: 25px;
  }
}
@media (max-width: 991px) {
  .mikara-about__grid {
    margin-top: 40px;
  }
}
.mikara-about__grid .mikara-about__media--tall {
  max-width: 364px;
}
.mikara-about__grid .mikara-about__media--tall img {
  width: 100%;
  height: 100%;
}
.mikara-about__grid .mikara-about__media--wide img {
  width: 100%;
  height: 100%;
}
.mikara-parallax-banner .mikara-parallax-banner__media {
  position: relative;
}
@media (max-width: 1199px) {
  .mikara-parallax-banner .mikara-parallax-banner__media {
    height: 650px;
  }
}
@media (max-width: 991px) {
  .mikara-parallax-banner .mikara-parallax-banner__media {
    height: 550px;
  }
}
@media (max-width: 575px) {
  .mikara-parallax-banner .mikara-parallax-banner__media {
    height: 400px;
  }
}
.mikara-parallax-banner .mikara-parallax-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #FBF3E6;
  border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--theme);
  border-radius: 0;
}
.mikara-clip {
  overflow: hidden;
}
.mikara-invert > div {
  background-image: linear-gradient(to right, rgb(0, 0, 0) 50%, rgb(137, 137, 137) 50%);
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
/*---------------------------------------
   Mikara Construction, rebrand overrides
---------------------------------------*/
:root {
  --mikara-serif: "Avenir Next", "Helvetica Neue", "Segoe UI", Futura, "Century Gothic", system-ui, Arial, sans-serif;
  --mikara-sans: "Avenir Next", "Helvetica Neue", "Segoe UI", Futura, "Century Gothic", system-ui, Arial, sans-serif;
}
/* Classical serif headings to match Mikara's Trajan/Spectral identity */
.mikara-section-head h2,
.mikara-section-head .mikara-eyebrow,
h1,
h2,
h3,
.mikara-section-title,
.mikara-invert,
.mikara-section-title {
  font-family: var(--mikara-serif) !important;
  letter-spacing: 0.2px;
}
/* Warm orange accent for eyebrow labels + highlighted words */
.mikara-eyebrow,
.mikara-eyebrow.mikara-eyebrow--accent,
.mikara-eyebrow--accent { color: var(--accent-ink) !important; }
.mikara-section-head h2 span,
.mikara-section-title span { color: var(--accent) !important; }
/* Links / hover pick up the Mikara accent */
a:hover { color: var(--accent); }
/*---------------------------------------
   Mikara, Hero with estimate form
---------------------------------------*/
.mikara-hero {
  position: relative;
  overflow: hidden;
  background: var(--theme);
  padding: 160px 0 90px;
}
/* Full-screen, centered landing hero */
.mikara-hero--center {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 130px 0 90px; /* top clears the fixed white header */
}
.mikara-hero--center .container { width: 100%; }
.mikara-hero__inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}
/* Two-button CTA row */
.mikara-hero__cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}
.mikara-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mikara-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .3px;
  text-transform: capitalize;
  padding: 15px 36px;
  border-radius: 9px;
  border: 1px solid transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.mikara-btn--solid { background: #fff; color: var(--text); }
.mikara-btn--solid:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.mikara-btn--ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.mikara-btn--ghost:hover { background: #fff; color: var(--text); border-color: #fff; transform: translateY(-2px); }
.mikara-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.mikara-hero__overlay {
  position: absolute;
  inset: 0;
  /* Centered layout: text sits over the bright middle of the kitchen photo,
     so use an even vertical scrim (slightly heavier through the centre band)
     that keeps white text >= AA while the kitchen still reads through. */
  background: linear-gradient(180deg, rgba(33,31,28,.58) 0%, rgba(33,31,28,.72) 48%, rgba(33,31,28,.66) 100%);
}
.mikara-hero .container { position: relative; z-index: 2; }
.mikara-hero__title {
  font-family: var(--mikara-serif) !important;
  color: #fff !important;
  font-size: 64px;
  line-height: 1.08;
  font-weight: 500;
  margin: 0 auto 22px;
}
/* All-white headline (no accent span) */
.mikara-hero__title span { color: #fff !important; }
.mikara-hero__text {
  color: rgba(255,255,255,.9);
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 26px;
}
.mikara-hero--center .mikara-hero__text { max-width: 680px; margin-left: auto; margin-right: auto; }
.mikara-quote-form .mikara-field { margin-bottom: 14px; }
.mikara-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mikara-quote-form input,
.mikara-quote-form select,
.mikara-quote-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: #faf7f1;
  border-radius: 9px;
  padding: 13px 15px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.mikara-quote-form textarea { resize: vertical; min-height: 84px; }
.mikara-quote-form input::placeholder,
.mikara-quote-form textarea::placeholder { color: #a49c8e; }
.mikara-quote-form input:focus,
.mikara-quote-form select:focus,
.mikara-quote-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(176,106,44,.14);
}
.mikara-hero__form-note {
  text-align: center;
  font-size: 12.5px;
  color: #8a8375;
  margin: 14px 0 0;
}
.mikara-hero__form-note.success { color: #2e7d32; font-weight: 600; }
@media (max-width: 1199px) {
  .mikara-hero__title { font-size: 48px; }
}
@media (max-width: 991px) {
  .mikara-hero { padding: 130px 0 70px; }
  .mikara-hero--center { padding: 120px 0 70px; }
  .mikara-hero__title { font-size: 44px; }
  /* Mobile: text spans the full width over a centre-cropped (brighter) region,
     so hold a slightly heavier scrim than desktop. */
.mikara-hero__overlay { background: linear-gradient(180deg, rgba(33,31,28,.8), rgba(33,31,28,.72)); }
}
@media (max-width: 575px) {
  .mikara-hero { padding: 110px 0 50px; }
  .mikara-hero--center { padding: 108px 0 56px; }
  .mikara-hero__title { font-size: 34px; }
  .mikara-hero__text { font-size: 16px; }
  /* Stack the two CTAs full-width on phones */
.mikara-hero__cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .mikara-btn { justify-content: center; padding: 14px 24px; }
}
@media (max-width: 991px) {
  /* prevent accidental horizontal scroll from wide template rows */
  html, body { overflow-x: hidden; }
  .mikara-header__inner .mikara-logo img,
  .mikara-header__inner .mikara-logo--dark img { max-height: 40px; width: auto; }
}
@media (max-width: 767px) {
  .mikara-section-pad { padding-top: 70px; padding-bottom: 70px; }
  .mikara-section-head h2,
.mikara-section-title,
.mikara-invert { font-size: 30px !important; line-height: 1.2; }
}
@media (max-width: 575px) {
  .container,
.container-fluid { padding-left: 18px; padding-right: 18px; }
  .mikara-section-head h2,
.mikara-section-title,
.mikara-invert { font-size: 26px !important; }
}
/*---------------------------------------
   Mikara, solid white header bar
   (was transparent over the hero; apply the sticky look from load)
---------------------------------------*/
/* Sharp-edged opaque band: square corners, no blur bleeding past the gold rule,
   and nothing from the page showing through at the corners.
   100vw (not left/right:0) so the bar also covers the scrollbar gutter - with
   left/right:0 it stops at clientWidth, leaving a strip of dark page showing at
   the right-hand corners. */
#mikara-site-header.mikara-header {
  background-color: var(--white);
  border-bottom: 2px solid var(--gold);
  border-radius: 0;
  box-shadow: none;
  width: 100vw;
  right: auto;
}
#mikara-site-header.mikara-header.sticky {
  box-shadow: none;
}
#mikara-site-header.mikara-header .container-fluid,
#mikara-site-header.mikara-header .mikara-header__inner,
#mikara-site-header.mikara-header .mikara-header__main {
  background: transparent;
  border-radius: 0;
}
/* The bar is white at every scroll position, so only the dark wordmark is ever
   used. The white one is gone from the markup entirely - see the split-header
   section at the end of this file. */
/* Dark nav links + hamburger on the white bar */
.mikara-header .mikara-header__main .mikara-nav ul li a { color: var(--header); }
.mikara-header .mikara-header__main .mikara-header__right .mikara-header__actions .mikara-header__hamburger .mikara-nav-toggle { color: var(--header); }
/*---------------------------------------
   Mikara, luxury hero refinements
---------------------------------------*/
/* Depth vignette layered over the tuned scrim for a richer, "shinier" frame */
.mikara-hero--center .mikara-hero__overlay {
  /* Lightened so the kitchen reads through; measured worst-case contrast for
     white text over the copy area is ~4.7:1 (WCAG AA needs 4.5:1). */
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(33,31,28,0) 0%, rgba(33,31,28,.25) 78%, rgba(33,31,28,.45) 100%),
    linear-gradient(180deg, rgba(33,31,28,.48) 0%, rgba(33,31,28,.60) 48%, rgba(33,31,28,.56) 100%);
}
.mikara-hero--center .mikara-hero__inner { max-width: 940px; }
/* Eyebrow, small, letterspaced (no flanking rules) */
.mikara-hero__eyebrow {
  display: inline-block;
  font-family: var(--mikara-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  margin-bottom: 26px;
}
/* Headline, editorial uppercase serif with a touch of depth */
.mikara-hero--center .mikara-hero__title {
  text-transform: uppercase;
  font-size: 72px;
  font-weight: 300; /* lighter, finer serif */
  line-height: 1.04;
  letter-spacing: 1px;
  margin-bottom: 26px;
  text-shadow: 0 2px 24px rgba(0,0,0,.28);
}
.mikara-hero--center .mikara-hero__text {
  font-size: 18.5px;
  color: rgba(255,255,255,.86);
  max-width: 640px;
  margin-bottom: 38px;
}
/* Buttons, solid gets a lift; ghost gets a slick glassy fill */
.mikara-hero__cta { margin-top: 0; }
.mikara-btn--solid {
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
.mikara-btn--solid i { transition: transform .25s ease; }
.mikara-btn--solid:hover i { transform: translateX(4px); }
.mikara-btn--ghost {
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: rgba(255,255,255,.55);
}
/* Slick scroll cue */
.mikara-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
  z-index: 3;
}
.mikara-hero__scroll-line {
  width: 2px;
  height: 8px;
  border-radius: 2px;
  background: #fff;
  animation: mikaraScroll 1.8s ease-in-out infinite;
}
@keyframes mikaraScroll {
  0% { opacity: 0; transform: translateY(-4px); }
  40% { opacity: 1; }
  80% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mikara-hero__scroll-line { animation: none; }
}
@media (max-width: 1199px) {
  .mikara-hero--center .mikara-hero__title { font-size: 58px; }
}
@media (max-width: 991px) {
  .mikara-hero--center .mikara-hero__title { font-size: 48px; }
}
@media (max-width: 575px) {
  .mikara-hero--center .mikara-hero__title { font-size: 34px; line-height: 1.08; }
  .mikara-hero__eyebrow { font-size: 11px; letter-spacing: 0.24em; }
  .mikara-hero--center .mikara-hero__text { font-size: 15.5px; }
  .mikara-hero__scroll { display: none; }
}
/*---------------------------------------
   Mikara, sharper hero buttons
   Square corners + crisp uppercase lettering
---------------------------------------*/
.mikara-btn {
  border-radius: 0;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  padding: 18px 40px;
  gap: 12px;
}
.mikara-btn i { font-size: 12px; }
.mikara-btn--solid { box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.mikara-btn--ghost { border-width: 1px; }
@media (max-width: 575px) {
  .mikara-btn { padding: 16px 26px; font-size: 12px; letter-spacing: 0.14em; }
}
/*---------------------------------------
   Mikara, hero buttons fill from the centre outward on hover
---------------------------------------*/
.mikara-btn {
  position: relative;
  overflow: hidden;
}
/* Label + icon ride above the expanding fill */
.mikara-btn span,
.mikara-btn i {
  position: relative;
  z-index: 1;
}
.mikara-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.mikara-btn:hover::before,
.mikara-btn:focus-visible::before {
  transform: scaleX(1);
}
/* Solid: white base, accent sweeps out from the centre */
.mikara-btn--solid::before { background: var(--accent); }
.mikara-btn--solid:hover,
.mikara-btn--solid:focus-visible {
  background: #fff;      /* keep the base so the fill is what animates */
  color: #fff;
}
/* Ghost: glassy base, white sweeps out from the centre */
.mikara-btn--ghost::before { background: #fff; }
.mikara-btn--ghost:hover,
.mikara-btn--ghost:focus-visible {
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .mikara-btn::before { transition: none; }
}
/*---------------------------------------
   Mikara, projects grid (replaces the pinned/scaled panels)
---------------------------------------*/
.mikara-projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 70px 48px;
  margin-top: 66px;
}
/* Editorial stagger: drop the second column */
.mikara-projects .mikara-project:nth-child(even) { margin-top: 78px; }
/* Copy panels centre on the image beside them. The panel takes the photo's 4/3 box
   (equal columns, so same width means same height) and centres its content in it;
   the margin then just matches whatever stagger its paired photo carries. */
.mikara-projects .mikara-project--text {
  align-self: start;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
}
.mikara-projects .mikara-project.mikara-project--text { margin-top: 0; }
.mikara-projects .mikara-project.mikara-project--aligned { margin-top: 78px; }
.mikara-project { display: block; color: inherit; }
.mikara-project__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--theme);
}
.mikara-project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s cubic-bezier(.2, .6, .2, 1);
}
.mikara-project__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33,31,28,0) 55%, rgba(33,31,28,.45) 100%);
  opacity: 0;
  transition: opacity .5s ease;
}
.mikara-project:hover .mikara-project__media img { transform: scale(1.06); }
.mikara-project:hover .mikara-project__media::after { opacity: 1; }
/* Caption, same typographic system as the rest of the site */
.mikara-project__body {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(43, 41, 38, 0.14);
}
.mikara-project__cat {
  display: block;
  font-family: var(--mikara-sans);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: capitalize;
  color: var(--accent-ink);
  margin-bottom: 10px;
  line-height: 1;
}
.mikara-project__title {
  font-family: var(--mikara-serif) !important;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 10px;
  transition: color .3s ease;
}
.mikara-project:hover .mikara-project__title { color: var(--accent-ink); }
.mikara-project__meta {
  font-family: var(--mikara-sans);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: #8a8375;
}
.mikara-project__meta i {
  font-style: normal;
  color: var(--accent);
  margin: 0 10px;
}
@media (max-width: 991px) {
  .mikara-projects { gap: 48px 32px; margin-top: 48px; }
  .mikara-projects .mikara-project:nth-child(even),
.mikara-projects .mikara-project.mikara-project--aligned { margin-top: 0; }
  /* stacked columns: no photo to centre against */
.mikara-projects .mikara-project--text {
    aspect-ratio: auto;
    display: block;
  }
  .mikara-project__title { font-size: 23px; }
}
@media (max-width: 767px) {
  .mikara-projects { grid-template-columns: 1fr; gap: 44px; }
  .mikara-project__media { aspect-ratio: 3 / 2; }
}
/*---------------------------------------
   Mikara, design section (3-column editorial)
---------------------------------------*/
.mikara-design-section {
  background: #F0EBE5;
  padding: 120px 0;
  overflow: hidden;
}
.mikara-design {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 48px;
  align-items: start;
}
/* Staggered left column, per the reference composition */
.mikara-design__col--left { margin-top: 140px; }
.mikara-design__title {
  font-family: var(--mikara-serif) !important;
  font-size: clamp(42px, 7.6vw, 120px);
  line-height: 1.02;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: #341f16;
  margin: 0 0 22px;
}
.mikara-design__text {
  color: rgba(52, 31, 22, 0.75);
  font-family: var(--mikara-sans);
  font-size: 16px;
  line-height: 30px;
  margin: 0;
  max-width: 560px;
}
.mikara-design__label {
  font-family: var(--mikara-serif) !important;
  font-size: 26px;
  line-height: 1.5;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.4px;
  color: #341f16;
  margin: 0 0 24px;
}
.mikara-design__col--right .mikara-design__label { margin: 24px 0 0; }
.mikara-design img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
@media (max-width: 1199px) {
  .mikara-design { gap: 32px; }
  .mikara-design__col--left { margin-top: 90px; }
  .mikara-design__label { font-size: 22px; }
}
@media (max-width: 991px) {
  .mikara-design-section { padding: 80px 0; }
  .mikara-design { grid-template-columns: 1fr; gap: 44px; }
  .mikara-design__col--left { margin-top: 0; }
  /* Lead with the headline on narrow screens */
.mikara-design__col--center { order: -1; }
  .mikara-design img { aspect-ratio: 3 / 2; }
}
@media (max-width: 575px) {
  .mikara-design-section { padding: 64px 0; }
  .mikara-design__label { font-size: 20px; }
}
/*---------------------------------------
   Mikara - testimonials single-row marquee
   Faded + blurred edges on the left and right
---------------------------------------*/
.mikara-testi {
  position: relative;
  margin-top: 50px;
}
.mikara-testi__viewport {
  overflow: hidden;
  /* Soft fade at both edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.mikara-testi__track {
  display: flex;
  align-items: stretch;
  gap: 30px;
  width: max-content;
  padding: 6px 0;
  animation: mikaraTestiMarquee 70s linear infinite;
}
@keyframes mikaraTestiMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.mikara-testi:hover .mikara-testi__track { animation-play-state: paused; }
/* Blurred edge overlays, strongest at the very edge */
.mikara-testi::before,
.mikara-testi::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.mikara-testi::before {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, transparent 100%);
}
.mikara-testi::after {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, transparent 100%);
}
@media (max-width: 575px) {
  .mikara-testi__track { gap: 20px; }
  .mikara-testi::before,
.mikara-testi::after { width: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .mikara-testi__track { animation: none; }
  .mikara-testi__viewport { overflow-x: auto; }
}
/*---------------------------------------
   Mikara - About + Services share the design
   section background (#F0EBE5)
---------------------------------------*/
.mikara-about-section,
.mikara-services-section {
  background-color: #F0EBE5;
}
/*---------------------------------------
   Mikara - About body copy + Services grid
---------------------------------------*/
.mikara-about__text {
  font-family: var(--mikara-sans);
  font-size: 16.5px;
  line-height: 32px;
  color: rgba(52, 31, 22, 0.78);
  max-width: 760px;
  margin: 26px 0 0;
}
.mikara-services__intro {
  font-family: var(--mikara-sans);
  font-size: 16.5px;
  line-height: 32px;
  color: rgba(52, 31, 22, 0.78);
  max-width: 720px;
  margin: 22px auto 0;
}
.mikara-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 64px;
}
.mikara-service {
  padding-top: 26px;
  border-top: 1px solid rgba(43, 41, 38, 0.16);
}
.mikara-service__num {
  display: block;
  font-family: var(--mikara-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--accent-ink);
  margin-bottom: 16px;
}
.mikara-service__title {
  font-family: var(--mikara-serif) !important;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 14px;
}
.mikara-service__text {
  font-family: var(--mikara-sans);
  font-size: 15.5px;
  line-height: 30px;
  color: rgba(52, 31, 22, 0.75);
  margin: 0;
}
@media (max-width: 991px) {
  .mikara-services { grid-template-columns: 1fr; gap: 32px; margin-top: 44px; }
  .mikara-service__title { font-size: 24px; }
}
/*---------------------------------------
   Mikara - service numbers as large faded
   watermarks sitting behind the copy
---------------------------------------*/
.mikara-service {
  position: relative;
  overflow: hidden;
}
.mikara-service__num {
  position: absolute;
  top: 18px;
  left: -6px;
  z-index: 0;
  font-family: var(--mikara-serif);
  font-size: 150px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -4px;
  color: rgba(52, 31, 22, 0.08);
  pointer-events: none;
  user-select: none;
  margin-bottom: 0;
}
/* Copy rides above the watermark */
.mikara-service__title,
.mikara-service__text {
  position: relative;
  z-index: 1;
}
.mikara-service__title { margin-top: 34px; }
@media (max-width: 991px) {
  .mikara-service__num { font-size: 120px; top: 14px; }
  .mikara-service__title { margin-top: 26px; }
}
@media (max-width: 575px) {
  .mikara-service__num { font-size: 100px; }
}
/*---------------------------------------
   Mikara - About rearrangement
---------------------------------------*/
.mikara-about-section .mikara-section-head .mikara-eyebrow { margin-bottom: 20px; }
/* Right-hand image drops for an editorial stagger */
.mikara-about__stagger { margin-top: 90px; }
.mikara-about-section .mikara-about__text { margin-top: 0; }
@media (max-width: 991px) {
  .mikara-about__stagger { margin-top: 0; }
  .mikara-about-section .mikara-about__text { margin-top: 18px; }
  .mikara-about-section .offset-lg-1 { margin-left: 0; }
}
/*---------------------------------------
   Mikara - 404 page
---------------------------------------*/
.mikara-404 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
  background: var(--theme);
  color: #fff;
  padding: 120px 0;
}
.mikara-404__code {
  display: block;
  font-family: var(--mikara-serif);
  font-size: 120px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
  margin-bottom: 10px;
}
.mikara-404__title {
  font-family: var(--mikara-serif) !important;
  color: #fff !important;
  font-size: 42px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 16px;
}
.mikara-404__text {
  color: rgba(255, 255, 255, 0.85);
  max-width: 520px;
  margin: 0 auto 32px;
  font-size: 16.5px;
  line-height: 30px;
}
.mikara-404 .mikara-btn { justify-content: center; }
@media (max-width: 575px) {
  .mikara-404__code { font-size: 84px; }
  .mikara-404__title { font-size: 30px; }
}
/*---------------------------------------
   Mikara - lighter weights + sharp edges
---------------------------------------*/
/* --- Thinner text throughout --- */
body {
  font-family: var(--mikara-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p,
li,
span,
a,
input,
select,
textarea,
button { font-weight: 300; }
h1,
h2,
h3,
h4,
h5,
h6,
.mikara-section-title,
.mikara-section-title,
.mikara-invert,
.mikara-hero__title,
.mikara-design__title,
.mikara-design__label,
.mikara-project__title,
.mikara-service__title,
.mikara-404__title {
  font-weight: 300 !important;
}
strong,
b { font-weight: 500; }
/* Component weights eased back */
.mikara-btn { font-weight: 400; }
.mikara-hero__eyebrow { font-weight: 300; }
.mikara-service__num { font-weight: 300; }
.mikara-section-head .mikara-eyebrow { font-weight: 300; }
/* Didone serifs have fine hairlines: a touch more tracking keeps them crisp */
.mikara-hero__title { letter-spacing: 2px; }
.mikara-design__title { letter-spacing: 0; }
/* --- Sharp edges everywhere --- */
*,
*::before,
*::after { border-radius: 0 !important; }
/*---------------------------------------
   Mikara - Projects section title right-aligned
   (GSAP SplitText writes `text-align: start`
   inline on each line, so those need overriding)
---------------------------------------*/
#projects .mikara-section-head { text-align: right; }
#projects .mikara-section-head .mikara-eyebrow,
#projects .mikara-section-head h2 { text-align: right; }
#projects .mikara-section-head .split-line,
#projects .mikara-section-head h2 > div,
#projects .mikara-section-head .mikara-eyebrow > div { text-align: right !important; }
/*---------------------------------------
   Mikara - legal pages (privacy, accessibility)
---------------------------------------*/
.mikara-legal { background: var(--body); color: var(--text); }
.mikara-legal__bar {
  background: #fff;
  border-bottom: 1px solid rgba(43, 41, 38, 0.12);
  padding: 18px 0;
}
.mikara-legal__bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.mikara-legal__logo img { height: 40px; width: auto; display: block; }
.mikara-legal__back {
  font-family: var(--mikara-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid rgba(43, 41, 38, 0.35);
  padding-bottom: 3px;
}
.mikara-legal__back:hover { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }
.mikara-legal__body { padding: 80px 0 90px; }
.mikara-legal__body .container { max-width: 820px; }
.mikara-legal__title {
  font-family: var(--mikara-serif) !important;
  font-size: 52px;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 10px;
  color: var(--text);
}
.mikara-legal__updated {
  font-family: var(--mikara-sans);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 40px;
}
.mikara-legal__content { font-size: 16px; line-height: 30px; color: rgba(52, 31, 22, 0.82); }
.mikara-legal__content h2 {
  font-family: var(--mikara-serif) !important;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
  margin: 40px 0 14px;
}
.mikara-legal__content p { margin: 0 0 18px; }
.mikara-legal__content ul { margin: 0 0 18px; padding-left: 20px; list-style: disc; }
.mikara-legal__content li { margin-bottom: 10px; }
.mikara-legal__content a { color: var(--accent-ink); border-bottom: 1px solid rgba(176, 106, 44, 0.4); }
.mikara-legal__content a:hover { border-bottom-color: var(--accent-ink); }
.mikara-legal__content code {
  font-size: 14px;
  background: rgba(43, 41, 38, 0.06);
  padding: 2px 6px;
}
.mikara-legal__note {
  margin-top: 40px;
  padding: 18px 20px;
  background: rgba(176, 106, 44, 0.08);
  border-left: 3px solid var(--accent);
  font-size: 14.5px;
  line-height: 26px;
}
.mikara-legal__footer {
  background: var(--theme);
  color: rgba(255, 255, 255, 0.8);
  padding: 46px 0;
  font-size: 14px;
  line-height: 26px;
}
.mikara-legal__footer a { color: rgba(255, 255, 255, 0.85); }
.mikara-legal__footer a:hover { color: #fff; }
.mikara-legal__links { display: flex; gap: 22px; margin: 18px 0 14px; flex-wrap: wrap; }
.mikara-legal__links a {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mikara-legal__copy { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.6); }
@media (max-width: 575px) {
  .mikara-legal__title { font-size: 34px; }
  .mikara-legal__body { padding: 54px 0 60px; }
  .mikara-legal__content h2 { font-size: 22px; }
}
/*---------------------------------------
   Mikara - footer legal links
---------------------------------------*/
.mikara-footer-legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.mikara-footer-legal a {
  font-family: var(--mikara-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.mikara-footer-legal a:hover { color: #fff; }
/*---------------------------------------
   Mikara - cookie notice
---------------------------------------*/
.mikara-cookie {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
  background: var(--theme);
  color: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.mikara-cookie__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding: 20px 26px;
  max-width: 1180px;
  margin: 0 auto;
}
.mikara-cookie__text {
  margin: 0;
  font-family: var(--mikara-sans);
  font-size: 14px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.86);
  max-width: 760px;
}
.mikara-cookie__text a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.mikara-cookie__actions { display: flex; gap: 12px; flex-shrink: 0; }
.mikara-cookie__btn {
  font-family: var(--mikara-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 26px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.mikara-cookie__btn:hover { background: rgba(255, 255, 255, 0.14); }
.mikara-cookie__btn--solid { background: #fff; color: var(--text); border-color: #fff; }
.mikara-cookie__btn--solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 767px) {
  .mikara-cookie { left: 12px; right: 12px; bottom: 12px; }
  .mikara-cookie__inner { padding: 18px; gap: 16px; }
  .mikara-cookie__actions { width: 100%; }
  .mikara-cookie__btn { flex: 1; padding: 12px 16px; }
}
/*---------------------------------------
   Mikara - no italics anywhere, upright type
---------------------------------------*/
*,
*::before,
*::after,
em,
i,
cite,
address,
blockquote,
q,
.mikara-eyebrow,
.mikara-hero__title span,
.mikara-section-head .mikara-eyebrow,
.mikara-design__title {
  font-style: normal !important;
}
/* One geometric family across the whole site */
body,
input,
select,
textarea,
button {
  font-family: var(--mikara-sans);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--mikara-sans) !important;
  letter-spacing: 0.5px;
}
/* Geometric faces read wide, so ease the display tracking back */
.mikara-hero__title { letter-spacing: 1px; }
.mikara-legal__title,
.mikara-design__title { letter-spacing: 0.5px; }
/*---------------------------------------
   Mikara - lighter, more elegant display type
   NB: browsers synthesise bolder but never thinner,
   so the stack must lead with a family that has a
   genuine ultra-light cut for 200 to take effect.
---------------------------------------*/
body { font-weight: 300; }
/* Display headings drop to ultra-light with airier tracking */
.mikara-hero__title,
.mikara-design__title,
.mikara-legal__title,
.mikara-section-title,
.mikara-section-title,
.mikara-invert,
.mikara-section-head h2,
h1,
h2 {
  font-weight: 200 !important;
}
.mikara-design__title {
  letter-spacing: 3px;
  line-height: 1.06;
}
.mikara-hero__title { letter-spacing: 2.5px; }
.mikara-legal__title { letter-spacing: 2px; }
.mikara-section-title,
.mikara-section-head h2 { letter-spacing: 1.5px; }
/* Smaller headings stay at 300 so they hold up at size */
h3,
h4,
h5,
h6,
.mikara-service__title,
.mikara-project__title,
.mikara-design__label { font-weight: 300 !important; }
/*---------------------------------------
   Mikara - centered design heading +
   darker body copy on light backgrounds
---------------------------------------*/
.mikara-design__col--center { text-align: center; }
.mikara-design__title { text-align: center; }
.mikara-design__text {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* Darker paragraph text for stronger contrast on the cream backgrounds */
.mikara-design__text,
.mikara-about__text,
.mikara-services__intro,
.mikara-service__text,
.mikara-legal__content {
  color: rgba(45, 27, 18, 0.94);
}
.mikara-project__meta { color: #6b6154; }
.mikara-legal__content h2 { color: #2d1b12; }
/*---------------------------------------
   Mikara - slightly larger body copy
---------------------------------------*/
body { font-size: 17px; line-height: 31px; }
.mikara-design__text {
  font-size: 18px;
  line-height: 34px;
  max-width: 620px;
}
.mikara-about__text,
.mikara-services__intro {
  font-size: 18px;
  line-height: 34px;
}
.mikara-service__text {
  font-size: 17px;
  line-height: 32px;
}
.mikara-legal__content {
  font-size: 17px;
  line-height: 32px;
}
.mikara-hero__text { font-size: 19px; line-height: 1.65; }
@media (max-width: 575px) {
  body { font-size: 16px; line-height: 29px; }
  .mikara-design__text,
.mikara-about__text,
.mikara-services__intro { font-size: 16.5px; line-height: 31px; }
  .mikara-service__text,
.mikara-legal__content { font-size: 16px; line-height: 30px; }
  .mikara-hero__text { font-size: 16.5px; }
}
/*---------------------------------------
   Mikara - testimonial quote cards
   Quote-forward, minimal chrome
---------------------------------------*/
.mikara-testi .mikara-quote {
  flex: 0 0 440px;
  width: 440px;
  margin: 0;
  padding: 46px 44px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}
.mikara-quote__text {
  margin: 0;
  font-family: var(--mikara-sans);
  font-size: 21px;
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: 0.1px;
  color: rgba(45, 27, 18, 0.94);
  text-transform: none;
}
.mikara-quote__author {
  font-family: var(--mikara-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8375;
}
@media (max-width: 575px) {
  .mikara-testi .mikara-quote {
    flex-basis: 300px;
    width: 300px;
    padding: 32px 28px;
    gap: 22px;
  }
  .mikara-quote__text { font-size: 18px; line-height: 1.5; }
}
/*---------------------------------------
   Mikara - smaller display headings
---------------------------------------*/
/* Design section: was clamp(42px, 7.6vw, 120px) */
.mikara-design__title {
  font-size: clamp(34px, 5.4vw, 84px);
  line-height: 1.08;
}
/* Section headings (Services, Projects, Testimonials): was 56px */
.mikara-section-title,
.mikara-section-head h2,
.mikara-section-title {
  font-size: 44px !important;
  line-height: 1.14;
}
@media (max-width: 991px) {
  .mikara-section-title,
.mikara-section-head h2,
.mikara-section-title { font-size: 36px !important; }
}
@media (max-width: 575px) {
  .mikara-section-title,
.mikara-section-head h2,
.mikara-section-title { font-size: 28px !important; }
  .mikara-design__title { font-size: 30px; }
}
/*---------------------------------------
   Mikara - ClientCzar partner credit + tooltip
---------------------------------------*/
.mikara-partner {
  margin: 14px 0 0;
  font-family: var(--mikara-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mikara-partner__link {
  position: relative;
  display: inline-block;
  color: rgba(255, 255, 255, 0.66);
  border-bottom: 0;
  text-decoration: none;
  padding-bottom: 2px;
  transition: color .25s ease;
}
.mikara-partner__link:hover,
.mikara-partner__link:focus-visible {
  color: #fff;
  text-decoration: none;
}
/* Tooltip: hidden until hover or keyboard focus */
.mikara-partner__tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  width: 300px;
  max-width: 78vw;
  padding: 14px 16px;
  background: #fff;
  color: rgba(45, 27, 18, 0.94);
  font-size: 12.5px;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.32);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 60;
  pointer-events: none;
}
/* little pointer */
.mikara-partner__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 26px;
  border: 7px solid transparent;
  border-top-color: #fff;
}
.mikara-partner__link:hover .mikara-partner__tip,
.mikara-partner__link:focus-visible .mikara-partner__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (max-width: 575px) {
  .mikara-partner__tip { width: 260px; left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mikara-partner__tip { transition: opacity .01s, visibility .01s; transform: none; }
}
/*---------------------------------------
   Mikara - bolder service titles
---------------------------------------*/
.mikara-service__title {
  font-weight: 500 !important;
  letter-spacing: 0.2px;
}
/*---------------------------------------
   Mikara - footer estimate form
---------------------------------------*/
.mikara-footer-form-wrap {
  padding: 10px 0 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 60px;
}
.mikara-footer-form {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
  align-items: start;
}
.mikara-footer-form__title {
  font-family: var(--mikara-sans) !important;
  font-size: 34px;
  font-weight: 200 !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff;
  margin: 0 0 14px;
}
.mikara-footer-form__sub {
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 29px;
  max-width: 420px;
  margin: 0;
}
/* Office hours under the estimate intro */
.mikara-hours {
  margin-top: 30px;
  max-width: 420px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.mikara-hours__title {
  font-family: var(--mikara-sans) !important;
  font-size: 13px;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 14px;
}
.mikara-hours__list {
  margin: 0;
  font-family: var(--mikara-sans);
  font-size: 15px;
  font-weight: 300;
}
.mikara-hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 0;
}
.mikara-hours__row dt {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 300;
}
.mikara-hours__row dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  white-space: nowrap;
}
.mikara-hours__row--closed dt,
.mikara-hours__row--closed dd {
  color: rgba(255, 255, 255, 0.42);
}
/* Fields tuned for the dark footer */
.mikara-footer-form__form .mikara-field { margin-bottom: 14px; }
.mikara-footer-form__form input,
.mikara-footer-form__form select,
.mikara-footer-form__form textarea {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-family: var(--mikara-sans);
  font-size: 15px;
  font-weight: 300;
  padding: 14px 16px;
  width: 100%;
}
.mikara-footer-form__form input::placeholder,
.mikara-footer-form__form textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.mikara-footer-form__form input:focus,
.mikara-footer-form__form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 0 3px rgba(176, 106, 44, 0.18);
}
.mikara-footer-form__form textarea { resize: vertical; min-height: 96px; }
.mikara-footer-form__form .mikara-btn { width: 100%; justify-content: center; margin-top: 4px; }
.mikara-footer-form__form .mikara-hero__form-note {
  text-align: left;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 12px;
}
.mikara-footer-form__form .mikara-hero__form-note.success { color: #7fd4a2; }
@media (max-width: 991px) {
  .mikara-footer-form { grid-template-columns: 1fr; gap: 34px; }
  .mikara-footer-form__title { font-size: 28px; }
}
@media (max-width: 575px) {
  .mikara-footer-form-wrap { padding-bottom: 44px; margin-bottom: 44px; }
  .mikara-field-row { grid-template-columns: 1fr; gap: 0; }
  .mikara-field-row .mikara-field { margin-bottom: 14px; }
}
/*---------------------------------------
   Mikara - orange CTA + refined motion
---------------------------------------*/
.mikara-project__btn .mikara-cta__label,
.mikara-project__btn .mikara-cta__arrow-left,
.mikara-project__btn .mikara-cta__arrow-right {
  background: var(--accent);
  color: #fff;
}
.mikara-project__btn .mikara-cta__label { font-weight: 400; letter-spacing: 0.4px; }
.mikara-project__btn .mikara-cta i { color: #fff; }
/* CTA sitting inside a copy panel, beside its paired photo */
.mikara-project__cta { margin-top: 34px; }
@media (max-width: 991px) {
  .mikara-project__cta { margin-top: 26px; }
}
/* Same arrow-swap idea, just smoother and a shorter travel */
.mikara-project__btn .mikara-cta { transition: transform .35s cubic-bezier(.4, 0, .2, 1); }
.mikara-project__btn .mikara-cta .mikara-cta__label,
.mikara-project__btn .mikara-cta .mikara-cta__arrow-left,
.mikara-project__btn .mikara-cta .mikara-cta__arrow-right {
  transition: transform .5s cubic-bezier(.34, 1.2, .44, 1),
              scale .5s cubic-bezier(.34, 1.2, .44, 1),
              background .3s ease;
}
.mikara-project__btn .mikara-cta:hover { transform: translateY(-3px); }
.mikara-project__btn .mikara-cta:hover .mikara-cta__label { transform: translateX(46px); }
.mikara-project__btn .mikara-cta:hover .mikara-cta__label,
.mikara-project__btn .mikara-cta:hover .mikara-cta__arrow-left {
  background: #96571f;
}
/*---------------------------------------
   Mikara - combined footer band
   Replaced the three-column widget grid (Quick Links / Social / Contact). With
   social gone, two columns pushed to the outer edges left a hole in the middle,
   so the links and the contact details are now two centred inline rows.
---------------------------------------*/
.mikara-footer__band::before,
.mikara-footer__band::after {
  display: none; /* column dividers, nothing left to divide */
}
.mikara-footer__band {
  margin-top: 48px;
  padding-top: 30px;
  padding-bottom: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.mikara-footer-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.mikara-footer-nav,
.mikara-footer-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-family: var(--mikara-sans);
  font-style: normal;
  margin: 0;
}
.mikara-footer-nav {
  gap: 0 30px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mikara-footer-nav a {
  color: rgba(255, 255, 255, 0.86);
  padding: 4px 0;
  transition: color .25s ease;
}
.mikara-footer-nav a:hover { color: var(--gold); }
.mikara-footer-contact {
  gap: 0 26px;
  font-size: 14.5px;
  font-weight: 300;
  letter-spacing: 0.02em;
}
.mikara-footer-contact span,
.mikara-footer-contact a {
  position: relative;
  color: rgba(255, 255, 255, 0.6);
  padding: 3px 0;
}
.mikara-footer-contact a:hover { color: #fff; }
/* hairline separators between the contact items, not after the last */
.mikara-footer-contact > *:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -13px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.22);
}
@media (max-width: 767px) {
  .mikara-footer-nav { gap: 0 20px; font-size: 12px; }
  .mikara-footer-contact {
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
  }
  .mikara-footer-contact > *:not(:last-child)::after { display: none; }
}
/*---------------------------------------
   Mikara - thinner, single-row footer bar
---------------------------------------*/
.mikara-footer__bottom { padding: 16px 0; }
.mikara-footer__bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 30px;
}
/* one consistent type size so the row reads as a single line */
.mikara-footer__bottom p,
.mikara-footer-legal a,
.mikara-partner {
  margin: 0;
  font-family: var(--mikara-sans);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}
.mikara-footer__bottom p { color: rgba(255, 255, 255, 0.62); text-align: left; }
.mikara-footer-legal { margin: 0; gap: 22px; }
.mikara-partner { margin: 0; }
@media (max-width: 991px) {
  .mikara-footer__bottom .container { justify-content: center; text-align: center; }
  .mikara-footer__bottom p { text-align: center; width: 100%; }
  .mikara-footer-legal { justify-content: center; }
}
/* keep the legal nav's own line box matching its links */
.mikara-footer__bottom .mikara-footer-legal { font-size: 12px; line-height: 1.4; }
/*---------------------------------------
   Mikara - text panels inside the project grid
---------------------------------------*/
.mikara-project--text .mikara-project__body {
  margin-top: 0;
  padding-top: 22px;
}
.mikara-project__copy {
  font-family: var(--mikara-sans);
  font-size: 16.5px;
  line-height: 31px;
  color: rgba(45, 27, 18, 0.94);
  margin: 12px 0 0;
}
@media (min-width: 1200px) {
  /* pinned from the top, not just after 250px of scroll */
  #mikara-site-header.mikara-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  /* thinner bar */
  .mikara-header .mikara-header__main { padding: 0; }

  /* real nav on, hamburger off */
  .mikara-header .mikara-header__hamburger,
  .mikara-header .mikara-header__right .mikara-header__actions { display: none !important; }
  .mikara-header .mikara-header__main .mikara-nav ul li a {
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 9px 0;
    color: var(--header);
  }
  .mikara-header .mikara-header__main .mikara-nav ul li a:hover { color: var(--accent-ink); }}
@media (min-width: 1200px) {
  /* Only the bare .container is used in the markup; the breakpoint-scoped
     .container-* variants were dropped along with the rest of the unused grid. */
  .container {
    max-width: min(1560px, max(1290px, calc(100% - 100px)));
  }
}
/* Hero copy tracks the wider column instead of staying pinned at 880/940px */
.mikara-hero__inner,
.mikara-hero--center .mikara-hero__inner {
  max-width: 1180px;
}
@media (max-width: 991px) {
  .mikara-hero__inner,
.mikara-hero--center .mikara-hero__inner { max-width: 940px; }
}
/*---------------------------------------
   Inline icons (replaced the Font Awesome webfont)
---------------------------------------*/
.mi-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  overflow: visible;
}

/*---------------------------------------
   Offcanvas mobile navigation
   The panel holds a real <nav>, so nothing is cloned or generated at runtime.
---------------------------------------*/
.mikara-mobile-nav ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block;
}
.mikara-mobile-nav ul li a {
  display: block;
  width: 100%;
  padding: 10px 0;
  color: #000;
  font-size: 50px;
  line-height: 2;
  font-weight: 700;
  text-transform: capitalize;
  border: none;
  font-family: var(--mikara-sans);
}
@media (max-width: 1399px) {
  .mikara-mobile-nav ul li a { font-size: 20px; }
}
.mikara-mobile-nav ul li a:hover,
.mikara-mobile-nav ul li a:focus-visible {
  color: var(--theme);
}


/*---------------------------------------
   Split header: links, wordmark, links
   The bar is a three-track grid whose outer tracks are both 1fr, so the middle
   track - the wordmark - lands on the centre of the bar no matter how much
   wider one set of links is than the other. Centring the logo inside a flex row
   instead would push it off-centre the moment the link text changed length.
   Markup: app/_components/SiteHeader.tsx
---------------------------------------*/
.mikara-header .mikara-header__main--split {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0;
}
.mikara-header__nav {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 48px;
}
.mikara-header .mikara-nav__list {
  display: flex;
  align-items: center;
  gap: 38px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mikara-header .mikara-nav__list--start { justify-content: flex-end; }
.mikara-header .mikara-nav__list--end { justify-content: flex-start; }
.mikara-header .mikara-nav__list li { margin-inline-end: 0; }
/* The brand is a STACKED lockup — the MC badge sits above MIKARA, which sits
   above CONSTRUCTION INC. — so it needs far more height than the single-line
   wordmark it replaced. At the old 26px the bottom line was around 3px tall and
   simply unreadable. Heights below are set so that smallest line still reads;
   the bar grows to suit, which is the intended trade. */
.mikara-header__brand {
  display: block;
  justify-self: center;
}
.mikara-header__brand img {
  display: block;
  height: 52px;
  width: auto;
  filter: none;
}
/* The current page's own link, marked with aria-current in the markup. */
.mikara-header .mikara-nav__list a[aria-current="page"] { color: var(--accent-ink); }

/* Below the desktop breakpoint the links give way to the hamburger. The
   wordmark stays on the centre of the bar, so the button is taken out of flow
   rather than allowed to shift it. */
@media (max-width: 1199px) {
  .mikara-header .mikara-nav__list { display: none; }
  .mikara-header__nav { display: block; text-align: center; }
  .mikara-header .mikara-header__main--split .mikara-header__right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    gap: 0;
  }
  .mikara-header__brand img { height: 50px; }
  .mikara-header .mikara-header__main--split { min-height: 74px; }
}
@media (min-width: 1200px) {
  /* 80px of logo in a 108px bar. "CONSTRUCTION INC." is about 12% of the
     lockup's height, so 80px puts that line near 9px — small, but legible,
     which it was not before. */
  .mikara-header .mikara-header__main--split { min-height: 108px; }
  .mikara-header__brand img { height: 80px; }
}

/*---------------------------------------
   Portfolio page (/portfolio)
   The header is fixed at 1200px and up and absolutely positioned below it, so
   it never occupies flow space - the page has to clear it itself.
---------------------------------------*/
.mikara-portfolio {
  background-color: var(--body);
  /* Clears the bar plus breathing room. Grew with it when the wordmark became
     the taller stacked lockup — at the old 130px the title sat 22px under a
     108px header and read as jammed against it. */
  padding-top: 168px;
  padding-bottom: 90px;
  min-height: 70vh;
}
@media (max-width: 991px) {
  .mikara-portfolio { padding-top: 110px; padding-bottom: 70px; }
}
.mikara-portfolio__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 54px;
}
.mikara-portfolio__head .mikara-eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.mikara-portfolio__title {
  color: var(--header);
  font-size: 46px;
  line-height: 1.15;
  margin: 0 0 16px;
}
.mikara-portfolio__sub {
  color: rgba(45, 27, 18, 0.86);
  font-family: var(--mikara-sans);
  font-size: 16.5px;
  line-height: 30px;
  margin: 0;
}
@media (max-width: 767px) {
  .mikara-portfolio__title { font-size: 32px; }
  .mikara-portfolio__head { margin-bottom: 38px; }
}

/*---------------------------------------
   Photo grid
   Tiles share one aspect ratio so portrait and landscape photographs still line
   up in rows. The crop is the tile's only - the lightbox shows each photograph
   whole.
---------------------------------------*/
.mikara-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 575px) {
  .mikara-gallery__grid { grid-template-columns: 1fr; gap: 22px; }
}
.mikara-gallery__item { margin: 0; }
.mikara-gallery__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.mikara-gallery__frame {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: var(--border);
  border: 1px solid rgba(58, 54, 48, 0.12);
}
.mikara-gallery__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.mikara-gallery__btn:hover .mikara-gallery__frame img,
.mikara-gallery__btn:focus-visible .mikara-gallery__frame img {
  transform: scale(1.04);
}
.mikara-gallery__btn:focus-visible .mikara-gallery__frame {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.mikara-gallery__caption {
  display: block;
  margin-top: 14px;
  color: var(--header);
  font-family: var(--mikara-sans);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mikara-gallery__btn:hover .mikara-gallery__caption { color: var(--accent-ink); }

/*---------------------------------------
   Lightbox
   Opened from a tile, closed by the backdrop, the close button or Escape.
   Behaviour: public/assets/js/main.js
---------------------------------------*/
html.mikara-lightbox-open,
html.mikara-lightbox-open body { overflow: hidden; }

.mikara-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* `hidden` on a flex element loses to display:flex without this. */
.mikara-lightbox[hidden] { display: none; }
.mikara-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(20, 19, 17, 0.97);
}
.mikara-lightbox__figure {
  position: relative;
  margin: 0;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.mikara-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.mikara-lightbox__caption {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--mikara-sans);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}
.mikara-lightbox__count { color: rgba(255, 255, 255, 0.55); }

.mikara-lightbox__close,
.mikara-lightbox__nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.25);
  color: var(--white);
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.mikara-lightbox__close:hover,
.mikara-lightbox__nav:hover {
  border-color: var(--gold);
  background: rgba(0, 0, 0, 0.5);
}
.mikara-lightbox__close:focus-visible,
.mikara-lightbox__nav:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.mikara-lightbox__close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  font-size: 20px;
}
.mikara-lightbox__nav {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  margin: 0 18px;
  font-size: 22px;
}
@media (max-width: 767px) {
  .mikara-lightbox { padding: 12px; }
  .mikara-lightbox__nav {
    position: absolute;
    bottom: 18px;
    width: 46px;
    height: 46px;
    margin: 0;
  }
  .mikara-lightbox__nav--prev { left: 16px; }
  .mikara-lightbox__nav--next { right: 16px; }
  .mikara-lightbox__img { max-height: 66vh; }
  .mikara-lightbox__figure { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mikara-gallery__frame img { transition: none; }
  .mikara-gallery__btn:hover .mikara-gallery__frame img,
  .mikara-gallery__btn:focus-visible .mikara-gallery__frame img { transform: none; }
}

/* The compact footer opens straight into the link band, with no estimate form
   above it to be spaced away from. */
.mikara-footer--compact .mikara-footer__band { margin-top: 0; }

/*---------------------------------------
   Portfolio mosaic (/portfolio)
   Five full-bleed tiles on a six-column grid. Every cell is explicitly placed,
   so the arrangement is readable here rather than emergent from source order:

     row 1   RENOVATIONS   INTERIORS         B
     row 2   CUSTOM HOMES                    A
     row 3   KITCHENS                        (Bathrooms spans rows 1-2 at col 6)

   The label is hidden until hover or keyboard focus at desktop widths, the way
   the reference design does it. Below 992px there is no hover to reveal it, so
   it is shown permanently instead.
---------------------------------------*/
.mikara-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 38vh;
  gap: 4px;
  margin: 0;
  padding: 0 4px;
  list-style: none;
}
.mikara-mosaic__cell { margin: 0; min-width: 0; }
.mikara-mosaic__cell--renovations-and-rehabilitation { grid-area: 1 / 1 / 2 / 3; }
.mikara-mosaic__cell--interiors                      { grid-area: 1 / 3 / 2 / 6; }
.mikara-mosaic__cell--bathrooms                      { grid-area: 1 / 6 / 3 / 7; }
.mikara-mosaic__cell--custom-homes                   { grid-area: 2 / 1 / 3 / 6; }
.mikara-mosaic__cell--kitchens                       { grid-area: 3 / 1 / 4 / 7; }

.mikara-mosaic__tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--border);
}
.mikara-mosaic__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.mikara-mosaic__veil {
  position: absolute;
  inset: 0;
  background-color: rgba(33, 31, 28, 0.52);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.mikara-mosaic__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* The thin rule box from the reference: generous padding, hairline border. */
  padding: 26px 54px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--white);
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.mikara-mosaic__title {
  font-family: var(--mikara-serif);
  font-size: 20px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.2;
}
.mikara-mosaic__cta {
  font-family: var(--mikara-sans);
  font-size: 13.5px;
  font-style: italic;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
}
.mikara-mosaic__tile:hover .mikara-mosaic__veil,
.mikara-mosaic__tile:focus-visible .mikara-mosaic__veil,
.mikara-mosaic__tile:hover .mikara-mosaic__label,
.mikara-mosaic__tile:focus-visible .mikara-mosaic__label { opacity: 1; }
.mikara-mosaic__tile:hover .mikara-mosaic__img { transform: scale(1.04); }
.mikara-mosaic__tile:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -4px;
}

/* Tablet: two columns, every tile the same size. */
@media (max-width: 1199px) {
  .mikara-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 34vh;
  }
  .mikara-mosaic__cell--renovations-and-rehabilitation,
  .mikara-mosaic__cell--interiors,
  .mikara-mosaic__cell--bathrooms,
  .mikara-mosaic__cell--custom-homes,
  .mikara-mosaic__cell--kitchens { grid-area: auto; }
  /* Odd tile out spans the full width rather than leaving a hole. */
  .mikara-mosaic__cell--kitchens { grid-column: 1 / -1; }
}
/* No hover below this width, so the label is permanent. */
@media (max-width: 991px) {
  .mikara-mosaic {
    grid-template-columns: 1fr;
    grid-auto-rows: 30vh;
  }
  .mikara-mosaic__cell--kitchens { grid-column: auto; }
  .mikara-mosaic__veil { opacity: 1; background-color: rgba(33, 31, 28, 0.42); }
  .mikara-mosaic__label { opacity: 1; padding: 20px 34px; }
  .mikara-mosaic__title { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .mikara-mosaic__img { transition: none; }
  .mikara-mosaic__tile:hover .mikara-mosaic__img { transform: none; }
}

/* The mosaic runs full-bleed, so the heading above it keeps the page gutter
   while the tiles do not. */
.mikara-portfolio--mosaic { padding-bottom: 0; }

/*---------------------------------------
   Gallery page furniture
---------------------------------------*/
.mikara-portfolio__crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
  font-family: var(--mikara-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(45, 27, 18, 0.6);
}
.mikara-portfolio__crumbs a { color: rgba(45, 27, 18, 0.78); }
.mikara-portfolio__crumbs a:hover { color: var(--accent-ink); }
.mikara-portfolio__crumbs [aria-current="page"] { color: var(--header); }

.mikara-portfolio__more {
  margin-top: 72px;
  padding-top: 34px;
  border-top: 1px solid rgba(58, 54, 48, 0.16);
  text-align: center;
}
.mikara-portfolio__more-title {
  color: var(--header);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.mikara-portfolio__more ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mikara-portfolio__more a {
  font-family: var(--mikara-sans);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--header);
}
.mikara-portfolio__more a:hover { color: var(--accent-ink); }

/*---------------------------------------
   Home page video band
   A full-bleed looping film. It replaced a still photograph and a play button
   that opened a dialog; the dialog is gone, so its styles went with it.
---------------------------------------*/
.mikara-parallax-banner { position: relative; }
/* The band had no desktop height: it took the still photograph's aspect ratio.
   Left alone, 16:9 makes the film 1440px tall on a 2560px monitor — taller than
   the viewport, so you could never see the whole frame. Cap it and let
   object-fit crop instead. The narrower breakpoints already set their own
   heights further up this file. */
@media (min-width: 1200px) {
  .mikara-videoband .mikara-parallax-banner__media { height: min(76vh, 760px); }
}
.mikara-videoband__player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The poster is the frame the film starts on, so there is nothing to see
     behind it - but a background stops a flash of page colour on slow
     connections while the poster itself decodes. */
  background-color: var(--black);
}

/* Shade under the controls only. The film is bright and moving, and white
   control text over a moving image is unreadable without something behind it;
   confining it to a bottom band leaves the picture itself alone. */
.mikara-videoband::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 190px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 19, 17, 0) 0%, rgba(20, 19, 17, 0.62) 100%);
}

.mikara-videoband__controls {
  position: absolute;
  right: 34px;
  bottom: 30px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
}
.mikara-videoband__btn {
  display: flex;
  align-items: center;
  gap: 11px;
  /* 44px: these get tapped with a thumb. */
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(20, 19, 17, 0.42);
  color: var(--white);
  font-family: var(--mikara-sans);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.mikara-videoband__btn:hover {
  border-color: var(--gold);
  background: rgba(20, 19, 17, 0.66);
}
.mikara-videoband__btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
/* Only the sound button carries a word next to its glyph. */
.mikara-videoband__sound { padding: 0 18px; }
.mikara-videoband__icon { display: flex; font-size: 17px; }
/* One icon or the other, never both. `is-sounding` and `is-playing` are set by
   main.js from the video's own events. */
.mikara-videoband__icon--on { display: none; }
.mikara-videoband.is-sounding .mikara-videoband__icon--off { display: none; }
.mikara-videoband.is-sounding .mikara-videoband__icon--on { display: block; }
.mikara-videoband__icon--pause { display: none; }
.mikara-videoband.is-playing .mikara-videoband__icon--play { display: none; }
.mikara-videoband.is-playing .mikara-videoband__icon--pause { display: block; }

/*---------------------------------------
   Centred play button
   The square hairline frame the banner carried when it was a still photograph.
   Square rather than round because this site sets `border-radius: 0 !important`
   on every element; a circle here would need an override that fights the
   design. Visible only while the film is stopped.
---------------------------------------*/
.mikara-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
  transition: opacity 0.35s ease;
}
/* Out of the way once it is running, and out of the tab order with it — a
   button nobody can see should not be reachable by keyboard either. */
.mikara-videoband.is-playing .mikara-play {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.mikara-play__ring {
  flex: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(20, 19, 17, 0.42);
  font-size: 30px;
  /* Optical centring: a triangle's visual centre sits left of its box. */
  padding-left: 4px;
  transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}
.mikara-play__label {
  font-family: var(--mikara-sans);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.mikara-play:hover .mikara-play__ring {
  background: rgba(20, 19, 17, 0.66);
  border-color: var(--gold);
  transform: scale(1.06);
}
.mikara-play:focus-visible .mikara-play__ring {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
/* A pool of shade under the button, so a white frame over a bright, moving
   aerial stays legible. It falls to nothing well before the section edges, so
   the film itself is not visibly darkened — and it goes when the film starts. */
.mikara-videoband::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    32% 40% at 50% 50%,
    rgba(20, 19, 17, 0.55) 0%,
    rgba(20, 19, 17, 0.3) 55%,
    rgba(20, 19, 17, 0) 100%
  );
}
.mikara-videoband.is-playing::before { opacity: 0; }

@media (max-width: 767px) {
  .mikara-play__ring { width: 68px; height: 68px; font-size: 24px; }
  .mikara-play__label { font-size: 11px; letter-spacing: 0.16em; }
}
@media (prefers-reduced-motion: reduce) {
  .mikara-play,
  .mikara-play__ring,
  .mikara-videoband::before { transition: none; }
  .mikara-play:hover .mikara-play__ring { transform: none; }
}

.mikara-videoband__volume { display: flex; align-items: center; }
.mikara-videoband__volume input[type="range"] {
  width: 116px;
  height: 44px;              /* tap target; the visible track is drawn below */
  background: none;
  cursor: pointer;
  accent-color: var(--gold);
}
.mikara-videoband__volume input[type="range"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Screen-reader-only, for the volume slider's label. */
.mikara-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 991px) {
  .mikara-videoband__controls { right: 18px; bottom: 20px; gap: 12px; }
  .mikara-videoband__sound { padding: 0 14px; font-size: 11px; letter-spacing: 0.12em; }
  .mikara-videoband__volume input[type="range"] { width: 92px; }
}
@media (max-width: 575px) {
  /* The label is the first thing to go; the icon still says which state it is
     in, and the slider is worth more than the word next to it. */
  .mikara-videoband__label { display: none; }
  .mikara-videoband__sound { padding: 0 14px; }
}

/*---------------------------------------
   Rotating hero
   Three photographs crossfaded by main.js. The outgoing slide is held opaque
   underneath while the incoming one fades in on top of it — fading both at once
   would let the page background show through the middle of every transition.
---------------------------------------*/
.mikara-hero__slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Forms a stacking context, so the slides' z-indexes below stay INSIDE this
     box. Without it the active slide's z-index:2 competes with .mikara-hero__
     overlay (z-index auto) and paints on top of the scrim, leaving the hero
     text sitting on the bare photograph. */
  z-index: 0;
  isolation: isolate;
}
.mikara-hero__slides .mikara-hero__bg {
  opacity: 0;
  z-index: 0;
  transition: opacity 1.4s ease;
}
/* The incoming slide, on top. */
.mikara-hero__slides .mikara-hero__bg.is-active {
  opacity: 1;
  z-index: 2;
}
/* The outgoing slide: still fully painted, but underneath, and with no
   transition of its own so it cannot dip while the new one arrives. */
.mikara-hero__slides .mikara-hero__bg.is-leaving {
  opacity: 1;
  z-index: 1;
  transition: none;
}
/* The bathroom frame is almost entirely white marble and daylight. The shared
   scrim below was measured against the kitchen photograph and is not enough to
   hold white hero text at WCAG AA over it, so that slide carries extra shade of
   its own: composite worst-case contrast in the copy band works out ~4.8:1
   against 4.5:1 required. The other two slides are left alone. */
.mikara-hero__bg--light::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(33, 31, 28, 0.34);
}
@media (prefers-reduced-motion: reduce) {
  .mikara-hero__slides .mikara-hero__bg { transition: none; }
}

/*---------------------------------------
   Footer legibility
   The footer type was set in white at 60-86% alpha. Those pass AA on paper
   (7.4:1 for the faintest of them on black), but alpha-faded 12-14px uppercase
   text with wide tracking is thin on the screen rather than merely dim, and on
   a phone in daylight it disappears. Contrast ratio is not the whole story for
   small hairline type; these are raised close to solid.
---------------------------------------*/
.mikara-footer-nav a { color: #fff; }
.mikara-footer-contact span,
.mikara-footer-contact a { color: rgba(255, 255, 255, 0.88); }
.mikara-footer-contact > *:not(:last-child)::after { background: rgba(255, 255, 255, 0.32); }
.mikara-footer-legal a { color: rgba(255, 255, 255, 0.9); }
.mikara-partner__link { color: rgba(255, 255, 255, 0.85); }
/* Underline the footer contact details: they are the phone number and the
   email address, and they were the only links down there with nothing but
   colour to say they were links. */
.mikara-footer-contact a { text-decoration: underline; text-underline-offset: 3px; }
.mikara-footer-contact a:hover { color: #fff; }

/*---------------------------------------
   Mobile readability
   Everything below 992px. The site's display weights are 200 and its body is
   300 — at 60px on a wide screen that hairline is the whole look, but at 26px
   on a phone held at arm's length it reads as faint rather than refined. Type
   moves up one weight step, and the tracking that flatters big display type is
   eased back because it opens the letterforms up at small sizes.

   These carry !important only because the declarations they override are
   themselves !important; there is no way to win on specificity alone.
---------------------------------------*/
@media (max-width: 991px) {
  body { font-weight: 400; }

  h1,
  h2,
  .mikara-hero__title,
  .mikara-design__title,
  .mikara-legal__title,
  .mikara-section-title,
  .mikara-section-head h2,
  .mikara-invert,
  .mikara-404__title { font-weight: 300 !important; }

  h3,
  h4,
  h5,
  h6,
  .mikara-service__title,
  .mikara-project__title,
  .mikara-design__label,
  .mikara-portfolio__title { font-weight: 400 !important; }

  .mikara-hero__text,
  .mikara-hero__eyebrow,
  .mikara-design__text,
  .mikara-about__text,
  .mikara-services__intro,
  .mikara-service__text,
  .mikara-legal__content,
  .mikara-portfolio__sub,
  .mikara-project__meta { font-weight: 400; }

  /* Display tracking, eased back for small sizes. */
  .mikara-hero__title { letter-spacing: 1px; }
  .mikara-design__title { letter-spacing: 1.2px; line-height: 1.14; }
  .mikara-section-title,
  .mikara-section-head h2 { letter-spacing: 0.6px; }

  /* Small uppercase labels: less tracking, a little more size. Wide tracking
     on 12px type costs more legibility than it buys elegance on a phone. */
  .mikara-service__label,
  .mikara-project__cat,
  .mikara-gallery__caption,
  .mikara-portfolio__crumbs,
  .mikara-portfolio__more a { letter-spacing: 0.1em; }
  .mikara-gallery__caption { font-size: 13px; }

  .mikara-footer-nav { font-size: 13px; letter-spacing: 0.1em; }
  .mikara-footer-legal a,
  .mikara-partner { font-size: 13px; letter-spacing: 0.08em; }
  .mikara-footer-contact { font-size: 15px; }

  /* The bottom bar is a single justified row on desktop; stacked and centred
     it reads far better in a narrow column. */
  .mikara-footer__bottom { padding: 22px 0; }
  .mikara-footer__bottom .container {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 14px;
  }
  .mikara-footer-legal { justify-content: center; margin-top: 0; }
  .mikara-partner { margin-top: 0; }

  /* Body copy on the cream ground goes fully solid rather than 94% alpha. */
  .mikara-design__text,
  .mikara-about__text,
  .mikara-services__intro,
  .mikara-service__text,
  .mikara-legal__content { color: #2d1b12; }
  .mikara-portfolio__sub { color: #2d1b12; }
  .mikara-project__meta { color: #5c5346; }
}

/* Touch targets. Anything tapped with a thumb wants ~44px of height; several
   of these were 12-13px text with 3-4px of padding. */
@media (hover: none) {
  .mikara-footer-nav a,
  .mikara-footer-legal a,
  .mikara-footer-contact a { padding: 10px 0; }
  .mikara-portfolio__more a { padding: 8px 0; display: inline-block; }
}

/*---------------------------------------
   Estimate form: labels, consent, states
   The form mirrors the LeadConnector form's fields. It sits on the black
   footer, so everything here is light-on-dark.
---------------------------------------*/
.mikara-field__label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mikara-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* 12.6:1 on the black footer. The fields previously relied on placeholder
     text as their only label, which disappears the moment you type. */
  color: rgba(255, 255, 255, 0.82);
}
.mikara-field__label span { color: var(--gold); margin-left: 2px; }

.mikara-consent {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 4px 0 22px;
}
.mikara-consent__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}
.mikara-consent__row input[type="checkbox"] {
  /* 18px and a 3px outline offset: this is the smallest thing on the form and
     it is the one that carries the legal weight. */
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--gold);
  cursor: pointer;
}
.mikara-consent__row label {
  font-family: var(--mikara-sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.76);
  cursor: pointer;
}
.mikara-consent__row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields that are display:none but fill anything still in the layout. It is
   aria-hidden and out of the tab order in the markup, so nobody using a screen
   reader or a keyboard ever meets it. */
.mikara-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submit states. The note is role="status", so these are announced. */
.mikara-hero__form-note.success { color: #9ecb8f; }
.mikara-hero__form-note.error { color: #ffb4a2; }
.mikara-quote-form button[disabled] { opacity: 0.6; cursor: progress; }

@media (max-width: 991px) {
  .mikara-consent__row label { font-size: 13px; }
  .mikara-field__label { font-size: 12.5px; letter-spacing: 0.1em; }
}