/* ========================================================================== OCDIESEL — site styles Design tokens live in _ds/ocdiesel-design-system-…/tokens/*.css and are linked separately in . Everything here builds on those variables, so a token change flows through the whole site. ========================================================================== */ /* ---------- resets / page ------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box} body{margin:0;overflow-x:hidden} html{scroll-behavior:smooth} img{max-width:100%} ::selection{background:var(--navy-600);color:#fff} /* Anchor targets clear the fixed nav */ [id]{scroll-margin-top:96px} .container{max-width:var(--container-max);margin:0 auto} .section{padding:96px 52px} .section--subtle{background:var(--surface-subtle)} .section--navy{background:var(--navy-600)} .section--navy-deep{background:var(--navy-800)} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- reveal animations ------------------------------------------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)} .reveal.is-visible{opacity:1;transform:translateY(0)} .reveal-stagger>*{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)} .reveal-stagger.is-visible>*{opacity:1;transform:translateY(0)} .reveal-stagger.is-visible>*:nth-child(1){transition-delay:.05s} .reveal-stagger.is-visible>*:nth-child(2){transition-delay:.12s} .reveal-stagger.is-visible>*:nth-child(3){transition-delay:.19s} .reveal-stagger.is-visible>*:nth-child(4){transition-delay:.26s} .reveal-stagger.is-visible>*:nth-child(5){transition-delay:.33s} .reveal-stagger.is-visible>*:nth-child(6){transition-delay:.4s} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal,.reveal-stagger>*{opacity:1;transform:none;transition:none} } /* ---------- Button ------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font-support);font-weight:600; letter-spacing:var(--ls-label);text-transform:uppercase; border:var(--border-width-strong) solid transparent; border-radius:var(--radius-md);cursor:pointer;text-decoration:none; white-space:nowrap; transition:background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .btn:active{transform:scale(var(--press-scale))} .btn--sm{font-size:11px;padding:9px 16px} .btn--md{font-size:12px;padding:13px 24px} .btn--lg{font-size:13px;padding:17px 32px} .btn--full{width:100%} .btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg);border-color:var(--action-primary-bg)} .btn--primary:hover{background:var(--action-primary-bg-hover);border-color:var(--action-primary-bg-hover);color:#fff} .btn--secondary{background:transparent;color:var(--action-secondary-fg);border-color:var(--action-secondary-border)} .btn--secondary:hover{background:var(--action-secondary-bg-hover)} .btn--inverse{background:var(--action-inverse-bg);color:var(--action-inverse-fg);border-color:var(--action-inverse-bg)} .btn--inverse:hover{background:var(--warm-100);border-color:var(--warm-100);color:var(--action-inverse-fg)} .btn--inverse-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)} .btn--inverse-outline:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff} /* ---------- Badge -------------------------------------------------------- */ .badge{ display:inline-flex;align-items:center;gap:6px; font-family:var(--font-support);font-weight:600;font-size:var(--fs-micro); letter-spacing:var(--ls-label);text-transform:uppercase; padding:5px 10px;border-radius:var(--radius-md); } .badge--navy{background:var(--navy-600);color:#fff} .badge--amber{background:var(--signal-amber);color:var(--navy-900)} /* ---------- Card --------------------------------------------------------- */ .card{ background:var(--surface-card);color:var(--text-body); border:1px solid var(--border-subtle);border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);padding:var(--space-8); transition:box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); } .card--interactive{cursor:pointer} .card--interactive:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)} /* ---------- Icon --------------------------------------------------------- */ /* Inline SVG (no CDN dependency). Stroke colour inherits from currentColor. */ .icon{display:inline-block;flex:none;vertical-align:middle} /* ---------- SectionHeading ---------------------------------------------- */ .section-heading{margin-bottom:48px} .section-heading__eyebrow{ font-family:var(--font-support);font-weight:600;font-size:var(--fs-micro); letter-spacing:var(--ls-eyebrow);text-transform:uppercase; color:var(--text-muted);margin-bottom:var(--space-3); } .section-heading__title{ font-size:var(--fs-h2);font-weight:var(--fw-bold); line-height:var(--lh-heading);color:var(--text-heading);margin:0; } .section-heading__desc{ margin-top:var(--space-4);font-size:var(--fs-body-lg);font-weight:300; line-height:var(--lh-body);color:var(--text-muted);max-width:62ch; } .section-heading--inverse .section-heading__eyebrow{color:var(--warm-300)} .section-heading--inverse .section-heading__title{color:#fff} .section-heading--inverse .section-heading__desc{color:var(--text-on-inverse-muted)} /* ---------- Stat --------------------------------------------------------- */ .stat__value{ font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h1); line-height:var(--lh-tight);color:var(--text-heading); } .stat__label{ margin-top:var(--space-2);font-family:var(--font-support);font-weight:500; font-size:var(--fs-body-sm);line-height:1.4;color:var(--text-muted); white-space:pre-line; } .stat--inverse .stat__value{color:#fff} .stat--inverse .stat__label{color:var(--text-on-inverse-muted)} /* ---------- Form primitives --------------------------------------------- */ .field{display:flex;flex-direction:column;gap:var(--space-2)} .field__label{ font-family:var(--font-support);font-weight:600;font-size:var(--fs-micro); letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted); } .input,.textarea,.select__el{ width:100%;box-sizing:border-box; font-family:var(--font-body);font-weight:300;font-size:var(--fs-body); color:var(--text-heading);background:var(--surface-page); border:1px solid var(--border-subtle);border-radius:var(--radius-md); padding:13px 14px;outline:none; transition:border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .input:focus,.textarea:focus,.select__el:focus{border-color:var(--focus-ring);box-shadow:var(--shadow-focus)} .textarea{resize:vertical;line-height:var(--lh-body)} .select{position:relative} .select__el{appearance:none;-webkit-appearance:none;padding-right:40px} .select::after{ content:"";position:absolute;right:14px;top:50%;margin-top:-3px; width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent; border-top:6px solid var(--navy-400);pointer-events:none; } .checkbox{ display:inline-flex;align-items:center;gap:10px;cursor:pointer; font-size:var(--fs-body-sm);font-weight:300;color:var(--text-body); } .checkbox input{position:absolute;opacity:0;width:0;height:0} .checkbox__box{ width:18px;height:18px;flex:none;border-radius:var(--radius-md); border:1px solid var(--border-subtle);background:transparent; display:inline-flex;align-items:center;justify-content:center; transition:background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .checkbox input:checked + .checkbox__box{background:var(--navy-600);border-color:var(--navy-600)} .checkbox__box::after{ content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff; transform:rotate(-45deg) translate(1px,-1px);opacity:0; } .checkbox input:checked + .checkbox__box::after{opacity:1} .checkbox input:focus-visible + .checkbox__box{outline:2px solid var(--focus-ring);outline-offset:2px} .form-toggle{ background:none;border:none;padding:0;text-align:left; font-family:var(--font-support);font-size:12px;font-weight:600; letter-spacing:var(--ls-label);text-transform:uppercase; color:var(--navy-600);cursor:pointer; } .form-note{font-size:13px;font-weight:600;color:var(--navy-600);text-align:center} .form-error{font-size:13px;color:var(--signal-red);text-align:center} .form-success{text-align:center;padding:40px 0} .form-success__title{font-size:20px;font-weight:800;color:var(--text-heading);margin-bottom:8px} .form-success p{font-size:14px;color:var(--text-muted);line-height:1.7;margin:0} [hidden]{display:none !important} /* ---------- NAV ---------------------------------------------------------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:200; background:rgba(30,37,50,.94); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--border-on-inverse); display:flex;align-items:center;justify-content:space-between;gap:20px; padding:0 32px;height:82px; } .nav__logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0} .nav__logo img{height:52px;width:auto;display:block} .nav__links{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:flex-end} .nav__link{ font-family:var(--font-support);font-size:12px;font-weight:600; letter-spacing:var(--ls-label);text-transform:uppercase; color:var(--warm-300);text-decoration:none; } .nav__link:hover{color:#fff} .nav__call{ display:flex;align-items:center;gap:6px; font-family:var(--font-support);font-size:12px;font-weight:700; letter-spacing:var(--ls-label);text-transform:uppercase; color:#fff;text-decoration:none; } .nav__call:hover{color:var(--warm-300)} .nav__toggle{ display:none;background:none;border:1px solid rgba(255,255,255,.3); border-radius:var(--radius-md);width:44px;height:40px;cursor:pointer; align-items:center;justify-content:center; } .nav__toggle span{display:block;width:18px;height:2px;background:#fff;position:relative} .nav__toggle span::before,.nav__toggle span::after{ content:"";position:absolute;left:0;width:18px;height:2px;background:#fff; } .nav__toggle span::before{top:-6px} .nav__toggle span::after{top:6px} /* ---------- HERO --------------------------------------------------------- */ .hero{position:relative;min-height:max(720px,100vh);background:var(--navy-800);overflow:hidden} .hero__bg{position:absolute;inset:0;z-index:0} .hero__slide-bg{ position:absolute;inset:0;background-size:cover;background-position:center; opacity:0;transition:opacity 1s var(--ease-standard); filter:saturate(.7) contrast(1.04) brightness(.55); } .hero__slide-bg.is-active{opacity:1} .hero__scrim{position:absolute;inset:0;background:var(--scrim-left);z-index:1} .hero__inner{ position:relative;z-index:2;min-height:max(720px,100vh); display:flex;align-items:flex-end;padding:130px 52px 96px; } .hero__content{max-width:680px} .hero__logo{height:76px;width:auto;display:block;margin-bottom:28px} .hero__eyebrow{ font-family:var(--font-support);font-size:11px;font-weight:700; letter-spacing:var(--ls-eyebrow);text-transform:uppercase; color:var(--warm-300);margin-bottom:18px; } .hero__title{ font-size:clamp(34px,5.2vw,60px);font-weight:800;color:#fff; line-height:1.08;letter-spacing:-.02em;margin:0 0 18px; } .hero__body{ font-size:16px;font-weight:300;color:rgba(255,255,255,.8); line-height:1.75;margin:0 0 30px;max-width:520px; } .hero__ctas{display:flex;gap:12px;flex-wrap:wrap} .hero__stats{display:flex;gap:28px;margin-top:30px;flex-wrap:wrap} .hero__stat-value{font-family:var(--font-heading);font-weight:700;font-size:22px;color:#fff;line-height:1} .hero__stat-label{margin-top:4px;font-family:var(--font-support);font-weight:500;font-size:11px;color:var(--warm-300)} .hero__dots{position:absolute;bottom:40px;right:52px;z-index:10;display:flex;gap:10px} .hero__dot{ width:9px;height:9px;border-radius:50%;border:none;cursor:pointer;padding:0; background:rgba(255,255,255,.35);transform:scale(1); transition:all .3s var(--ease-standard); } .hero__dot.is-active{background:#fff;transform:scale(1.2)} /* ---------- DUAL PATH ---------------------------------------------------- */ .dualpath{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));background:var(--navy-900)} .dualpath__item{ display:flex;align-items:center;gap:20px;padding:36px 52px;text-decoration:none; transition:background var(--dur-base) var(--ease-standard); } .dualpath__item:first-child{border-right:1px solid rgba(255,255,255,.1)} .dualpath__item:hover{background:var(--navy-800)} .dualpath__icon{ width:52px;height:52px;border-radius:var(--radius-md);background:#fff; display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--navy-600); } .dualpath__tag{ font-family:var(--font-support);font-size:11px;font-weight:700; letter-spacing:var(--ls-label);text-transform:uppercase; color:var(--warm-300);margin-bottom:4px; } .dualpath__title{font-family:var(--font-heading);font-weight:700;font-size:19px;color:#fff} .dualpath__title span{color:var(--warm-300);font-weight:300;font-size:15px} /* ---------- LABOUR AVAILABILITY ----------------------------------------- */ .availability{ background:var(--surface-subtle);padding:44px 52px; display:flex;align-items:center;justify-content:space-between;gap:32px; flex-wrap:wrap;border-bottom:1px solid var(--border-subtle); } .availability__eyebrow{ font-family:var(--font-support);font-size:11px;font-weight:700; letter-spacing:var(--ls-eyebrow);text-transform:uppercase; color:var(--navy-600);margin-bottom:8px; } .availability h2{font-family:var(--font-heading);font-weight:700;font-size:22px;color:var(--text-heading);margin:0 0 6px} .availability p{font-size:13px;font-weight:300;color:var(--text-muted);line-height:1.6;margin:0} .availability__form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start} .availability__form .input{border-radius:var(--radius-md);padding:11px 14px;font-size:13px;width:150px} .availability__form .input[type=email]{width:190px} .availability__done{font-size:14px;color:var(--navy-600);font-weight:600} /* ---------- INTRO STRIP -------------------------------------------------- */ .intro{background:var(--navy-600);padding:56px 52px;display:flex;align-items:center;gap:64px;flex-wrap:wrap} .intro__copy{flex:2;min-width:280px} .intro__copy h2{font-size:clamp(20px,2.4vw,28px);font-weight:800;color:#fff;line-height:1.3;margin:0 0 10px} .intro__copy p{font-size:14px;font-weight:300;color:var(--warm-300);line-height:1.75;max-width:560px;margin:0} .intro__stats{display:flex;gap:40px;flex-wrap:wrap} /* ---------- PHOTO STRIP -------------------------------------------------- */ .photostrip{position:relative;height:330px;overflow:hidden;background:var(--navy-900)} .photostrip img{ width:100%;height:100%;object-fit:cover;object-position:center 12%; display:block;filter:saturate(.7) contrast(1.04) brightness(.86); } .photostrip__tint{position:absolute;inset:0;background:rgba(44,53,70,.42);mix-blend-mode:multiply;left:3px;top:-8px} .photostrip__grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(22,27,36,.55) 0%,rgba(22,27,36,0) 60%);left:-4px;top:-6px} /* ---------- SERVICES ----------------------------------------------------- */ /* Fixed 3 across so six cards land as a clean 3x2 block with no orphan row. */ .services__grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:20px;max-width:1200px;margin:0 auto; } @media (max-width:1080px){.services__grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:680px){.services__grid{grid-template-columns:1fr}} .service-card{display:flex;flex-direction:column;gap:var(--space-3);min-height:260px;text-align:left;font:inherit} .service-card__top{display:flex;align-items:center;justify-content:space-between} .service-card__number{font-family:var(--font-heading);font-weight:700;font-size:34px;line-height:1;color:var(--warm-300)} .service-card h3{font-size:var(--fs-h4);font-weight:var(--fw-bold);color:var(--text-heading);margin:0} .service-card p{font-size:var(--fs-body-sm);font-weight:300;line-height:var(--lh-body);color:var(--text-muted);margin:0;flex:1} .service-card__action{ font-family:var(--font-support);font-weight:600;font-size:var(--fs-micro); letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--navy-600); transition:transform var(--dur-base) var(--ease-standard); } .service-card:hover .service-card__action{transform:translateX(4px)} /* ---------- GALLERY ------------------------------------------------------ */ .gallery{background:var(--navy-900);overflow:hidden;position:relative} .gallery__track{display:flex;transition:transform .9s var(--ease-standard);will-change:transform} .gallery__item{min-width:260px;height:280px;flex-shrink:0;margin-right:4px;position:relative;overflow:hidden} .gallery__item img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.7) contrast(1.04) brightness(.86)} .gallery__item::after{content:"";position:absolute;inset:0;background:rgba(44,53,70,.42);mix-blend-mode:multiply} /* ---------- CAPABILITIES ------------------------------------------------- */ /* Six points, 3x2 — matches the services rhythm above it. */ .capabilities__grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:36px;max-width:1200px;margin:0 auto; } @media (max-width:1080px){.capabilities__grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:680px){.capabilities__grid{grid-template-columns:1fr}} .capability{display:flex;gap:var(--space-4)} .capability__icon{ width:44px;height:44px;flex:none;border-radius:var(--radius-md); background:rgba(255,255,255,.10);color:#fff; display:inline-flex;align-items:center;justify-content:center; } .capability__title{font-family:var(--font-heading);font-weight:var(--fw-semibold);font-size:var(--fs-h5);color:#fff} .capability p{ margin-top:var(--space-2);font-size:var(--fs-body-sm);font-weight:300; line-height:var(--lh-body);color:var(--text-on-inverse-muted); } .capabilities__cta{text-align:center;margin-top:56px} .link-outline{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-support);font-weight:500;font-size:12px; letter-spacing:var(--ls-label);text-transform:uppercase; color:#fff;text-decoration:none; border:1px solid rgba(255,255,255,.32);border-radius:8px;padding:14px 28px; transition:background var(--dur-fast) var(--ease-standard); } .link-outline:hover{background:rgba(255,255,255,.12);color:#fff} /* ---------- SPLIT -------------------------------------------------------- */ .split{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));min-height:460px} .split__panel{ position:relative;display:flex;flex-direction:column;justify-content:flex-end; padding:56px 52px;overflow:hidden;background-size:cover;background-position:center; min-height:400px; } .split__panel::before{ content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(15,20,30,.92) 0%,rgba(15,20,30,.35) 100%); } .split__body{position:relative;z-index:2} .split__tag{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--warm-300);margin-bottom:12px} .split__panel h3{font-size:clamp(22px,3vw,32px);font-weight:800;color:#fff;line-height:1.15;letter-spacing:-.02em;margin:0 0 14px} .split__panel p{font-size:14px;font-weight:300;color:rgba(255,255,255,.7);line-height:1.75;margin:0 0 26px;max-width:420px} /* ---------- TESTIMONIALS ------------------------------------------------- */ .testimonials{position:relative;overflow:hidden} .testimonials__bg{ position:absolute;inset:0;background-image:url("../assets/testimonials-bg.jpg"); background-size:cover;background-position:center;opacity:.06; } .testimonials__inner{position:relative;z-index:1} /* Two wide columns — four long quotes sit as a balanced 2x2 with no orphan, and the longer line length reads better than three narrow columns. */ .testimonials__grid{ display:grid;grid-template-columns:repeat(2,1fr); gap:24px;max-width:1200px;margin:0 auto; } @media (max-width:820px){.testimonials__grid{grid-template-columns:1fr}} .testimonial{display:flex;flex-direction:column;gap:var(--space-4)} .testimonial__mark{font-family:var(--font-heading);font-weight:700;font-size:46px;line-height:.7;color:var(--warm-200)} .testimonial__stars{color:var(--signal-amber);letter-spacing:2px;font-size:14px} .testimonial p{font-size:var(--fs-body);font-weight:300;line-height:var(--lh-body);color:var(--text-body);margin:0;flex:1} .testimonial__foot{border-top:1px solid var(--border-subtle);padding-top:var(--space-4)} .testimonial__name{font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);color:var(--text-heading)} .testimonial__role{font-size:var(--fs-caption);color:var(--text-muted)} /* ---------- JOBS --------------------------------------------------------- */ .jobs__list{display:flex;flex-direction:column;gap:14px;max-width:1200px;margin:0 auto} .job-card{ display:flex;align-items:center;gap:var(--space-6);padding:var(--space-6); background:var(--navy-500);border:1px solid rgba(255,255,255,.16); cursor:pointer;text-align:left;width:100%;font:inherit; } .job-card .job-card__title{display:block;font-family:var(--font-heading);font-weight:var(--fw-semibold);font-size:var(--fs-h5);color:#fff} .job-card__meta{display:block;margin-top:4px;font-size:var(--fs-caption);color:var(--warm-300)} .job-card__body{flex:1;display:block;min-width:0} .job-card__apply{ font-family:var(--font-support);font-weight:600;font-size:var(--fs-micro); letter-spacing:var(--ls-label);text-transform:uppercase;color:#fff; transition:transform var(--dur-base) var(--ease-standard); } .job-card:hover .job-card__apply{transform:translateX(4px)} /* ---------- ENQUIRY ------------------------------------------------------ */ .enquiry__grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:64px;max-width:1200px;margin:0 auto;align-items:start; } .enquiry h2{font-size:clamp(24px,3vw,36px);font-weight:800;color:var(--text-heading);margin:0 0 14px;letter-spacing:-.02em} .enquiry__lede{font-size:14px;font-weight:300;color:var(--text-muted);line-height:1.75;margin:0 0 36px} .enquiry__details{display:flex;flex-direction:column;gap:24px} .enquiry__detail{padding-bottom:22px;border-bottom:1px solid var(--border-subtle)} .enquiry__detail:last-child{padding-bottom:0;border-bottom:none} .enquiry__label{ font-size:10px;font-weight:700;letter-spacing:var(--ls-label); text-transform:uppercase;color:var(--text-muted);margin-bottom:6px; } .enquiry__value{font-size:16px;font-weight:600;color:var(--text-heading)} .enquiry__hint{font-size:12px;font-weight:300;color:var(--text-muted);margin-top:3px} .enquiry__card{ background:#fff;border:1px solid var(--border-subtle); border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-sm); } .enquiry__card form{display:flex;flex-direction:column;gap:16px} .form-more{display:flex;flex-direction:column;gap:16px} /* ---------- FOOTER ------------------------------------------------------- */ .footer{background:var(--navy-900);padding:72px 52px 36px} .footer__grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:44px;max-width:1200px;margin:0 auto 48px; } .footer__logo{height:40px;width:auto;margin-bottom:16px} .footer__blurb{font-size:13px;font-weight:300;color:var(--warm-300);line-height:1.75;max-width:230px;opacity:.7;margin:0} .footer h4{ font-size:10px;font-weight:700;letter-spacing:var(--ls-eyebrow); text-transform:uppercase;color:#fff;margin:0 0 18px; } .footer__links{display:flex;flex-direction:column;gap:10px} .footer__links a{font-size:13px;font-weight:300;color:var(--warm-300);text-decoration:none} .footer__links a:hover{color:#fff} .footer__bar{ border-top:1px solid var(--border-on-inverse);padding-top:24px; display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:10px;max-width:1200px;margin:0 auto; } .footer__copy{font-size:11px;font-weight:300;color:var(--warm-300);opacity:.5;margin:0} .footer__meta{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .footer__meta a,.footer__meta button{ background:none;border:none;padding:0;cursor:pointer; font-size:11px;font-weight:600;letter-spacing:var(--ls-label); text-transform:uppercase;color:var(--warm-300);text-decoration:none;opacity:.6; font-family:var(--font-support); } .footer__meta a:hover,.footer__meta button:hover{opacity:1;color:#fff} /* Needle Mover — the internal register. Sits under the footer logo as a deliberate, visible button so the crew can find it at a glance. */ .footer__needle{ display:inline-flex;align-items:center;gap:8px;margin-top:18px; font-family:var(--font-support);font-weight:700;font-size:15px; letter-spacing:var(--ls-label);text-transform:uppercase; color:#fff;text-decoration:none; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-md); padding:11px 18px; transition:background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); } .footer__needle:hover{background:#fff;color:var(--navy-800);border-color:#fff} /* ---------- BACK TO TOP -------------------------------------------------- */ .backtotop{ position:fixed;bottom:40px;right:172px;z-index:301; width:44px;height:44px;border-radius:50%;background:var(--navy-600); border:none;color:#fff;font-size:18px;line-height:1; display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:var(--shadow-md);opacity:0;pointer-events:none; transition:opacity var(--dur-base) var(--ease-standard); } .backtotop.is-visible{opacity:1;pointer-events:auto} /* ---------- CHAT --------------------------------------------------------- */ .chat-bubble{ position:fixed;bottom:136px;right:24px;z-index:298; background:var(--navy-600);color:#fff;padding:12px 16px; border-radius:var(--radius-lg);font-size:13px;max-width:220px; box-shadow:var(--shadow-md);cursor:pointer;border:none;text-align:left; font-family:var(--font-body); } /* Adam is drawn waist-up, so he's anchored flush to the bottom of the screen — the viewport edge becomes his "floor" instead of cutting him off mid-air. */ .chat-launch{ position:fixed;bottom:0;right:16px;z-index:300; width:132px;height:132px;background:transparent;border:none; display:flex;align-items:flex-end;justify-content:center;cursor:pointer; filter:drop-shadow(var(--shadow-md));padding:0;line-height:0; transition:transform var(--dur-base) var(--ease-standard); } .chat-launch:hover{transform:translateY(-4px)} .chat-launch img{width:100%;height:100%;object-fit:contain;object-position:bottom center} .chat-panel{ position:fixed;bottom:140px;right:24px;z-index:299; width:340px;max-height:480px;background:#fff;border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden; } .chat-panel__head{background:var(--navy-600);padding:16px 18px;display:flex;align-items:center;justify-content:space-between} .chat-panel__id{display:flex;align-items:center;gap:10px} .chat-panel__id img{width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:top center;border:1.5px solid rgba(255,255,255,.4)} .chat-panel__name{font-size:13px;font-weight:700;color:#fff} .chat-panel__status{font-size:11px;color:var(--warm-300)} .chat-close{background:rgba(255,255,255,.12);border:none;color:#fff;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:14px} .chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:180px;max-height:260px} .chat-msg{max-width:85%;padding:9px 12px;border-radius:var(--radius-md);font-size:13px;line-height:1.5} .chat-msg--bot{align-self:flex-start;background:var(--navy-050);color:var(--text-body)} .chat-msg--user{align-self:flex-end;background:var(--navy-600);color:#fff} .chat-qa{padding:0 16px 12px;display:flex;flex-wrap:wrap;gap:6px} .chat-qa button{ font-size:11px;background:var(--navy-050);color:var(--navy-600); border:1px solid var(--border-subtle);border-radius:var(--radius-md); padding:6px 10px;cursor:pointer;font-family:var(--font-body); } .chat-form{display:flex;border-top:1px solid var(--border-subtle)} .chat-form input{flex:1;border:none;padding:12px 14px;font-family:var(--font-body);font-size:13px;outline:none;min-width:0} .chat-form button{background:var(--navy-600);color:#fff;border:none;padding:0 16px;cursor:pointer;font-size:13px} /* ---------- MODALS ------------------------------------------------------- */ .modal{ position:fixed;inset:0;z-index:500;background:rgba(15,20,30,.85); display:flex;justify-content:center;overflow-y:auto;padding:20px; } .modal--top{align-items:flex-start} .modal--center{align-items:center} .modal__panel{background:#fff;width:100%;max-width:560px;border-radius:var(--radius-lg);overflow:hidden} .modal__panel--sm{max-width:520px} .modal__panel--xs{max-width:440px;padding:36px;position:relative} .modal__head{background:var(--navy-600);padding:24px 28px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px} .modal__head--row{align-items:center;padding:22px 28px} .modal__eyebrow{font-size:10px;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--warm-300);margin-bottom:6px} .modal__title{font-size:19px;font-weight:800;color:#fff} .modal__meta{font-size:12px;color:var(--warm-300);margin-top:4px} .modal__close{ background:rgba(255,255,255,.12);border:none;color:#fff; width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:18px;flex-shrink:0; } .modal__close--plain{position:absolute;top:16px;right:18px;background:none;color:var(--text-muted);font-size:22px;width:auto;height:auto} .modal__share{padding:14px 28px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap} .modal__share-label{font-size:11px;font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)} .share-btn{ width:28px;height:28px;border-radius:50%;background:var(--navy-050);border:none; display:flex;align-items:center;justify-content:center;cursor:pointer; font-family:var(--font-support);font-weight:700;font-size:11px; color:var(--navy-600);text-decoration:none; } .share-btn--wide{width:auto;border-radius:14px;padding:0 10px;gap:6px} .share-btn--wide span{font-size:11px;font-weight:600;color:var(--navy-600)} .modal form{padding:28px;display:flex;flex-direction:column;gap:16px} .modal__panel--xs form{padding:0;gap:14px} .modal__about{ padding:14px 16px;background:var(--navy-050);border-left:3px solid var(--navy-600); border-radius:0 6px 6px 0;font-size:13px;color:var(--text-body);line-height:1.7; } .modal__step{font-size:11px;font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)} .modal__success{padding:48px 28px;text-align:center} .modal__success-title{font-size:19px;font-weight:800;color:var(--text-heading);margin-bottom:8px} .modal__success p{font-size:14px;color:var(--text-muted);line-height:1.7;margin:0} .modal__lede{font-size:13px;color:var(--text-muted);line-height:1.7;margin:0 0 4px} .modal__row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .modal__seek{text-align:center;font-size:12px;color:var(--text-muted)} .dropzone{ border:2px dashed var(--border-subtle);border-radius:var(--radius-md); padding:20px;text-align:center;cursor:pointer;background:none;width:100%; font-family:var(--font-body); } .dropzone:hover{border-color:var(--navy-400)} .dropzone__label{font-size:13px;color:var(--text-muted)} .dropzone__label.has-file{color:var(--navy-600)} .dropzone__hint{font-size:11px;color:var(--text-muted);margin-top:4px} body.modal-open{overflow:hidden} /* ========================================================================== RESPONSIVE The design was drawn at desktop width. These rules keep it usable on phones and tablets, where most careers traffic will land. ========================================================================== */ @media (max-width:900px){ .section{padding:64px 24px} .nav{padding:0 20px;height:70px} .nav__logo img{height:40px} .nav__toggle{display:inline-flex} .nav__links{ display:none;position:absolute;top:70px;left:0;right:0; flex-direction:column;align-items:stretch;gap:0; background:var(--navy-800); box-shadow:var(--shadow-lg); border-bottom:1px solid var(--border-on-inverse);padding:8px 20px 20px; } .nav__links.is-open{display:flex} .nav__links>*{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)} .nav__links>*:last-child{border-bottom:none;margin-top:8px} .nav__call{justify-content:flex-start} .hero__inner{padding:110px 24px 72px} .hero__logo{height:56px} .hero__dots{right:24px;bottom:24px} .hero__stats{gap:20px} .dualpath__item{padding:28px 24px} .dualpath__item:first-child{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)} .availability{padding:32px 24px} .intro{padding:44px 24px;gap:32px} .intro__stats{gap:28px} .stat__value{font-size:32px} .split__panel{padding:40px 24px;min-height:340px} .footer{padding:56px 24px 28px} .enquiry__grid{gap:40px} .enquiry__card{padding:28px} .photostrip{height:220px} .backtotop{right:auto;left:22px;bottom:22px} .chat-panel{right:12px;left:12px;width:auto;bottom:112px} .chat-launch{width:104px;height:104px;right:6px;bottom:0} .chat-bubble{bottom:108px;right:16px;max-width:170px;font-size:12px} } @media (max-width:560px){ .section{padding:52px 18px} .hero__inner{padding:100px 18px 60px} .hero__ctas .btn{width:100%} .modal{padding:0} .modal__panel,.modal__panel--sm{border-radius:0;min-height:100%} .modal__panel--xs{border-radius:0;min-height:100%;padding:28px 20px} .modal form{padding:20px} .modal__row{grid-template-columns:1fr} .availability__form{width:100%} .availability__form .input{flex:1;width:auto;min-width:0} .job-card{flex-wrap:wrap;gap:12px} .footer__bar{flex-direction:column;align-items:flex-start} } /* ---------- MOBILE FIXES ------------------------------------------------- */ /* iOS Safari zooms the whole page in whenever you focus an input whose font-size is below 16px, and it does not zoom back out afterwards. That zoom — not the panel's own size — is what made the chat appear bigger than the screen when tapped. 16px is Safari's threshold, not a design choice. */ @media (max-width:900px){ .chat-form input, .availability__form .input{font-size:16px} /* Keep the panel inside the viewport on short screens. dvh accounts for the mobile browser's collapsing address bar; the vh line is the fallback for anything that does not support it. */ .chat-panel{max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px)} .chat-log{max-height:none} } @media (max-width:560px){ /* Two inputs and a button on one row left "Your na" and "Email a" clipped. The inline widths are set on the elements themselves, so override both. */ .availability__form{flex-direction:column;align-items:stretch} /* [type=email] is matched here too: the desktop rule that sets its width is more specific, so a plain .input selector would lose to it. */ .availability__form .input, .availability__form .input[type=email]{width:100%;flex:none} .availability__form .btn{width:100%;justify-content:center} /* Adam was sitting on top of the content behind him on a narrow screen. */ .chat-launch{width:84px;height:84px} .chat-bubble{bottom:90px;right:12px;max-width:150px} .chat-panel{bottom:94px} } /* Width alone does not catch every iOS device — an iPad in landscape is 1024px wide and Safari still zooms on a sub-16px input there. pointer:coarse catches touch devices at any width, which is the actual condition. */ @media (pointer:coarse){ .chat-form input, .availability__form .input{font-size:16px} }