/* Nysonian - the parent-company site.
   One fluid system for every page and every screen, from 280px phones to 4K screens and LED walls:
   - sizes are in rem, so the whole site scales with the root font size (stepped up on very large screens);
   - every section lines its content up on one edge (--edge): a side padding on small screens, and the
     centre column (--content-max) on wide ones;
   - no fixed section heights: blocks take the height of their content. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-700.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Almarai"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/almarai-300.woff2") format("woff2"); }

:root {
  --ink: #282828;
  --ink-soft: #4a4848;
  --white: #ffffff;
  --page: #fdfbf7;          /* warm off-white page background, lighter than every cream section */
  --grey-100: #e8e6e6;
  --band: #ece7df;          /* warm stone: the middle About pillar */
  --footer: #282828;
  --nobl-deep: #0e2524;     /* the home hero photo's dark-green backdrop */
  --nobl-tile: #0b3d39;     /* NOBL green: the home NOBL tile and the Brands page NOBL panel */
  --flo-beige: #eee6da;
  --strip: #f4f1ea;         /* the band under the home hero */
  --paper: #faf7f3;         /* the "How we work" band on the home page */
  --font: "Montserrat", Arial, sans-serif;

  /* one edge for every section: the side padding on small screens, the centred column on wide ones */
  --pad: clamp(1rem, 5vw, 4rem);
  --content-max: 84.5rem;   /* 1352px at the default size; grows with the root size on large screens */
  --edge: max(var(--pad), (100% - var(--content-max)) / 2);

  /* type and rhythm, shared by all pages (taken from the home page) */
  --h2: clamp(1.75rem, 2.6vw, 2.5rem);
  --lead: clamp(1.25rem, 1vw + .9rem, 1.75rem);
  --body: clamp(1rem, .2vw + .95rem, 1.0625rem);
  --sec: clamp(4rem, 8vw, 8rem);
}

/* very large screens (QHD and 4K monitors at 100%, TVs, LED walls): the whole site grows in steps, so a
   4K screen shows the same composition as a laptop instead of a small page in an empty canvas.
   Percentages keep the visitor's own browser font setting. */
