@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Caslon Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/libre-caslon-display-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Caslon Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/libre-caslon-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  

  --navy: #102a3a;
  --deep: #0b202e;
  --cream: #f7f5f0;
  --gold: #c9b592;       

  --gold-ink: #7a6540;   

  --gold-soft: #ead8ba;
  --muted: #657177;
  --line: #d7d9d5;
  --paper: #ffffff;
  --stone: #eceee9;
  --fav-bg: #f4f0e9;

  

  --ink: #102a3a;
  --ink-soft: #657177;
  --ink-faint: #5f6a70;  

  --on-navy: #e8eff1;
  --on-navy-soft: #b8c7ce;
  --error: #a3261b;      


  

  --accent-ink: var(--gold-ink);  

  --em-ink: #7d898d;              

  --focus: var(--navy);           


  

  --title: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --display: "Manrope", "Segoe UI", Arial, sans-serif;
  --body: "DM Sans", "Segoe UI", Arial, sans-serif;

  

  --vw: min(.95vw, 13.68px);
  --maxw: 1254px;

  

  --fs-display: clamp(40px, calc(4.4 * var(--vw)) + 5.7px, 132px);
  --fs-h1: clamp(33px, calc(3.2 * var(--vw)) + 5.7px, 100px);
  --fs-h2: clamp(27px, calc(2.1 * var(--vw)) + 5.7px, 68px);
  --fs-h3: clamp(19px, calc(1 * var(--vw)) + 7.12px, 36px);
  --fs-h4: clamp(16px, calc(.5 * var(--vw)) + 10.45px, 24px);
  --fs-lead: clamp(17px, calc(.6 * var(--vw)) + 11.02px, 28px);
  --fs-body: clamp(16px, calc(.42 * var(--vw)) + 11.69px, 24px);
  --fs-small: clamp(14px, calc(.34 * var(--vw)) + 9.5px, 22px);

  

  --serif-opt: 1.12;
  --fs-serif-display: calc(var(--fs-display) * var(--serif-opt)); 

  --fs-serif-home: calc(clamp(34px, calc(3.35 * var(--vw)) + 5.7px, 108px) * var(--serif-opt)); 

  --fs-serif-h1: calc(var(--fs-h1) * var(--serif-opt));  

  --fs-serif-h2: calc(var(--fs-h2) * var(--serif-opt));  

  --fs-serif-h3: calc(var(--fs-h3) * var(--serif-opt));  


  

  --fs-base: var(--fs-body);    

  --fs-copy: var(--fs-body);    

  --fs-ui: var(--fs-small);     

  --fs-label: clamp(11.5px, calc(.36 * var(--vw)) + 8.07px, 20px);  

  --fs-xs: var(--fs-small);     


  

  --sec: clamp(72px, calc(7.2 * var(--vw)), 210px);
  --sec-tight: calc(var(--sec) * .6);
  --pad-section: var(--sec);

  

  --header-h: clamp(66px, calc(4.8 * var(--vw)), 116px);

  

  --hero-h: clamp(508.5px, calc(38.84 * var(--vw)), 869px);

  

  --gutter: clamp(18px, calc(4.6 * var(--vw)), 150px);
  

  --band-pad: max(var(--gutter), (100% - var(--maxw)) / 2);

  

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.18s var(--ease);
  --t-base: 0.32s var(--ease);
}


@media (max-width: 480px) {
  :root {
    --sec: 60px;
  }
}


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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: var(--fs-base) / 1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol {
  margin: 0;
}

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

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

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

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


:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}


.skip-link,
.site-header,
.site-footer,
.hero,
.fav-hero,
.section--navy,
.values,
.approach,
.cta,
.fav-card-band {
  --accent-ink: var(--gold);
  --em-ink: #879497;
  --focus: var(--gold);
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--gold);
  color: var(--navy);
  font: 500 11px/1 var(--display);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.skip-link:focus {
  top: 12px;
}


.wrap {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}


.wrap:is(.contact, .fav-editorial) {
  width: 100%;
  padding-inline: var(--band-pad);
}

.section {
  padding-block: var(--pad-section);
}

.section--tight {
  padding-block: var(--sec-tight);
}

.section--paper {
  background: var(--paper);
}


.section--paper + .section--paper {
  padding-top: 0;
}


.section:not(.section--paper, .section--navy) + .section:not(.section--paper, .section--navy) {
  padding-top: 0;
}

.section--navy {
  background: var(--navy);
  color: var(--on-navy);
}


.eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
  font: 500 var(--fs-label) / 1.6 var(--display);
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: clamp(20.5px, calc(1.55 * var(--vw)), 34px);
  height: 1px;
  background: var(--gold);
}

.title {
  max-width: 16ch;
  font: 400 var(--fs-serif-h2) / 1.06 var(--title);
  letter-spacing: -1.2px;
}

.title em {
  font-style: normal;
  color: var(--em-ink);
}


.title--sm {
  font-size: calc(var(--fs-serif-h2) * 0.8);
}

.split .title--sm {
  font-size: var(--fs-serif-h2);
}


h1.title {
  font-size: var(--fs-serif-h1);
}

.section--navy .title,
.section--navy .title em {
  color: #f1eee6;
}

.lead {
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  line-height: 1.95;
}

.section--navy .lead {
  color: #c3ced4;
}

.prose p {
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: var(--fs-copy);
  line-height: 1.95;
}

.prose p + p {
  margin-top: 16px;
}

.note {
  color: var(--ink-faint);
  font-size: var(--fs-small);
  line-height: 1.7;
}


[data-todo] {
  color: var(--ink-faint);
  font-style: italic;
}


main p a:not([class]),
.legal a:not([class]) {
  --gold: var(--gold-ink);
  border-bottom: 1px solid var(--gold);
}

main p a:not([class]):hover,
.legal a:not([class]):hover {
  color: var(--gold-ink);
}


:is(.hero, .fav-hero, .section--navy, .values, .approach, .cta, .fav-card-band) p a:not([class]) {
  --gold: inherit;
}

:is(.hero, .fav-hero, .section--navy, .values, .approach, .cta, .fav-card-band) p a:not([class]):hover {
  color: inherit;
}


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 23px;
  min-height: 44px;
  padding: 6px 7px 6px clamp(16px, calc(1.4 * var(--vw)), 34px);
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #0c2638;
  font: 500 var(--fs-ui) / 1 var(--body);
  transition: background var(--t-fast);
}

.btn__arrow {
  display: grid;
  place-items: center;
  width: clamp(28px, calc(2.2 * var(--vw)), 48px);
  height: clamp(28px, calc(2.2 * var(--vw)), 48px);
  background: var(--navy);
  color: #fff;
  font-size: clamp(15px, calc(1.21 * var(--vw)), 23px);
  font-weight: 400;
  transition: transform var(--t-fast);
}

.btn:hover {
  background: var(--gold-soft);
}

.btn:hover .btn__arrow {
  transform: translateX(3px); 

}

.quiet-link {
  display: inline-flex;
  align-items: center;
  gap: 21px;
  min-height: 44px;
  padding: 8px 0;
  border-bottom: 1px solid #c8d0d0;
  font-size: var(--fs-ui);
  transition: gap var(--t-fast), border-color var(--t-fast);
}

.quiet-link:hover {
  gap: 27px;
  border-color: var(--gold);
}

