/* =========================================================
   DESIGN TOKENS  (measured from the 1440px desktop design)
   ========================================================= */
 :root {
   /* colour */
   --ink: #0a0d10;
   /* page / hero / focus background   */
   --ink-2: #080b0e;
   /* stats strip                      */
   --ink-card: #0b0e11;
   /* card fill                        */
   --line: #1e2124;
   /* card + section hairlines         */
   --line-2: #2a2c2e;
   /* stat dividers                    */
   --paper: #f1ede8;
   /* About section                    */
   --paper-ink: #14171a;
   /* heading on paper                 */
   --paper-text: #55585b;
   /* body on paper                    */
   --paper-label: #9e7f67;
   /* eyebrow on paper                 */
   --white: #f5f2ee;
   --text: #e9e6e1;
   --muted: #a9adb1;
   --muted-2: #7f858a;
   --gold: #cfab88;

   /* type */
   --serif: "Newsreader", "Cormorant Garamond", Georgia, "Times New Roman", serif;
   --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

   /* layout */
   --max: 1440px;
   --pad: 105px;
   /* left/right content gutter at 1440 */
 }

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

 html {
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth;
 }

 body {
   margin: 0;
   background: var(--ink);
   color: var(--text);
   font-family: var(--sans);
   font-weight: 300;
   font-size: 17px;
   line-height: 1.9;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }

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

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

 h1,
 h2,
 h3,
 p {
   margin: 0;
 }

 button {
   font: inherit;
   color: inherit;
 }

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

 .wrap {
   width: 100%;
   max-width: var(--max);
   margin-inline: auto;
   position: relative;
 }

 /* shared text styles */
 .eyebrow {
   font-family: var(--sans);
   font-weight: 700;
   font-size: 12px;
   line-height: 1;
   letter-spacing: .24em;
   text-transform: uppercase;
 }

 .serif {
   font-family: var(--serif);
   font-weight: 400;
 }

 /* =========================================================
   BUTTONS
   ========================================================= */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 18px;
   height: 62px;
   padding: 0 36px;
   border-radius: 999px;
   font-family: var(--sans);
   font-weight: 600;
   font-size: 12.5px;
   letter-spacing: .1em;
   text-transform: uppercase;
   line-height: 1;
   white-space: nowrap;
   transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
 }

 .btn svg {
   width: 20px;
   height: 20px;
   flex: none;
   transition: transform .25s ease;
 }

 .btn:hover svg {
   transform: translateX(4px);
 }

 .btn--light {
   background: #fff;
   color: #0b0e11;
 }

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

 .btn--dark {
   background: var(--ink-card);
   color: #fff;
   height: 57px;
   padding: 0 36px;
 }

 .btn--dark:hover {
   background: #000;
 }

 .btn--ghost {
   height: 55px;
   padding: 0 36px;
   gap: 20px;
   border: 1px solid rgba(255, 255, 255, .85);
   color: #fff;
   font-size: 12px;
   letter-spacing: .14em;
   font-weight: 700;
 }

 .btn--ghost:hover {
   background: #fff;
   color: var(--ink);
 }

 /* =========================================================
   1. HERO + NAV
   ========================================================= */
 .hero {
   background: var(--ink);
   position: relative;
   overflow: hidden;
 }

 .hero .wrap {
   height: 817px;
 }

 .nav {
   position: absolute;
   z-index: 5;
   inset: 0 0 auto 0;
   height: 110px;
   padding: 0 81px 0 73px;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
 }

 .logo {
   justify-self: start;
   line-height: 0;
 }

 .logo img {
   display: block;
   height: 78px;
   width: auto;
 }

 .nav__links {
   display: flex;
   gap: 52px;
   list-style: none;
   margin: 0;
   padding: 0;
 }

 .nav__links a {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: #fff;
   line-height: 1;
   transition: color .2s;
 }

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

 .nav__cta {
   justify-self: end;
 }

 .nav__toggle {
   display: none;
 }

 .hero__media {
   position: absolute;
   z-index: 1;
   right: 0;
   top: 101px;
   width: 773px;
   height: 716px;
   -webkit-mask-image:
     linear-gradient(to right, transparent 0, #000 26%),
     linear-gradient(to bottom, transparent 0, #000 14%);
   -webkit-mask-composite: source-in;
   mask-image:
     linear-gradient(to right, transparent 0, #000 26%),
     linear-gradient(to bottom, transparent 0, #000 14%);
   mask-composite: intersect;
 }

 .hero__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: left top;
 }

 .hero__content {
   position: absolute;
   z-index: 2;
   left: var(--pad);
   top: 172px;
   width: 640px;
 }

 .hero__label {
   color: var(--paper-label);
   letter-spacing: .26em;
 }

 .hero__title {
   font-family: var(--serif);
   font-weight: 400;
   font-size: 76px;
   line-height: 79px;
   letter-spacing: -.012em;
   color: var(--white);
   margin-top: 50px;
 }

 .hero__title span {
   display: block;
 }

 .hero__title .gold {
   color: var(--gold);
 }

 .hero__text {
   margin-top: 20px;
   max-width: 450px;
   font-size: 17px;
   line-height: 32.5px;
   color: var(--text);
   margin-bottom: 30px;
 }

 /* =========================================================
   2. STATS STRIP
   ========================================================= */
 .stats {
   background: var(--ink-2);
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
 }

 .stats .wrap {
   padding: 0 46px;
 }

 .stats__grid {
   display: grid;
   grid-template-columns: 364fr 327fr 329fr 358fr;
   height: 163px;
   align-items: center;
 }

 .stat {
   text-align: center;
   padding: 0 20px;
   position: relative;
 }

 .stat+.stat::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   height: 86px;
   transform: translateY(-50%);
   width: 1px;
   background: var(--line-2);
 }

 .stat__big {
   font-family: var(--sans);
   font-weight: 400;
   font-size: 30px;
   line-height: 1;
   letter-spacing: .09em;
   text-transform: uppercase;
   color: var(--white);
 }

 .stat__small {
   margin-top: 12px;
   font-size: 12px;
   font-weight: 700;
   line-height: 15px;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--muted);
 }

 /* =========================================================
   3. ABOUT
   ========================================================= */
 .about {
   background: var(--paper);
   color: var(--paper-text);
 }

 .about .wrap {
   min-height: 537px;
   display: grid;
   grid-template-columns: 1fr 685px;
   align-items: center;
   column-gap: 0;
 }

 .about__copy {
   padding-left: var(--pad);
   padding-right: 40px;
 }

 .about .eyebrow {
   color: var(--paper-label);
   font-size: 11.5px;
   letter-spacing: .22em;
 }

 .about__title {
   margin-top: 25px;
   font-family: var(--serif);
   font-weight: 500;
   font-size: 64px;
   line-height: 70px;
   letter-spacing: -.012em;
   color: var(--paper-ink);
 }

 .about__text {
   margin-top: 15px;
   max-width: 670px;
   font-size: 17px;
   line-height: 32.5px;
   color: var(--paper-text);
   font-weight: 500;
 }

 .about .btn {
   margin-top: 28px;
 }

 .about__media {
   height: 478px;
   border-radius: 8px 0 0 8px;
   overflow: hidden;
 }

 .about__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
 }

 /* =========================================================
   4. AREAS OF FOCUS
   ========================================================= */
 .focus {
   background: var(--ink);
   padding-bottom: 15px;
 }

 .focus .wrap {
   padding: 0 86px;
   height: 573px;
 }

 .focus__head {
   display: grid;
   grid-template-columns: 1fr 530px;
   column-gap: 40px;
   padding-top: 40px;
   /* 105 - 86 */
 }

 .focus .eyebrow {
   color: var(--paper-label);
   font-size: 11.5px;
 }

 .focus__title {
   margin-top: 25px;
   font-family: var(--serif);
   font-weight: 400;
   font-size: 62px;
   line-height: 65px;
   letter-spacing: -.01em;
   color: var(--white);
 }

 .focus__lead {
   align-self: start;
   margin-top: 35px;
   margin-left: 0;
   font-size: 17px;
   line-height: 32.5px;
   color: var(--muted);
   max-width: 540px;
   font-weight: 500;
 }

 .cards {
   margin-top: 61px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 34px;
 }

 .card {
   background: var(--ink-card);
   border: 1px solid var(--line);
   border-radius: 10px;
   padding: 20px 40px 10px;
   height: 291px;
 }

 .card__icon {
   width: 42px;
   height: 42px;
   color: var(--gold);
 }

 .card__icon svg {
   width: 100%;
   height: 100%;
   stroke: currentColor;
   fill: none;
   stroke-width: 1.4;
   stroke-linecap: round;
   stroke-linejoin: round;
 }

 .card__title {
   margin-top: 17px;
   font-family: var(--serif);
   font-weight: 400;
   font-size: 27px;
   line-height: 1.2;
   color: var(--white);
 }

 .card__text {
   margin-top: 14px;
   font-size: 16.5px;
   line-height: 32.5px;
   color: var(--muted);
   font-weight: 500;
 }

 /* =========================================================
   5. PHILOSOPHY
   ========================================================= */
 .philosophy {
   position: relative;
   background: #12100f;
   border-top: 1px solid var(--line);
   overflow: hidden;
 }

 .philosophy .wrap {
   height: 356px;
 }

 .philosophy__bg {
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
   width: 66%;
   -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%);
   mask-image: linear-gradient(to right, transparent 0, #000 40%);
 }

 .philosophy__bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: right center;
 }

 .philosophy::before {
   /* warm-black wash over the whole band */
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(90deg, #100e0d 0%, rgba(16, 14, 13, .75) 38%, rgba(16, 14, 13, 0) 70%);
   pointer-events: none;
 }

 .philosophy__content {
   position: absolute;
   z-index: 2;
   left: var(--pad);
   top: 36px;
   width: 760px;
 }

 .philosophy .eyebrow {
   color: var(--paper-label);
   font-size: 11.5px;
   font-weight: 700;
 }

 .quote {
   margin-top: 25px;
   font-family: var(--serif);
   font-weight: 400;
   font-size: 48px;
   line-height: 58px;
   color: var(--gold);
   text-indent: -0.4em;
   margin-left: 17px !important;
   /* hang the opening quotation mark */
 }

 .quote span {
   display: block;
 }

 .quote .w {
   color: var(--white);
 }

 .philosophy__rule {
   margin: 20px 0 0;
   width: 63px;
   height: 1px;
   background: var(--gold);
   border: 0;
 }

 .philosophy__text {
   margin-top: 20px;
   max-width: 490px;
   font-size: 17px;
   font-weight: 500;
   line-height: 32.5px;
   color: var(--muted);
 }

 /* =========================================================
   6. CONTACT
   ========================================================= */
 .contact {
   background: #0a0d10;
   border-top: 1px solid var(--line);
 }

 .contact .wrap {
   display: grid;
   grid-template-columns: 50% 50%;
   height: 444px;
 }

 .contact__media {
   position: relative;
   border-right: 1px solid var(--line);
   overflow: hidden;
 }

 .contact__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top;
 }

 .contact__copy {
   padding: 55px 0 0 85px;
 }

 .contact .eyebrow {
   color: var(--paper-label);
   font-size: 11.5px;
 }

 .contact__title {
   margin-top: 20px;
   font-family: var(--serif);
   font-weight: 400;
   font-size: 48px;
   line-height: 52px;
   color: var(--white);
 }

 .contact__text {
   margin-top: 10px;
   max-width: 520px;
   font-size: 17px;
   line-height: 32.5px;
   color: var(--muted);
   font-weight: 500;
 }

 .contact__email {
   display: inline-block;
   margin-top: 22px;
   color: var(--white);
   font-size: 16px;
   letter-spacing: .01em;
   border-bottom: 1px solid rgba(255, 255, 255, .4);
 }

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

 .contact .btn {
   margin-top: 28px;
 }

 /* =========================================================
   RESPONSIVE — LARGE DESKTOP SCALE-DOWN (1100–1439)
   Proportions follow the 1440 design.
   ========================================================= */
 @media (max-width: 1439px) {
   :root {
     --pad: clamp(48px, 7.3vw, 105px);
   }

   .nav {
     padding: 0 clamp(32px, 5.6vw, 81px) 0 clamp(32px, 5vw, 73px);
   }

   .hero__title {
     font-size: clamp(56px, 5.3vw, 76px);
     line-height: 1.04;
   }

   .hero__media {
     width: 54%;
     height: 88%;
     top: auto;
     bottom: 0;
   }

   .about .wrap {
     grid-template-columns: 1fr 48%;
   }

   .about__title {
     font-size: clamp(48px, 4.5vw, 64px);
     line-height: 1.1;
   }

   .focus__title {
     font-size: clamp(46px, 4.3vw, 62px);
     line-height: 1.05;
   }

   .focus .wrap {
     padding-inline: clamp(32px, 6vw, 86px);
   }

   .focus__head {
     padding-left: calc(var(--pad) - clamp(32px, 6vw, 86px));
     grid-template-columns: 1fr minmax(320px, 38%);
   }

   .quote,
   .contact__title {
     font-size: clamp(38px, 3.4vw, 48px);
     line-height: 1.2;
   }

   .contact__copy {
     padding-left: clamp(40px, 5.9vw, 85px);
     padding-right: 40px;
   }
 }

 /* =========================================================
   TABLET (≤ 1024px)
   ========================================================= */
 @media (max-width: 1024px) {
   body {
     font-size: 16px;
   }

   .hero .wrap {
     height: 700px;
   }

   .nav {
     height: 96px;
     grid-template-columns: auto 1fr auto;
     column-gap: 24px;
   }

   .logo img {
     height: 64px;
   }

   .nav__links {
     gap: 28px;
     justify-self: center;
   }

   .nav__links a {
     font-size: 11px;
     letter-spacing: .12em;
   }

   .btn--ghost {
     height: 48px;
     padding: 0 24px;
     font-size: 11px;
   }

   .hero__content {
     top: 150px;
     width: 52%;
   }

   .hero__title {
     font-size: 54px;
     margin-top: 26px;
   }

   .hero__text {
     font-size: 16px;
     line-height: 28px;
     max-width: 360px;
     margin-top: 26px;
   }

   .hero__media {
     width: 60%;
     height: 86%;
     -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%), linear-gradient(to bottom, transparent 0, #000 14%);
     mask-image: linear-gradient(to right, transparent 0, #000 40%), linear-gradient(to bottom, transparent 0, #000 14%);
   }

   .btn {
     height: 54px;
     padding: 0 28px;
     font-size: 11.5px;
   }

   .stats .wrap {
     padding: 0 24px;
   }

   .stats__grid {
     height: 140px;
   }

   .stat {
     padding: 0 10px;
   }

   .stat__big {
     font-size: 24px;
   }

   .stat__small {
     font-size: 10.5px;
     letter-spacing: .15em;
     line-height: 18px;
     margin-top: 12px;
   }

   .stat__small br {
     display: none;
   }

   .stat+.stat::before {
     height: 70px;
   }

   .about .wrap {
     grid-template-columns: 1fr 44%;
     min-height: 0;
   }

   .about__copy {
     padding-block: 64px;
     padding-right: 28px;
   }

   .about__title {
     font-size: 44px;
   }

   .about__text {
     font-size: 16px;
     line-height: 28px;
   }

   .about__media {
     height: 100%;
     min-height: 400px;
     border-radius: 8px 0 0 8px;
   }

   .about .btn,
   .contact .btn {
     height: 52px;
   }

   .focus .wrap {
     height: auto;
     padding-bottom: 72px;
   }

   .focus__head {
     grid-template-columns: 1fr;
     row-gap: 22px;
     padding: 64px 0 0;
   }

   .focus__title {
     margin-top: 24px;
     font-size: 48px;
   }

   .focus__lead {
     margin-top: 0;
     font-size: 16px;
     line-height: 28px;
     max-width: 620px;
   }

   .cards {
     margin-top: 40px;
     gap: 18px;
   }

   .card {
     height: auto;
     padding: 28px 24px 30px;
   }

   .card__icon {
     width: 38px;
     height: 38px;
   }

   .card__title {
     font-size: 23px;
   }

   .card__text {
     font-size: 15px;
     line-height: 26px;
   }

   .philosophy .wrap {
     height: 340px;
   }

   .philosophy__content {
     top: 46px;
     width: 82%;
   }

   .quote {
     font-size: 38px;
     line-height: 1.2;
     margin-top: 26px;
   }

   .philosophy__text {
     font-size: 16px;
     line-height: 28px;
   }

   .philosophy__bg {
     width: 80%;
   }

   .philosophy::before {
     background: linear-gradient(90deg, #100e0d 0%, rgba(16, 14, 13, .85) 55%, rgba(16, 14, 13, .2) 100%);
   }

   .contact .wrap {
     height: 400px;
   }

   .contact__copy {
     padding: 48px 32px 0 40px;
   }

   .contact__title {
     font-size: 38px;
     margin-top: 24px;
   }

   .contact__text {
     font-size: 16px;
     line-height: 28px;
     margin-top: 22px;
   }
 }

 @media (max-width: 900px) {

   /* nav → hamburger */
   .nav {
     height: 84px;
     padding: 0 32px;
     ;
     grid-template-columns: 1fr auto;
   }

   .logo img {
     height: 52px;
   }

   .nav__cta {
     display: none;
   }

   .nav__toggle {
     display: inline-flex;
     flex-direction: column;
     justify-content: center;
     gap: 6px;
     width: 44px;
     height: 44px;
     padding: 0 10px;
     background: transparent;
     border: 1px solid rgba(255, 255, 255, .35);
     border-radius: 50%;
     cursor: pointer;
   }

   .nav__toggle span {
     display: block;
     height: 1px;
     background: #fff;
     transition: transform .25s, opacity .25s;
   }

   .nav.is-open .nav__toggle span:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
   }

   .nav.is-open .nav__toggle span:nth-child(2) {
     opacity: 0;
   }

   .nav.is-open .nav__toggle span:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
   }

   .nav__links {
     position: absolute;
     width: 100%;
     top: 84px;
     left: 0;
     right: 0;
     flex-direction: column;
     gap: 0;
     background: rgba(8, 11, 14, .97);
     border-top: 1px solid var(--line);
     border-bottom: 1px solid var(--line);
     padding: 8px 32px 16px;
     display: none;
   }

   .nav.is-open .nav__links {
     display: flex;
   }

   .nav__links a {
     display: block;
     padding: 18px 0;
     font-size: 12px;
     border-bottom: 1px solid var(--line);
   }

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

 }

 /* =========================================================
   SMALL TABLET / LARGE PHONE (≤ 820px)
   ========================================================= */
 @media (max-width: 820px) {
   .about .wrap {
     grid-template-columns: minmax(0, 1fr);
   }

   .about__copy {
     padding: 56px var(--pad) 40px;
   }

   .about__title br {
     display: none;
   }

   .about__text {
     max-width: 560px;
   }

   .about__media {
     height: 380px;
     min-height: 0;
     border-radius: 0;
   }

   .about__media img {
     object-position: center 25%;
   }

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

   .card {
     display: grid;
     grid-template-columns: 56px 1fr;
     column-gap: 20px;
     padding: 26px 26px 28px;
   }

   .card__icon {
     grid-row: 1 / span 2;
     width: 44px;
     height: 44px;
   }

   .card__title {
     margin-top: 0;
   }

   .card__text {
     margin-top: 8px;
   }

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

   .contact__media {
     height: 420px;
     border-right: 0;
     border-bottom: 1px solid var(--line);
   }

   .contact__media img {
     object-position: center 10%;
   }

   .contact__copy {
     padding: 48px var(--pad) 64px;
   }
 }

 /* =========================================================
   MOBILE (≤ 640px)
   ========================================================= */
 @media (max-width: 640px) {
   :root {
     --pad: 24px;
   }

   body {
     font-size: 15.5px;
     line-height: 1.8;
   }

   .nav {
     height: 76px;
     padding: 0 20px 0 22px;
   }

   .nav__links {
     top: 76px;
     padding: 8px 24px 16px;
   }


   /* hero: photo on top, copy below */
   .hero .wrap {
     height: auto;
     display: flex;
     flex-direction: column;
     padding-top: 76px;
   }

   .hero__media {
     position: relative;
     order: 1;
     width: 100%;
     height: 360px;
     top: auto;
     right: auto;
     -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
     mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
     -webkit-mask-composite: initial;
     mask-composite: initial;
   }

   .hero__media img {
     object-position: 30% top;
   }

   .hero__content {
     position: relative;
     order: 2;
     left: auto;
     top: auto;
     width: auto;
     padding: 0 var(--pad) 48px;
     margin-top: -56px;
   }

   .hero__label {
     font-size: 10.5px;
     letter-spacing: .2em;
     line-height: 1.7;
   }

   .hero__title {
     font-size: 42px;
     line-height: 1.07;
     margin-top: 18px;
   }

   .hero__text {
     font-size: 15.5px;
     line-height: 27px;
     margin-top: 20px;
   }

   .hero .btn {
     margin-top: 28px;
     height: 52px;
   }

   /* stats 2 × 2 */
   .stats .wrap {
     padding: 0 16px;
   }

   .stats__grid {
     grid-template-columns: 1fr 1fr;
     height: auto;
   }

   .stat {
     padding: 30px 8px;
   }

   .stat+.stat::before {
     display: none;
   }

   .stat:nth-child(even) {
     border-left: 1px solid var(--line-2);
   }

   .stat:nth-child(n+3) {
     border-top: 1px solid var(--line-2);
   }

   .stat__big {
     font-size: 22px;
     letter-spacing: .07em;
   }

   .stat__small {
     font-size: 10px;
     letter-spacing: .13em;
     line-height: 17px;
     margin-top: 10px;
   }

   /* about */
   .about__copy {
     padding: 48px var(--pad) 36px;
   }

   .about .eyebrow,
   .focus .eyebrow,
   .philosophy .eyebrow,
   .contact .eyebrow {
     font-size: 10.5px;
   }

   .about__title {
     font-size: 38px;
     margin-top: 18px;
   }

   .about__text {
     font-size: 15.5px;
     line-height: 27px;
     margin-top: 18px;
   }

   .about .btn {
     margin-top: 24px;
   }

   .about__media {
     height: 300px;
   }

   /* focus */
   .focus .wrap {
     padding: 0 20px 56px;
   }

   .focus__head {
     padding: 52px 4px 0;
     row-gap: 18px;
   }

   .focus__title {
     font-size: 38px;
     line-height: 1.08;
     margin-top: 18px;
   }

   .focus__title br {
     display: none;
   }

   .focus__lead {
     font-size: 15.5px;
     line-height: 27px;
   }

   .cards {
     margin-top: 32px;
   }

   .card {
     grid-template-columns: 1fr;
     padding: 24px 22px 26px;
   }

   .card__icon {
     grid-row: auto;
     width: 38px;
     height: 38px;
   }

   .card__title {
     margin-top: 14px;
     font-size: 24px;
   }

   .card__text {
     margin-top: 10px;
     font-size: 15px;
     line-height: 25px;
   }

   /* philosophy */
   .philosophy .wrap {
     height: auto;
   }

   .philosophy__bg {
     width: 100%;
   }

   .philosophy::before {
     background: linear-gradient(180deg, rgba(16, 14, 13, .82), rgba(16, 14, 13, .94));
   }

   .philosophy__content {
     position: relative;
     left: auto;
     top: auto;
     width: auto;
     padding: 52px var(--pad) 56px;
   }

   .quote {
     font-size: 32px;
     line-height: 1.22;
     margin-top: 20px;
     text-indent: -.35em;
   }

   .quote span {
     display: inline;
   }

   .philosophy__rule {
     margin-top: 24px;
   }

   .philosophy__text {
     font-size: 15.5px;
     line-height: 27px;
     margin-top: 20px;
   }

   /* contact */
   .contact__media {
     height: 340px;
   }

   .contact__copy {
     padding: 44px var(--pad) 56px;
   }

   .contact__title {
     font-size: 34px;
     line-height: 1.12;
     margin-top: 18px;
   }

   .contact__title br {
     display: none;
   }

   .contact__text {
     font-size: 15.5px;
     line-height: 27px;
     margin-top: 18px;
   }

   .contact .btn {
     margin-top: 28px;
   }
 }

 @media (max-width: 380px) {
   .hero__title {
     font-size: 37px;
   }

   .logo img {
     height: 46px;
   }
 }

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

   * {
     transition: none !important;
   }
 }