@media (min-width: 1920px) { html { font-size: 110%; } }
@media (min-width: 2560px) { html { font-size: 125%; } }
@media (min-width: 3200px) { html { font-size: 150%; } }
@media (min-width: 3840px) { html { font-size: 200%; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
/* a column, so the footer always reaches the bottom of short pages on tall screens */
body { display: flex; flex-direction: column; min-height: 100svh; margin: 0; background: var(--page); color: var(--ink); font-family: var(--font); line-height: normal; }
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:is(h1, h2, h3) { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid #116dff; outline-offset: 2px; }
.cover { width: 100%; height: 100%; object-fit: cover; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nowrap { white-space: nowrap; }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .625rem 1rem; background: var(--white); color: var(--ink); border-radius: 1.5rem; font-size: .8125rem; }
.skip-link:focus { top: .75rem; }

/* ---- shared type ------------------------------------------------------- */
.nh-kicker, .brands-intro__label { font-size: .75rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }

/* ---- buttons ----------------------------------------------------------- */
/* One button for the whole site: the home page pill. It grows with its label; very narrow phones let the
   label wrap instead of pushing the button off screen. */
.nh-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 2.875rem; padding: .5rem 1.75rem; border-radius: 3rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; line-height: 1.3; text-align: center; text-transform: uppercase; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, transform .1s ease;
}
.nh-pill:active { transform: scale(.97); }
.nh-pill--light { background: var(--white); color: var(--nobl-deep); }
.nh-pill--dark { background: var(--ink); color: var(--white); }
.nh-link { display: inline-flex; gap: .625rem; padding-bottom: .1875rem; border-bottom: 1px solid currentColor; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.nh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.125rem 2rem; }

/* ---- header ------------------------------------------------------------ */
/* Modelled on nobltravel.com's header: a slim bar, small tracked Montserrat 500 links right after the logo,
   and a thin underline for hover and the current page. */
.site-header { position: relative; z-index: 50; display: flex; align-items: center; min-height: 4rem; padding: 0 var(--edge); border-bottom: 1px solid var(--grey-100); background: var(--white); }
.site-header__logo { display: flex; flex: none; align-items: center; gap: .75rem; min-height: 2.75rem; }
.site-header__logo img { width: 2.75rem; height: auto; }
.site-header__logo span { font-size: .75rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.site-nav { display: flex; gap: 2.25rem; margin-left: 3.5rem; }
.site-nav a { position: relative; display: flex; align-items: center; justify-content: center; height: 2.75rem; min-width: 2.75rem; font-size: .75rem; font-weight: 500; letter-spacing: .1em; color: var(--ink); }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .625rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.site-nav a[aria-current="page"]::after { transform: none; }
.site-nav .site-nav__home, .site-nav__foot { display: none; }   /* phone menu only: the logo is the home link on wide screens */
.menu-toggle { display: none; }

/* home: the header sits transparently over the dark hero, in white; the hero starts under it */
.page-home .site-header { position: absolute; top: 0; left: 0; right: 0; border-bottom-color: rgba(255, 255, 255, .14); background: transparent; transition: background-color .2s ease; }
.page-home :is(.site-header__logo span, .site-nav a, .menu-toggle) { color: var(--white); }
.page-home .site-header__logo img { filter: brightness(0) invert(1); }

/* ---- footer ------------------------------------------------------------ */
.site-footer { padding: 4rem var(--edge) 2rem; background: var(--footer); color: var(--white); }
.site-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 2.5rem; align-items: start; }
.site-footer__logo { width: 3rem; }
.site-footer__name { margin-top: 1rem; font-size: 1rem; }
.site-footer__label { margin-bottom: 1rem; font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #bdbdbd; }
.site-footer__nav { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; font-size: .875rem; }
.site-footer__brands { display: flex; flex-direction: column; align-items: flex-start; gap: 1.125rem; }
.site-footer__nobl { width: auto; height: 1.875rem; }
.site-footer__flo { width: auto; height: 2.125rem; filter: invert(1); }
.site-footer__linkedin { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; }
.site-footer__linkedin img { width: 2.25rem; height: 2.25rem; }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2.5rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid #444; font-size: .75rem; color: #bdbdbd; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }

/* ---- home -------------------------------------------------------------- */
/* The parent-company home page: hero, our brands, how we work, careers. Both brands get the same card;
   NOBL leads only by order, slightly more width and the hero photo. */
.page-home :is(h2, p) { text-wrap: pretty; }

/* hero: a banner in the photo's own proportions (2.474:1), so the photo fills it edge to edge. Below 1335px
   wide the 540px minimum adds plain backdrop above the photo, which fades into it; on very wide or short
   screens the height is capped to the first screen and the photo's empty top is cut instead. In the photo
   the luggage spans 40%-96.3% of the width, so the text column ends before 40%. */
.nh-hero {
  --hero-edge: min(var(--edge), 12vw);            /* the copy keeps clear of the luggage on ultra-wide screens */
  --copy-w: clamp(18.75rem, 36vw - 2.5rem, 31.25rem);
  --rail-h: clamp(3.5rem, 4.6vw, 5.5rem);
  --rail-w: min(var(--copy-w), clamp(17.5rem, 26vw, 31.25rem));
  --rail-bottom: clamp(1.75rem, 2.6vw, 3.5rem);
  position: relative; display: flex; flex-direction: column; justify-content: center;
  width: 100%; aspect-ratio: 2474 / 1000; min-height: 33.75rem; max-height: min(calc(100svh - 8.5rem), 68rem);
  padding: calc(4rem + 2.5rem) 0 calc(var(--rail-h) + var(--rail-bottom) + 2rem);   /* 4rem: the header over the hero */
  overflow: hidden; background: var(--nobl-deep); color: var(--white);
}
.nh-hero__img img { position: absolute; left: 0; bottom: 0; width: 100%; max-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 14%); mask-image: linear-gradient(transparent, #000 14%); }
.nh-hero__copy { position: relative; z-index: 1; max-width: var(--copy-w); padding-left: var(--hero-edge); box-sizing: content-box; }

/* brand rail: the two brands as equal tiles in the bottom-left, under the text column */
.nh-rail { position: absolute; z-index: 1; left: var(--hero-edge); bottom: var(--rail-bottom); display: grid; grid-template-columns: 1fr 1fr; width: var(--rail-w); height: var(--rail-h); border: 1px solid rgba(255, 255, 255, .18); }
.nh-rail a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; padding: 0 1.375rem; font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; transition: filter .2s ease; }
.nh-rail__nobl { background: var(--nobl-tile); color: var(--white); border-right: 1px solid rgba(255, 255, 255, .18); }
.nh-rail__nobl img { width: clamp(4rem, 5vw, 6rem); }
.nh-rail__flo { background: var(--flo-beige); color: var(--ink); }
.nh-rail__flo img { width: clamp(1.75rem, 2.1vw, 2.5rem); }
/* narrow desktops: the tiles are too small for logo plus label, so show the logos only */
@media (min-width: 1000px) and (max-width: 1365px) { .nh-rail a { justify-content: center; } .nh-rail span { display: none; } }
.nh-hero h1 { margin: 0; font-size: clamp(2.375rem, 3.2vw + .625rem, 4.5rem); font-weight: 400; letter-spacing: .16em; line-height: 1; text-transform: uppercase; }
.nh-hero__sub { max-width: 26ch; margin-top: 1.375rem; font-size: clamp(1.125rem, .5vw + .7rem, 1.375rem); line-height: 1.45; }
.nh-hero .nh-actions { margin-top: 2.25rem; }
/* on narrow desktops the luggage starts at about 40% of the width, so the two actions stack */
@media (min-width: 1000px) and (max-width: 1199px) { .nh-hero .nh-actions { flex-direction: column; align-items: flex-start; } }

/* strip under the hero: a clear boundary, like the trust strips on the NOBL and flo home pages */
.nh-strip { padding: 1.375rem var(--edge); background: var(--strip); border-bottom: 1px solid #e6e0d4; }
.nh-strip ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem clamp(2.5rem, 8vw, 8rem); }
.nh-strip li { display: flex; align-items: center; gap: .875rem; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.nh-strip svg { flex: none; width: 1.75rem; height: 1.75rem; fill: none; stroke: var(--nobl-deep); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* our brands: two cards with the same structure */
.nh-brands { padding: var(--sec) var(--edge); background: var(--page); }
.nh-brands h2, .nh-how h2 { max-width: 47.5rem; margin-top: 1.125rem; font-size: var(--h2); font-weight: 400; line-height: 1.2; }
/* equal square cards: a fixed shape keeps the whole product in frame at every width */
.nh-brands__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); margin-top: 3.5rem; }
.nh-brand { display: flex; flex-direction: column; align-items: flex-start; }
.nh-brand .nh-brand__img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.nh-brand .nh-brand__logo { width: auto; height: 2.25rem; margin-top: 1.75rem; }
.nh-brand__logo--nobl { filter: brightness(0); }   /* the white NOBL tag, inked like NOBL's own header logo */
.nh-brand__desc { max-width: 40ch; margin-top: 1.125rem; font-size: var(--body); line-height: 1.55; }
.nh-brand__meta { margin: .875rem 0 1.375rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; line-height: 1.6; text-transform: uppercase; color: #5c5c5c; }
.nh-brand__link { margin-top: auto;   /* both cards' links on one line */ padding-bottom: .125rem; border-bottom: 1px solid currentColor; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; }

/* how we work: the About page's three pillars */
.nh-how { padding: var(--sec) var(--edge); background: var(--paper); }
.nh-how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); margin: 3.5rem 0; }
.nh-how__grid > div { padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.nh-how h3 { font-size: .8125rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.nh-how__grid p { margin-top: 1rem; font-size: var(--body); line-height: 1.6; }

/* careers: text on the page column, photo to the right edge */
.nh-careers { display: grid; grid-template-columns: 1fr 1fr; min-height: 35rem; background: var(--page); }
/* the column is half the page, so 100% - content-max/2 here equals the page's (100% - content-max)/2 edge */
.nh-careers__text { align-self: center; padding: 5rem clamp(2rem, 5vw, 5rem) 5rem max(var(--pad), 100% - var(--content-max) / 2); }
.nh-careers__text > * { max-width: 34rem; }
.nh-careers__lead { margin-top: 1.375rem; font-size: calc(var(--h2) * .8); line-height: 1.35; }
.nh-careers .nh-pill { margin-top: 2.125rem; }
.nh-careers .nh-careers__img { width: 100%; height: 0; min-height: 100%; object-fit: cover; object-position: 50% 50%; }   /* height 0: the photo fills the row without making it taller; centred on the two colleagues and the laptop */

/* ---- about ------------------------------------------------------------- */
/* hero: NOBL luggage left and flo activewear right, edge to edge; the cap keeps the mission on a laptop's
   first screen */
.about-hero { display: grid; grid-template-columns: 1fr 1fr; width: 100%; aspect-ratio: 2200 / 921; max-height: max(15rem, min(calc(100svh - 15rem), 60rem)); overflow: hidden; background: #eceef1; }
.about-hero img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.about-hero__nobl { object-position: 50% 60%; }   /* the coastal NOBL photo, cropped to match the flo half's scale */
.about-hero__flo { object-position: 60% 35%; }   /* the wide coastal photo: keep her centred in the half */

/* statements (About and Careers): a heading and one large line of copy, centred on a band */
.statement { padding: var(--sec) var(--edge); text-align: center; }
.statement :is(h1, h2) { font-size: var(--h2); font-weight: 400; line-height: 1.2; }
.statement p { max-width: 46ch; margin: 1.25rem auto 0; font-size: var(--lead); line-height: 1.45; text-wrap: balance; }
.statement--dark { background: var(--ink); color: var(--white); }
.statement--light { background: var(--page); }
.statement--grey { background: var(--paper); }

/* pillars: three tiles on the page column, side by side from tablet width */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 var(--edge) var(--sec); }
.pillar { padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 3vw, 3rem); background: var(--strip); text-align: center; }
.pillar--stone { background: var(--band); }
.pillar h3 { font-size: var(--h2); font-weight: 400; line-height: 1.2; }
.pillar h3 span { display: block; margin-bottom: .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.pillar p { max-width: 32ch; margin: 1.5rem auto 0; font-size: var(--body); line-height: 1.6; }

.about-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem var(--pad); padding: 0 var(--edge) var(--sec); }
.about-cta__col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.about-cta__col p { max-width: 24ch; font-size: var(--lead); line-height: 1.35; text-wrap: balance; }
.about-cta__col .nh-pill { margin-top: 1.75rem; }

/* ---- brands ------------------------------------------------------------ */
/* intro above the brand blocks, styled like the home page's "Our brands" heading */
.brands-intro { padding: clamp(2.5rem, 5vw, 4.5rem) var(--edge) 0; }
.brands-intro h1 { margin-top: 1.125rem; font-size: var(--h2); font-weight: 400; line-height: 1.2; }
.brands-intro__lead { max-width: 40rem; margin-top: .875rem; font-size: var(--body); line-height: 1.6; }

/* brand blocks: a coloured panel with the photo on one half and the text on the other, alternating sides */
.brand-feature { padding: clamp(2rem, 4vw, 3rem) var(--edge) 0; }
.brand-feature--flo { padding-bottom: var(--sec); }
.brand-feature__card { display: grid; grid-template-columns: 641fr 639fr; min-height: clamp(30rem, 45vw, 40rem); background: var(--panel, var(--white)); }
.brand-feature__img { display: block; overflow: hidden; }
.brand-feature__img img { width: 100%; height: 100%; object-fit: cover; }
.brand-feature__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: min(30.625rem, 100% - 2 * clamp(1.5rem, 4vw, 3.5rem)); margin: 0 auto; padding: 3rem 0; }
.brand-feature__text h2 { font-size: var(--h2); font-weight: 400; line-height: 1.2; }
.brand-feature__tag { max-width: 36ch; margin-top: 1.25rem; font-size: var(--body); font-weight: 700; font-style: italic; line-height: 1.5; }
.brand-feature__desc { max-width: 36ch; margin-top: .375rem; font-size: var(--body); line-height: 1.6; }
.brand-feature .nh-pill { margin-top: 2rem; }
.brand-feature--nobl { --panel: var(--nobl-tile); }
.brand-feature--nobl .brand-feature__text { color: var(--white); }
.brand-feature--flo { --panel: #e6dcd0; }   /* light sand, one step darker than the photo's beige (#ede5dc) */
.brand-feature--flo .brand-feature__card { grid-template-columns: 639fr 641fr; }
.brand-feature--flo .brand-feature__img { order: 2; }

/* "Who we are" band at the end of the Brands page, the same paper band as the home "How we work" */
.brands-who { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(3rem, 7vw, 7.5rem); align-items: start; padding: var(--sec) var(--edge); background: var(--paper); color: var(--ink); }
.brands-who h2 { font-size: var(--h2); font-weight: 400; line-height: 1.2; }
.brands-who__lead { max-width: 40rem; margin-top: 1rem; font-size: var(--body); line-height: 1.6; }
.brands-who__points li { display: grid; grid-template-columns: 3.5rem 1fr; column-gap: 1rem; padding: 1.75rem 0; }
.brands-who__points li:first-child { padding-top: .375rem; }
.brands-who__points li:last-child { padding-bottom: 0; }
.brands-who__points li + li { border-top: 1px solid rgba(40, 40, 40, .15); }
.brands-who__num { grid-row: span 2; color: var(--nobl-tile); font-size: 1.375rem; font-weight: 700; line-height: 1.1; letter-spacing: .04em; }
.brands-who__points h3 { font-size: .8125rem; font-weight: 700; letter-spacing: .16em; line-height: 1.7; text-transform: uppercase; }
.brands-who__points p { margin-top: .5rem; font-size: var(--body); line-height: 1.6; }
.brands-who__link { display: inline-flex; gap: .625rem; margin-top: 2rem; padding-bottom: .1875rem; border-bottom: 1px solid currentColor; color: var(--nobl-tile); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* ---- team -------------------------------------------------------------- */
/* a centred, wrapping row of cards: 1 per row on phones, 2 on tablets, 3-4 on desktops; the last row is
   centred, so no one is left alone at the edge */
.team { padding: var(--sec) var(--edge); text-align: center; }
.team h1 { margin-top: 1.125rem; font-size: var(--h2); font-weight: 400; line-height: 1.2; }
.team__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 3.5rem 1.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.member { display: flex; flex: 0 1 clamp(13rem, 23%, 18rem); flex-direction: column; align-items: center; }
.member__photo { width: min(13.5rem, 100%); aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: var(--grey-100); }
.member__name { margin-top: 1.5rem; font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.member__linkedin { order: 1; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-top: .25rem; }
.member__linkedin img { width: 2rem; height: 2rem; filter: brightness(.6); }   /* the grey icon, darkened to 3:1 on the page */
.member__title { max-width: 22ch; margin-top: .25rem; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }

/* ---- careers ----------------------------------------------------------- */
/* photo band, mission band, two white cards with a photo on the right */
.careers-hero { width: 100%; aspect-ratio: 3 / 1; min-height: 18.75rem; max-height: 70svh; overflow: hidden; background: var(--ink); }
.careers-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }

.careers-cards { display: flex; flex-direction: column; gap: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(2rem, 5vw, 5rem) var(--edge); background: var(--strip); }
.careers-card { display: grid; grid-template-columns: 7fr 5fr; min-height: clamp(26rem, 36vw, 37.5rem); background: var(--white); }
.careers-card__text { align-self: center; padding: 3.5rem clamp(2rem, 6vw, 7rem); }
.careers-card__text > * { max-width: 30rem; }
.careers-card__text h2 { font-size: calc(var(--h2) * .8); font-weight: 400; line-height: 1.25; }
.careers-card__text p { margin-top: 1.25rem; font-size: clamp(1.0625rem, .4vw + .8rem, 1.25rem); line-height: 1.55; }
.careers-card .nh-pill { margin-top: 2rem; }
.careers-card__img { overflow: hidden; background: var(--grey-100); }
.careers-card__img img { object-position: 50% 50%; }
.careers-card--people .careers-card__img img { object-position: 50% 40%; }

/* ---- hover: only on devices that really hover, so taps never leave a stuck hover state -------- */
@media (hover: hover) {
  .site-nav a:hover::after { transform: none; }
  .site-footer a:hover, .nh-link:hover, .nh-brand__link:hover, .brands-who__link:hover, .member__linkedin:hover { opacity: .7; }
  .nh-pill--light:hover { background: var(--flo-beige); }
  .nh-pill--dark:hover { background: #4a4848; }
  .nh-rail a:hover { filter: brightness(1.1); }
}

/* ======================================================================== */
/* Tablets and phones                                                       */
/* ======================================================================== */

/* header: below 768px the links move into a menu under the ☰ button (menu left, logo centred, as on NOBL) */
@media (max-width: 767px) {
  .site-header { display: grid; grid-template-columns: 2.75rem 1fr 2.75rem; min-height: 3.5rem; padding: 0 max(0px, var(--pad) - .625rem); }
  .site-header__logo { grid-column: 2; justify-self: center; gap: .625rem; }
  .site-header__logo img { width: 2.625rem; }
  .menu-toggle {
    position: relative; z-index: 60; display: block; grid-column: 1; grid-row: 1; width: 44px; height: 44px;
    padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink);
  }
  /* whole-pixel lines (2px thick, 7px apart) so the three bars render identically on every screen */
  .menu-toggle span { position: absolute; left: 11px; width: 22px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
  .menu-toggle span:nth-child(1) { top: 14px; }
  .menu-toggle span:nth-child(2) { top: 21px; }
  .menu-toggle span:nth-child(3) { top: 28px; }
  .menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* the menu opens under the header, so the logo and the close button stay in place */
  .site-nav {
    position: fixed; inset: 3.5rem 0 0; z-index: 55; flex-direction: column; gap: 0; margin: 0;
    padding: 1.5rem var(--pad) calc(1.5rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
    border-top: 1px solid var(--grey-100); background: var(--white); visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s;
  }
  .menu-open .site-nav { visibility: visible; opacity: 1; transition: opacity .25s ease; }
  .page-home.menu-open .site-header { background: var(--white); border-bottom-color: var(--grey-100); }
  .page-home.menu-open :is(.site-header__logo span, .menu-toggle) { color: var(--ink); }
  .page-home.menu-open .site-header__logo img { filter: none; }
  .page-home .site-nav > a { color: var(--ink); }
  .menu-open { overflow: hidden; }
  /* large links on full-width rows, then the brands and LinkedIn pinned to the bottom, in thumb reach */
  .site-nav { padding-top: .5rem; }
  .site-nav > a, .site-nav > .site-nav__home { display: flex; justify-content: flex-start; height: 4rem; border-bottom: 1px solid var(--grey-100); font-size: 1.5rem; font-weight: 400; letter-spacing: .01em; }
  .site-nav > a::after { display: none; }
  .site-nav > a[aria-current="page"] { font-weight: 500; }
  .site-nav > a[aria-current="page"]::before { content: ""; width: .375rem; height: .375rem; margin-right: .75rem; border-radius: 50%; background: var(--nobl-tile); }
  .site-nav .site-nav__foot { display: block; margin-top: auto; padding-top: 2rem; }
  .site-nav__label { font-size: .75rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #6b6b6b; }
  .site-nav__brands { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1rem; }
  .site-nav__brands a { display: flex; align-items: center; justify-content: center; height: 4.5rem; }
  .site-nav__nobl { background: var(--nobl-tile); }
  .site-nav__nobl img { width: 4.5rem; }
  .site-nav__flo { background: var(--flo-beige); }
  .site-nav__flo img { width: 2rem; }
}

@media (max-width: 999px) {
  /* home: hero text, then the luggage photo */
  .nh-hero { justify-content: flex-start; height: auto; aspect-ratio: auto; min-height: 0; max-height: none; padding: 0; }
  .nh-hero__img { order: 1; margin-top: .75rem; }
  .nh-hero__img img { position: static; width: 100%; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 80%, transparent); }
  /* the copy is centred over the centred photo and brand tiles, so the stacked hero reads on one axis */
  .nh-hero__copy { max-width: none; padding: calc(4rem + 2rem) var(--pad) 0; text-align: center; }   /* clears the header over the hero */
  .nh-hero h1 { font-size: clamp(1.875rem, 8.5vw, 2.5rem); }
  .nh-hero__sub { max-width: 24ch; margin: 1rem auto 0; font-size: 1.0625rem; }
  .nh-hero .nh-actions { justify-content: center; margin-top: 1.5rem; }
  .nh-rail { position: relative; order: 2; left: auto; bottom: auto; width: auto; height: 4.5rem; margin: 0 var(--pad) 1.75rem; }
  .nh-rail a { justify-content: center; gap: clamp(.5rem, 3vw, 1.75rem); padding: 0 .5rem; letter-spacing: .14em; }   /* logo and label together, not pushed to opposite ends */
  .nh-rail__nobl img { width: clamp(3.5rem, 18vw, 4.5rem); }
  .nh-rail__flo img { width: 2rem; }
  .nh-strip { padding: 1.25rem var(--pad); }
  .nh-strip ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
  .nh-strip li { flex-direction: column; gap: .5rem; text-align: center; letter-spacing: .08em; line-height: 1.35; }
  .nh-strip li > span > span { display: block; }   /* every label on two lines, so the three read evenly */

  .nh-brands__grid { grid-template-columns: 1fr; gap: 3.5rem; margin-top: 2.5rem; }
  .nh-how__grid { grid-template-columns: 1fr; gap: 2rem; margin: 2.5rem 0; }

  .nh-careers { grid-template-columns: 1fr; min-height: 0; }
  .nh-careers__text { padding: 4rem var(--pad); }
  .nh-careers .nh-careers__img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }

  /* touch: the text links are about 20px tall, so give each an invisible 44px tap area (no visual change) */
  :is(.nh-link, .nh-brand__link, .brands-who__link, .site-footer__brands a) { position: relative; }
  :is(.nh-link, .nh-brand__link, .brands-who__link)::after { content: ""; position: absolute; inset: -.875rem -.375rem; }
  .site-footer__nav { gap: 0; }
  .site-footer__nav a { display: flex; align-items: center; min-width: 2.75rem; min-height: 2.75rem; }
  .site-footer__brands a::after { content: ""; position: absolute; inset: -.5rem; }

  /* about */
  .about-hero { aspect-ratio: 2 / 1; max-height: none; }

  /* brands: the photo across the top of the coloured panel, the text under it */
  .brand-feature__card { grid-template-columns: 1fr 1fr; min-height: 28rem; }
  .brands-who { grid-template-columns: 1fr; gap: 2.5rem; }

  /* careers: the cards keep a photo half on tablets */
  .careers-card { grid-template-columns: 1fr 1fr; min-height: 0; }
  .careers-card__text { padding: 3rem clamp(1.5rem, 4vw, 3rem); }
}

/* tablets (600-999px): the Home sections stay side by side instead of one tall column */
@media (min-width: 600px) and (max-width: 999px) {
  .nh-brands__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .nh-brand .nh-brand__logo { height: 1.875rem; margin-top: 1.375rem; }
  .nh-hero__img { margin-top: -5vw; }   /* the photo's top is empty backdrop that fades in; overlap it with the gap under the buttons */
}
@media (min-width: 900px) and (max-width: 999px) {
  .nh-how__grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
}
@media (min-width: 700px) and (max-width: 999px) {
  .nh-careers { grid-template-columns: 1fr 1fr; min-height: 28.75rem; }
  .nh-careers__text { align-self: center; padding: 3.5rem var(--pad); }
  .nh-careers .nh-careers__img { height: 0; min-height: 100%; aspect-ratio: auto; }
}

/* About pillars: three across only where each tile has room for its text */
@media (max-width: 899px) {
  .pillars { grid-template-columns: 1fr; }
}

/* below 760px: the Careers cards stack */
@media (max-width: 759px) {
  .careers-cards { padding: clamp(2rem, 8vw, 4rem) var(--pad); }
  .careers-card { display: flex; flex-direction: column; }
  .careers-card__text { align-self: stretch; padding: 2.5rem clamp(1.25rem, 5vw, 2.5rem); }
  .careers-card__img { order: -1; aspect-ratio: 16 / 10; }
}

/* phones */
@media (max-width: 699px) {
  .brand-feature__card { display: flex; flex-direction: column; min-height: 0; }
  .brand-feature__img, .brand-feature--flo .brand-feature__img { order: -1; aspect-ratio: 4 / 3; }
  .brand-feature__text { width: auto; margin: 0; padding: 2rem clamp(1.25rem, 5vw, 2.5rem) 2.5rem; }
}
@media (max-width: 599px) {
  .site-footer { padding-top: 3rem; }
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 2.25rem 1.5rem; }
  .site-footer__brand, .site-footer__linkedin { grid-column: 1 / -1; }
  .site-footer__linkedin { margin-left: -.25rem; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; margin-top: 2.5rem; }
  .about-hero { grid-template-columns: 1fr; aspect-ratio: auto; }
  .about-hero img { height: auto; aspect-ratio: 16 / 10; }
  .about-hero__nobl { object-position: 50% 40%; }
  .about-cta { grid-template-columns: 1fr; }
  /* team: two people per row with smaller photos, so the page is not one long column */
  .team__grid { gap: 2.5rem 1rem; }
  .member { flex: 0 1 calc(50% - .5rem); }
  .member__photo { width: min(8.5rem, 100%); }
  .member__name { margin-top: 1rem; font-size: 1rem; }
  .member__title { font-size: .875rem; }
  .careers-hero { aspect-ratio: 3 / 2; min-height: 0; }
}

/* very narrow phones (under 360px): labels may wrap, the brand tiles show logos only, the strip stacks */
/* phones and tablets (the stacked hero): no hero actions. The brand tiles under the photo are the links to
   the brands, "Our brands" starts just below and About is in the nav, so the whole hero fits the first screen */
@media (max-width: 999px) {
  .nh-hero .nh-actions { display: none; }
  .nh-hero__img { margin-top: 0; }
}
@media (max-width: 359px) {
  .brands-who__points li { grid-template-columns: 2.5rem 1fr; column-gap: .5rem; }
  .nh-pill { white-space: normal; padding-inline: 1.25rem; }
  .nh-rail span { display: none; }
  .nh-strip ul { grid-template-columns: 1fr; justify-items: start; gap: .625rem; }
  .nh-strip li { flex-direction: row; gap: .75rem; text-align: left; }
  .nh-strip li > span > span { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}