/*-----------------------------------------------------------------------------
   Kay Agency — brand layer
   Loaded AFTER reak.css. Everything Kay-specific lives here so the vendor
   stylesheet stays untouched and can still be updated.

   Palette (brand identity):
     #2a2a2a  ink      #4c403a  warm
     #e7e0d0  sand     #faf7f1  cream
   Typeface: Montserrat (brand). "Along Sans" is a licensed display face and is
   not web-embedded — Montserrat carries both display and body here.
-----------------------------------------------------------------------------*/

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

:root {
   --kay-ink: #2a2a2a;
   --kay-warm: #4c403a;
   --kay-sand: #e7e0d0;
   --kay-cream: #faf7f1;
   --kay-bg: #0f0f0f;
   --kay-surface: #1a1a1a;
   --kay-line: rgba(231, 224, 208, 0.14);
   --kay-muted: #9b958d;

   /* re-point the template tokens at the brand */
   --oit-ff-body: "Montserrat", sans-serif;
   --oit-ff-heading: "Montserrat", sans-serif;
   --oit-ff-funnel: "Montserrat", sans-serif;
   --oit-ff-p: "Montserrat", sans-serif;
   --oit-clr-white: #faf7f1;
   --oit-text-body: var(--kay-muted);
}

body {
   background-color: var(--kay-bg);
   letter-spacing: -0.01em;
}

/* Montserrat runs a touch wider than the template face — pull the display
   sizes back so headlines still break where the layout expects. */
.dg-hero-title,
.oit-section-title,
.oit-text-revel p,
.oit-about-text p {
   letter-spacing: -0.03em;
}

/* The template colours headings with --oit-clr-black and only overrides that
   for the specific blocks its own demos use. Every surface on this site is
   dark, so headings default to cream instead. */
.reak-dark h1,
.reak-dark h2,
.reak-dark h3,
.reak-dark h4,
.reak-dark h5,
.reak-dark h6,
.reak-dark .sidebar-widget-post-title a,
.reak-dark .postbox-title {
   color: var(--kay-cream);
}

/* …except inside the cream-filled controls, which stay ink. */
.reak-dark .oit-btn-border.btn-white-bg,
.reak-dark .oit-btn-border.btn-white-bg span,
.reak-dark .nice-select .list li {
   color: var(--kay-ink);
}

/*---------------------------------------- logo ---*/
/* The dark theme inverts logo images because the template ships a black PNG.
   Kay's mark is already white, so the inversion has to be switched off. */
.reak-dark .header-dark .oit-header-logo img,
.reak-dark .oitoffcanvas__logo img,
.oit-header-logo img,
.oitoffcanvas__logo img {
   filter: none !important;
}

.oit-header-logo img {
   width: 210px;
   max-width: 62vw;
}

.oitoffcanvas__logo img {
   width: 190px;
}

@media (max-width: 767px) {
   .oit-header-logo img {
      width: 165px;
   }
}

/*---------------------------------- video hero ---*/
/* --kay-hero-h is the hero's own height. The mobile override lower down is the
   only place it changes; everything here reads from it. */
.kay-hero {
   --kay-hero-h: min(88vh, 56.25vw);
   position: relative;
   overflow: hidden;
   background-color: #000;
}

.kay-hero__video {
   position: absolute;
   inset: 0;
   z-index: 0;
   overflow: hidden;
   /* Frame 0 of the film, so the very first paint is already the right picture
      — 8 KB, and it stands in if the video is slow or blocked. The <video>
      carries the same file as its poster, so there is no swap to see. */
   background-color: #0f0f0f;
   background-image: url("../img/hero-poster.jpg");
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   /* The footage is decoration — nothing here should be clickable. */
   pointer-events: none;
}

