/*
Theme Name: Unicon Child Theme
Theme URI: http://themeforest.net/user/minti
Description: Unicon Child Theme for your Customizations.
Author: minti
Author URI: http://mintithemes.com
Template: unicon
Version: 1.1
*/


/* ---------------------------------------------------------------
   Portfolio: no-slider layout as a grid.
   First image stays full width beside the description; every image
   after it sits three to a row underneath.
   Applies to portfolios set to layout "sidebyside-ns".
   --------------------------------------------------------------- */
.portfolio-detail .portfolio-noslider {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.portfolio-detail .portfolio-noslider .noslide:first-child {
    grid-column: 1 / -1;
    margin-bottom: 6px;
}
.portfolio-detail .portfolio-noslider .noslide {
    margin: 0;
}
.portfolio-detail .portfolio-noslider .noslide img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 767px) {
    .portfolio-detail .portfolio-noslider { grid-template-columns: 1fr; gap: 12px; }
}

/* Full-width three-across grid beneath the lead image + description. */
.portfolio-detail .portfolio-grid-below.columns {
    clear: both;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}
.portfolio-detail .portfolio-grid-below .noslide { margin: 0; }
.portfolio-detail .portfolio-grid-below .noslide img { width: 100%; height: auto; display: block; }
/* Every cell shows the same 3:2 window, so one tall frame cannot stretch the
   row it sits in and leave gaps beside it. Frames off that ratio are cropped
   to fit rather than scaled, from the bottom, keeping the head at the top. */
.portfolio-detail .portfolio-grid-below .noslide img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: top center;
}
/* A cell that plays a film fills its column the same way a still does. The
   films are 16:9 against the grid's 3:2 stills, so the cell sits shorter in
   its row rather than the footage being cropped to fit. */
