/* ==========================================================================
   Certification mark: CSA Cybersecurity Certification, Cyber Essentials (2025)
   for ICT Vendors, issued to FREEMANSLAND CONSULTANCY PTE. LTD. by ISOCert.

   LICENCE-CONSTRAINED STYLESHEET. Read C:\Users\CYBORG 15\.codeium\CERT-MARKS-STANDARD.md
   before changing anything here. These are certification licence conditions, not
   style preferences.

   Hard rules encoded below:
   - The artwork is ONE issued lockup (800x300, ratio 8:3, transparent background,
     dark text). ISOCert left, Cyber Essentials right. Never split, crop, tilt,
     recolour, filter, or apply opacity to it.
   - Sizing is driven by HEIGHT with width:auto so the 8:3 ratio cannot be
     distorted. max-width is explicitly disabled to stop the global
     `img{max-width:100%}` rule in style.css from squashing a fixed-height image.
     Every breakpoint sets a height that fits its viewport, so nothing clips.
   - Minimum rendered height 45px (12mm). The guide RECOMMENDS ~113px (30mm)
     and sets no maximum: the mark "may be uniformly enlarged or reduced".
   - Clearspace on all four sides >= 12% of rendered height. The plate padding
     and section spacing below satisfy this.

   WHY THE HEIGHTS BELOW ARE LARGER THAN 113px, AND WHY THEY ARE NOT ROUND.
   The issued 800x300 canvas is mostly empty. Measured alpha bounds of the
   artwork are x 86..771, y 75..235, so the ink is 685x160: 85.6% of the canvas
   width but only 53.3% of its height, with 75px of transparent margin above the
   ink and 65px below. A CSS height of H renders visible ink just 0.533 x H
   tall, and the type inside the artwork shrinks with it. Cap-heights measured
   on the 300px canvas, per unit of H:
     "CYBER ESSENTIALS"      17/300 = 0.0567 x H
     "ICT Vendor"            17/300 = 0.0567 x H
     "Certified" (grey)      13/300 = 0.0433 x H
     "Cyber Essentials mark" 10/300 = 0.0333 x H   (smallest, blue subline)
   At 113px that is a 6.4px cap-height on the largest line and 4.9px on
   "Certified", which does not read. The lines that carry the claim need >= 9px,
   which means H >= 160px. Cropping the dead margin out of the asset is
   forbidden, so the only fix is to render it bigger.

   Every height below is therefore derived from the MEASURED content width of
   the box the mark sits in, divided by 2.667 (that is what 8:3 costs in width
   per pixel of height), less that box's own padding. Do not round these to
   tidier numbers without re-measuring; several of them sit within 5px of an
   overflow. The measurements, taken at the breakpoints that matter:
     .ftr-cert (footer column)   274 @320   326.3 @375   426 @480   516.3 @575
                                 698.6 @767  277.2 @768  366.4 @991  442 @1180
                                 546 @1440
       NOTE the collapse at 768: the footer goes multi-column there and the left
       column drops from 698.6px to 277.2px. A vw-based ramp cannot cross that,
       so 768-991 is handled by its own min-width query below.
     .cert-credentials-mark col  274 @320   326.3 @375   516.3 @575  707.3 @768
                                 921.4 @991  363.8 @992  417.5 @1180 and up
       NOTE the collapse at 992: the credentials block goes 2-col there and the
       mark column drops from 921.4px to 363.8px.
     .cert-company-row content   288 @320   343 @375   535 @575   728 @768
                                 951 @991   1100 @1180 and up
   - The footer is dark (footer::before lays rgba(26,28,38,0.90) over a blue
     photograph) and the lockup's text is dark, so the footer instance sits on a
     WHITE PLATE. That is the compliant fix. Never invert, knock out, or filter.
   ========================================================================== */


/* ==========================================================================
   1. Sitewide footer trust row
   ========================================================================== */

