/* custom styles */

h1, h2, h3, h4, h5, h6, p {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

@media (min-width: 768px) {
    .hs-content-id-372823271111 .row-number-1 .span10 {
        margin-left: 0;
        width: 85.4681%;
  }
}

@media (min-width: 768px) {
    .dnd-column.span5 .widget-type-header {
         margin-left: 0;
  }
}

/* Flush the nav column against whatever sits directly to its right (removes grid gutter) */
@media (min-width: 768px) {
  .dnd-section[class*="force-full-width-section"] .span2 + .span10 {
    margin-left: 0;
    width: 85.106383%;
  }

  .dnd-section[class*="force-full-width-section"] .span2 + .span5 {
    margin-left: 0;
    width: 42.553191%;
  }
}

/* On mobile, inset full-bleed images by the same 32px used for text so both align to the same left edge and the image reads as centered. This only targets true mobile (<=767px); tablet (768-1023px) and desktop keep the existing flush-column layout untouched. */
@media (max-width: 767px) {
  .dnd-section img:not(.tj-navigation__logo-img) {
    display: block;
    box-sizing: border-box;
    padding-left: 32px;
    padding-right: 32px;
  }

  .dnd-column {
    text-align: left;
  }
}

/* Mobile only: crop every photo to a 16:9 rectangle that fills its container width, matching the video embed ratio */
@media (max-width: 767px) {
  .dnd-section img:not(.tj-navigation__logo-img) {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

/* Mobile only: give text-only content columns (e.g. project details lists) the same 32px inset used elsewhere, without touching columns that hold full-bleed photos or video */
@media (max-width: 767px) {
  .dnd-section .dnd-column:is(.span8,.span9,.span10,.span11,.span12):has(.hs_cos_wrapper_type_rich_text):not(:has(img)):not(:has(iframe)) {
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
  }
}

/* Rich text links: dark gray hover state, matching the side nav hover effect */
.hs_cos_wrapper_type_rich_text a:hover {
  color: rgb(51, 51, 51);
}

/* ===== Mobile-only alignment fixes (headers/captions/images/video) ===== */

/* Global footer: "Follow Us" and "Legal" used to get a targeted 32px
 *    inset here because the row itself had no left padding. The row now
 *    gets its own 32px gutter directly (see the "Global footer (bottom
 *    row)" fix further down, which covers the whole footer), so adding it
 *    here too would double it to 64px. Removed. */


/* Global "page title" header widget used on Contact Us, Terms and Conditions,
   and Privacy Policy: it ships with a 40px inset instead of the 32px used
   everywhere else. Consistent across all three pages, so fixed once. */
@media (max-width: 767px) {
  #hs_cos_wrapper_widget_1788046332845 {
    padding-left: 32px !important;
  }
}

/* Home (content-id 372823271111) */
/* Heading fix, corrected: the previous rule targeted the inline rich-text
   SPAN, whose padding does not shift a block-level H1-H6 child. Targeting
   the block-level outer wrapper (no trailing underscore) actually shifts
   the heading text. */
@media (max-width: 767px) {
  .hs-content-id-372823271111 #hs_cos_wrapper_widget_1788286541531,
  .hs-content-id-372823271111 #hs_cos_wrapper_widget_1788110771879,
  .hs-content-id-372823271111 #hs_cos_wrapper_module_1788110822463,
  .hs-content-id-372823271111 #hs_cos_wrapper_module_1788111153589 {
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
  }
}

/* Home: make the Sadie Yoon project video the same full width as the SDCA
   and La Caille photos above it. */
@media (max-width: 767px) {
  .hs-content-id-372823271111 .dnd_area-row-3-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* La Caille (content-id 390394408668): an image row loses 32px on the right
   from a page-generated inline rule, making that photo narrower than the
   others. */
@media (max-width: 767px) {
  .hs-content-id-390394408668 .dnd_area-row-3-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Identity Design (content-id 390452218611) */
@media (max-width: 767px) {
  .hs-content-id-390452218611 .dnd_area-row-2-padding {
    padding-right: 0 !important;
  }
  .hs-content-id-390452218611 #hs_cos_wrapper_widget_1788286541531,
  .hs-content-id-390452218611 #hs_cos_wrapper_module_1788110822463,
  .hs-content-id-390452218611 #hs_cos_wrapper_widget_1788110771879 {
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
  }
}

/* Weatherly Paper (content-id 390367248065) */
@media (max-width: 767px) {
  .hs-content-id-390367248065 .dnd_area-row-3-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Art Direction (content-id 389824626367) - the "Weatherly Paper" related
   card is already correctly aligned here, so only the other two are fixed. */
@media (max-width: 767px) {
  .hs-content-id-389824626367 .dnd_area-row-2-padding {
    padding-right: 0 !important;
  }
  .hs-content-id-389824626367 #hs_cos_wrapper_widget_1788286541531,
  .hs-content-id-389824626367 #hs_cos_wrapper_module_1788110822463 {
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
  }
}

/* Dew (content-id 390367170291) */
@media (max-width: 767px) {
  .hs-content-id-390367170291 .dnd_area-row-3-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* SDCA (content-id 390367181531) */
@media (max-width: 767px) {
  .hs-content-id-390367181531 .dnd_area-row-3-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Digital Experiences (content-id 389824647888) */
@media (max-width: 767px) {
  .hs-content-id-389824647888 .dnd_area-row-2-padding {
    padding-right: 0 !important;
  }
  .hs-content-id-389824647888 #hs_cos_wrapper_widget_1788286541531,
  .hs-content-id-389824647888 #hs_cos_wrapper_module_1788110822463,
  .hs-content-id-389824647888 #hs_cos_wrapper_widget_1788110771879 {
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
  }
}

/* Sadie Yoon (content-id 390367162043) */
@media (max-width: 767px) {
  .hs-content-id-390367162043 .dnd_area-row-3-padding,
  .hs-content-id-390367162043 .dnd_area-row-4-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Topsail Wealth Management (content-id 390367180478) */
@media (max-width: 767px) {
  .hs-content-id-390367180478 .dnd_area-row-3-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Brand Strategy (content-id 389824652989) */
@media (max-width: 767px) {
  .hs-content-id-389824652989 .dnd_area-row-2-padding {
    padding-right: 0 !important;
  }
  .hs-content-id-389824652989 #hs_cos_wrapper_widget_1788286541531,
  .hs-content-id-389824652989 #hs_cos_wrapper_module_1788110822463,
  .hs-content-id-389824652989 #hs_cos_wrapper_widget_1788110771879 {
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
  }
}

/* Terms and Conditions (content-id 389224059640): body headings ship with a
   40px inset instead of 32px. */
@media (max-width: 767px) {
  .hs-content-id-389224059640 #hs_cos_wrapper_widget_1788186901085 {
    padding-left: 32px !important;
  }
}

/* Privacy Policy (content-id 389224196808): same 40px-vs-32px mismatch. */
@media (max-width: 767px) {
  .hs-content-id-389224196808 #hs_cos_wrapper_widget_1788185592026 {
    padding-left: 32px !important;
  }
}
/* Mobile only: match embedded videos to the photo width. Photos are full-bleed
 *    border boxes with 32px of side padding, so the visible image is inset 32px on
 *    each side; video embeds had no inset and ran edge to edge. The embed's aspect
 *    box is percentage-based (padding-top: 56.25%), so narrowing the container
 *    scales its height too and 16:9 is preserved. .embed_container is inline-block
 *    by default, hence display:block so the auto margins can centre it. */
@media (max-width: 767px) { .dnd-section .embed_container:has(iframe) { display: block !important; width: calc(100% - 64px) !important; margin-left: auto !important; margin-right: auto !important; } }

/* Global footer (bottom row): logo + copyright and the search bar row are
 *    shared across every page. Fixes below:
   *   1) The logo img inherits the sitewide mobile image rule's 32px
   * side padding. With box-sizing:border-box that leaves an 88px-wide
   * box only 24px of content, rendering this wide, short wordmark at
   * roughly 24x3px - an illegible smudge, indented 32px past every
   * other footer element. Drop the padding (the row itself already
   * supplies the 32px gutter) and size the logo to 104px wide, which
   * puts its cap height at 13px: the same letter size as the stacked
   * lockup in the header, so the two mirror each other. The explicit
   * ratio and max-height override keep the height off the sitewide
   * 16:9 crop and img/svg max-height:100% rules.
 *    2) The copyright line ships with an inline text-align:right, and the
 *       logo/copyright row uses a 40px inset instead of the 32px used
 *       everywhere else. Left-align both and normalize the inset.
 *    3) The search bar row has no left inset at all (0px), so it hugs the
 *       screen edge instead of lining up with the links above it and the
 *       logo/copyright below it. Match it to the same 32px gutter. */
@media (max-width: 767px) {
    .hs_cos_wrapper_type_logo img {
          aspect-ratio: 8 / 1 !important;
          object-fit: contain !important;
      max-height: none !important;
      padding: 0 !important;
      width: 104px !important;
  }
  
    .cell_1788209941965-vertical-alignment {
          align-items: flex-start !important;
          text-align: left !important;
  }
  
    .cell_1788217951241-vertical-alignment,
    .cell_1788217951241-vertical-alignment p,
    .cell_1788217951241-vertical-alignment span {
          text-align: left !important;
  }
  
    /* Footer spacing: separate the two link lists, give the search bar room below "Terms and Conditions", and tighten the gap beneath it so its bottom margin matches its 32px side gutters. */
    /* The .dnd-section prefix is load-bearing: each page's own inline style block sets .cell_ID-margin with !important, and at equal specificity that later block wins. */
.dnd-section   .cell_1788196671991-vertical-alignment { margin-top: 12px !important; }
.dnd-section   .cell_1788196684143-vertical-alignment { margin-top: 32px !important; }
    .dnd-section:has(> .row-fluid > .cell_1788196667225-vertical-alignment) { padding-bottom: 18px !important; }
    .dnd-section:has(> .row-fluid > .cell_1788209941965-vertical-alignment) { padding-top: 32px !important; }
  
  .dnd-section:has(> .row-fluid > .cell_1788196667225-vertical-alignment),
    .dnd-section:has(> .row-fluid > .cell_1788209941965-vertical-alignment) {
          padding-left: 32px !important;
          padding-right: 32px !important;
}