.portfolio-detail .portfolio-grid-below .noslide-video video { width: 100%; height: auto; display: block; background: #000; }
/* Tablet: two across */
@media (max-width: 1023px) {
    .portfolio-detail .portfolio-grid-below.columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
/* Phone: one image per row, never two */
@media (max-width: 767px) {
    .portfolio-detail .portfolio-grid-below.columns { grid-template-columns: 1fr; gap: 12px; }
}
/* clearfix pseudo-elements would otherwise be placed as grid items */
.portfolio-detail .portfolio-grid-below.columns::before,
.portfolio-detail .portfolio-grid-below.columns::after { content: none; }
/* ---------------------------------------------------------------
   Header logo: focus pull.
   The mark resolves out of defocus letter by letter and settles to
   the exact static logo. Replays once a minute. Glyph geometry is
   set in child-logo-motion.js; this file only carries the motion.
   --------------------------------------------------------------- */
.hsl-logo-motion-host {
    position: relative;
}
img.hsl-logo-hidden {
    opacity: 0;
}
.hsl-logo-motion {
    position: absolute;
    display: block;
    pointer-events: none;
}
.hsl-logo-motion__art {
    position: absolute;
    left: 0;
    top: 0;
    width: 732px;
    height: 110px;
    transform-origin: 0 0;
}
.hsl-glyph {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 732px 110px;
}

/* Settled state is the default, so the mark is correct with the
   animation removed — including for reduced-motion visitors. */
.hsl-logo-motion.is-playing .hsl-glyph {
    animation: hslFocusPull 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: filter, opacity, transform;
}

@keyframes hslFocusPull {
    0%   { opacity: 0; filter: blur(14px); transform: translateX(var(--hsl-spread, 0)); }
    55%  { opacity: 1; }
    100% { opacity: 1; filter: blur(0);    transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hsl-logo-motion.is-playing .hsl-glyph { animation: none; }
}

/* ---------------------------------------------------------------
   WhatsApp contact — floating button on every page, plus an inline
   button on the contact page. Markup comes from child functions.php.
   --------------------------------------------------------------- */
.hsl-wa-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 4px;
    background: linear-gradient(180deg, #5d9306 0%, #84bf16 55%, #76ac0e 100%);
    color: #fff !important;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}
.hsl-wa-inline:hover,
.hsl-wa-inline:focus { background: linear-gradient(180deg, #4f7d05 0%, #76ac0e 55%, #689a0c 100%); color: #fff !important; }

/* Large variant, used under the contact page's left-hand column. Sized up from
   the default rather than replacing it, so the topbar button is unaffected. */
.hsl-wa-inline--lg {
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    padding: 18px 16px;
    font-size: 18px;
    border-radius: 5px;
    white-space: nowrap;
}

.hsl-wa-contact { margin-top: 22px; }

/* Clear of the thumb on phones, and out of the way of any sticky footer. */
@media (max-width: 767px) {
}
@media (prefers-reduced-motion: reduce) {
}

/* Top bar: the WhatsApp link that replaced the social icons. Rendered by the
   theme from the "Topbar 2026" menu in the topbar_navigation location. */
#topbar .topbar-col2 div,
#topbar .topbar-col2 ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#topbar .topbar-col2 li {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
}
#topbar .topbar-col2 a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 13px;
    border-radius: 3px;
    background: linear-gradient(180deg, #5d9306 0%, #84bf16 55%, #76ac0e 100%);
    color: #fff !important;
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none;
}
#topbar .topbar-col2 a:hover,
#topbar .topbar-col2 a:focus { background: linear-gradient(180deg, #4f7d05 0%, #76ac0e 55%, #689a0c 100%); color: #fff !important; }
#topbar .topbar-col2 a::before {
    font-family: FontAwesome;
    content: "\f232";
    font-size: 16px;
    line-height: 1;
    /* The theme forces display:inline-block on this link, so the flex `gap`
       above never applies. Space the icon off the word with a margin. */
    margin-right: 9px;
}

/* ---------------------------------------------------------------
   Sticky header band: top bar (phone + CHAT) locked to the
   logo/nav bar, both pinned to the top on scroll.

   The theme's own sticky header is BROKEN: it loads Waypoints v2
   (2014) and calls .waypoint('sticky'), which initialises (the
   .sticky-wrapper is created) but never applies its `stuck` class
   under jQuery 3.7.1. So the logo/nav bar scrolled away too.

   Rather than patch a decade-old library, both bands are fixed in
   CSS and the theme's placeholder wrapper is neutralised.

   Scoped to >=960px: the theme disables sticky below
   style_mobileheaderbp (959px) and on mobile user agents.
   --------------------------------------------------------------- */
@media (min-width: 960px) {

    #topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
    }

    #header.header-v1 {
        position: fixed !important;
        top: 42px;                      /* clears the top bar */
        left: 0;
        right: 0;
        width: 100%;
        z-index: 9999;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
    }

    /* Waypoints' placeholder would otherwise reserve height twice. */
    .sticky-wrapper {
        height: 0 !important;
        min-height: 0 !important;
    }

    /* Both bands are out of flow, so give their height back:
       42px top bar + 90px header (style_headerheight). */
    .site-wrapper { padding-top: 132px; }
}

/* ---------------------------------------------------------------
   Video slot on the Augmented Imagery page, dimensioned to match
   the home page slider exactly.

   MetaSlider 6882 serves 2320x994 source art and renders it at
   1160x497 inside the 1200px column, a ratio of 2.334:1. The box
   below holds that ratio at any width, so the video will occupy
   the same footprint as the slider does on the home page.

   Replace .hsl-video-placeholder with a <video class="hsl-video">
   using the same aspect ratio and nothing else needs to change.
   --------------------------------------------------------------- */
.hsl-video-placeholder,
.hsl-video {
    display: block;
    width: 100%;
    aspect-ratio: 2320 / 994;
    background: #eceae8;
}
.hsl-video-placeholder {
    position: relative;
    box-sizing: border-box;     /* keep the dashed border inside the 1160x497 box */
    border: 1px dashed #c9c5c1;
    color: #8a8580;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
}
.hsl-video-placeholder > span {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    line-height: 1.9;
}
.hsl-video { object-fit: cover; }

/* Older browsers without aspect-ratio: 994 / 2320 = 42.845% */
@supports not (aspect-ratio: 1 / 1) {
    .hsl-video-placeholder,
    .hsl-video { height: 0; padding-bottom: 42.845%; }
}

/* Self-hosted video in a portfolio lead slot. */
.hsl-portfolio-video {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
}

/* Section headings between portfolio grid blocks. */
.portfolio-grid-heading {
    clear: both;
    margin: 46px 0 18px;
}
.portfolio-grid-heading h2 {
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #e6e3e0;
}
.portfolio-grid-below { margin-bottom: 6px; }

/* Client logo strip sitting under a lead image, matched to its width. */
.hsl-lead-image,
.hsl-logo-strip {
    display: block;
    width: 100%;
    height: auto;
}
.hsl-logo-strip { margin-top: 18px; }

/* ---------------------------------------------------------------
   Endorsement fade.
   HEADSHOT LONDON keeps the focus pull. "/ Augmented Imagery"
   simply fades up as one piece once the parent mark has settled.
   Declared after the focus-pull rules so it wins on order.
   --------------------------------------------------------------- */
.hsl-logo-motion.is-playing .hsl-glyph--fade {
    animation: hslFadeIn 1.1s ease-out both;
    filter: none;
    transform: none;
}

@keyframes hslFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hsl-logo-motion.is-playing .hsl-glyph--fade { animation: none; }
}

/* ---------------------------------------------------------------
   Portfolio detail pages: pull the grid up so it is not pushed
   below the fold. Measured contributors to the old gap were
   #content padding 60px, an empty trailing paragraph at 45px,
   the block margin at 20px and the grid margin at 28px.
   --------------------------------------------------------------- */
.single-portfolio #content { padding-top: 32px; }

.single-portfolio .portfolio-sidebyside { margin-bottom: 8px; }

.single-portfolio .portfolio-detail-description-text > p:last-child { margin-bottom: 0; }
/* Empty paragraphs left by a trailing &nbsp; in the content. */
.single-portfolio .portfolio-detail-description-text > p:empty { display: none; }

.single-portfolio .portfolio-grid-below { margin-top: 8px; margin-bottom: 6px; }

/* Tucked up under the description: the section heading belongs to the grid
   it introduces, not floating midway between the two. */
.single-portfolio .portfolio-grid-heading { margin: 6px 0 0; }
.single-portfolio .portfolio-grid-heading h2 { padding-bottom: 8px; }

/* ---------------------------------------------------------------
   Heading scale.
   The theme set H1 at 28px against 13px body copy, a 2.15x jump
   that made titles dominate the text. Stepped down, keeping the
   interval between levels so the hierarchy still reads.
     H1  28 -> 24     H2  24 -> 21
   --------------------------------------------------------------- */
#content h1,
.portfolio-detail-description h1,
.wpb_text_column h1 {
    font-size: 24px;
    line-height: 1.35;
}
#content h2,
.portfolio-detail-description h2,
.wpb_text_column h2,
.portfolio-grid-heading h2 {
    font-size: 21px;
    line-height: 1.35;
}

/* ---------------------------------------------------------------------------
   The AI switch sits at the end of the header lockup, immediately after
   "/ Augmented Imagery", so it reads as switching that service on. It is a
   plain link injected into #logo by js/logo-motion.js; #logo is position:
   relative, so the switch travels with the lockup rather than being pinned to
   the header.

   State comes from the body classes WordPress already sets: red and OFF
   everywhere, green and ON on the Augmented Imagery page (page-id-7017)
   and on the Augmented Imagery Portfolio (postid-5616).
   Hovering the OFF state slides it to ON, showing what the click will do.

   The link text stays in the DOM and is hidden with font-size:0, so screen
   readers and search engines still read "Augmented Imagery".

   The reference design used a separate element for the inner lip; those are
   all inset shadows, so they are folded into the track's own box-shadow. There
   is no outer shadow, so the switch reads as cut into the page.
   --------------------------------------------------------------------------- */
.hsl-ai-toggle {
    position: absolute;
    left: 465px;
    top: 9px;
    display: block;
    width: 85px;
    height: 34px;
    padding: 0;
    margin: 0;
    border-radius: 999px;
    font-size: 0;
    overflow: hidden;
    z-index: 5;
    background: linear-gradient(180deg, #b91f17 0%, #e54438 55%, #d52c22 100%);
    box-shadow:
        inset 0 2px 4px rgba(65, 0, 0, 0.42),
        inset 0 -1px 2px rgba(255, 255, 255, 0.16),
        inset 2px 0 3px rgba(0, 0, 0, 0.14),
        inset -2px 0 3px rgba(255, 255, 255, 0.07),
        inset 0 1px 2px rgba(0, 0, 0, 0.38),
        inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    transition: background 260ms ease, box-shadow 260ms ease;
}
.hsl-ai-toggle::before {
    content: "AI OFF";
    position: absolute;
    top: 0;
    left: 34px;
    right: 5px;
    line-height: 34px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.015em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.36);
    z-index: 2;
    transition: left 260ms ease, right 260ms ease;
}
.hsl-ai-toggle::after {
    content: "";
    display: block;
    position: absolute;
    box-sizing: border-box;
    top: 3px;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: radial-gradient(circle at 38% 32%, #ffffff 0 22%, #f3f3f3 48%, #d7d7d7 78%, #c4c4c4 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.20),
        inset 0 1px 2px rgba(255, 255, 255, 0.95),
        inset 0 -1px 2px rgba(0, 0, 0, 0.13);
    z-index: 3;
    transition: transform 260ms cubic-bezier(.2, .8, .2, 1);
}

/* ON: hovering previews it, and it sticks once you are on the page */
.hsl-ai-toggle:hover,
body.page-id-7017 .hsl-ai-toggle,
body.postid-5616 .hsl-ai-toggle {
    background: linear-gradient(180deg, #5d9306 0%, #84bf16 55%, #76ac0e 100%);
    box-shadow:
        inset 0 2px 4px rgba(22, 57, 0, 0.42),
        inset 0 -1px 2px rgba(255, 255, 255, 0.16),
        inset 2px 0 3px rgba(0, 0, 0, 0.12),
        inset -2px 0 3px rgba(255, 255, 255, 0.07),
        inset 0 1px 2px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.hsl-ai-toggle:hover::before,
body.page-id-7017 .hsl-ai-toggle::before,
body.postid-5616 .hsl-ai-toggle::before {
    content: "AI ON";
    left: 5px;
    right: 34px;
}
.hsl-ai-toggle:hover::after,
body.page-id-7017 .hsl-ai-toggle::after,
body.postid-5616 .hsl-ai-toggle::after {
    transform: translateX(51px);
}
.hsl-ai-toggle:focus-visible {
    outline: 3px solid rgba(28, 105, 255, 0.35);
    outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
    .hsl-ai-toggle,
    .hsl-ai-toggle::before,
    .hsl-ai-toggle::after { transition: none; }
}
@media (max-width: 1199px) {
    /* the lockup and the nav get close at narrower widths, so the switch goes */
    .hsl-ai-toggle { display: none; }
}

/* ---------------------------------------------------------------------------
   A portfolio section can carry a line of explanation under its heading, set
   in hsl_grid_sections after " - ". It reads as a caption, so it sits tight
   under the h2 and close to the images it describes.

   Both selectors are scoped to .portfolio-detail because the grid's own rule
   is .portfolio-detail .portfolio-grid-below.columns, which outweighs a
   two-class selector.
   --------------------------------------------------------------------------- */
.portfolio-detail .portfolio-grid-heading .portfolio-grid-note {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.45;
    color: #777;
}
.portfolio-detail .portfolio-grid-heading + .portfolio-grid-below.columns {
    margin-top: 14px;
}

/* --- body copy size ---
   The parent theme sets 13px on <body> and lets everything inherit, which is
   why 265 of the 338 elements on a page compute to 13px. Raising the base
   would inflate the header, nav, topbar and footer with it, so this is scoped
   to the three containers that actually hold prose: page copy built in the
   page builder, the portfolio description column, and blog posts.

   The theme gives <p> a margin but no font-size, so setting the container is
   enough for paragraphs and lists to follow.

   Leading drops from 1.90 to 1.60. At 13px the looser figure was compensating
   for small type; at 16px it would just push the columns apart. */
.wpb_text_column,
.portfolio-detail-description-text,
.entry-content {
    font-size: 16px;
    line-height: 1.6;
}

/* Caption laid over a grid video. Sits at the top so it clears the native
   playback controls along the bottom edge, and ignores pointer events so it
   never swallows a click meant for the play button. */
.noslide-video {
    position: relative;
}

.hsl-video-caption {
    position: absolute;
    top: 8px;
    left: 8px;
    max-width: calc(100% - 16px);
    padding: 4px 9px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0.02em;
    pointer-events: none;
}

/* The line that runs through everything. Set apart from the body copy so it
   reads as a statement rather than another sentence. */
.hsl-signoff {
    margin: 38px 0 0;
    padding-top: 24px;
    border-top: 1px solid #e2e2e2;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 0.005em;
    color: #231f20;
}
@media (max-width: 640px) {
    .hsl-signoff { font-size: 17px; margin-top: 30px; padding-top: 20px; }
}

/* The home hero leads to the film. A still that is clickable has to look
   clickable, so it carries a play cue rather than relying on the cursor. */
.hsl-hero-link {
    position: relative;
    display: block;
    line-height: 0;
}
.hsl-hero-link .hsl-home-hero {
    width: 100%;
    height: auto;
    display: block;
}
.hsl-hero-play {
    position: absolute;
    left: 7.36%;
    bottom: 8%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px 11px 16px;
    background: rgba(255, 255, 255, 0.94);
    color: #231f20;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    transition: background 0.18s ease, transform 0.18s ease;
}
.hsl-hero-play::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 11px solid #231f20;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}
.hsl-hero-link:hover .hsl-hero-play,
.hsl-hero-link:focus-visible .hsl-hero-play {
    background: #1cbac8;
    transform: translateY(-2px);
}
.hsl-hero-link:focus-visible {
    outline: 3px solid #1cbac8;
    outline-offset: 3px;
}
@media (max-width: 640px) {
    .hsl-hero-play { font-size: 12px; padding: 8px 14px 8px 12px; bottom: 6%; }
}

/* The classification is the distinctive thing on this page: no other studio
   publishes how each image was made. Presented as a system rather than a list
   so it reads as a standard, not a disclaimer. */
.hsl-classify {
    display: grid;
    gap: 1px;
    background: #e4e2e0;
    border: 1px solid #e4e2e0;
    margin: 4px 0 0;
}
.hsl-class {
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: start;
    gap: 16px;
    background: #fff;
    padding: 16px 18px;
}
.hsl-class-mark {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
    padding: 7px 0;
    color: #fff;
    background: #231f20;
}
.hsl-class-p .hsl-class-mark { background: #231f20; }
.hsl-class-e .hsl-class-mark { background: #4a5c6a; }
.hsl-class-h .hsl-class-mark { background: #12909b; }
.hsl-class-s .hsl-class-mark { background: #1cbac8; color: #231f20; }
.hsl-class-name {
    display: block;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 2px;
    color: #231f20;
}
.hsl-class-desc { font-size: 13.5px; line-height: 1.55; color: #55504f; }
.hsl-classify-note {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #78827d;
}
@media (max-width: 600px) {
    .hsl-class { grid-template-columns: 46px 1fr; gap: 12px; padding: 13px 14px; }
    .hsl-class-mark { font-size: 24px; }
}

/* The showreel carries width="1280" as an attribute, which wins over its inline
   width:100% once the lazyload script rewrites the tag. Without this it spills
   480px past its 800px column and lands under the text beside it. */
video.hsl-showreel,
.wpb_column video {
    max-width: 100%;
    height: auto;
}

/* The closing line of the sell column: short, hard, and set apart. */
.hsl-kicker {
    margin: 22px 0 0;
    font-size: 21px;
    line-height: 1.35;
    font-weight: 600;
    color: #231f20;
    letter-spacing: -0.01em;
}
/* The classification kept as a credential, not a column: one slim strip. */
.hsl-grades {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid #e4e2e0;
    margin: 6px 0 0;
}
.hsl-grade {
    flex: 1 1 190px;
    padding: 13px 16px;
    border-right: 1px solid #e4e2e0;
    font-size: 13px;
    line-height: 1.5;
    color: #55504f;
}
.hsl-grade:last-child { border-right: 0; }
.hsl-grade b {
    display: inline-block;
    min-width: 21px;
    height: 21px;
    line-height: 21px;
    text-align: center;
    background: #231f20;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    margin-right: 7px;
}
.hsl-grade-h b { background: #12909b; }
.hsl-grade-s b { background: #1cbac8; color: #231f20; }
.hsl-grades-intro {
    margin: 26px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: #231f20;
}
@media (max-width: 700px) {
    .hsl-grade { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid #e4e2e0; }
    .hsl-grade:last-child { border-bottom: 0; }
    .hsl-kicker { font-size: 18px; }
}

/* The strapline above the small print, given room to be read. */
.hsl-footer-strap {
    display: block;
    margin-bottom: 14px;
    font-size: 16px;
    line-height: 1.4;
    color: #e8e6e4;
    letter-spacing: 0.005em;
}
@media (max-width: 640px) {
    .hsl-footer-strap { font-size: 14px; margin-bottom: 11px; }
}

/* The navigation was set at 13px against 16px body copy, which made it read as
   secondary to the page it is meant to lead.

   The theme writes "#navigation > ul > li > a {font-size:13px}" into an inline
   style block in the head, so it both outranks a plain child-theme rule and
   loads after it. Prefixing with body raises specificity enough to win without
   resorting to !important. */
body #navigation > ul > li > a {
    font-size: 16px;
}
/* The dropdown rule uses a class (#navigation .sub-menu li a), and a class
   outranks any number of element names, so matching it is the only way through. */
body #navigation .sub-menu li a {
    font-size: 15px;
}


/* ---------------------------------------------------------------
   Phone gutters. The theme pins the content column to a fixed
   "max-width: 340px" below 767px, written when phones were 320px wide.
   On a 390px handset that strands 50px and on a 430px one, 90px.
   Releasing the cap and letting padding supply the gutter gives a
   conventional 16px margin instead of 45px, and scales with the device
   rather than assuming a 2013 screen.
   --------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    body.vc_responsive .page-section .standard-section .span_12 {
        max-width: 100%;
    }
    #content .wpb_column,
    #content .vc_column_container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Portfolio pages use a different, older fixed-pixel grid: .container is
       pinned to 300px and its children are sized by rules like
       ".container .six.columns", which is more specific than any selector we
       can reasonably write from the child theme. These two need !important. Scoped to .portfolio-detail so the
       topbar and header, which use .container too, are left alone. */
    body .container.portfolio-detail {
        width: auto !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
    body .container.portfolio-detail .columns {
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ---------------------------------------------------------------------------
   Heading scale in page content.

   The content scale ran h1 24px, h2 21px, h3 20px, so three levels sat inside
   four pixels and a section heading read the same as the questions under it.
   h1 and h2 are left alone; the gap is opened from below instead, and h2 is
   given room above so it reads as a break rather than another line of text.
   Scoped to content, so footer and sidebar widget headings are untouched.
   --------------------------------------------------------------------------- */
#content h3,
.portfolio-detail-description h3,
.wpb_text_column h3 {
    font-size: 18px;
    line-height: 1.4;
}

#content h2,
.portfolio-detail-description h2,
.wpb_text_column h2 {
    margin-top: 42px;
    padding-top: 18px;
    border-top: 1px solid #e2ddd9;
}

/* The first section heading follows its own page title, so it needs neither. */
.wpb_text_column h2:first-child,
#content h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}


/* ---------------------------------------------------------------------------
   Phone clipping on standard pages (15 Sep 2026).

   Below 767px the theme pins #page-wrap.container to 300px (420px from 480px)
   with overflow hidden, and page-builder rows inside it carry -20px side
   margins. The phone-gutters rule above gives columns 16px of padding, so every
   line of text sat 4px outside the clipping box and lost its first and last
   letters. Releasing the fixed width puts the gutter in the container's own
   padding, and rows pull back into that padding so column text lines up with
   page titles and forms at 16px from the screen edge.

   Scoped to #page-wrap.container: full-width pages (home, about) use #page-wrap
   without .container and were never clipped, and blog pages float a sidebar
   against the fixed width, so they are left as they are.
   --------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    body #page-wrap.container:not(.blog-page) {
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 16px;
        padding-right: 16px;
    }
    body #page-wrap.container:not(.blog-page) > #content.columns {
        width: auto !important;
    }
    body #page-wrap.container:not(.blog-page) .wpb_row.vc_row-fluid {
        margin-left: -16px !important;
        margin-right: -16px !important;
    }
}