/* Flex column, deliberately: .ftr-left-cnt p carries `float:left` in style.css, which
   would pull the caption out of flow and let the PDF link ride up beside the plate.
   A flex container ignores floats on its children, so plate / caption / link stay
   stacked in DOM order. */
.ftr-cert{
    width: 100%;
    float: left;
    clear: both;
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* White plate. Padding (20px/24px) exceeds the clearspace minimum of 12% of the
   160px cap below (19.2px). The old 18px would now fail that by 1.2px. */
.ftr-cert-plate{
    display: inline-block;
    background: #ffffff;
    border-radius: 10px;
    padding: 20px 24px;
    line-height: 0;
}

.ftr-cert-plate img{
    display: block;
    /* >991px only; the queries at the bottom of this file take over below that.
       The footer's left column is 366.4px at 992 and 546px at 1440, so a single
       flat height cannot serve both: 160px needs a 475px plate and would
       overflow everything under about 1290px. calc() tracks the column, which
       grows at roughly 0.4px per px of viewport:
         992  -> 112px (ceiling 119.6)   1200 -> 138px (ceiling 150.8)
         1300 -> 152px (ceiling 165.8)   1400 and up -> 160px (ceiling 180.8)
       At the 160px cap: visible ink 365x85, cap-heights 9.1 / 9.1 / 6.9 / 5.3. */
    height: clamp(112px, calc(14vw - 30px), 160px);
    width: auto;        /* ratio follows height */
    max-width: none;    /* defeat global img{max-width:100%} -> no distortion */
    aspect-ratio: 8 / 3;
}

/* Caption. Must certify the COMPANY, never a product. Wording is verbatim from
   CERT-MARKS-STANDARD.md section 6.

   The selector is deliberately `.ftr-cert p.ftr-cert-caption` (specificity 0,2,1).
   style.css sets `.ftr-left-cnt p { font-size:13px !important; max-width:100% !important }`
   at specificity 0,1,1 — which beats a plain `.ftr-cert-caption` (0,1,0) even when both
   carry !important. Without the stronger selector the caption ran to ~1236px, about 200
   characters per line, on the subpage footers where the left column is full width. */
.ftr-cert p.ftr-cert-caption{
    font-size: 12px !important;
    line-height: 1.6;
    font-family: 'ProximaNova-Regular';
    color: rgba(255,255,255,0.72);
    margin: 15px 0 0;
    max-width: 38em !important;   /* ~75 characters per line */
    float: none !important;
    width: auto !important;
}

/* min-height gives a 44px touch target (the bare text line is only ~19px, which
   fails the minimum on mobile); the rule lives on the inner span so it still sits
   directly under the text instead of at the bottom of the tap area. */
.ftr-cert-link{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 4px;
    font-size: 12px;
    font-family: 'Graphik-Bold';
    color: #ffffff;
    text-decoration: none;
    transition: color .2s ease-out;
}

.ftr-cert-link span{
    padding-bottom: 3px;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.35);
    transition: box-shadow .2s ease-out;
}

/* Lightened brand magenta: #e20281 is too dark to read on the near-black footer. */
.ftr-cert-link:hover,
.ftr-cert-link:focus-visible{
    color: #ff7ac7;
}

.ftr-cert-link:hover span,
.ftr-cert-link:focus-visible span{
    box-shadow: inset 0 -1px 0 #ff7ac7;
}

.ftr-cert a:focus-visible,
.cert-credentials a:focus-visible{
    outline: 2px solid #ff7ac7;
    outline-offset: 3px;
}


