@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Figtree:wght@300;400;500;600;700&display=swap');
/* ===== Reset / guards ===== */
/* overflow-x:clip (not hidden) prevents horizontal scroll WITHOUT creating a
   scroll container — hidden would force overflow-y:auto and break position:sticky. */
html, body { overflow-x:clip; max-width:100%; }
.sk-uc .elementor-heading-title { font-family:'Fraunces', Georgia, 'Times New Roman', serif !important; }
a:focus-visible, button:focus-visible, .elementor-button:focus-visible,
.elementor-field:focus-visible { outline:2px solid #876f1c !important; outline-offset:3px; }

/* ===== Content grid ===== */
.sk-header > .elementor-container,
.sk-hero > .elementor-container { max-width:1160px; margin-left:auto; margin-right:auto; }

/* ===== Header (sticky, brand gold) ===== */
.sk-header { position:sticky !important; top:0; left:0; right:0; z-index:99;
  background:#876f1c !important; }
.sk-logo img { width:170px; height:auto; display:block; }
/* the crest logo is tall — size it by height in the sticky bar so the bar stays slim */
.sk-header .sk-logo img { width:auto !important; height:66px !important; }
/* vertically centre logo + burger in the bar */
.sk-header > .elementor-container { align-items:center !important; }
.sk-header .sk-nav-col > .elementor-element-populated { display:flex !important;
  align-items:center !important; justify-content:flex-end !important; width:100%; }
.sk-header .sk-nav-col .elementor-widget-wrap { align-content:center !important; }
.sk-burger { margin:0 0 0 auto !important; }
.sk-burger { margin-left:auto; display:flex; flex-direction:column; gap:6px; width:34px;
  background:none; border:none; cursor:pointer; padding:0; }
.sk-burger span { display:block; width:32px; height:2px; background:#fff; }
.sk-nav-col .elementor-widget-wrap { align-items:center; }
.sk-nav-col { display:flex; justify-content:flex-end; }

/* ===== Full-screen menu overlay ===== */
.sk-menu { position:fixed; inset:0; z-index:9999; background:rgba(30,30,30,.96);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s, visibility .3s; overflow-y:auto; }
.sk-menu.open { opacity:1; visibility:visible; pointer-events:auto; }
.sk-menu-inner { max-width:1280px; margin:0 auto; padding:34px 60px 56px;
  min-height:100vh; display:flex; flex-direction:column; box-sizing:border-box; }
.sk-menu-top { display:flex; align-items:center; justify-content:space-between; }
.sk-menu-top img { width:auto !important; height:56px !important; }
/* scroll lock while the menu is open (position:fixed is the only reliable lock on iOS) */
body.sk-menu-open { position:fixed !important; left:0; right:0; width:100% !important;
  overflow:hidden !important; }
.sk-close { background:none; border:none; color:#fff; font-size:34px; line-height:1; cursor:pointer; }
.sk-menu-nav { flex:1; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.sk-menu-nav a { color:#f3eee0; font-size:26px; font-weight:300; text-decoration:none; }
.sk-menu-nav a:hover { color:#876f1c; }
.sk-menu-contact { display:flex; flex-direction:column; gap:4px; }
.sk-menu-contact a { color:rgba(255,255,255,.8); font-size:14px; text-decoration:none; }

/* ===== Hero ===== */
.sk-hero { overflow:hidden !important; }
.sk-hero > .elementor-container { position:relative; z-index:2; }

/* ===== Divider (CSS background; works where image-widget data-URIs don't) ===== */
.sk-rule { height:1px; line-height:0; background:#876f1c; width:60px; }
.sk-rule img { display:none !important; }
.sk-rule--center { margin-left:auto; margin-right:auto; }

/* ===== Buttons ===== */
.sk-btn .elementor-button { font-family:'Figtree', -apple-system, system-ui, sans-serif !important; border-radius:0 !important;
  background:transparent !important; border:1px solid #110F0D !important; color:#110F0D !important;
  text-transform:uppercase; padding:14px 34px !important; }
.sk-btn .elementor-button:hover { background:#876f1c !important; border-color:#876f1c !important; color:#fff !important; }

/* ===== Text max-width helper ===== */
.sk-maxw { max-width:640px; margin-left:auto; margin-right:auto; }

/* ===== Gallery (standard Image Gallery -> clean grid) ===== */
.sk-gallery .gallery { display:grid !important; grid-template-columns:repeat(3,1fr) !important;
  gap:24px !important; margin:0 !important; }
.sk-gallery .gallery-item { width:auto !important; max-width:none !important; display:block !important;
  margin:0 !important; padding:0 !important; float:none !important; }
.sk-gallery .gallery-icon img { display:block; width:100%; height:auto; aspect-ratio:1.2/1; object-fit:cover; border:none !important; }
.sk-gallery .gallery-caption { display:none !important; }

/* ===== Forms (Elementor Pro) — single border + custom select chevron ===== */
.sk-form .elementor-field { border:1px solid #CAC2BB !important; border-radius:0 !important;
  background:#fff !important; padding:11px 14px !important; font-family:'Figtree', -apple-system, system-ui, sans-serif !important; }
.sk-form .elementor-field:focus { border-color:#876f1c !important; }
.sk-form .elementor-select-wrapper { position:relative; }
.sk-form .elementor-select-wrapper select { border:none !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important; height:auto !important;
  padding:0 26px 0 0 !important; width:100% !important; }
.sk-form .elementor-select-wrapper::before { display:none !important; }
.sk-form .elementor-select-wrapper::after { content:""; position:absolute; right:4px; top:50%;
  width:8px; height:8px; border:solid #110F0D; border-width:0 0 2px 2px;
  transform:translateY(-70%) rotate(-45deg); pointer-events:none; }

/* ===== Footer (matches the header gold) ===== */
.sk-foot .sk-logo img { width:auto !important; height:76px !important; margin-left:auto; margin-right:auto; }
.sk-foot-nav { text-align:center; }
.sk-foot-nav a { color:#fff; text-decoration:none; margin:0 12px; font-size:14px; }
.sk-foot-nav a:hover { color:#110F0D; }
.sk-foot p { color:rgba(255,255,255,.92) !important; }
.sk-foot-contact a { color:#fff !important; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5); }
.sk-foot-areas p { color:rgba(255,255,255,.78) !important; letter-spacing:.04em; }
.sk-foot-legal p { color:rgba(255,255,255,.62) !important; }

/* ===== Social icons (menu overlay + footer) ===== */
.sk-social { display:flex; align-items:center; gap:14px; }
.sk-social a { display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid currentColor; text-decoration:none;
  transition:background .2s, color .2s, border-color .2s; }
.sk-social svg { width:17px; height:17px; display:block; }
.sk-social--menu { margin-top:16px; }
.sk-social--menu a { color:rgba(255,255,255,.8); }
.sk-social--menu a:hover { background:#876f1c; border-color:#876f1c; color:#fff; }
.sk-social--foot { justify-content:center; }
.sk-social--foot a { color:#fff; border-color:rgba(255,255,255,.55); }
.sk-social--foot a:hover { background:#fff; border-color:#fff; color:#876f1c; }

/* ════════════════════════════════════════════════════════════════════════
   UNIFORM MOBILE GUTTER  — every top-level section's content aligns to one
   26px left/right bound (the logo plane). The single most useful rule
   for mobile consistency; don't remove it.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  .elementor > .elementor-section.elementor-top-section,
  .elementor > .elementor-section.elementor-top-section > .elementor-container {
    padding-left:0 !important; padding-right:0 !important; }
  .elementor > .elementor-section.elementor-top-section > .elementor-container { max-width:100% !important; }
  .elementor > .elementor-section.elementor-top-section:not(.sk-header) > .elementor-container > .elementor-column {
    width:100% !important; }
  .elementor > .elementor-section.elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding-left:26px !important; padding-right:26px !important; }
  /* header: keep logo + burger on one centered row */
  .sk-header { padding-top:34px !important; padding-bottom:22px !important; }
  .sk-header > .elementor-container { flex-wrap:nowrap !important; align-items:center !important; }
  .sk-header > .elementor-container > .elementor-column { width:auto !important; }
  .sk-header .sk-nav-col { flex:1 1 auto !important; }
  .sk-gallery .gallery { grid-template-columns:repeat(2,1fr) !important; gap:14px !important; }
}

/* ===== Design-specific rules — DWC Careers ===== */
html { scroll-padding-top:96px; }   /* keep anchor targets clear of the sticky header */

/* center every top section's content to the content width */
.elementor > .elementor-section.elementor-top-section > .elementor-container {
  max-width:1160px; margin-left:auto; margin-right:auto; }

/* Eyebrow */
.sk-eyebrow p { margin:0; letter-spacing:.2em; text-transform:uppercase; }
.sk-eyebrow--onhero p { color:#876f1c; }

/* ===== Hero ===== */
.sk-hero > .elementor-container > .elementor-column > .elementor-widget-wrap { align-content:flex-end; }
.sk-hero-sub p { margin:0; }
/* hero copy is left-aligned to the logo plane — override the centring from .sk-maxw */
.sk-hero-sub { margin-left:0 !important; margin-right:0 !important; }
/* CTAs side by side with a gap */
.sk-hero-cta .elementor-widget-wrap { display:flex !important; flex-direction:row !important;
  align-items:center !important; gap:16px !important; }
.sk-hero-cta .elementor-widget { width:auto !important; flex:0 0 auto !important; margin-bottom:0 !important; }

/* ===== Button variants ===== */
.sk-btn.sk-btn--solid .elementor-button { background:#876f1c !important;
  border-color:#876f1c !important; color:#fff !important; }
.sk-btn.sk-btn--solid .elementor-button:hover { background:#7B5535 !important;
  border-color:#7B5535 !important; color:#fff !important; }
.sk-btn--ghost .elementor-button { background:transparent !important; border-color:#fff !important;
  color:#fff !important; }
.sk-btn--ghost .elementor-button:hover { background:#fff !important; border-color:#fff !important;
  color:#110F0D !important; }

/* ===== Intro band ===== */
.sk-intro .sk-uc .elementor-heading-title { margin-left:auto; margin-right:auto; max-width:20ch; }

/* ===== Jobs / tabs ===== */
.sk-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
  border-bottom:1px solid #CAC2BB; }
.sk-tab { font-family:'Figtree', -apple-system, system-ui, sans-serif; font-weight:600; font-size:14px; color:#60574F;
  background:none; border:0; border-bottom:2px solid transparent; padding:14px 22px;
  cursor:pointer; margin-bottom:-1px; transition:color .2s, border-color .2s; }
/* the theme styles bare <button> on :hover/:focus (a pseudo-class out-specifies our
   plain .sk-tab rule), which painted a pink block behind the tabs in Firefox — so the
   background is forced transparent in EVERY state. */
.sk-tab, .sk-tab:hover, .sk-tab:focus, .sk-tab:active, .sk-tab:focus-visible {
  background:none !important; background-color:transparent !important; box-shadow:none !important; }
.sk-tab:hover { color:#876f1c !important; border-bottom-color:rgba(135,111,28,.45) !important; }
.sk-tab:focus-visible { outline:2px solid #876f1c !important; outline-offset:-2px; }
.sk-tab.is-active { color:#110F0D !important; border-bottom-color:#876f1c !important; }

.sk-job { display:none !important; }
.sk-job.is-active { display:block !important; }
.sk-job > .elementor-container { padding-top:42px; }
.sk-job-title .elementor-heading-title { margin-bottom:6px; }
.sk-job-topmeta { padding-bottom:20px; border-bottom:1px solid #CAC2BB; margin-bottom:4px; }
.sk-pay { color:#5C2D15; font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-size:21px; margin-right:22px; }
.sk-job-meta { color:#60574F; font-size:13px; }
.sk-job-split > .elementor-container { align-items:flex-start; }
.sk-job-left > .elementor-element-populated { padding-right:64px !important; }
.sk-job-body h4 { font-family:'Figtree', -apple-system, system-ui, sans-serif; font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:#876f1c; margin:26px 0 10px; }
.sk-job-body p { margin-bottom:14px; }
/* the lead-in line under the job title (e.g. "Project Manager (Experienced)") */
.sk-job-body .sk-job-lead { font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-size:18px; color:#110F0D;
  margin-bottom:16px; }
/* bulleted lists inside the description (experience / schedule / license) */
.sk-job-body ul { list-style:none; margin:0 0 6px; padding:0; }
.sk-job-body li { position:relative; padding:4px 0 4px 18px; }
.sk-job-body li::before { content:""; position:absolute; left:0; top:14px;
  width:5px; height:5px; background:#876f1c; }
.sk-job-apply { margin-top:4px; }
.sk-job-aside > .elementor-element-populated { background:#F8F8F8 !important;
  padding:26px 28px !important; border-top:3px solid #876f1c; }
.sk-aside-h p { margin:0 0 8px; letter-spacing:.14em; text-transform:uppercase; color:#876f1c; }
.sk-job-benefits ul { list-style:none; margin:0; padding:0; font-size:14px; }
.sk-job-benefits li { padding:7px 0; border-bottom:1px solid #CAC2BB; color:#433A33; }
.sk-job-benefits li:last-child { border-bottom:0; }

/* ===== Apply form (on the chestnut section) =====
   Every control is one height (52px), one type scale, one border. The select's box is
   the WRAPPER (the <select> itself is transparent inside it), so the focus ring goes on
   the wrapper via :focus-within — putting it on the <select> draws it over the text. */
.sk-apply-form { max-width:760px; margin-left:auto; margin-right:auto; }
.sk-apply-form .elementor-field-group { margin-bottom:22px !important; }
.sk-apply-form .elementor-field-group > label {
  font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:13px !important; font-weight:600 !important;
  letter-spacing:.02em !important; color:#fff !important; margin-bottom:9px !important; display:block !important; }

/* one box style + one height for every control */
.sk-apply-form input[type=text].elementor-field,
.sk-apply-form input[type=email].elementor-field,
.sk-apply-form input[type=tel].elementor-field,
.sk-apply-form .elementor-select-wrapper {
  height:52px !important; min-height:52px !important; box-sizing:border-box !important;
  background:#fff !important; border:1px solid rgba(255,255,255,.28) !important; border-radius:0 !important;
  padding:0 16px !important; font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:15px !important; }
/* only the select's wrapper is a flex box — flex on an <input> makes Firefox blow the
   file field up to ~100px tall, so inputs are left as plain blocks. */
.sk-apply-form .elementor-select-wrapper { display:flex !important; align-items:center !important; }

/* file upload — same 52px box, with a real styled button instead of the browser default.
   The button is centred by box math rather than flex (flex breaks the field in Firefox):
   52 height - 2px borders - 14px vertical padding = a 36px content box, and the button is
   exactly 36px tall, so the gap above and below is an even 7px. */
.sk-apply-form input[type=file].elementor-field {
  display:block !important; height:52px !important; min-height:52px !important;
  box-sizing:border-box !important; padding:7px 14px !important; line-height:36px !important;
  background:#fff !important; border:1px solid rgba(255,255,255,.28) !important; border-radius:0 !important;
  font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:14px !important; }
.sk-apply-form input[type=file]::file-selector-button,
.sk-apply-form input[type=file]::-webkit-file-upload-button {
  height:36px !important; box-sizing:border-box !important;
  padding:0 18px !important; line-height:36px !important; margin:0 14px 0 0 !important;
  font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:11px !important; font-weight:600 !important;
  letter-spacing:.12em !important; text-transform:uppercase !important;
  background:#110F0D !important; color:#fff !important; border:0 !important; border-radius:0 !important;
  cursor:pointer !important; }
.sk-apply-form input[type=file]::file-selector-button:hover,
.sk-apply-form input[type=file]::-webkit-file-upload-button:hover { background:#876f1c !important; }
.sk-apply-form .elementor-field-group textarea.elementor-field-textual {
  height:124px !important; box-sizing:border-box !important; background:#fff !important;
  border:1px solid rgba(255,255,255,.28) !important; border-radius:0 !important;
  padding:14px 16px !important; font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:15px !important; line-height:1.6 !important; }

/* typed text must be dark — the theme sets -webkit-text-fill-color, so override both */
.sk-apply-form .elementor-field-group .elementor-field-textual,
.sk-apply-form .elementor-field-group select {
  color:#110F0D !important; -webkit-text-fill-color:#110F0D !important; }
.sk-apply-form .elementor-field-group .elementor-field-textual::placeholder {
  color:#8a8178 !important; -webkit-text-fill-color:#8a8178 !important; opacity:1 !important; }

/* select: strip the native arrow so only our single chevron shows */
.sk-apply-form .elementor-select-wrapper { position:relative !important; }
.sk-apply-form .elementor-select-wrapper select {
  -webkit-appearance:none !important; appearance:none !important; background-image:none !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  height:50px !important; padding:0 26px 0 0 !important; margin:0 !important; width:100% !important;
  font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:15px !important; }
.sk-apply-form .elementor-select-wrapper::before { display:none !important; }
.sk-apply-form .elementor-select-wrapper::after { content:"" !important; position:absolute !important;
  right:16px; top:50%; width:8px; height:8px; border:solid #110F0D; border-width:0 0 2px 2px;
  transform:translateY(-70%) rotate(-45deg); pointer-events:none; display:block !important; }

/* radios inline, consistent type */
.sk-apply-form .elementor-field-subgroup { display:flex !important; flex-direction:row !important;
  flex-wrap:wrap; gap:10px 24px; padding-top:4px; }
.sk-apply-form .elementor-field-option { flex:0 0 auto !important; width:auto !important;
  display:flex; align-items:center; gap:7px; }
.sk-apply-form .elementor-field-option label { font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:14px !important;
  font-weight:400 !important; color:rgba(255,255,255,.92) !important; }

/* focus ring sits outside the control, never over the text */
.sk-apply-form input.elementor-field:focus,
.sk-apply-form textarea.elementor-field:focus,
.sk-apply-form .elementor-select-wrapper:focus-within {
  outline:2px solid #876f1c !important; outline-offset:2px !important;
  border-color:#876f1c !important; }
.sk-apply-form select:focus { outline:none !important; }

.sk-apply-form .elementor-button { background:#876f1c !important; color:#fff !important;
  border:none !important; border-radius:0 !important; text-transform:uppercase; letter-spacing:.14em;
  padding:16px 30px !important; font-family:'Figtree', -apple-system, system-ui, sans-serif !important; font-size:13px !important; font-weight:600 !important; }
.sk-apply-form .elementor-button:hover { background:#7B5535 !important; }

/* ===== Sticky Apply pill (fixed; holder takes no space) ===== */
.sk-pill-holder, .sk-pill-holder > .elementor-container,
.sk-pill-holder .elementor-widget-wrap { padding:0 !important; min-height:0 !important; }
/* always visible; z-index sits below the header (99) and far below the menu overlay (9999) */
.sk-apply-pill { position:fixed; right:22px; bottom:22px; z-index:95; opacity:1;
  transform:none; transition:opacity .25s, transform .25s; pointer-events:auto; }
.sk-apply-pill.is-hidden { opacity:0; transform:translateY(14px); pointer-events:none; }
/* never let it sit over the open menu */
body.sk-menu-open .sk-apply-pill { opacity:0 !important; pointer-events:none !important; }
.sk-apply-pill a { display:inline-block; background:#876f1c; color:#fff; font-family:'Figtree', -apple-system, system-ui, sans-serif;
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:15px 26px;
  text-decoration:none; box-shadow:0 10px 30px rgba(17,15,13,.35); }
.sk-apply-pill a:hover { background:#7B5535; }

/* ===== Mobile ===== */
@media (max-width:820px) {
  .sk-hero-h1 .elementor-heading-title { font-size:40px !important; }
  .sk-job-split > .elementor-container > .elementor-column { width:100% !important; }
  .sk-job-left > .elementor-element-populated { padding-right:0 !important; }
  .sk-job-aside { margin-top:24px; }
  .sk-tab { padding:12px 14px; font-size:13px; }
}