.kay-hero__video video {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* Keeps the headline legible over any frame of the loop. */
.kay-hero__scrim {
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(180deg,
         rgba(15, 15, 15, 0.72) 0%,
         rgba(15, 15, 15, 0.55) 38%,
         rgba(15, 15, 15, 0.82) 100%);
}

.kay-hero .container {
   position: relative;
   z-index: 2;
}

.kay-hero .dg-hero-bdr {
   border-left: 1px dashed var(--kay-line);
   border-right: 1px dashed var(--kay-line);
   /* One source of truth with the iframe, so the two can never drift apart. */
   min-height: var(--kay-hero-h);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}

.kay-hero .dg-hero-title {
   color: var(--kay-cream);
   font-weight: 700;
   font-size: 150px;
   line-height: 0.92;
}

.kay-hero .dg-hero-title em {
   font-style: normal;
   color: var(--kay-sand);
   -webkit-text-stroke: 1px var(--kay-sand);
   -webkit-text-fill-color: transparent;
}

.kay-hero .dg-hero-content p {
   color: rgba(250, 247, 241, 0.78);
   font-weight: 500;
}

.kay-hero__meta {
   display: flex;
   flex-wrap: wrap;
   gap: 12px 40px;
   margin-top: 44px;
   padding-top: 26px;
   border-top: 1px solid var(--kay-line);
}

.kay-hero__meta span {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: rgba(231, 224, 208, 0.6);
}

@media only screen and (min-width: 1400px) and (max-width: 1699px) {
   .kay-hero .dg-hero-title {
      font-size: 118px;
   }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
   .kay-hero .dg-hero-title {
      font-size: 92px;
   }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
   .kay-hero .dg-hero-title {
      font-size: 74px;
   }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
   .kay-hero .dg-hero-title {
      font-size: 56px;
   }
}

@media (max-width: 767px) {
   .kay-hero .dg-hero-title {
      font-size: 38px;
   }

   /* The film's own height (~236px on a phone) read as a strip, so the hero is
      given a fixed 400px instead and the frame is centred and trimmed a little
      at the sides — the deliberate trade. 80vh caps it so a phone held sideways
      does not end up with a hero taller than the screen. */
   .kay-hero {
      --kay-hero-h: min(400px, 80vh);
   }

   .kay-hero__meta {
      gap: 8px 24px;
      margin-top: 30px;
   }
}

/*------------------------------------- intro ---*/
/* The headline used to sit on top of the hero footage. The hero is now film
   only, so the words open the page as the first section under it — same
   dashed frame and same display size, so it reads as one continuous idea. */
.kay-intro__inner {
   border-left: 1px dashed var(--kay-line);
   border-right: 1px dashed var(--kay-line);
   padding: 0 clamp(18px, 3.5vw, 60px);
}

.kay-intro__title {
   color: var(--kay-cream);
   font-weight: 700;
   font-size: 150px;
   line-height: 0.92;
   letter-spacing: -0.03em;
   text-transform: uppercase;
   margin-bottom: 80px;
}

.kay-intro__title em {
   font-style: normal;
   color: var(--kay-sand);
   -webkit-text-stroke: 1px var(--kay-sand);
   -webkit-text-fill-color: transparent;
}

.kay-intro__split {
   padding-top: 45px;
   border-top: 1px solid var(--kay-line);
}

.kay-intro__meta {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.kay-intro__meta span {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: rgba(231, 224, 208, 0.6);
}

.kay-intro__text p {
   font-size: 20px;
   line-height: 1.65;
   font-weight: 500;
   color: rgba(250, 247, 241, 0.78);
   margin-bottom: 0;
}

@media only screen and (min-width: 1400px) and (max-width: 1699px) {
   .kay-intro__title {
      font-size: 118px;
   }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
   .kay-intro__title {
      font-size: 92px;
   }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
   .kay-intro__title {
      font-size: 74px;
   }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
   .kay-intro__title {
      font-size: 56px;
      margin-bottom: 55px;
   }
}

@media (max-width: 767px) {
   /* The hero is only as tall as the film here, so the template's 130px of
      breathing room above the headline reads as a hole rather than a pause. */
   .kay-intro {
      padding-top: 70px;
      padding-bottom: 90px;
   }

   .kay-intro__title {
      font-size: 38px;
      margin-bottom: 40px;
   }

   .kay-intro__split {
      padding-top: 32px;
   }

   .kay-intro__meta {
      margin-bottom: 30px;
   }

   .kay-intro__text p {
      font-size: 17px;
   }
}

/*------------------------------------ buttons ---*/
/* Primary action = brand sand on ink, instead of the template's flat white. */
.reak-dark .oit-btn-border.btn-white-bg,
.oit-btn-border.btn-white-bg {
   background-color: var(--kay-sand);
   border-color: var(--kay-sand);
   color: var(--kay-ink);
}

.reak-dark .oit-btn-border.btn-black-bg {
   background-color: var(--kay-ink);
   border-color: var(--kay-sand);
   color: var(--kay-cream);
}

/*--------------------------------- mega menu ---*/
/* 21 services will not fit a 230px dropdown. The services submenu is a panel
   split in two: a rail of groups on the left, and the services of the hovered
   group as cards on the right. Grouping comes from services.category.

   It stays a <ul class="oit-submenu"> because the offcanvas menu is a clone of
   this markup and toggles that selector — everything below is desktop only,
   and the mobile rules at the bottom flatten it back into a plain list. */
.oit-header-menu nav ul li .submenu.kay-mega {
   width: min(1180px, calc(100vw - 40px));
   left: 50%;
   transform: translateX(-50%) perspective(300px) rotateX(-18deg);
   padding: 0;
   background-color: var(--kay-ink);
   border: 1px solid var(--kay-line);
   text-align: left;
}

.oit-header-menu nav ul li:hover .submenu.kay-mega {
   transform: translateX(-50%) perspective(300px) rotateX(0deg);
}

.oit-header-menu nav ul li .submenu.kay-mega > li {
   display: grid;
   grid-template-columns: 260px 1fr;
   gap: 30px;
   padding: 26px;
   margin: 0;
}

/* The template capitalises every word in a submenu, which mangles sentences
   like "AI assistants that remove the repetitive work". */
.kay-mega,
.kay-mega * {
   text-transform: none;
}

/*-- left rail --*/
.kay-mega__rail {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.kay-mega__cat {
   display: flex;
   align-items: center;
   gap: 12px;
   width: 100%;
   padding: 18px 20px;
   border: 1px solid transparent;
   border-radius: 10px;
   background-color: var(--kay-surface);
   font-size: 14px;
   font-weight: 600;
   line-height: 1.35;
   text-align: left;
   color: var(--kay-cream);
   transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.kay-mega__cat i {
   display: inline-flex;
   flex: 0 0 auto;
   color: var(--kay-muted);
   transform: rotate(45deg);
   transition: color 0.25s ease, transform 0.25s ease;
}

.kay-mega__cat:hover,
.kay-mega__cat.is-active {
   background-color: rgba(231, 224, 208, 0.06);
   border-color: var(--kay-sand);
}

.kay-mega__cat:hover i,
.kay-mega__cat.is-active i {
   color: var(--kay-sand);
   transform: rotate(45deg) translate(2px, -2px);
}

/*-- right panels --*/
.kay-mega__panels {
   position: relative;
}

/* Every group has to open at the same height or the panel jumps as you move
   down the rail. Two fixed rows do it: 5 or 6 services both fill exactly two,
   and the title and text below reserve their lines whether they use them or
   not, so a two-line name like "Video Editing & Motion Graphics" costs the
   card nothing. The two rows are declared rather than left to the content,
   so a small group — Events holds one service — still opens full height. */
.kay-mega__panel {
   display: none;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(2, 1fr);
   grid-auto-rows: 1fr;
   gap: 4px 12px;
}

.kay-mega__panel.is-active {
   display: grid;
}

/* The group name is the mobile heading; on desktop the rail already says it. */
.kay-mega__panel-title {
   display: none;
}

.kay-mega__item {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding: 16px 18px;
   border-radius: 10px;
   transition: background-color 0.25s ease;
}

.kay-mega__item:hover {
   background-color: rgba(231, 224, 208, 0.05);
}

.kay-mega__item-title {
   /* Always two lines tall, capped at two lines. */
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   min-height: 2.6em;
   margin-bottom: 8px;
   font-size: 16px;
   font-weight: 600;
   line-height: 1.3;
   color: var(--kay-cream);
   transition: color 0.25s ease;
}

.kay-mega__item:hover .kay-mega__item-title {
   color: var(--kay-sand);
}

.kay-mega__item-text {
   /* Excerpts run to two sentences; always three lines tall, capped at three,
      so a short one does not pull its card up. */
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   min-height: 4.8em;
   margin-bottom: 14px;
   font-size: 13px;
   font-weight: 400;
   line-height: 1.6;
   color: var(--kay-muted);
}

.kay-mega__item-cta {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-top: auto;
   padding: 7px 16px;
   border: 1px solid var(--kay-line);
   border-radius: 100px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase !important;
   color: var(--kay-cream);
   transition: border-color 0.25s ease, color 0.25s ease;
}

.kay-mega__item-cta i {
   display: inline-flex;
   transition: transform 0.25s ease;
}

.kay-mega__item:hover .kay-mega__item-cta {
   border-color: var(--kay-sand);
   color: var(--kay-sand);
}

.kay-mega__item:hover .kay-mega__item-cta i {
   transform: translate(3px, -3px);
}

/* Below 1200px the desktop nav is gone and this markup only exists inside the
   offcanvas clone — flatten it to a grouped list of names. */
@media (max-width: 1199px) {
   .oit-header-menu nav ul li .submenu.kay-mega,
   .oit-menu-mobile .submenu.kay-mega {
      width: auto;
      border: 0;
      background: none;
   }

   .kay-mega__inner {
      display: block !important;
      padding: 0 !important;
   }

   .kay-mega__rail {
      display: none;
   }

   .kay-mega__panel,
   .kay-mega__panel.is-active {
      display: block;
      margin-bottom: 18px;
   }

   .kay-mega__panel-title {
      display: block;
      margin-bottom: 6px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase !important;
      color: var(--kay-sand);
   }

   .kay-mega__item {
      padding: 7px 0;
      border-radius: 0;
   }

   .kay-mega__item:hover {
      background: none;
   }

   /* The desktop cards reserve two lines each; in the list a name is one row. */
   .kay-mega__item-title {
      display: block;
      min-height: 0;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: 500;
   }

   .kay-mega__item-text,
   .kay-mega__item-cta {
      display: none;
   }
}

/*------------------------------- service grid ---*/
/* Listing card used on services.html for all 21 offerings. */
.kay-svc-card {
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
   padding: 40px 36px 36px;
   border: 1px solid var(--kay-line);
   border-radius: 10px;
   background-color: var(--kay-surface);
   transition: all 0.4s ease;
}

.kay-svc-card:hover {
   background-color: var(--kay-ink);
   border-color: rgba(231, 224, 208, 0.35);
   transform: translateY(-6px);
}

.kay-svc-card__num {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.12em;
   color: rgba(231, 224, 208, 0.45);
}

.kay-svc-card__title {
   margin: 18px 0 14px;
   font-size: 24px;
   font-weight: 600;
   line-height: 1.25;
   color: var(--kay-cream);
}

.kay-svc-card__title a {
   color: var(--kay-cream);
}

.kay-svc-card:hover .kay-svc-card__title a {
   color: var(--kay-sand);
}

.kay-svc-card p {
   flex: 1 1 auto;
   margin-bottom: 26px;
   font-size: 15px;
   line-height: 1.65;
   color: var(--kay-muted);
}

.kay-svc-card__link {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--kay-sand);
}

.kay-svc-card__link i {
   transition: transform 0.3s ease;
}

.kay-svc-card:hover .kay-svc-card__link i {
   transform: translate(4px, -4px);
}

@media (max-width: 767px) {
   .kay-svc-card {
      padding: 32px 26px 30px;
   }
}

/*----------------------------- rotating mark ---*/
/* The KA mark replaces the template's chrome blob as the scroll-driven
   rotating element. It is drawn at 665px natural size, so it has to be pulled
   back and dropped in contrast — it is a watermark, not a headline. */
.kay-rotating-mark {
   width: 170px;
   height: auto;
}

/* The template positions these slots for a ~334px blob; the mark is half that,
   so the offsets need pulling back in or it clips off the section edge. */
.kay-mark-slot {
   top: 12% !important;
   right: 8% !important;
   transform: none !important;
}

@media only screen and (max-width: 1599px) {
   .kay-rotating-mark {
      width: 130px;
   }
}

@media (max-width: 991px) {
   .kay-rotating-mark {
      width: 100px;
   }
}

/* The same mark stands in for the template's star between the two "Let's
   Contact" lines. It keeps the star's slow spin, but the mark is twice as wide
   as it is tall, so it is sized down — a wider shape sweeps a wider circle and
   would otherwise clip the words either side of it. */
.oit-text-slider-item span .kay-mark {
   width: 96px;
   height: 47px;
   margin-top: 0;
   vertical-align: middle;
   transform-origin: 50% 50%;
   animation: shape-rotate 10s linear infinite;
}

@media (max-width: 767px) {
   .oit-text-slider-item span .kay-mark {
      width: 62px;
      height: 30px;
   }
}

/*--------------------------- funfact suffix ---*/
/* "+" after the counters.
   The label under the number is a <span> too, and the template sizes every
   span in the block at 16px — so the plus needs its size set explicitly or it
   renders at label size. 0.75em of the number puts the glyph at about half the
   cap height.
   Montserrat centres "+" on the digits' optical middle at equal font sizes
   (ink centre 0.350em against the digits' 0.353em), so shrinking it drops it;
   0.353 − 0.350 × 0.75 = 0.09em of the number is owed back, which is 0.12em
   measured in the plus's own em. */
/* Three classes deep because the label under the number is a <span> too, and
   the template styles it with `.reak-dark .oit-funfact-item span` — which
   would otherwise win and render the plus at 16px in muted grey. */
.oit-funfact-item .oit-funfact-title .kay-funfact-plus {
   font-size: 0.75em;
   font-style: normal;
   margin-left: 0.05em;
   vertical-align: 0.12em;
   color: inherit;
}

/*---------------------------------- careers ---*/
/* Openings vary in summary length; equalise the cards so the CTAs line up. */
.career-area .row > [class*="col-"] {
   display: flex;
}

.career-item {
   display: flex;
   flex-direction: column;
   width: 100%;
}

.career-item .career-meta {
   margin-top: auto;
}

.career-item .title a {
   color: var(--kay-cream);
}

.career-item:hover .title a {
   color: var(--kay-sand);
}

.career-details-meta-box {
   flex-wrap: wrap;
   gap: 12px 0;
}

/*------------------------------ apply form ---*/
.kay-apply {
   padding: 50px 50px 55px;
   border: 1px solid var(--kay-line);
   border-radius: 12px;
   background-color: var(--kay-surface);
}

.kay-apply .postbox-title {
   margin-bottom: 10px;
}

/* Honeypot — hidden from people, visible to naive bots. Not display:none, so
   it stays in the form for anything that reads the DOM. */
.kay-hp {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

.kay-file-box label {
   display: block;
   margin-bottom: 14px;
   font-size: 14px;
   font-weight: 500;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: rgba(250, 247, 241, 0.85);
}

.kay-file-box input[type="file"] {
   display: block;
   width: 100%;
   padding: 16px 18px;
   font-size: 15px;
   color: var(--kay-muted);
   border: 1px dashed var(--kay-line);
   border-radius: 8px;
   background-color: rgba(231, 224, 208, 0.03);
   cursor: pointer;
}

.kay-file-box input[type="file"]::file-selector-button {
   margin-right: 16px;
   padding: 9px 18px;
   font-family: inherit;
   font-size: 13px;
   font-weight: 600;
   color: var(--kay-ink);
   border: 0;
   border-radius: 100px;
   background-color: var(--kay-sand);
   cursor: pointer;
}

.kay-file-box input[type="file"]:hover {
   border-color: rgba(231, 224, 208, 0.35);
}

.kay-file-hint {
   display: block;
   margin-top: 10px;
   font-size: 13px;
   color: rgba(250, 247, 241, 0.45);
}

.kay-consent {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   font-size: 14px;
   line-height: 1.6;
   color: rgba(250, 247, 241, 0.7);
   cursor: pointer;
}

.kay-consent input[type="checkbox"] {
   flex: 0 0 auto;
   width: 18px;
   height: 18px;
   margin-top: 3px;
   accent-color: var(--kay-sand);
   cursor: pointer;
}

.kay-consent a {
   color: var(--kay-sand);
}

@media (max-width: 767px) {
   .kay-apply {
      padding: 34px 24px 38px;
   }
}

/*------------------------------ deliverables ---*/
/* "What's included" list on a single-service page. */
.kay-deliverables {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0 40px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.kay-deliverables li {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 14px 0;
   font-size: 16px;
   font-weight: 500;
   color: rgba(250, 247, 241, 0.82);
   border-bottom: 1px solid var(--kay-line);
}

.kay-deliverables li svg {
   flex: 0 0 auto;
   margin-top: 4px;
   color: var(--kay-sand);
}

@media (max-width: 767px) {
   .kay-deliverables {
      grid-template-columns: 1fr;
      gap: 0;
   }
}

/*------------------------------- misc blocks ---*/
.kay-list-plain {
   margin: 0;
   padding: 0;
   list-style: none;
}

.kay-list-plain li {
   position: relative;
   padding: 12px 0 12px 26px;
   font-size: 16px;
   color: rgba(250, 247, 241, 0.8);
   border-bottom: 1px solid var(--kay-line);
}

.kay-list-plain li::before {
   position: absolute;
   top: 19px;
   left: 0;
   width: 8px;
   height: 8px;
   content: "";
   border-radius: 50%;
   background-color: var(--kay-sand);
}

.kay-chip-row {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}

.kay-chip {
   padding: 10px 20px;
   font-size: 14px;
   font-weight: 500;
   border: 1px solid var(--kay-line);
   border-radius: 100px;
   color: rgba(250, 247, 241, 0.8);
   transition: all 0.3s ease;
}

.kay-chip:hover {
   border-color: var(--kay-sand);
   color: var(--kay-sand);
}

/*----------------------------------- thank you ---*/
/* Confirmation page. The mark stands in for the tick every other site uses —
   it says "this worked" without borrowing an icon set the brand does not own. */
.kay-thanks__mark {
   display: inline-block;
   margin-bottom: 34px;
   color: var(--kay-sand);
}

.kay-thanks__mark .kay-mark {
   width: 132px;
   height: 64px;
}

@media (max-width: 767px) {
   .kay-thanks {
      padding-top: 130px;
      padding-bottom: 100px;
   }

   .kay-thanks__mark {
      margin-bottom: 24px;
   }

   .kay-thanks__mark .kay-mark {
      width: 96px;
      height: 47px;
   }
}

.kay-eyebrow {
   display: inline-block;
   margin-bottom: 18px;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: rgba(231, 224, 208, 0.55);
}

/* Section dividers the brand layer introduces */
.kay-rule {
   height: 1px;
   background-color: var(--kay-line);
}

/*------------------------- dynamic-site additions ---*/
/* Server-rendered form error, shown above the application form. */
.kay-form-error {
   padding: 14px 20px;
   font-size: 15px;
   border: 1px solid rgba(226, 87, 76, .5);
   border-radius: 8px;
   background: rgba(226, 87, 76, .1);
   color: #f0a49d;
}

/* Legal documents come out of the editor as plain h2/p/ul. */
.kay-legal h2 {
   margin: 46px 0 20px;
   font-size: 30px;
   font-weight: 600;
   color: var(--kay-cream);
}

.kay-legal h3 {
   margin: 32px 0 14px;
   font-size: 22px;
   color: var(--kay-cream);
}

.kay-legal p {
   margin-bottom: 22px;
   font-size: 16px;
   line-height: 1.75;
}

.kay-legal ul {
   margin: 0 0 26px;
   padding: 0;
   list-style: none;
}

.kay-legal li {
   position: relative;
   padding: 11px 0 11px 26px;
   font-size: 16px;
   color: rgba(250, 247, 241, .8);
   border-bottom: 1px solid var(--kay-line);
}

.kay-legal li::before {
   position: absolute;
   top: 19px;
   left: 0;
   width: 8px;
   height: 8px;
   content: "";
   border-radius: 50%;
   background-color: var(--kay-sand);
}

/* Rich text coming from the admin on service and post pages. */
.postbox-dsc h2,
.postbox-dsc h3 {
   margin: 34px 0 16px;
   color: var(--kay-cream);
}

.postbox-dsc p {
   margin-bottom: 22px;
   line-height: 1.75;
}

.postbox-dsc ul {
   margin: 0 0 24px 20px;
}

.postbox-dsc li {
   margin-bottom: 10px;
   color: rgba(250, 247, 241, .8);
}

/*--------------------------- about: global map ---*/
/* The artwork is 3:2 and light-backed. It gets its own rule rather than the
   template's .oit-about-thumb sizing, which assumes a portrait crop. */
.kay-about-map {
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid var(--kay-line);
   background: #f2efe9;
}

.kay-about-map img {
   display: block;
   width: 100%;
   height: auto;          /* never cropped — the whole map is always visible */
   border-radius: 12px;
}

@media (max-width: 991px) {
   .kay-about-map {
      margin-bottom: 50px;
   }
}

/*------------------------ service panel artwork ---*/
/* The supplied artwork is square; the template's slot is 430x391, which would
   squash it. Making the slot square shows each image whole, uncropped. */
.kay-service-thumb {
   width: 430px;
   height: 430px;
   flex: 0 0 430px;
}

.kay-service-thumb img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;   /* square in, square out — nothing to crop */
   border-radius: 12px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
   .kay-service-thumb {
      width: 340px;
      height: 340px;
      flex: 0 0 340px;
   }
}

@media (max-width: 1199px) {
   .kay-service-thumb {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      flex: auto;
   }
}

/*-------- service panel: artwork fits the screen ---*/
/* Below 992px the card stacks — artwork under text — and the stacking
   animation pins it, so a card taller than the viewport has its bottom cut off
   for the whole time it is held. The artwork is the one part that can give:
   everything above it is text with a floor on how small it can go, so the
   square is what gets tied to the screen. 420px covers the tallest the rest of
   the card gets, plus the strip above the pin line; whatever is left of the
   screen is the artwork's, up to its natural full width. On an iPhone 14 that
   still comes out full size, so the design loses nothing where there is room.

   svh, not vh: svh is the viewport with the browser's own bars showing — the
   height the card actually has on a phone, not the taller one it gets once the
   address bar scrolls away. vh first as the fallback. */
@media (max-width: 991px) {
   .dg-service-style .kay-service-thumb {
      max-width: 34vh;
      max-width: min(100%, calc(93svh - 420px));
      margin-left: auto;
      margin-right: auto;
   }
}

/*----------------- service panel: phone layout ---*/
/* On a phone the service card is the whole screen, and the stacking animation
   pins it — so anything taller than the viewport gets its bottom cut off for
   the entire time it is held. What follows is the same card with the air taken
   out: smaller type and a tighter rhythm, which brings it back inside one
   screen without touching the artwork.

   The deliverables stay one per line on purpose. Two per line was the obvious
   saving, but the longest of them — "Mobile Apps (iOS & Android)" — wants about
   230px of text and half a 390px card offers 140, so every long item would
   break across two lines. A list that fits is worth more than a list that is
   short. */
@media (max-width: 767px) {
   .dg-service-style .oit-service-item {
      padding: 18px;
   }

   .dg-service-style .oit-service-title {
      font-size: 25px;
      line-height: 30px;
      margin-bottom: 12px;
   }

   .dg-service-style .oit-service-content p {
      font-size: 15px;
      line-height: 23px;
      margin-bottom: 18px;
      padding-bottom: 16px;
   }

   .dg-service-style .oit-service-content {
      padding-bottom: 18px;
   }

   .dg-service-style .oit-service-category {
      margin-bottom: 9px;
   }

   .dg-service-style .oit-service-category span {
      font-size: 14px;
      line-height: 20px;
   }

   /* The star ships with width/height attributes on the <svg>; those are
      presentation attributes, so a plain rule beats them. */
   .dg-service-style .oit-service-category svg {
      width: 16px;
      height: 20px;
      margin-right: 8px;
   }
}

/*--------------------- service detail artwork ---*/
/* No frame or backdrop: the artwork carries its own. The width cap lives on
   the figure, not the image — with it on the image, the figure stayed full
   width on wide screens and its background showed as a band either side. */
.kay-service-figure {
   max-width: 1080px;
   margin: 0 auto;
   border-radius: 14px;
   overflow: hidden;
}

.kay-service-figure img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 14px;
}

/*---------------------------------------------------------------- founder --*/
/* Three columns: the word, the portrait, the approach. The portrait sits in
   the middle on desktop and moves under the opening paragraphs on tablet,
   because that is the reading order the copy was written for. */
.kay-founder__word {
   font-size: clamp(56px, 6.6vw, 104px);
   line-height: 0.92;
   letter-spacing: -0.04em;
   color: var(--oit-clr-white);
   margin-bottom: 34px;
}

.kay-founder__heading {
   font-size: 26px;
   line-height: 1.28;
   letter-spacing: -0.02em;
   text-transform: uppercase;
   color: var(--oit-clr-white);
   margin-bottom: 26px;
}

.kay-founder__col p {
   margin-bottom: 20px;
   max-width: 46ch;
}

.kay-founder__col p:last-child { margin-bottom: 0 }

.kay-founder__figure {
   position: relative;
   margin: 0 auto;
   max-width: 420px;
   border-radius: 16px;
   overflow: hidden;
   background: var(--kay-sand);
}

.kay-founder__figure img {
   display: block;
   width: 100%;
   height: auto;
}

/* The name plate from the brand deck: a dark pill resting on the portrait. */
.kay-founder__name {
   position: absolute;
   left: 50%;
   bottom: 22px;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
   gap: 18px;
   width: max-content;
   max-width: calc(100% - 32px);
   padding: 12px 14px 12px 24px;
   border-radius: 999px;
   background: rgba(15, 15, 15, 0.92);
   backdrop-filter: blur(6px);
}

.kay-founder__name span {
   display: flex;
   flex-direction: column;
   font-size: 13px;
   line-height: 1.35;
   letter-spacing: 0.02em;
   text-transform: uppercase;
   color: var(--kay-muted);
}

.kay-founder__name strong {
   font-weight: 600;
   color: var(--oit-clr-white);
}

.kay-founder__name i {
   display: grid;
   place-items: center;
   flex: 0 0 auto;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: var(--oit-clr-white);
}

.kay-founder__name i svg { width: 14px; height: 14px }
.kay-founder__name i svg path { fill: var(--kay-ink) }

@media (max-width: 1199px) {
   .kay-founder__figure { margin: 50px auto }
   .kay-founder__col p { max-width: none }
}

@media (max-width: 575px) {
   .kay-founder__name {
      left: 16px;
      right: 16px;
      transform: none;
      width: auto;
      max-width: none;
      justify-content: space-between;
   }
}