/* ==========================================================================
   1b. "Our Certifications" section, company-certification row
   The grid above this row is Nick's PERSONAL professional credentials (PMC,
   CIPM, ISO Lead Auditor, etc). The Cyber Essentials mark certifies the COMPANY,
   Freemansland Consultancy Pte Ltd, not Nick individually, so it carries an
   explicit label the other marks do not have. Do not remove the label to "match"
   the grid; that would misattribute a company certification as a personal one.
   Section background here is white/light, matching the mark's dark artwork, so
   no plate is needed (contrast confirmed instead of assumed).

   It sits in its OWN row, NOT inside `.row.our-cert`. That grid is built for
   uncaptioned square badges in a 1/6 column: `.single-client.image-switcher` is
   `display:flex; height:110px; overflow:hidden`, so a caption dropped inside a
   tile becomes a sibling FLEX ITEM of the image and the two split the 205px
   column between them. Measured result: lockup 44px tall (BELOW the 45px licence
   minimum) with the caption wrapping one word per line in a 68px column. Its own
   row is also what lets sizing be driven by HEIGHT with width:auto, which is the
   only way the 8:3 ratio is guaranteed. Do not move this back into the grid.
   ========================================================================== */

/* box-sizing is set EXPLICITLY: this site has no global `*{box-sizing:border-box}`
   reset, so the default content-box added the 40px of horizontal padding ON TOP of
   width:100% and the row overflowed its 359px parent by exactly that much at 375px.
   Do not remove this line. */