.section--navy .quiet-link,
.hero .quiet-link {
  border-color: #bba882;
  color: #e8d9bd;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: 31px;
}



.site-header {
  position: relative;
  z-index: 5;
  background: var(--navy);
  color: #fff;
}


.lang {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-left: 24px;
  border-left: 1px solid #ffffff26;
  font-size: var(--fs-label);
  letter-spacing: 1.2px;
}

.lang a {
  padding: 4px 2px;
  color: #93a7b1;
  transition: color var(--t-fast);
}

.lang a:hover {
  color: #fff;
}

.lang a[aria-current="true"] {
  color: var(--gold);
}

.lang span {
  color: #48606d;
}

.nav-row {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: var(--header-h);
  padding-block: 8px;
  transition: padding var(--t-base);
}


.logo {
  font: 800 clamp(32px, calc(2.46 * var(--vw)), 56px) / 0.88 var(--display);
  letter-spacing: -2px;
  transition: font-size var(--t-base);
}

.logo {
  flex-shrink: 0;
}

.logo small {
  display: block;
  white-space: nowrap;
  margin-top: 10px;
  font: 500 clamp(11px, calc(0.57 * var(--vw)), 12px) / 1.2 var(--display);
  letter-spacing: 2.1px;
}

.logo-fav {
  font: 400 clamp(20px, calc(1.55 * var(--vw)), 38px) / 1 var(--display);
  letter-spacing: -0.6px;
}

.logo-fav small {
  display: block;
  margin-top: 8px;
  font: 500 clamp(8.5px, calc(.62 * var(--vw)), 13px) / 1.3 var(--body);
  letter-spacing: 3px;
}

.logo-fav b {
  font-weight: 700;
}

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  font-size: var(--fs-ui);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 23px;
}

.nav__links a {
  padding-block: 10px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast);
}

.nav__links a:hover,
.nav__links a[aria-current="page"] {
  border-color: var(--gold);
}

.brand-route {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-height: 44px;
  padding: 11px 15px;
  border: 1px solid #a3b6c168;
  white-space: nowrap;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.brand-route span {
  font-size: clamp(15.5px, calc(1.21 * var(--vw)), 23px);
  color: var(--gold);
}

.brand-route:hover {
  border-color: var(--gold);
  background: #ffffff0d;
}


.nav__item--sub {
  --sub-gap: clamp(8px, calc(0.65 * var(--vw)), 15px);  

  --sub-pad: clamp(13px, calc(0.99 * var(--vw)), 23px);  

  position: relative;
}

.nav__sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  cursor: pointer;
  transition: border-color var(--t-fast);
}


.nav__sub-toggle::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  margin-top: -0.25em;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg);
  transition: transform var(--t-fast), margin var(--t-fast);
}

.nav__sub-toggle[aria-expanded="true"]::after,
.nav__item--sub:not(.is-enhanced):is(:hover, :focus-within) > .nav__sub-toggle::after {
  margin-top: 0.3em;
  transform: rotate(-135deg);
}


.nav__sub-toggle:hover,
.nav__sub-toggle.is-current {
  border-color: var(--gold);
}

.nav__sub {
  position: absolute;
  top: calc(100% + var(--sub-gap));
  left: calc(-1 * var(--sub-pad));
  z-index: 10;
  min-width: clamp(205px, calc(14.67 * var(--vw)), 328px);
  padding-block: clamp(5px, calc(0.39 * var(--vw)), 10px);
  border: 1px solid #ffffff1f;
  border-top: 2px solid var(--gold);
  background: var(--deep);
  box-shadow: 0 18px 40px #04101a66;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s linear 0.18s;
}


.nav__sub::before {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 100%;
  left: -1px;
  height: calc(var(--sub-gap) + 2px);
}

