/*
 * United World US — home page, redesigned.
 *
 * Preview stylesheet. When this is approved it replaces
 * plugin/uw-us-core/assets/pages/home.css and is deployed with the plugin; the
 * page body it styles is written into post 7 the same way every other edit has
 * been. Nothing here is on production yet.
 *
 * The brief was a premium US professional recruiting firm, employer first,
 * national. Three decisions carry that:
 *
 * 1. An ink hero with a portrait bleeding off the right edge. A recruiting firm
 *    sells people, and the previous hero showed a diagram of a scorecard —
 *    accurate about the product, wrong about the business.
 *
 * 2. Space. Sections are 112px apart rather than 64px, headings run to 62px,
 *    and the measure is held near 62 characters. Premium reads as restraint far
 *    more than as ornament, and restraint costs nothing but width.
 *
 * 3. One accent, used sparingly. Everything that is not the accent is one of
 *    four neutrals, and the neutrals carry a slight blue bias so they read as
 *    chosen rather than as the browser default grey.
 *
 * The bilingual span pair (.en / .jp) and the toggle contract are unchanged:
 * .uw.lang-en hides .jp and vice versa, and the container id, button ids and
 * storage key are exactly what plugin/uw-us-core/assets/lang-toggle.js expects.
 */

/* ---------------------------------------------------------------- tokens */
.uw{
  --ink:#0B1220;          /* hero ground, CTA band */
  --ink-2:#151F33;        /* raised surface on ink */
  --paper:#FFFFFF;
  --mist:#F5F7FB;         /* tinted section */
  --line:#E4E9F0;
  --line-ink:rgba(255,255,255,.14);
  --text:#0F172A;
  --muted:#5B6577;
  --muted-ink:#A9B4C7;
  --accent:#1D4ED8;
  --accent-lift:#2563EB;
  --accent-soft:#E8EEFF;

  --gutter:32px;
  --sectionY:112px;
  --radius:14px;

  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans JP",sans-serif;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
.uw *{box-sizing:border-box}
.uw img{display:block;max-width:100%}
.uw a{color:inherit;text-decoration:none}
.uw h1,.uw h2,.uw h3{margin:0;letter-spacing:-.03em;line-height:1.1;font-weight:800}
/* Japanese has no spaces, so a heading breaks wherever the line runs out —
   the hero read 米国拠 / 点, splitting a word in half. auto-phrase breaks at
   phrase boundaries instead; browsers without it fall back to today's
   behaviour, which is what the page already does. */
.uw h1 .jp,.uw h2 .jp,.uw h3 .jp{word-break:auto-phrase}
/* Japanese sets wider than Latin at the same nominal size, so a heading tuned
   for English overflows its column in Japanese and breaks mid-word — the hero
   read 米国拠 / 点. auto-phrase only helps when a phrase boundary fits on the
   line, so the size has to give it one. 0.86 is the usual ratio for a bilingual
   pair and it lands the hero on 日系企業の米国拠点のための / 採用支援. */
.uw h1 .jp{font-size:.82em;letter-spacing:-.02em}
.uw h2 .jp,.uw .uw-h2 .jp{font-size:.9em;letter-spacing:-.02em}
.uw p{margin:0}
/* Every paragraph rule below is written as `.uw .x` rather than `.x`.
   `.uw p` scores (0,1,1); a bare `.uw-lede` scores (0,1,0) and loses to it, so
   the margin-top was silently dropped and the ledes sat flush against their
   headings. The gaps were in the stylesheet and not on the page. */

/* The language toggle contract. Unchanged from the page it replaces. */
.uw.lang-en .jp{display:none!important}
.uw.lang-jp .en{display:none!important}

.uw-wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.uw-sec{padding:var(--sectionY) 0}
.uw-sec-tint{background:var(--mist)}

.uw-eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.uw-h2{font-size:clamp(28px,3.4vw,42px);max-width:20ch;text-wrap:balance}
/* In a two-column split the heading already has a column to live in; the 20ch
   cap on top of that made it a narrow ribbon. */
.uw-split .uw-h2{max-width:none}
.uw .uw-lede{margin-top:20px;font-size:17px;line-height:1.8;color:var(--muted);max-width:62ch}

/* ------------------------------------------------------------------- nav */
.uw-n{
  position:relative;z-index:20;display:flex;align-items:center;gap:28px;
  max-width:1200px;margin:0 auto;padding:22px var(--gutter);
}
.uw-n-logo{font-size:19px;font-weight:800;letter-spacing:-.02em;color:#fff}
.uw-n-logo b{color:var(--accent-lift);font-weight:800}
.uw-n-links{margin-left:auto;display:flex;align-items:center;gap:26px}
.uw-n-links>a{font-size:14.5px;font-weight:500;color:#E3E9F3;transition:color .15s}
.uw-n-links>a:hover{color:#fff}
/* Its own ground. The inactive half is small, low-contrast type and it sits
   wherever the photograph happens to be brightest. */
.uw-lang-t{
  display:flex;border:1px solid var(--line-ink);border-radius:8px;overflow:hidden;
  background:rgba(11,18,32,.55);backdrop-filter:blur(6px);
}
.uw-lang-t button{
  border:0;background:transparent;color:#C3CDDD;font:600 12px/1 Inter,sans-serif;
  padding:7px 11px;cursor:pointer;
}
.uw-lang-t button.on{background:#fff;color:var(--ink)}
.uw-n-cta{
  background:var(--accent-lift);color:#fff!important;font-size:14px;font-weight:600;
  padding:11px 20px;border-radius:10px;transition:background .15s;
}
.uw-n-cta:hover{background:#1B4FD1}
.uw-hamburger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
.uw-hamburger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;border-radius:2px}

/* ------------------------------------------------------------------ hero */
.uw-hero{background:var(--ink);color:#fff}

/* The photo is a layer on the hero, not a column in the grid.
 *
 * The first attempt stretched the image itself past the viewport with a
 * negative inset. It bled correctly and cropped terribly: the element ended up
 * twice as wide as the part anyone could see, so object-fit centred the subject
 * in the half that was off-screen. Sizing the box to exactly the visible area
 * and letting the image fill it is the same effect with the crop under control.
 */
.uw-hero-main{position:relative;overflow:hidden;min-height:700px}
/* The nav crosses the photograph, and on the right of this frame the
   photograph is a bright window. At the old strength "Blog About Contact"
   measured about 3.2:1 against it. Taller and stronger, with a slow tail so it
   never reads as a band: 6:1 at the nav's baseline, and it costs nothing
   visually because what it darkens up there is dark hair and blown highlight. */
.uw-hero-main::before{
  content:"";position:absolute;top:0;left:0;right:0;height:210px;z-index:1;
  background:linear-gradient(180deg,rgba(11,18,32,.88) 0%,rgba(11,18,32,.55) 45%,
             rgba(11,18,32,0) 100%);
  pointer-events:none;
}
.uw-hero-inner{
  position:relative;z-index:2;max-width:1200px;margin:0 auto;
  padding:96px var(--gutter) 120px;
}
.uw-hero-copy{max-width:640px}
.uw-hero-photo{position:absolute;top:0;right:0;bottom:0;width:66%;z-index:1}
.uw-hero-photo img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 11%}
/* The photograph ends where the hero ends, and immediately under it is the
   facts strip with a hairline border. Without this the jacket and the second
   person's shoulder are sliced by a hard horizontal line, which reads as a
   photo that ran out rather than an edge someone chose. Short and partial, so
   the hand holding the pen — the detail that makes the frame a conversation
   rather than a portrait — stays fully lit. */
.uw-hero-photo::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:130px;z-index:1;
  background:linear-gradient(0deg,rgba(11,18,32,.72),rgba(11,18,32,0));
  pointer-events:none;
}
.uw-hero-photo::after{
  content:"";position:absolute;inset:0 0 0 -1px;z-index:2;
  /* A long ramp, not a short one. A short fade leaves a visible vertical seam
     where the photo's left edge meets the hero ground, because the photo is
     lighter than the ground and shows through the moment the scrim thins. */
  background:linear-gradient(90deg,var(--ink) 0%,rgba(11,18,32,.86) 5%,
             rgba(11,18,32,.42) 12%,rgba(11,18,32,.12) 22%,rgba(11,18,32,0) 34%);
  /* Short, because the photograph brings its own dark side.
     
     The brief asked for the left 40% of the frame to be quiet, mid-dark and
     free of detail, and the image delivers exactly that: a matte wall reading
     38–52 in luminance across x 0–40%, against an ink ground of 17. White type
     on it measures better than 9:1 with no scrim at all, so the gradient no
     longer has to make the text legible — it only has to blend the photo's left
     edge into the ground, which takes a third of the distance the old ramp
     used. Everything past 34% is the photograph, unveiled. */
}

.uw-hero-tag{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line-ink);border-radius:999px;padding:7px 15px;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#C6D2E6;
}
.uw-hero h1{
  margin-top:26px;font-size:clamp(36px,4vw,54px);letter-spacing:-.035em;line-height:1.08;
  /* No text-wrap:balance here. Balance evens the line lengths, which is right
     for a short English heading and wrong for a Japanese one: it shortened the
     first line until the break landed inside a word (米国拠 / 点) rather than at
     the phrase boundary auto-phrase had found. Filling each line lets the
     boundary win. The h2s keep balance — they are short enough that it helps. */
}
.uw-hero h1 em{font-style:normal;color:#9DBAFF}
.uw .uw-hero-p{margin-top:26px;font-size:18px;line-height:1.75;color:#B9C4D6;max-width:44ch}
.uw-hero-btns{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}
.uw-btn-p,.uw-btn-s{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 26px;border-radius:11px;font-size:15px;font-weight:600;transition:.15s;
}
.uw-btn-p{background:var(--accent-lift);color:#fff!important}
.uw-btn-p:hover{background:#1B4FD1;transform:translateY(-1px)}
.uw-btn-s{border:1px solid var(--line-ink);color:#E7EDF7!important}
.uw-btn-s:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.05)}

/* The line under the hero. Terms and process, never a figure — every number
   that used to sit here was one nothing could substantiate. */
.uw-hero-facts{border-top:1px solid var(--line-ink);background:rgba(255,255,255,.03)}
.uw-hero-facts .uw-wrap{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-top:26px;padding-bottom:26px;
}
.uw-fact{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:#C2CCDC;line-height:1.6}
.uw-fact svg{flex:0 0 auto;margin-top:2px}

/* ------------------------------------------------------- section heading */
.uw-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:end}
.uw-head-r{padding-bottom:4px}

/* ---------------------------------------------------------- talent cards */
.uw-cards{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.uw-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:.18s;
}
.uw-card:hover{border-color:#C9D5E8;box-shadow:0 12px 34px -20px rgba(15,23,42,.32);transform:translateY(-2px)}
.uw-card-img{aspect-ratio:3/2;background:var(--mist);overflow:hidden}
.uw-card-img img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(var(--zoom,1));transform-origin:var(--zoom-at,50% 50%);
}
/* Per-card framing. The three photographs arrive at exactly the card ratio, so
   object-position alone cannot crop them — a scale is the only way to change
   what a frame contains.
   
   Two of them need it. The first has a document of soft bar charts on the desk;
   unreadable, but a chart is a chart, and this site does not put figures in
   front of people. Cropping up removes it and tightens the frame on her at the
   same time.
   
   The second and third are the same photograph in every way that matters —
   same standing pair, same pose, same room, one man swapped for another. Side
   by side in one row that reads as a generated set. Shooting one tighter than
   the other does not make them different pictures; it makes them different
   enough to sit next to each other while one of them is re-briefed. */
.uw-card-img-up{--zoom:1.16;--zoom-at:56% 34%}
/* Card two goes near, card three goes across the room. That contrast is the
   whole reason the row does not read as three versions of one idea: a
   conversation at arm's length, then the floor it happens on.
   
   Card three is a wide environmental frame, so it needs the opposite treatment
   to a portrait — brought in far enough that the three groups of people read as
   people rather than as furniture, and no further. Uncropped it is mostly empty
   polished floor and an empty foreground table; past about 1.5 it stops being a
   room and becomes another two-shot, which is the picture the set already has.
   
   The zooms are bounded by resolution. The card renders 726 CSS px wide when it
   goes single-column at 768, so a 2x display wants 1452 of the 1536 available:
   these supply 1.5–1.8x there and 3.1x or better at every other width. */
.uw-card-img-near{--zoom:1.22;--zoom-at:64% 26%}
.uw-card-img-across{--zoom:1.40;--zoom-at:36% 44%}
.uw-card-b{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1}
.uw-card h3{font-size:19px;letter-spacing:-.02em}
.uw-card p{margin-top:11px;font-size:14.5px;line-height:1.75;color:var(--muted)}
.uw-card-link{margin-top:18px;font-size:14px;font-weight:600;color:var(--accent)}
.uw-card-link:hover{text-decoration:underline}

/* ---------------------------------------------------------------- process */
.uw-split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
/* 3:2, not 4:5.
 *
 * The tall slot was chosen before there was a photograph in it, to balance the
 * four-step list beside it. What arrived is landscape, and a 4:5 crop of it
 * keeps 560 of 1122 pixels across — for a slot that renders up to 960 CSS px
 * wide, that is blurry on an ordinary screen, not just on a retina one. It also
 * cuts one of the two people, which is the whole subject.
 *
 * 3:2 keeps 94% of the frame and 1051 px across. A shape chosen for the layout
 * is worth less than a photograph anyone can see. */
.uw-split-photo{border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;background:var(--mist)}
.uw-split-photo img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(var(--zoom,1));transform-origin:var(--zoom-at,50% 50%);
}
/* The process photo holds its place while the four steps scroll past it.
 *
 * A landscape photograph beside a four-step list leaves 480px of empty column
 * if it is centred and the same amount below if it is top-aligned — the section
 * reads as a photo that was not big enough. Sticky turns that gap into the
 * reason the photo is there: it stays beside whichever step is being read.
 *
 * Only this one. The why-us section's text column is short enough that its
 * photograph sits comfortably centred beside it, and sticky on a row that does
 * not scroll is a behaviour with nothing to do. */
.uw-split-photo-process{align-self:start;position:sticky;top:104px}

.uw-steps{margin-top:38px;display:flex;flex-direction:column;gap:0}
.uw-step{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.uw-step:last-child{border-bottom:1px solid var(--line)}
.uw-step-n{
  width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
}
.uw-step h3{font-size:16.5px;letter-spacing:-.015em}
.uw-step p{margin-top:7px;font-size:14.5px;line-height:1.75;color:var(--muted)}

/* ------------------------------------------------------------------ roles */
.uw-roles{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.uw-role h3{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--line);
}
.uw-role ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.uw-role li{font-size:14.5px;color:var(--text)}
.uw .uw-roles-note{margin-top:40px;font-size:14px;color:var(--muted)}

/* ------------------------------------------------------------------- why */
/* 38, not 6. The lede above this list sat flush against the first item — the
   same specificity trap as the ledes, caught late because this section reads
   as a block of text either way until you look for the seam. */
.uw-why{margin-top:38px;display:flex;flex-direction:column;gap:30px}
.uw-why-i{display:grid;grid-template-columns:auto 1fr;gap:18px}
.uw-why-ic{
  width:40px;height:40px;border-radius:11px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;
}
.uw-why-i h3{font-size:17px;letter-spacing:-.02em}
.uw-why-i p{margin-top:8px;font-size:14.5px;line-height:1.8;color:var(--muted)}

/* -------------------------------------------------------------- insights */
.uw-ins{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.uw-ins-c{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:.18s}
.uw-ins-c:hover{border-color:#C9D5E8;box-shadow:0 12px 34px -20px rgba(15,23,42,.32)}
/* The two article cards ship without a photograph. The frames briefed for them
   — an empty meeting room, an office seen through glass — are not shot yet, and
   a placeholder is worse on a live page than an honest text card. The rules stay
   here so the slot works the day they arrive. */
.uw-ins-img{aspect-ratio:16/9;background:var(--mist)}
.uw-ins-img img{width:100%;height:100%;object-fit:cover}
.uw-ins-b{padding:28px}
.uw-ins-b .uw-eyebrow{margin-bottom:10px}
.uw-ins-b h3{font-size:18px;letter-spacing:-.02em;line-height:1.35}
.uw-ins-b p{margin-top:10px;font-size:14.5px;line-height:1.7;color:var(--muted)}

/* ------------------------------------------------------------- final CTA */
.uw-cta-band{background:var(--ink);color:#fff}
.uw-cta-band .uw-wrap{
  padding-top:96px;padding-bottom:96px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;
}
.uw-cta-band h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.03em;text-wrap:balance}
.uw-cta-band p{margin-top:18px;font-size:16.5px;line-height:1.8;color:#B4C0D2;max-width:46ch}
.uw-cta-actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start;
  max-width:360px;justify-self:end;width:100%}
.uw-cta-band .uw-btn-p{width:100%;justify-content:center;padding:17px 26px;font-size:16px}
.uw-cta-sub{font-size:14px;color:#93A1B8}
.uw-cta-sub a{color:#9DBAFF}

/* ---------------------------------------------------------------- footer */
.uw-ft{border-top:1px solid var(--line);padding:38px var(--gutter);text-align:center;
  font-size:13px;color:var(--muted)}
.uw-ft a{color:var(--accent)}

/* ---------------------------------------------------------------- mobile */
@media(max-width:1024px){
  .uw{--sectionY:88px}

  /* The burger starts here, not at 768. Logo, six links, the language toggle
     and the CTA need about 1030px; at 834 the logo wrapped onto two lines and
     the CTA was cut off by the viewport edge. A tablet is not a wide phone, but
     it is not a desktop either, and this row was the thing that decided which. */
  .uw-n-links{
    position:fixed;inset:0;z-index:50;background:var(--ink);
    flex-direction:column;justify-content:center;gap:22px;
    display:none;margin-left:0;
  }
  .uw-n-links.open{display:flex}
  .uw-n-links>a{font-size:20px;font-weight:600}
  .uw-hamburger{display:block}
  .uw-hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .uw-hamburger.open span:nth-child(2){opacity:0}
  .uw-hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .uw-n-logo{white-space:nowrap}

  .uw-hero-main{min-height:0}
  .uw-hero-inner{padding:78px var(--gutter) 0}
  .uw-hero-copy{max-width:none}
  .uw-hero-photo{
    position:relative;width:auto;top:auto;right:auto;bottom:auto;
    /* Square on a phone: the master's own ratio, so nothing is cropped and the
       composition arrives as it was made. A wider phone crop only ever took
       height off a frame whose subject is already near the top, and the wall on
       the left — which exists so the desktop headline has somewhere to sit —
       becomes dead space rather than air when it is the only thing beside him.
       At 390px this renders 390x390, which is a hero image without being the
       whole screen. */
    aspect-ratio:1/1;margin:44px calc(var(--gutter)*-1) 0;
  }
  .uw-hero-photo::after{background:linear-gradient(0deg,rgba(11,18,32,.45) 0%,rgba(11,18,32,0) 40%)}
  .uw-split{grid-template-columns:1fr;gap:40px}
  .uw-split-photo-process{position:static}
  /* No forced order. Each split keeps its own reading order on one column:
     the process section explains and then shows, the "why" section shows and
     then explains. Forcing the photo first made the process section open on a
     picture with nothing yet to read it against.
     
     And no aspect-ratio override either. Re-cropping these two slots on small
     screens meant one photograph had to survive 4:5 and 3:2, which costs a
     quarter of its height on a phone and makes the brief for it much harder
     than it needs to be. Every slot but the hero is now one fixed ratio at
     every width, so each master is delivered at exactly the shape it is used
     at and nothing is cropped away. */
  .uw-head{grid-template-columns:1fr;gap:20px;align-items:start}
  .uw-cards{grid-template-columns:1fr 1fr}
  .uw-roles{grid-template-columns:1fr 1fr;gap:30px}
  .uw-cta-band .uw-wrap{grid-template-columns:1fr;gap:36px}
}

@media(max-width:768px){
  .uw{--gutter:20px;--sectionY:64px}
  .uw-n{padding:16px var(--gutter)}
  .uw-hero-inner{padding-top:30px}
  .uw-hero h1{font-size:clamp(30px,8.4vw,40px)}
  .uw .uw-hero-p{font-size:16px}
  .uw-hero-btns{gap:10px}
  .uw-btn-p,.uw-btn-s{width:100%;padding:15px 20px}
  .uw-hero-facts .uw-wrap{grid-template-columns:1fr;gap:14px;padding-top:22px;padding-bottom:22px}
  .uw-cards,.uw-ins{grid-template-columns:1fr}
  .uw-roles{grid-template-columns:1fr;gap:26px}
  .uw-h2{font-size:26px}
  .uw .uw-lede{font-size:15.5px}
  .uw-cta-band .uw-wrap{padding-top:64px;padding-bottom:64px}
  .uw-cta-actions{width:100%}
}

/* Every photograph on this page was produced by an image model, and the three
 * cards above sit under a heading about the talent this company introduces —
 * which is exactly where a reader would take a generated face for a real
 * candidate. The note says so once, quietly, for the whole page.
 * data/images.json records this text and the file it renders from, and the
 * visual gate fails if the two drift apart. */
.uw .uw-img-note{
  margin:26px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted);
  max-width:70ch;
}