.cert-company-row{
    box-sizing: border-box;
    width: 100%;
    max-width: 1140px;
    margin: 46px auto 0;
    padding: 34px 20px 0;
    border-top: 1px solid #e2e6ee;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

/* Clearspace carried by the wrapper's own padding so it holds at every
   breakpoint: 22px exceeds 12% of the 168px desktop cap (20.16px), which the
   old 16px would have failed. Nothing intrudes on the lockup.
   line-height:0, or the wrapper adds a phantom descender under the image. */
.cert-company-lockup{
    flex: 0 0 auto;
    padding: 22px;
    line-height: 0;
}

/* Height-driven, per the licence: height set, width follows, max-width disabled
   so the global `img{max-width:100%}` in style.css cannot squash a fixed-height
   image and distort the ratio. */
.cert-company-row img{
    display: block;
    /* >=768px, where the row is lockup + hairline + label side by side, so the
       label's ~356px comes off the available width before the mark gets any.
       Budget at 768: 728 row - 44 padding - 26 divider gutter - 356 label = 302,
       which is 113px of height, so 108px is the floor with 14px of slack.
         768  -> 108px (ceiling 113.2)    991  -> 129px (ceiling 197)
         1180 -> 157px (ceiling 253)      1253 and up -> 168px (ceiling 253)
       At the 168px cap: visible ink 384x90, cap-heights 9.5 / 9.5 / 7.3 / 5.6. */
    height: clamp(108px, calc(15vw - 20px), 168px);
    width: auto;
    max-width: none;
    aspect-ratio: 8 / 3;
}

/* align-self:stretch + inner flex centring runs the divider hairline the full
   height of the row while the text stays optically centred against the lockup.
   No max-width on desktop: the string is ~356px at 14px, so it sits on one line
   inside the ~780px the row has spare. */
.cert-company-label{
    flex: 0 1 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    margin: 0;
    padding-left: 26px;
    border-left: 1px solid #e2e6ee;
    font-family: 'Graphik-Regular';
    font-size: 14px;
    line-height: 1.55;
    color: #454963;
    text-align: left;
}

/* Stack below the tablet breakpoint. Side by side, the caption would start
   competing with the lockup for width and break mid-phrase. */
@media screen and (max-width: 767px){
    .cert-company-row{
        flex-direction: column;
        gap: 18px;
        margin-top: 34px;
        padding-top: 28px;
    }
    /* Stacked, so the label no longer competes for width and the whole row
       content box is available: (viewport - container padding) - 44px of lockup
       padding, divided by 2.667.
         320 -> 88px (ceiling 91.5)    375 -> 104.5px (ceiling 112.1)
         480 -> 136px (ceiling 148.5)  534 and up -> 152px (ceiling 184 at 575)
       This replaces the old flat 88px here and the 74px at <=400px. */
    .cert-company-row img{ height: clamp(88px, calc(30vw - 8px), 152px); }
    .cert-company-label{
        align-self: auto;
        display: block;
        padding-left: 0;
        border-left: 0;
        text-align: center;
        /* Caps the measure so the break lands on a word boundary and the caption
           holds at two lines, never a one-word-per-line column. */
        max-width: 22em;
        font-size: 13.5px;
    }
}

@media screen and (max-width: 400px){
    .cert-company-row{ padding-left: 16px; padding-right: 16px; }
    /* No height override here on purpose. The clamp in the <=767px block already
       tracks the viewport down to 320px and lands on 88px there, which the old
       flat 74px undershot for no reason. */
}


/* ==========================================================================
   2. Homepage corporate credentials block
   Corporate-trust context only (CERT-MARKS-STANDARD.md section 6): sits with the
   company description, not beside pricing, a feature list, or a product
   screenshot. The section is WHITE, which is also the light background the dark
   artwork needs, so no nested card is required.
   ========================================================================== */

.cert-credentials{
    width: 100%;
    background: #ffffff;
    /* Hairline instead of a colour change: the section above (.enterprise) is a
       near-white tint, so a flat white block alone would not read as separated. */
    border-top: 1px solid #e2e6ee;
    padding: 90px 0;
}

/* Named areas so the certificate detail can sit UNDER the mark on desktop but read
   AFTER the explaining copy on mobile, where a stacked column would otherwise front
   -load raw certificate numbers before the heading that gives them meaning. */
.cert-credentials-grid{
    display: grid;
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "mark copy"
        "meta copy";
    gap: 0 56px;
    align-items: start;
    max-width: 1050px;
    margin: 0 auto;
}

.cert-credentials-mark{ grid-area: mark; }
.cert-credentials-copy{ grid-area: copy; }
.cert-meta{ grid-area: meta; }

/* CLEARSPACE FOR THIS INSTANCE IS CARRIED BY LAYOUT, NOT BY PADDING, unlike the
   footer plate and .cert-company-lockup. Worth stating because a reader checking
   the 12% rule will find 0 padding here and think it is missing:
     above  the section's own 90/64/52px of padding
     below  32px of .cert-meta margin at desktop, 34px of grid row-gap at <=991
     right  the 56px grid gap in 2-col; the rest of a 921px column in 1-col
     left   nothing but the page gutter, about 15px
   The largest height below is 200px, whose 12% is 24px, so the left gutter is
   narrower than 12%. That is accepted deliberately: the guide's rule is that
   nothing may INTRUDE into the clearspace, and no element does here, the gutter
   is empty space to the edge of the page. Satisfying 12% literally on the left
   would mean either indenting the mark out of alignment with the kicker,
   heading and .cert-meta that share its column, or capping the mark at 125px,
   which would put its type back below the legibility floor. Note the previous
   150px desktop value had the same 15px gutter, so this is not new. */
.cert-credentials-mark > a{
    display: inline-block;
    line-height: 0;
}

.cert-credentials-mark img{
    display: block;
    /* >=992px, where .cert-credentials-grid is 2-col and the mark column is only
       363.8px at 992 rising to 417.5px from 1180 up. The old flat 150px needed
       400px of column and therefore overflowed everything from 992 to about
       1119px; the calc tracks the column instead:
         992  -> 128px (ceiling 136.4)   1100 -> 128px (ceiling 148)
         1180 -> 133px (ceiling 156.5)   1338 and up -> 154px (ceiling 156.5)
       154px is the hard ceiling of this column, so this instance cannot reach
       the 200px the <=991px 1-col layout takes. Getting past it needs the grid's
       0.84fr/1.16fr split or its 1050px max-width widened, which is a layout
       change and is deliberately NOT done here. */
    height: clamp(128px, calc(13vw - 20px), 154px);
    width: auto;
    max-width: none;
    aspect-ratio: 8 / 3;
}

/* Factual certificate detail, straight off the certificate. Gives the mark column
   substance so the lockup is not a sticker floating on empty space, and gives a
   prospect the scannable facts a bare logo cannot carry. */
.cert-meta{
    margin: 32px 0 0;
    padding-top: 24px;
    border-top: 1px solid #e2e6ee;
    display: grid;
    gap: 13px;
}

.cert-meta > div{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
}

.cert-meta dt{
    margin: 0;
    font-family: 'Graphik-Medium';
    font-weight: normal;
    font-size: 11px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #7c8296;
}

.cert-meta dd{
    margin: 0;
    font-family: 'Graphik-Bold';
    font-size: 13.5px;
    color: #151723;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cert-credentials-copy h4{
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 1.6px;
    color: #ad0693;
    font-family: 'Graphik-Bold';
    text-transform: uppercase;
    margin: 0 0 14px;
}

.cert-credentials-copy h2{
    font-size: 34px;
    line-height: 1.22;
    color: #151723;
    font-family: 'Graphik-Bold';
    text-align: left;
    margin: 0 0 20px;
}

/* The statement of record. Verbatim licence wording, marked by a hairline in the
   single brand accent rather than boxed in a card. */
.cert-credentials .cert-statement{
    font-size: 15px;
    line-height: 1.65;
    color: #151723;
    font-family: 'Graphik-Regular';
    margin: 0 0 18px;
    padding-left: 18px;
    border-left: 2px solid #e20281;
}

.cert-credentials .cert-scope{
    font-size: 16px;
    line-height: 1.7;
    color: #454963;
    font-family: 'Graphik-Regular';
    margin: 0 0 28px;
}

.cert-credentials-links{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
}

.cert-link-primary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 10px 32px;
    background-image: linear-gradient(105deg, #e20281 0%, #670dad 100%);
    color: #ffffff;
    font-family: 'Graphik-Bold';
    font-size: 13.5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: 40px;
    transition: filter .2s ease-out, transform .2s ease-out;
}

.cert-link-primary:hover,
.cert-link-primary:focus-visible{
    color: #ffffff;
    filter: brightness(1.08);
    transform: translateY(-2px);
}

/* min-height keeps the 44px+ touch target; the rule lives on the inner span so it
   sits under the TEXT rather than at the bottom of the tap area. */
.cert-link-secondary{
    display: inline-flex;
    align-items: center;
    min-height: 50px;
    color: #151723;
    font-family: 'Graphik-Bold';
    font-size: 13.5px;
    letter-spacing: 0.3px;
    text-decoration: none;
    transition: color .2s ease-out;
}

.cert-link-secondary span{
    padding-bottom: 3px;
    box-shadow: inset 0 -1px 0 rgba(21,23,35,0.28);
    transition: box-shadow .2s ease-out;
}

.cert-link-secondary:hover,
.cert-link-secondary:focus-visible{
    color: #e20281;
}

.cert-link-secondary:hover span,
.cert-link-secondary:focus-visible span{
    box-shadow: inset 0 -1px 0 #e20281;
}

@media (prefers-reduced-motion: reduce){
    .ftr-cert-link,
    .cert-link-primary,
    .cert-link-secondary{
        transition: none;
    }
    .cert-link-primary:hover{
        transform: none;
    }
}


/* ==========================================================================
   3. Responsive. Each step sets a height that fits the MEASURED content width of
   the box the mark sits in (measurements are at the top of this file), so the
   lockup never clips and never drops below the 45px licence minimum. Heights are
   clamp(min, calc(vw ramp), max) rather than flat per-breakpoint numbers, because
   the ceiling is affine in the viewport: a box's content width grows linearly
   with vw but its padding does not, so a flat value must be sized for the narrow
   end of its range and is then far too small at the wide end. That is precisely
   how the old values ended up at 68-113px, well under what the artwork needs.
   ========================================================================== */

@media (max-width: 991px){
    .cert-credentials{ padding: 64px 0; }
    .cert-credentials-grid{
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas:
            "mark"
            "copy"
            "meta";
        gap: 34px 0;
    }
    /* 1-col here, so the mark column is the full 274-921px content width and the
       2-col ceiling above no longer applies. This is the one instance on the site
       that can reach a properly large size, and it does:
         320 -> 100px (ceiling 102.7)   375 -> 104px (ceiling 122.4)
         480 -> 137px (ceiling 159.8)   575 -> 166px (ceiling 193.6)
         684 and up -> 200px (ceiling 262 at 767)
       At 200px: visible ink 457x107, cap-heights 11.3 / 11.3 / 8.7 / 6.7, i.e.
       the only place the grey "Certified" line clears 8px. Clearspace is the
       34px grid row-gap below and the 52-64px section padding above, both over
       12% of 200px (24px). This replaces the old 120px here plus the 92px at
       <=575 and 76px at <=400. */
    .cert-credentials-mark img{ height: clamp(100px, calc(31vw - 12px), 200px); }
    .cert-credentials-copy h2{ font-size: 28px; }
    /* single column: the grid gap handles the spacing, and the pairs must not
       stretch the full container width or label and value drift too far apart. */
    .cert-meta{ margin-top: 0; padding-top: 24px; max-width: 430px; }
    .ftr-cert{ margin-top: 24px; }
    /* <=991px. Padding drops to 18px/20px, which still clears 12% of the 144px
       cap (17.28px). This branch is for <=767px, where the footer is still a
       single wide column (698.6px at 767 down to 274px at 320):
         320 -> 86.4px (ceiling 87.4)   375 -> 104px (ceiling 108.1)
         480 -> 137.6px (ceiling 147.4)  500 and up -> 144px
       It replaces the old 82px at <=575 and 68px at <=400, both of which are
       removed below. 320px has only ~1px of slack, so do not raise the 32vw. */
    .ftr-cert-plate{ padding: 18px 20px; }
    .ftr-cert-plate img{ height: clamp(86px, calc(32vw - 16px), 144px); }
}

/* 768-991px is the one range where the footer has already gone multi-column but
   the viewport is still narrow, so the left column is its tightest anywhere:
   277.2px at 768, 366.4px at 991. Minus 38px of plate padding and divided by
   2.667 that allows 89.7px at 768 and 123px at 991. The old flat 100px in the
   <=991px block needed a 310.7px plate and overflowed this column by ~34px,
   which is why this range gets its own rule rather than inheriting either side.
     768 -> 88px (ceiling 89.7)   880 -> 100.6px (ceiling 108)
     991 -> 113.9px (ceiling 123) */
@media (min-width: 768px) and (max-width: 991px){
    .ftr-cert-plate img{ height: clamp(88px, calc(12vw - 5px), 120px); }
}

@media (max-width: 767px){
    .ftr-cert p.ftr-cert-caption{ max-width: 100% !important; }
}

@media screen and (max-width: 575px){
    .cert-credentials{ padding: 52px 0; }
    /* No .cert-credentials-mark height here on purpose: the clamp in the <=991px
       block already tracks this range and lands higher than the old flat 92px. */
    .cert-credentials-copy h2{ font-size: 24px; }
    .cert-credentials-copy h4{ font-size: 13.5px; letter-spacing: 1.2px; }
    .cert-credentials .cert-scope{ font-size: 15px; }
    .cert-credentials-links{ gap: 12px 20px; }
    .cert-link-primary,
    .cert-link-secondary{ font-size: 13px; }
    /* Stack label over value: at this width a justified label/value row leaves the
       two ends too far apart to scan, and the longer values start to crowd. */
    .cert-meta{ gap: 16px; }
    .cert-meta > div{ flex-direction: column; align-items: flex-start; gap: 3px; }
    .cert-meta dt{ font-size: 10.5px; }
    .cert-meta dd{ font-size: 13px; text-align: left; }
    /* No .ftr-cert-plate padding or height override here on purpose: the 18px/20px
       padding and the clamp set in the <=991px block are already correct for this
       range, and a flat 82px here would undercut them. */
}

@media screen and (max-width: 400px){
    .cert-link-primary{ padding: 10px 24px; }
    /* Both lockup heights are handled by the clamps above, which stay legal all
       the way down to 320px. The old flat 76px and 68px are gone. */
}