.nav__item--sub:hover > .nav__sub,
.nav__item--sub.is-open > .nav__sub,
.nav__item--sub:not(.is-enhanced):focus-within > .nav__sub,
.nav__sub:focus-within {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.nav__item--sub.is-dismissed > .nav__sub {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
}

.nav__links .nav__sub a {
  display: block;
  padding: clamp(8px, calc(0.6 * var(--vw)), 13px) var(--sub-pad);
  border: 0;
  font-size: var(--fs-ui);
  line-height: 1.3;
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}

.nav__links .nav__sub a small {
  display: block;
  margin-top: 4px;
  color: var(--on-navy-soft);
  font-size: var(--fs-xs);
  letter-spacing: 0.2px;
}

.nav__links .nav__sub a[aria-current="page"] {
  color: var(--gold);
}

.nav__links .nav__sub a:hover,
.nav__links .nav__sub a:focus-visible {
  color: var(--gold);
  background: #ffffff0d;
}

.nav__links .nav__sub a:focus-visible {
  outline-offset: -3px;
}

@media (max-width: 1100px) {
  .nav__sub-toggle {
    font-size: var(--fs-label);
  }
}


.nav-toggle {
  display: none;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #a3b6c168;
  background: transparent;
  font-size: var(--fs-ui);
  letter-spacing: 1px;
  cursor: pointer;
}

.nav-toggle__bars {
  display: grid;
  gap: 4px;
  width: 16px;
}

.nav-toggle__bars i {
  display: block;
  height: 1px;
  background: var(--gold);
  transition: transform var(--t-fast), opacity var(--t-fast);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.mobile-nav {
  display: none;
  border-top: 1px solid #ffffff20;
  background: var(--deep);
}

.mobile-nav.is-open {
  display: block;
}

.mobile-nav ul {
  padding-block: 8px 18px;
}

.mobile-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #ffffff14;
  font-size: 16px;
}

.mobile-nav a::after {
  content: "→";
  content: "→" / ""; 

  color: var(--gold);
  font-size: 14px;
}

.mobile-nav a[aria-current="page"] {
  color: var(--gold);
}


.mobile-nav__label {
  display: block;
  padding: 16px 0 4px;
  color: var(--on-navy-soft);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.mobile-nav .mobile-nav__sub {
  padding: 0 0 0 16px;
  border-left: 1px solid #c9b59259;
}


.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--hero-h);
  color: #fff;
  background-color: var(--navy);
  background-position: center 55%;
  background-size: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 60% 0 0;
  background: linear-gradient(transparent, #081b2cb0);
  pointer-events: none;
}

.hero__copy {
  position: relative;
  z-index: 1;
  width: 59%;
  padding-block: clamp(49px, calc(3.63 * var(--vw)), 82px) clamp(78px, calc(5.7 * var(--vw)), 131px);
}

.hero .eyebrow {
  color: #e2ded4;
  font-size: var(--fs-label);
  letter-spacing: 2px;
}

.hero h1 {
  margin-bottom: 28px;
  font: 500 clamp(37.5px, calc(5.09 * var(--vw)), 117px) / 1.04 var(--display);
  letter-spacing: -3.5px;
}

.hero h1 em {
  display: block;
  margin-top: 5px;
  color: #eee2ce;
  font: 400 clamp(50px, calc(6.82 * var(--vw)), 157px) / 0.98 var(--title);
  letter-spacing: -2px;
}

.hero__copy > p:not(.eyebrow) {
  max-width: 40ch;
  color: #e0e5e7;
  font-size: var(--fs-copy);
  line-height: 1.8;
}

.hero__base {
  position: absolute;
  right: var(--band-pad);
  bottom: clamp(19.5px, calc(1.47 * var(--vw)), 33px);
  left: var(--band-pad);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #e1e6e9;
  font-size: var(--fs-label);
  letter-spacing: 1.6px;
}

.hero__base > span:first-child {
  display: flex;
  align-items: center;
  gap: 18px;
}

.hero__base > span:first-child::before {
  content: "";
  width: 1px;
  height: clamp(26px, calc(1.99 * var(--vw)), 41px);
  background: #d3dcd6;
}

.hero__base > span:last-child {
  color: #c1ced3;
  font-size: var(--fs-label);
  letter-spacing: 0.9px;
}

.hero--home {
  background-image: linear-gradient(90deg, #0c2139ad, #0e273546 45%, #12283800 75%),
    url("../img/hero-tedarik.jpg");
}


.hero--page {
  align-items: end;
  background-image: linear-gradient(90deg, #0c2139b8, #0e27354d 45%, #12283800 72%),
    url("../img/hero-tedarik.jpg");
}

.hero--page .hero__copy {
  width: 72%;
  padding-block: clamp(51px, calc(3.8 * var(--vw)), 86px) clamp(39.5px, calc(2.93 * var(--vw)), 67px);
}

.hero--page h1 {
  max-width: 16ch;
  margin-bottom: 18px;
  font: 400 clamp(32px, calc(3.41 * var(--vw)), 80px) / 1.06 var(--title);
  letter-spacing: -1.2px;
}

.hero--page .hero__copy > p:not(.eyebrow) {
  max-width: 46ch;
  font-size: var(--fs-copy);
}


@media (max-width: 820px) {
  .hero--page {
    background-image: linear-gradient(90deg, #0c2139eb, #0e2735c4 60%, #12283880),
      url("../img/hero-tedarik.jpg");
  }
}

.hero--services {
  background-image: linear-gradient(90deg, #0c2139b8, #0e27354d 45%, #12283800 72%),
    url("../img/kurumsal-giyim.jpg");
  background-position: center 45%;
}


.hero--process {
  background-image: linear-gradient(90deg, #0c2139e0, #0e27358a 48%, #12283814 78%),
    url("../img/koruyucu-kiyafet.jpg");
  background-position: center 50%;
}

@media (max-width: 820px) {
  .hero--process {
    background-image: linear-gradient(90deg, #0c2139eb, #0e2735c4 60%, #12283880),
      url("../img/koruyucu-kiyafet.jpg");
  }
}


.hero--wallet {
  background-image: linear-gradient(90deg, #0c2139e0, #0e27358a 48%, #12283814 78%),
    url("../img/favyoflex-yasam.jpg");
  background-position: center 40%;
}


@media (max-width: 820px) {
  .hero--wallet {
    background-image: linear-gradient(90deg, #0c2139eb, #0e2735c4 60%, #12283880),
      url("../img/favyoflex-yasam.jpg");
  }
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  color: #c4d1d7;
  font-size: var(--fs-label);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.crumbs ol {
  display: contents;
}

.crumbs a:hover {
  color: var(--accent-ink);
}

.crumbs li:not(:last-child)::after {
  content: " ·";
  content: " ·" / "";
  margin-left: 8px;
  color: #6b8494;
}


.section .crumbs {
  color: var(--ink-faint);
}


.rail {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.rail__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.rail a {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 25px 22px 25px 0;
  border-right: 1px solid var(--line);
  font-size: var(--fs-copy);
  line-height: 1.5;
  transition: background var(--t-fast);
}

.rail a:not(:first-child) {
  padding-left: 27px;
}

.rail a:last-child {
  border-right: 0;
}

.rail a:hover {
  background: #faf9f6;
}

.rail__no {
  color: var(--accent-ink);
  font-size: var(--fs-copy);
}

.rail strong {
  font-weight: 500;
}

.rail small {
  display: block;
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: var(--fs-label);
}

.rail__go {
  margin-left: auto;
  color: #637b8c;
  font-size: clamp(16.5px, calc(1.29 * var(--vw)), 26px);
  transition: transform var(--t-fast);
}

.rail a:hover .rail__go {
  transform: translate(2px, -2px);
}


.split {
  display: grid;
  grid-template-columns: minmax(14ch, 0.7fr) 1.6fr;
  gap: 60px;
}

.split__side {
  padding-top: 8px;
}

.split__side .eyebrow {
  font-size: var(--fs-label);
  letter-spacing: 1.3px;
}

.split__side > p:not(.eyebrow) {
  max-width: 20ch;
  color: var(--ink-soft);
  font-size: var(--fs-ui);
}

.about-lower {
  display: grid;
  grid-template-columns: 1.3fr 0.75fr;
  gap: 38px;
  align-items: end;
  margin-top: 27px;
}

.about-lower > p:not(.seal) {
  color: var(--ink-soft);
  font-size: var(--fs-copy);
  line-height: 1.95;
}

.seal {
  padding-left: 24px;
  border-left: 1px solid #cacdc7;
  font-size: var(--fs-ui);
  line-height: 1.8;
}

.seal strong {
  display: block;
  margin-bottom: 7px;
  font-size: clamp(15.5px, calc(1.19 * var(--vw)), 25px);
  font-weight: 500;
}

.seal span {
  display: block;
  margin-top: 6px;
  color: var(--ink-faint);
  font-size: var(--fs-label);
  letter-spacing: 1px;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 30px;
}

.section-head > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.section-head > p {
  flex: 0 1 auto;
}

.section-head .eyebrow {
  margin-bottom: 12px;
}

.section-head > p {
  max-width: 26ch;
  color: var(--muted);
  font-size: var(--fs-lead);
}


.service-grid {
  display: grid;
  grid-template-columns: 1.17fr 1fr;
  gap: 25px;
  align-items: start;
}

.service-grid > :nth-child(2) {
  margin-top: 56px;
}

.service-grid--even > :nth-child(2) {
  margin-top: 0;
}

.service-picture {
  position: relative;
  height: clamp(315.5px, calc(24.6 * var(--vw)), 541px);
  overflow: hidden;
  background-position: center;
  background-size: cover;
}

.service-picture::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(transparent, #0d243aa1);
}

.pic-clothing {
  background-image: url("../img/kurumsal-giyim.jpg");
  background-position: 77% center;
}

.pic-work {
  background-image: url("../img/koruyucu-kiyafet.jpg");
  background-position: 51% center;
}


.pic-wallet {
  background-image: url("../img/favyoflex-yasam.jpg");
  background-position: 68% center;
}

.picture-label {
  position: absolute;
  top: 21px;
  left: 21px;
  z-index: 1;
  padding: 6px 10px;
  background: #f7f5f0e8;
  color: #173040;
  font-size: var(--fs-label);
  letter-spacing: 1px;
}

.picture-bottom {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
}

.picture-bottom h3 {
  font: 400 clamp(28px, calc(2.16 * var(--vw)), 48px) / 1.12 var(--title);
}

.picture-bottom span {
  color: #e5d5bd;
  font: 400 clamp(40px, calc(3.11 * var(--vw)), 71px) / 1 var(--title);
}

.service-body {
  padding-top: 22px;
}

.service-body > p {
  max-width: 42ch;
  color: var(--ink-soft);
  font-size: var(--fs-copy);
  line-height: 1.9;
}

.service-body.prose p {
  max-width: 480px;
}


.detail {
  margin-top: 18px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.detail summary,
.process__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 36px;
  font-size: var(--fs-ui);
  font-weight: 500;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

.detail summary::after,
.process__item summary::after {
  content: "+";
  content: "+" / ""; 

  font-size: clamp(17px, calc(1.38 * var(--vw)), 28px);
  font-weight: 400;
}

details[open] > summary::after {
  content: "−";
  content: "−" / "";
}

.detail p {
  padding: 12px 0 5px;
  color: var(--ink-soft);
  font-size: var(--fs-copy);
  line-height: 1.8;
}


.approach {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  min-height: clamp(541px, calc(40.57 * var(--vw)), 918px);
  background: var(--navy);
  color: #fff;
}

.approach__photo {
  position: relative;
  min-height: clamp(525px, calc(39.71 * var(--vw)), 902px);
  background: url("../img/hero-tedarik.jpg") 86% center / cover;
}

.approach__photo::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, #0b223ac2);
}

.approach__photo--work {
  background-image: url("../img/koruyucu-kiyafet.jpg");
  background-position: 55% center;
}

.photo-statement {
  position: absolute;
  right: 10%;
  bottom: 38px;
  left: 11%;
  z-index: 1;
  color: #fff;
  font: 400 clamp(23px, calc(2.55 * var(--vw)), 56px) / 1.1 var(--title);
}

.photo-statement span {
  display: block;
  margin-top: 15px;
  color: #e1d3bc;
  font: 400 var(--fs-label) / 1.7 var(--body);
  letter-spacing: 1.8px;
}

.approach__copy {
  padding: clamp(46px, calc(3.45 * var(--vw)), 79px) clamp(32px, 7%, 170px);
}

.approach__copy .eyebrow {
  color: #c7d4d8;
  font-size: var(--fs-label);
  letter-spacing: 1.3px;
}

.approach__copy .title {
  margin-bottom: 27px;
  color: #f1eee6;
  font-size: clamp(28px, calc(2.93 * var(--vw)), 69px);
}

.process__item {
  padding-block: 13px;
  border-top: 1px solid #ffffff28;
}

.process__item summary {
  justify-content: flex-start;
  gap: 0;
  font-size: var(--fs-base);
  font-weight: 400;
}

.process__item summary::after {
  margin-left: auto;
  padding-left: 16px;
}

.process__item summary span {
  margin-right: 10px;
  color: var(--accent-ink);
  font-size: var(--fs-label);
}

.process__item p {
  padding: 12px 0 4px 29px;
  color: #c3ced4;
  font-size: var(--fs-body);
  line-height: 1.9;
}


.section:not(.section--navy) .process__item {
  border-top-color: var(--line);
}

.section:not(.section--navy) .process__item p {
  color: var(--ink-soft);
}

.approach__copy .quiet-link {
  margin-top: 15px;
}


.brand-note {
  border-bottom: 1px solid var(--line);
  background: var(--stone);
}

.brand-note__inner {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) 1.3fr auto;
  gap: 28px;
  align-items: center;
  padding-block: 29px;
}

.brand-note .logo-fav {
  font-size: clamp(20.5px, calc(1.55 * var(--vw)), 33px);
}

.brand-note__inner > p:not(.logo-fav) {
  max-width: 60ch;
  color: #5d6d76;
  font-size: var(--fs-copy);
  line-height: 1.8;
}

.brand-note .quiet-link {
  border-color: #99a8aa;
  color: inherit;
}


.cards {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.cards--3 {
  grid-template-columns: repeat(3, 1fr);
}

.cards--4 {
  grid-template-columns: repeat(4, 1fr);
}

.card {
  padding: clamp(24.5px, calc(1.9 * var(--vw)), 39px) clamp(23px, calc(1.73 * var(--vw)), 36px) clamp(28px, calc(2.07 * var(--vw)), 43px);
  background: var(--paper);
  transition: background var(--t-fast);
}

.card:hover {
  background: #fbfaf7;
}

.card__no {
  display: block;
  margin-bottom: 16px;
  color: var(--accent-ink);
  font: 400 clamp(27px, calc(2.07 * var(--vw)), 45px) / 1 var(--title);
}

.card h3 {
  margin-bottom: 10px;
  font: 500 var(--fs-h3) / 1.4 var(--display);
  letter-spacing: -0.2px;
}

.card p {
  color: var(--ink-soft);
  font-size: var(--fs-copy);
  line-height: 1.85;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.tags li {
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: var(--fs-ui);
}

.section--navy .tags li,
.fav-card-section .tags li {
  border-color: #ffffff2e;
  background: transparent;
  color: #d7e0e4;
}


.tags li.is-soon {
  border-style: dashed;
  color: var(--ink-soft);
}

.tags li.is-soon small {
  margin-left: 6px;
  color: var(--gold-ink);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section--navy .tags li.is-soon,
.fav-card-section .tags li.is-soon {
  color: var(--on-navy-soft);
}

.section--navy .tags li.is-soon small,
.fav-card-section .tags li.is-soon small {
  color: var(--gold);
}


.card__flag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card__flag--active {
  border-color: var(--gold);
  color: var(--gold-ink);
}

.checklist li {
  position: relative;
  padding: 11px 0 11px 28px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--fs-copy);
  line-height: 1.7;
}

.checklist li::before {
  content: "—";
  content: "—" / "";
  position: absolute;
  left: 0;
  color: var(--gold);
}

.section--navy .checklist li {
  border-color: #ffffff20;
  color: #c3ced4;
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 34px;
  background: var(--line);
  border: 1px solid var(--line);
}

.facts div {
  padding: 24px 22px;
  background: var(--paper);
}

.facts dt {
  margin-bottom: 8px;
  color: var(--ink-faint);
  font-size: var(--fs-label);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.facts dd {
  margin: 0;
  font: 400 clamp(22px, calc(1.73 * var(--vw)), 38px) / 1.2 var(--title);
}


.contact {
  display: grid;
  

  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, calc(4.2 * var(--vw)), 70px);
  padding-block: var(--sec);
  background: var(--paper);
}

.contact__intro > p:not(.eyebrow):not(.contact-small) {
  max-width: 36ch;
  margin-top: 24px;
  color: var(--ink-soft);
  font-size: var(--fs-copy);
  line-height: 1.9;
}

.contact-small {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--fs-ui);
}

.contact-small b {
  display: block;
  margin-bottom: 4px;
  color: #162e3d;
  font-weight: 500;
}

.inquiry {
  padding: clamp(22px, calc(2.6 * var(--vw)), 64px);
  border: 1px solid #ced5d6;
  background: #f7f8f5;
}



.inquiry__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 17px;
  font-size: var(--fs-h3);
  font-weight: 500;
}

.inquiry__title span {
  color: var(--ink-faint);
  font-size: var(--fs-small);
  font-weight: 400;
}


.form-required-note {
  margin: -8px 0 16px;
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  line-height: 1.6;
}


.hp-field {
  position: absolute;
  top: auto;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 17px;
}


.fields > label,
.choice-set > legend {
  display: block;
  color: #50646f;
  font-size: var(--fs-small);
}

.fields .full {
  grid-column: 1 / -1;
}


.choice-set {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-set > legend {
  padding: 0;
}


:is(.fields, .inquiry) :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  width: 100%;
  min-height: clamp(46px, calc(3.2 * var(--vw)), 64px);
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid #a6b5bc;
  border-radius: 0;
  background: transparent;
  color: #19384b;
  font-size: var(--fs-copy);
  resize: vertical;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}


:is(.fields, .inquiry) :where(input:not([type="checkbox"], [type="radio"]), select, textarea):focus {
  border-bottom-color: var(--navy);
  box-shadow: 0 1px 0 var(--navy);
}


:is(.fields, .inquiry) :where(input:not([type="checkbox"], [type="radio"]), select, textarea)[aria-invalid="true"] {
  border-bottom-color: var(--error);
  box-shadow: 0 1px 0 var(--error);
}


:is(.fields, .inquiry) select {
  min-height: max(clamp(46px, calc(3.2 * var(--vw)), 64px), calc(1.65em + 19px));
}

:is(.fields, .inquiry) textarea {
  min-height: 63px;
}


.field-file {
  cursor: pointer;
}

:is(.fields, .inquiry) input[type="file"] {
  padding-block: 10px;
  color: var(--ink-soft);
  font-size: var(--fs-ui);
  cursor: pointer;
}

:is(.fields, .inquiry) input[type="file"]::file-selector-button {
  margin-right: 16px;
  padding: 9px 16px;
  border: 1px solid var(--navy);
  border-radius: 0;
  background: var(--navy);
  color: #fff;
  font: 500 var(--fs-label) / 1.2 var(--body);
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

:is(.fields, .inquiry) input[type="file"]:hover::file-selector-button {
  border-color: var(--deep);
  background: var(--deep);
}


.field-note {
  display: block;
  margin-top: 8px;
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.fields > .field-note {
  margin-top: -6px;
}


.field-error {
  display: block;
  margin-top: 6px;
  color: var(--error);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.5;
}

.inquiry details {
  margin-top: 17px;
  padding: 9px 13px;
  border: 1px solid #b9c6c9;
}

.inquiry details p {
  padding-top: 10px;
  color: #61747e;
  font-size: var(--fs-ui);
}

.form-help {
  margin-top: 16px;
  color: var(--ink-faint);
  font-size: calc(var(--fs-small) * 0.92);
}

.form-status {
  margin-top: 14px;
  padding: 11px 14px;
  border-left: 2px solid var(--gold);
  background: #f2efe7;
  font-size: var(--fs-ui);
  line-height: 1.7;
}


.form-status:empty,
.form-status[hidden] {
  display: none;
}

.form-status.is-error {
  border-left-color: var(--error);
  background: #f9eeec;
  color: var(--error);
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.contact-cards div {
  padding: 26px 24px;
  background: var(--paper);
}

.contact-cards dt {
  margin-bottom: 9px;
  color: var(--ink-faint);
  font-size: var(--fs-label);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.contact-cards dd {
  margin: 0;
  font-size: var(--fs-copy);
  line-height: 1.7;
}


.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 44px 48px;
  background: var(--navy);
  color: #fff;
}

.cta .title,
.cta .title em {
  color: #f1eee6;
}

.cta p {
  max-width: 44ch;
  margin-top: 12px;
  color: #c3ced4;
  font-size: var(--fs-copy);
  line-height: 1.85;
}


.site-footer {
  padding-block: 45px 23px;
  background: var(--deep);
  color: var(--on-navy);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 0.8fr 1fr;
  gap: 35px;
}

.footer-brand > p + p {
  max-width: 22ch;
  margin-top: 23px;
  color: #a8bac4;
  font-size: var(--fs-copy);
}

.footer-col strong {
  display: block;
  margin-bottom: 16px;
  color: #d9c7a9;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 1.4px;
}

.footer-col a,
.footer-col li {
  display: block;
  min-height: 27px;
  padding: 4px 0;
  color: var(--on-navy-soft);
  font-size: var(--fs-ui);
}

.footer-col a:hover {
  color: var(--gold);
}

.footer-base {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 35px;
  padding-top: 18px;
  border-top: 1px solid #ffffff20;
  color: #9eafb8;
  font-size: var(--fs-ui); 

}


.footer-legal {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}

.footer-legal a {
  margin-block: -3px; 

  padding-block: 3px;
  color: inherit;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}

.footer-legal a:hover {
  color: var(--on-navy);
  text-decoration: underline;
}


.concept-note {
  padding-block: 12px;
  background: #e9eceb;
  color: #536a75;
  font-size: calc(var(--fs-ui) * .9); 

  line-height: 1.7;

  

  --accent-ink: var(--gold-ink);
  --em-ink: #7d898d;
  --focus: var(--navy);
}


.site-footer > .concept-note {
  margin-top: 23px;
  margin-bottom: -23px;
}


.fav {
  background: var(--fav-bg);

  

  --ink-soft: #5e6a70;
  --muted: #5e6a70;
}


.fav-hero {
  position: relative;
  min-height: var(--hero-h);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(90deg, #0b2036ef, #0a223794 42%, #0d293126 77%),
    url("../img/favyoflex-yasam.jpg") 70% center / cover;
}

.fav-hero__copy {
  position: relative;
  z-index: 1;
  

  padding-right: calc(39% - var(--band-pad));
  padding-block: clamp(54px, calc(3.97 * var(--vw)), 90px) clamp(94.5px, calc(6.91 * var(--vw)), 156px);
}

.fav-hero .eyebrow {
  color: #e0d4bf;
}

.fav-hero h1 {
  margin-bottom: 27px;
  font: 400 clamp(39.5px, calc(5.27 * var(--vw)), 119px) / 0.98 var(--title);
  letter-spacing: -1.9px;
}

.fav-hero h1 em {
  color: #d9c5a5;
  font-style: normal;
}

.fav-hero__copy > p:not(.eyebrow) {
  max-width: 34ch;
  color: #e0e6e8;
  font-size: var(--fs-copy);
  line-height: 1.9;
}

.card-art {
  aspect-ratio: 1000 / 630;
  border-radius: 12px;
  background: url("../img/favyoflex-card.png") center / contain no-repeat;
  filter: drop-shadow(0 19px 23px #0004);
}


.fav-hero__float {
  position: absolute;
  right: 5%;
  bottom: calc(clamp(19.5px, calc(1.47 * var(--vw)), 33px) + var(--fs-label) * 1.65 + 12px + 1.81 * var(--vw));
  width: 30%;
  transform: rotate(8deg);
}

.fav-hero .hero__base > span:first-child::before {
  display: none;
}

.fav-strip {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 23px;
  border-bottom: 1px solid #d1d4ce;
  font-size: var(--fs-ui);
}

.fav-strip a {
  display: flex;
  gap: 25px;
  transition: gap var(--t-fast);
}

.fav-strip a:hover {
  gap: 31px;
}

.fav-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding-block: var(--sec);
}

.fav-portrait {
  min-height: clamp(356.5px, calc(27.62 * var(--vw)), 623px);
  border-radius: 190px 190px 0 0;
  background: url("../img/favyoflex-yasam.jpg") 70% center / cover;
}

.fav-editorial p:not(.eyebrow):not(.fav-feature) {
  max-width: 52ch;
  margin-top: 22px;
  color: var(--ink-faint);
  font-size: var(--fs-copy);
}

.fav-feature {
  padding-block: 14px;
  border-bottom: 1px solid #c8cec9;
  font-size: var(--fs-ui);
}

.fav-feature:first-of-type {
  margin-top: 20px;
}

.fav-card-band {
  background: var(--navy);
}

.fav-card-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  align-items: center;
  padding-block: 65px;
  color: #fff;
}

.fav-card-section .card-art {
  transform: rotate(-7deg);
}

.fav-card-section .title,
.fav-card-section .title em {
  color: #f1eee6;
  font-size: clamp(29.5px, calc(3.11 * var(--vw)), 72px);
}

.fav-card-section .eyebrow {
  color: #cbb99a;
}

.fav-card-section p:not(.eyebrow) {
  max-width: 48ch;
  margin-top: 24px;
  color: #c5d2d9;
  font-size: var(--fs-copy);
}

.fav-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-block: 50px;
  padding: 32px;
  border: 1px solid #c6c8be;
}

.fav-contact .title {
  font-size: clamp(22px, calc(1.99 * var(--vw)), 28px);
}

.fav-contact p {
  margin-top: 12px;
  color: var(--ink-faint);
  font-size: var(--fs-copy);
}

.fav-inquiry {
  margin-bottom: 50px;
  padding: 20px 26px;
  border: 1px solid #d5d7cf;
  background: #fff;
}

.fav-inquiry > p:not([class]) {
  margin-block: 15px;
  color: var(--ink-soft);
  font-size: var(--fs-ui);
}

.fav-inquiry .fields {
  margin-bottom: 18px;
}


.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);

  

  animation: reveal-yedek 0.5s var(--ease) 3s forwards;
}

.js-reveal .reveal,
.reveal.is-visible {
  animation: none;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@keyframes reveal-yedek {
  to {
    opacity: 1;
    transform: none;
  }
}


@media (max-width: 1100px) {
  .nav {
    gap: 17px;
  }

  .nav__links {
    gap: 16px;
  }

  .nav-row {
    gap: 20px;
  }

  .logo {
    font-size: 32px;
  }

  .hero__copy {
    width: 62%;
  }

  .split {
    grid-template-columns: minmax(140px, 0.65fr) 1.5fr;
    gap: 35px;
  }

  .approach__copy {
    padding: 45px 6%;
  }

  

  .contact {
    grid-template-columns: minmax(0, 0.85fr) minmax(min(100%, 420px), 1.15fr);
    gap: 38px;
  }

  .cards--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .inquiry {
    padding: 22px;
  }
}


@media (min-width: 821px) and (max-width: 1100px) {
  .contact__intro .steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  :root {
    --hero-h: 555px;
  }

  .nav__links,
  .nav .brand-route {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-row {
    padding-block: 8px;
  }

  .hero {
    background-position: 60% center;
  }

  .hero__copy {
    width: 70%;
    padding-top: 45px;
  }

  .hero--page .hero__copy {
    width: 100%;
  }

  

  .hero--home .hero__copy {
    padding-block: 32px 86px;
  }

  .rail__inner {
    grid-template-columns: 1fr;
  }

  .rail a,
  .rail a:not(:first-child) {
    gap: 20px;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid #e0e3df;
  }

  .rail a:last-child {
    border-bottom: 0;
  }

  

  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .split__side > p:not(.eyebrow) {
    display: none;
  }

  .split__side .eyebrow {
    margin-bottom: 0;
  }

  .service-picture {
    height: 310px;
  }

  .approach {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .approach__photo {
    min-height: 330px;
    background-position: 84% 58%;
  }

  .approach__copy {
    padding: 35px 5% 43px;
  }

  .brand-note__inner {
    grid-template-columns: 1fr 1.7fr;
  }

  .brand-note .quiet-link {
    grid-column: 2;
    width: max-content;
  }

  .contact {
    grid-template-columns: minmax(0, 1fr); 

    gap: 32px;
  }

  .contact-small {
    display: none;
  }

  .cards--3,
  .contact-cards,
  .facts {
    grid-template-columns: 1fr;
  }

  .cta {
    flex-direction: column;
    align-items: start;
    gap: 26px;
    padding: 34px 30px;
  }

  

  .fav-hero__copy {
    padding-right: calc(32% - var(--band-pad));
    padding-block: 32px 80px;
  }

  .fav-editorial,
  .fav-card-section {
    gap: 35px;
  }
}


@media (max-width: 600px) {
  .fav-hero__float {
    display: none;
  }

  .fav-hero__copy {
    padding-right: 0;
  }
}


@media (max-width: 650px) {
  .section-head {
    flex-direction: column;
    align-items: start;
    gap: 18px;
  }
}

@media (max-width: 520px) {
  :root {
    --hero-h: 635px;
  }

  .logo {
    font-size: 31px;
  }

  

  .logo {
    flex-shrink: 1;
    min-width: 0;
  }

  .logo small {
    white-space: normal;
    font-size: clamp(9px, calc(2 * var(--vw)), 9.5px); 

    letter-spacing: 1.1px;
  }

  .lang {
    gap: 7px;
    padding-left: 13px;
  }

  .nav-toggle {
    gap: 9px;
    padding-inline: 12px;
  }

  .nav-row {
    gap: 12px;
  }

  .hero {
    align-items: start;
    background-position: 68% center;
  }

  .hero--home {
    background-image: linear-gradient(90deg, #0e283add, #10273583 66%, #102a3a30),
      url("../img/hero-tedarik.jpg");
  }

  .hero__copy {
    width: 100%;
    padding-block: 39px 130px;
  }

  .hero--page .hero__copy {
    padding-block: 34px 40px;
  }

  

  .hero--home .hero__copy {
    padding-block: 39px 100px;
  }

  .hero .eyebrow {
    gap: 9px;
    margin-bottom: 21px;
    font-size: 11px;
    letter-spacing: 1.1px;
  }

  .hero h1 {
    margin-bottom: 25px;
    letter-spacing: -2.4px;
  }

  .hero__copy > p:not(.eyebrow) {
    max-width: 100%;
  }

  .hero__base {
    bottom: 21px;
    font-size: 11px;
    letter-spacing: 1px;
  }

  .hero__base > span:last-child {
    display: none;
  }

  .about-lower {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 23px;
  }

  .seal {
    padding-left: 17px;
  }

  .section-head {
    margin-bottom: 25px;
  }

  .section-head > p {
    max-width: 280px;
  }

  .cards--4 {
    grid-template-columns: 1fr;
  }

  .service-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .service-grid > :nth-child(2) {
    margin-top: 0;
  }

  .service-picture {
    height: 325px;
  }

  .picture-bottom {
    right: 20px;
    left: 20px;
  }

  .picture-bottom span {
    font-size: 38px;
  }

  .brand-note__inner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-block: 30px;
  }

  .brand-note .quiet-link {
    grid-column: 1;
  }

  .fields {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  :is(.fields, .inquiry) :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
    font-size: 16px; 

  }

  .inquiry {
    padding: 23px 20px;
  }

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

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-base {
    flex-direction: column;
    gap: 7px;
    margin-top: 25px;
  }

  .fav-hero {
    background-position: 66% center;
  }

  

  .fav-hero__copy {
    padding-block: 32px 56px;
  }

  .fav-strip {
    flex-direction: column;
    gap: 12px;
  }

  .fav-strip a {
    justify-content: space-between;
    min-height: 27px;
  }

  .fav-editorial,
  .fav-card-section {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .fav-portrait {
    min-height: 360px;
  }

  .fav-contact {
    flex-direction: column;
    align-items: start;
    gap: 22px;
    margin-block: 35px;
    padding: 25px;
  }

  .fav-inquiry {
    margin-bottom: 35px;
    padding: 17px 21px;
  }
}


@media (max-width: 600px) {
  .hero--wallet .hero__copy {
    padding-block: 24px 28px;
  }

  .hero--wallet .action-row {
    gap: 14px 24px;
    margin-top: 20px;
  }
}

@media (max-width: 360px) {
  

  .logo {
    font-size: 26px;
  }

  .logo small {
    letter-spacing: 0.9px;
  }

  .logo-fav small {
    letter-spacing: 2.2px;
  }

  .lang {
    gap: 6px;
    padding-left: 9px;
  }

  .nav-toggle {
    gap: 8px;
    padding-inline: 9px;
  }
}


@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}




.eyebrow--num::before {
  display: none;
}

.eyebrow__no {
  color: var(--accent-ink);
  font-weight: 600;
}

.eyebrow__slash {
  margin-inline: 4px;
  color: var(--accent-ink);
  opacity: 0.55;
}


.values {
  background: var(--navy);
  color: var(--on-navy);
}

.values__inner {
  display: grid;
  grid-template-columns: minmax(14ch, 0.7fr) 1.6fr;
  gap: 60px;
  padding-block: clamp(46px, calc(3.45 * var(--vw)), 75px);
}

.values__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #ffffff1f;
  border: 1px solid #ffffff1f;
}

.values__list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: clamp(18px, calc(1.47 * var(--vw)), 28px) clamp(16.5px, calc(1.38 * var(--vw)), 26px);
  background: var(--navy);
  font-size: var(--fs-copy);
  line-height: 1.4;
}

.values__list b {
  color: var(--gold);
  font: 400 var(--fs-label) / 1 var(--body);
  letter-spacing: 1px;
}


.contact-lines {
  display: grid;
  gap: 1px;
  margin-top: 34px;
  background: var(--line);
  border: 1px solid var(--line);
}

.contact-lines div {
  padding: clamp(15px, calc(1.21 * var(--vw)), 23px) clamp(16.5px, calc(1.38 * var(--vw)), 25px);
  background: var(--paper);
}

.contact-lines dt {
  margin-bottom: 6px;
  color: var(--ink-faint);
  font-size: var(--fs-label);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.contact-lines dd {
  margin: 0;
  font-size: var(--fs-copy);
  line-height: 1.5;
  

  overflow-wrap: anywhere;
}

.contact-lines a:hover {
  border-bottom: 1px solid var(--gold-ink);
}


@media (max-width: 1060px) {
  .values__inner {
    gap: 40px;
  }
}

@media (max-width: 820px) {
  .values__inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .values__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .values__list {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 520px) {
  .contact-lines dd {
    font-size: clamp(16px, calc(5.26 * var(--vw)), var(--fs-copy));
  }
}


.segments {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.segment {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(21.5px, calc(1.73 * var(--vw)), 34px) clamp(19.5px, calc(1.55 * var(--vw)), 31px) clamp(19.5px, calc(1.55 * var(--vw)), 31px);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
}

.segment:hover {
  background: #fbfaf7;
}

.segment__no {
  color: var(--accent-ink);
  font: 400 clamp(21.5px, calc(1.73 * var(--vw)), 33px) / 1 var(--title);
}

.segment p {
  flex: 1;
  color: var(--ink);
  font-size: var(--fs-copy);
  line-height: 1.5;
}

.segment__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--fs-ui);
  transition: color var(--t-fast);
}

.segment__cta span {
  color: var(--gold);
  font-size: 1.2em;
  transition: transform var(--t-fast);
}

.segment:hover .segment__cta {
  color: var(--ink);
}

.segment:hover .segment__cta span {
  transform: translate(2px, -2px);
}


.consents {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #ced5d6;
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  line-height: 1.6;
  cursor: pointer;
}

.consent input {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--navy);
}

.consent a,
.consent-info a {
  border-bottom: 1px solid var(--gold-ink);
}


.consent-info {
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  line-height: 1.6;
}


.inquiry:not(:has(.form-required-note)) .consent--required > span:not(.field-error)::after {
  content: " *";
  color: var(--accent-ink);
}


.consent .field-error {
  grid-column: 2;
  margin-top: -6px;
}

:is(.consent, .choice) input[aria-invalid="true"] {
  outline: 2px solid var(--error);
  outline-offset: 2px;
}

@media (max-width: 1060px) {
  .segments {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .segments {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 1100px) {
  .footer-main {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 660px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }
}


@media (max-width: 960px) {
  .nav__links,
  .nav .brand-route {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }
}


.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 10px;
  margin-top: 10px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  padding: 12px 15px;
  border: 1px solid #b9c6c9;
  background: #fff;
  color: var(--ink);
  font-size: var(--fs-ui);
  line-height: 1.35;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.choice:hover {
  border-color: var(--gold);
}

.choice input {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--navy);
}

.choice:has(input:checked) {
  border-color: var(--gold);
  background: #f6f2e9;
}


.choice input:focus-visible {
  outline-offset: 2px;
}

.choice:has(input:focus-visible) {
  border-color: var(--navy);
}


.choice-set.is-invalid .choice {
  border-color: var(--error);
}


.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 34px;
  background: var(--line);
  border: 1px solid var(--line);
}

.steps div {
  padding: clamp(19.5px, calc(1.64 * var(--vw)), 31px) clamp(18px, calc(1.47 * var(--vw)), 28px);
  background: var(--paper);
}

.steps dt {
  margin-bottom: 10px;
  color: var(--accent-ink);
  font: 400 clamp(19.5px, calc(1.64 * var(--vw)), 31px) / 1 var(--title);
}

.steps dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-copy);
  line-height: 1.6;
  overflow-wrap: break-word;
  hyphens: auto;
}

.steps dd b {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-weight: 500;
}


a.segment {
  text-decoration: none;
}

@media (max-width: 760px) {
  .steps {
    grid-template-columns: 1fr;
  }
}



.catalog {
  display: grid;
  gap: clamp(16.5px, calc(1.38 * var(--vw)), 30px);
}

.catalog__empty {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: clamp(23px, calc(2.07 * var(--vw)), 46px) clamp(19.5px, calc(1.9 * var(--vw)), 43px);
  border: 1px solid var(--line);
  background: var(--cream);
}

.catalog__empty-title {
  font: 400 var(--fs-serif-h3) / 1.2 var(--title);
}

.catalog__empty > p:not(.catalog__empty-title) {
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: var(--fs-copy);
  line-height: 1.8;
}

.catalog__empty .quiet-link {
  margin-top: 6px;
}

.catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(13px, calc(1.21 * var(--vw)), 25px);
}

.catalog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--paper);
}


.catalog-card__img {
  aspect-ratio: 4 / 3;
  background-color: var(--stone);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.catalog-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(16.5px, calc(1.38 * var(--vw)), 28px) clamp(16.5px, calc(1.38 * var(--vw)), 26px) clamp(19.5px, calc(1.55 * var(--vw)), 31px);
}

.catalog-card__group {
  margin-bottom: 10px;
  color: var(--accent-ink);
  font: 500 var(--fs-label) / 1.5 var(--display);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.catalog-card__title {
  font: 400 clamp(19.5px, calc(1.51 * var(--vw)), 33px) / 1.2 var(--title);
}


.catalog-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.catalog-card__meta li {
  padding: 5px 11px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: var(--fs-label);
}

.catalog-card__text {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: var(--fs-copy);
  line-height: 1.75;
}


.section:not(.section--paper) .catalog__empty {
  background: var(--paper);
}


.store-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-top: clamp(18px, calc(1.55 * var(--vw)), 33px);
}

.store-link {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: clamp(141px, calc(10.36 * var(--vw)), 221px);
  min-height: clamp(46px, calc(3.45 * var(--vw)), 72px);
  padding: 9px clamp(15px, calc(1.21 * var(--vw)), 25px);
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  font: 500 var(--fs-ui) / 1.2 var(--display); 

  transition: background var(--t-fast), border-color var(--t-fast);
}

.store-link small {
  color: var(--gold);
  font: 500 clamp(11px, calc(0.6 * var(--vw)), 13px) / 1.3 var(--body);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

a.store-link:hover,
a.store-link:focus-visible {
  border-color: var(--gold);
  background: var(--deep);
}


:is(.hero, .fav-hero, .section--navy, .values, .approach, .cta, .fav-card-band) .store-link {
  border-color: #c9b59299;
}


.store-link[data-todo] {
  border: 1px dashed #9fb2bc;
  background: #3d5362;
  color: var(--on-navy);
  cursor: default;
}

.store-link[data-todo] small {
  color: #d2dde2;
}

.store-links + .note {
  margin-top: 14px;
}


.app-get {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(13px, calc(1.21 * var(--vw)), 25px);
}

.app-get__item {
  display: flex;
  align-items: center;
  gap: clamp(16.5px, calc(1.55 * var(--vw)), 33px);
  padding: clamp(18px, calc(1.73 * var(--vw)), 36px);
  border: 1px solid var(--line);
  background: var(--cream);
}

.app-get__qr,
.qr-slot {
  flex: none;
  width: clamp(98.5px, calc(7.42 * var(--vw)), 164px);
  aspect-ratio: 1;
}

.app-get__qr {
  height: auto;
  padding: 8px;
  background: #fff;
}

.qr-slot {
  display: grid;
  place-content: center;
  gap: 4px;
  padding: 10px;
  border: 1px dashed #9fb2bc;
  background: var(--paper);
  text-align: center;
}

.qr-slot__label {
  font: 500 var(--fs-ui) / 1.2 var(--display);
  letter-spacing: 0.4px;
}

.qr-slot__note {
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.app-get__body {
  display: grid;
  justify-items: start;
  gap: 10px;
  min-width: 0;
}

.app-get__body h3 {
  font: 500 clamp(16.5px, calc(1.29 * var(--vw)), 27px) / 1.3 var(--display);
  letter-spacing: -0.2px;
}

.app-get__body > p {
  color: var(--ink-soft);
  font-size: var(--fs-copy);
  line-height: 1.7;
}

.app-get .store-link {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  column-gap: 12px;
  margin-top: 6px;
}

.app-get__icon {
  grid-row: 1 / span 2;
  align-self: center;
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-get + .note {
  margin-top: 16px;
}

@media (max-width: 860px) {
  .app-get {
    grid-template-columns: 1fr;
  }
}


@media (min-width: 821px) {
  .cta--route .btn {
    flex: none;
    white-space: nowrap;
  }
}


@media (max-width: 520px) {
  .app-get__item {
    flex-direction: column;
    align-items: start;
  }

  .app-get .qr-slot,
  .app-get .app-get__qr {
    display: none;
  }
}


.legal {
  max-width: 72ch;
  margin-top: 34px;
  color: var(--ink-soft);
  font-size: var(--fs-copy);
  line-height: 1.85;
}

.legal > * + * {
  margin-top: 1em;
}

.legal h2 {
  margin-top: 2.2em;
  color: var(--ink);
  font: 400 var(--fs-serif-h3) / 1.2 var(--title);
  letter-spacing: -0.4px;
}

.legal h3 {
  margin-top: 1.8em;
  color: var(--ink);
  font: 500 var(--fs-ui) / 1.45 var(--display);
}

.legal h2 + *,
.legal h3 + * {
  margin-top: 0.6em;
}

.legal ul,
.legal ol {
  padding-left: 1.3em;
}

.legal ul {
  list-style: disc;
}

.legal ol {
  list-style: decimal;
}

.legal li + li {
  margin-top: 0.45em;
}

.legal li::marker {
  color: var(--accent-ink);
}

.legal strong {
  color: var(--ink);
  font-weight: 600;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-ui);
  line-height: 1.6;
}

.legal th,
.legal td {
  padding: 10px 12px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

.legal th {
  background: var(--paper);
  color: var(--ink);
  font-weight: 500;
}


@media print {
  :root {
    --fs-base: 12pt;
    --fs-copy: 11pt;
    --fs-lead: 12pt;
    --fs-ui: 11pt;
    --fs-label: 9pt;
    --fs-xs: 9pt;
    --sec: 24px; 

    --gutter: 0px;
  }

  @page {
    margin: 16mm 14mm;
  }

  

  .skip-link,
  .nav,
  .nav-toggle,
  .mobile-nav,
  .hero__base,
  .inquiry,
  .fav-inquiry,
  .action-row,
  .cta .btn,
  .fav-hero__float,
  .fav-portrait,
  .card-art,
  .approach__photo::after,
  .service-picture::after,
  .hero::after {
    display: none !important;
  }

  

  *,
  *::before,
  *::after {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    background: #fff !important;
    color: #000;
  }

  

  :is(.site-header, .site-footer, .hero, .fav-hero, .section--navy, .values,
      .approach, .cta, .fav-card-band, .service-picture),
  :is(.site-header, .site-footer, .hero, .fav-hero, .section--navy, .values,
      .approach, .cta, .fav-card-band, .service-picture) * {
    color: #000 !important;
  }

  .concept-note,
  .concept-note * {
    color: #333 !important;
  }

  

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  

  .hero,
  .fav-hero,
  .approach,
  .approach__photo,
  .service-picture {
    min-height: 0 !important;
    height: auto !important;
  }

  .hero__copy,
  .hero--home .hero__copy,
  .hero--page .hero__copy,
  .fav-hero__copy {
    width: 100%;
    padding-right: 0;
    padding-block: 8px 16px;
  }

  .approach,
  .contact {
    display: block;
  }

  .approach__copy {
    padding: 16px 0 0;
  }

  .photo-statement,
  .picture-bottom,
  .picture-label {
    position: static;
    padding: 0;
  }

  .site-header .nav-row {
    padding-block: 0 12px;
  }

  .site-footer {
    padding-block: 16px 0;
    border-top: 1px solid #999;
  }

  .site-footer > .concept-note {
    margin: 12px 0 0;
  }

  details > summary::after {
    display: none;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }

  .card,
  .steps div,
  .contact-lines div,
  .catalog-card,
  .process__item {
    break-inside: avoid;
  }
}